@layer components {
  .g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .fstack { display: flex; flex-direction: column; gap: 18px; }

  .field.bad .input, .input[aria-invalid="true"] { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
  .ferr { font-size: 12.5px; color: var(--bad); font-weight: 600; }
  .fnote { font-size: 12.5px; color: var(--muted); }
  .fnote b { color: var(--dim); font-weight: 600; }

  /* a field with a limit counts as it's typed, and turns red past it */
  .fhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .fhead > label { font-size: 12.5px; font-weight: 600; color: var(--dim); }
  .fhead > label em { font-style: normal; color: var(--accent); }
  .fcount { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .fcount.bad { color: var(--bad); font-weight: 600; }
  .add { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px dashed var(--dash); border-radius: var(--r-sm); color: var(--dim); font-weight: 600; font-size: 13px; background: none; width: 100%; }
  .add svg { width: 15px; height: 15px; color: var(--accent); }

  /* passwords: a show toggle, and the rules a new one has to meet */
  .pw { position: relative; }
  .pw .input { padding-right: 44px; }
  .pw button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-xs); background: none; color: var(--muted); display: grid; place-items: center; }
  .pw button:hover { color: var(--ink); }
  .pw button[aria-pressed="true"] { color: var(--accent); }
  .pwr { list-style: none; margin: -8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); }
  .pwr li { display: flex; align-items: center; gap: 8px; }
  .pwr li.ok { color: var(--good); }

  /* uploads: the rule shows on every one, and a file that breaks it is turned away */
  .up { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
  .up-in { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
  .drop { position: relative; border: 1px dashed var(--dash); border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px 16px; color: var(--muted); text-align: center; font-size: 13px; background: var(--wash); }
  .drop .di { display: grid; color: var(--dim); }
  .drop b { color: var(--strong); font-weight: 600; overflow-wrap: anywhere; }
  .drop .say { color: var(--dim); max-width: 260px; }
  .drop:has(.up-in:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .drop .i-err, .drop .t-err, .drop .t-pick, .drop .t-over, .drop .t-again, .drop .say { display: none; }
  .drop.over .t-ready, .drop.over label { display: none; }
  .drop.over .t-over { display: inline; }
  .drop.over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
  .drop.over .di { color: var(--accent); }
  .drop.err { border-color: var(--bad-line); background: var(--bad-soft); }
  .drop.err .di { color: var(--bad); }
  .drop.err .i-ok, .drop.err .t-ok, .drop.err .req, .drop.picked .t-ok { display: none; }
  .drop.err .i-err, .drop.err .say { display: block; }
  .drop.err .t-err { display: block; color: var(--bad); }
  .drop.picked .t-pick { display: block; }
  .drop.err .t-first, .drop.picked .t-first { display: none; }
  .drop.err .t-again, .drop.picked .t-again { display: inline-flex; }
  .drop.over .i-ok, .drop.over .t-ok { display: block; }
  .drop.over .i-err, .drop.over .t-err, .drop.over .t-pick, .drop.over .say { display: none; }
  .req { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0; font-size: 12.5px; color: var(--muted); }
  .drop .req { justify-content: center; }
  .req a, .drop .say a { color: var(--accent); font-weight: 600; }
  .done { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
  .done img { width: 100%; border-radius: var(--r-sm); border: 1px solid var(--line); background: linear-gradient(135deg, var(--img-a), var(--img-b)); object-fit: cover; }
  .done .fstack { gap: 12px; }
  .done .li-t b { overflow-wrap: anywhere; }
  @container (width < 420px) { .done { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

  /* numbered sections and the sticky footer */
  .fsec { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--line); }
  .fsec:last-child { border-bottom: 0; }
  .fsec-h { display: flex; flex-direction: column; gap: 8px; }
  .fsec-h .no { font-family: var(--f-m); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; color: var(--accent); }
  .fsec-h h2 { font-size: 16px; font-weight: 600; color: var(--strong); }
  .fsec-h p { color: var(--muted); font-size: 13px; }
  .ffoot { position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 10px; padding: 14px 40px; background: var(--bar); border-top: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .ffoot .end { margin-left: auto; display: flex; gap: 8px; }
  .ffoot .st { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
  .ffoot .st svg { width: 15px; height: 15px; }

  /* the step rail of a creation flow */
  .steps { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .stp { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); }
  .stp .k { width: 24px; height: 24px; border-radius: var(--r-sm); display: grid; place-items: center; font-family: var(--f-m); font-weight: 700; font-size: 11px; border: 1px solid var(--line-2); color: var(--muted); flex: none; }
  .stp .k svg { width: 13px; height: 13px; }
  .stp b { display: block; color: var(--dim); font-weight: 600; font-size: 13.5px; }
  .stp small { color: var(--muted); font-size: 12px; }
  .stp.ok .k { color: var(--good); border-color: var(--good-line); }
  .stp.warn .k { color: var(--warn); border-color: var(--warn-line); }
  .stp.warn small { color: var(--warn); }
  .stp.on { background: var(--accent-soft); }
  .stp.on .k { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .stp.on b { color: var(--strong); }

  @media (width < 1100px) {
    .fsec { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ffoot { padding: 14px 28px; }
    .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { flex-direction: row; gap: 4px; }
    .stp { flex: 1 1 0; min-width: 0; padding: 8px 10px; }
    .stp > span { min-width: 0; }
    .stp small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  }

  @media (width < 700px) {
    .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
    .done { grid-template-columns: minmax(0, 1fr); }
    .fsec { padding: 20px 0; }
    .ffoot { padding: 12px 16px; }
    .ffoot .st { display: none; }
    .ffoot .end { margin-left: 0; width: 100%; }
    .ffoot .end .btn { flex: 1; }
    .stp { flex: none; padding: 8px; }
    .stp.on { flex: 1; }
    .stp:not(.on) > span:not(.k), .stp small { display: none; }
  }
}