/* Baukasten: pages that were built on Toy Box primitives (account/auth, waiting list, support, error pages).
   Loaded after site_baukasten.css, never with site_toybox.css. Two jobs:
   1. a token bridge: the Toy Box names those pages' markup and site_support.css use (--violet, --card, --border,
      --lift ...) point at Baukasten values, so the 43 KB support stylesheet re-themes without being rewritten;
   2. the few primitives that came from Toy Box (.card, .chip-btn, .eyebrow, .line, .visually-hidden).
   Everything is scoped to body.bk-pages. Contract: docs/landing-page.md. */
body.bk-pages{
  --violet:var(--cobalt); --violet-deep:var(--cobalt);
  --rose:var(--brick); --rose-deep:var(--brick);
  --tang:var(--ochre); --tang-deep:#8A5E0C; --tang-ink:var(--ochre-ink);
  --cyan:var(--sage); --cyan-ink:#2F5A3D; --lime:var(--sage); --lime-ink:#2F5A3D;
  --bg:var(--paper); --border:var(--line); --border-dash:var(--line);
  --fill-soft:var(--paper-2); --hover:var(--paper-2); --surface-sunk:var(--paper-2);
  --display:var(--f-d); --body:var(--f-b);
  --r-sm:8px; --r-md:14px; --r-lg:18px; --r-pill:999px;
  --lift:0 1px 0 var(--line),0 12px 28px -16px rgb(27 27 31/.28);
  --ring:0 0 0 3px rgb(45 79 161/.18); --ring-strong:0 0 0 3px rgb(45 79 161/.4);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.25s; --dur-fast:.15s;
  --acc:var(--brick); --acc-ink:var(--brick);
}

.bk-pages .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.bk-pages .eyebrow{display:block;font:500 .78rem var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.bk-pages .eyebrow--center{text-align:center}
.bk-pages .line{font-size:1.06rem;color:#33322F;max-width:58ch;line-height:1.55}
.bk-pages .card{background:var(--card);border:1.5px solid var(--ink);border-radius:var(--r-lg)}

/* the Toy Box button, in Baukasten ink: primary = filled ink, card = outlined */
.bk-pages .chip-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font:600 .98rem var(--f-b);
  padding:.8rem 1.4rem;min-height:48px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  background:var(--ink);color:var(--paper);transition:background var(--dur-fast) var(--ease)}
.bk-pages .chip-btn:hover{background:#000}
.bk-pages .chip-btn--card,.bk-pages .chip-btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.bk-pages .chip-btn--card:hover,.bk-pages .chip-btn--ghost:hover{background:var(--ink);color:var(--paper)}
.bk-pages .chip-btn--sm{padding:.5rem 1rem;min-height:40px;font-size:.88rem}
.bk-pages .chip-btn:disabled{opacity:.5;cursor:not-allowed}

/* the class and teacher invitation pages (edu_management invitations/join.html, school/teacher_invite_accept.html) */
.bk-pages .tb-badge{display:inline-block;padding:.5rem .9rem;border-radius:999px;font:600 .88rem var(--f-b);background:var(--paper-2);color:var(--ink)}
.bk-pages .tb-badge--lime{background:#E3EEE6;color:var(--lime-ink)}
.bk-pages .tb-opt{padding:.7rem .9rem;border:1.5px solid var(--line);border-radius:var(--r-md);cursor:pointer}
.bk-pages .tb-opt:has(input:checked){border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.bk-pages .tb-opt input{accent-color:var(--ink)}
.bk-pages .tb-feedback--error{padding:.7rem .9rem;border-radius:var(--r-md);border:1.5px solid var(--brick);color:var(--brick);font-weight:600}

/* page frame for the public support shell and the error pages */
.bk-pages .bk-page{max-width:1200px;margin-inline:auto;padding:clamp(2rem,5vw,4rem) clamp(16px,4vw,40px) clamp(3rem,7vw,5rem)}
.bk-pages .bk-page .wrap{padding-inline:0}
.bk-pages .sup-btn{border-radius:999px}
.bk-pages .sup-btn--tang,.bk-pages .sup-btn--rose{background:var(--ink);color:var(--paper)}
.bk-pages .sup-btn--tang:hover,.bk-pages .sup-btn--rose:hover{background:#000}

/* 404 */
.bk-nf{display:grid;gap:1.2rem;justify-items:start;padding-block:clamp(3rem,9vw,6rem)}
.bk-nf__shapes{display:flex;gap:.7rem;align-items:flex-end}
.bk-nf__shapes .shp{--s:clamp(2.2rem,7vw,3.6rem)}
.bk-nf h1{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.045em;line-height:.95;max-width:16ch}
.bk-nf p{max-width:44ch;font-size:1.08rem;color:#33322F}
.bk-nf__links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.4rem}

/* /support/: the pages' own content sits straight in <main> */
body.bk-support #main{max-width:1200px;margin-inline:auto;padding:clamp(1.5rem,4vw,3rem) clamp(16px,4vw,40px) clamp(3rem,7vw,5rem)}

/* a grid track with a text input in it would size to the input's intrinsic width and run off a phone */
.bk-pages .sup-hero{grid-template-columns:minmax(0,1fr)}
.bk-pages input,.bk-pages textarea,.bk-pages select{min-width:0}