/* ==========================================================================
   SAMPLE — when to tell someone they are wrong
   ==========================================================================
   A form is the most common interface there is and the one most often made
   unpleasant by a single decision: the moment an error appears. This sample
   runs the same form under three timing strategies so the difference is
   something you feel rather than something you are told.

   Scoped under .frm.
   ========================================================================== */

.frm {
  --paper:  #f7f6f4;
  --card:   #ffffff;
  --ink:    #1a1917;
  --ink-2:  #56534e;
  --ink-3:  #6b6862;
  --line:   #e2ded8;
  --line-2: #c9c3ba;

  --brand:  #3f3d8f;
  --brand-w:#ecebf8;
  --bad:    #b3261e;
  --bad-w:  #fdecea;
  --good:   #1b6b45;

  --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.frm *, .frm *::before, .frm *::after { box-sizing: border-box; }
.frm svg { display: block; }
.frm a { color: var(--brand); }
.frm :focus-visible { outline-color: var(--brand); }

.frm-wrap { width: 100%; max-width: 74rem; margin-inline: auto; padding: 0 clamp(1rem, 3vw, 2rem) 5rem; }

.frm-hero { padding-block: clamp(2rem, 5vw, 3rem) 1.25rem; max-width: 44rem; }
.frm-hero h1 { margin: 0; font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -0.03em; line-height: 1.05; font-weight: 800; }
.frm-hero h1 em { font-style: normal; color: var(--brand); }
.frm-hero p { margin: .9rem 0 0; color: var(--ink-2); line-height: 1.7; }

.frm-cols { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) { .frm-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.fcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fcard__head { padding: .7rem .9rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: .6rem; }
.fcard__head h2 { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.fcard__head .sp { margin-left: auto; }
.fcard__body { padding: 1rem; }

/* -------------------------------------------------------------- strategy --- */

.frm-modes { display: grid; gap: .5rem; }
.frm-modes label {
  color: var(--ink);
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  padding: .65rem .75rem; border: 1px solid var(--line-2); border-radius: 10px;
  cursor: pointer; font-size: .84rem; line-height: 1.55;
  transition: border-color .15s, background .15s;
}
.frm-modes label:hover { border-color: var(--ink-3); }
.frm-modes label:has(input:checked) { border-color: var(--brand); background: var(--brand-w); }
.frm-modes b { display: block; font-weight: 700; }
.frm-modes span { color: var(--ink-2); }
.frm-modes em { font-style: normal; color: var(--bad); font-weight: 600; }
.frm-modes ins { text-decoration: none; color: var(--good); font-weight: 600; }

/* ---------------------------------------------------------------- fields --- */

.field { display: grid; gap: .3rem; margin-bottom: .9rem; }
/* The colour matters. Without it these inherit the site-wide muted grey
   for <label>, which lands at 3.4:1 — on the most important text in the
   whole form. Nothing about a field label should be quiet. */
.field > label { font-size: .8rem; font-weight: 600; color: var(--ink); }
.field .hint { font-size: .74rem; color: var(--ink-3); }
.field input, .field select {
  font: inherit; font-size: .9rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: #fff; color: var(--ink);
  width: 100%;
  transition: border-color .15s, background .15s;
}
.field input:focus { border-color: var(--brand); }
.field[data-state="bad"] input, .field[data-state="bad"] select { border-color: var(--bad); background: var(--bad-w); }
.field[data-state="ok"] input { border-color: var(--good); }

.err {
  display: flex; align-items: flex-start; gap: .35rem;
  font-size: .78rem; color: var(--bad); font-weight: 600; line-height: 1.5;
}
.err[hidden] { display: none; }
.err svg { width: 14px; height: 14px; flex: none; margin-top: .12rem; }

/* The summary that appears on a failed submit. Focus moves here, because a
   screen-reader user submitting a long form has no other way to find out. */
.frm-summary {
  padding: .8rem .9rem; margin-bottom: 1rem;
  border: 1px solid var(--bad); border-inline-start: 4px solid var(--bad);
  background: var(--bad-w); border-radius: 10px;
}
.frm-summary[hidden] { display: none; }
.frm-summary h3 { margin: 0 0 .4rem; font-size: .85rem; color: var(--bad); }
.frm-summary ol { margin: 0; padding-inline-start: 1.1rem; font-size: .82rem; display: grid; gap: .2rem; }
.frm-summary a { color: var(--bad); text-decoration: underline; text-underline-offset: 2px; }

.frm-done {
  padding: .8rem .9rem; border: 1px solid var(--good); border-inline-start: 4px solid var(--good);
  background: #eaf5ef; border-radius: 10px; font-size: .85rem; color: var(--good); font-weight: 600;
}
.frm-done[hidden] { display: none; }

.fbtn {
  font: inherit; font-size: .86rem; font-weight: 700;
  padding: .65rem 1.2rem; border-radius: 9px;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  cursor: pointer; transition: background .15s, transform .1s;
}
.fbtn:hover { background: #34327a; }
.fbtn:active { transform: scale(.98); }
.fbtn--ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.fbtn--ghost:hover { background: #f1efeb; }
.frm-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .3rem; }

/* ----------------------------------------------------------------- log --- */

.frm-log { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-family: var(--mono); font-size: .7rem; max-height: 16rem; overflow-y: auto; }
.frm-log li { display: grid; grid-template-columns: auto 1fr; gap: .5rem; padding: .28rem .1rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.frm-log b { font-weight: 700; }
.frm-log .k-shown { color: var(--bad); }
.frm-log .k-clear { color: var(--good); }
.frm-log .k-quiet { color: var(--ink-3); }
.frm-empty { color: var(--ink-3); font-size: .76rem; }

.frm-count { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .78rem; color: var(--ink-2); margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.frm-count b { font-family: var(--mono); color: var(--ink); }
.frm-count .bad { color: var(--bad); }

/* --------------------------------------------------------------- notes --- */

.frm-note { margin-top: 1.5rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.1rem, 3vw, 2rem); }
.frm-note h2 { margin: 0 0 .8rem; font-size: 1.25rem; letter-spacing: -0.02em; }
.frm-note h3 { margin: 1.6rem 0 .4rem; font-size: .95rem; }
.frm-note p  { margin: 0 0 .7rem; color: var(--ink-2); line-height: 1.7; max-width: 46rem; }
.frm-note code { font-family: var(--mono); font-size: .86em; background: #f0eee9; border-radius: 4px; padding: .1em .35em; color: #34327a; }

@media (prefers-reduced-motion: reduce) {
  .frm *, .frm *::before, .frm *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}