/* The whole visual identity of a tenant is two colours and a name,
   set at runtime from the organizations row. There is no per-school
   stylesheet and there never will be - that is the product. */


:root{
  --primary:#1f3a5f;          /* overwritten per tenant by app.js */
  --accent:#b5342b;
  --ink:#16202b;
  --ink-soft:#4a5765;
  --line:#dfe4ea;
  --bg:#ffffff;
  --bg-soft:#f5f7fa;
  --radius:14px;
  --wrap:1080px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* `hidden` must actually hide.
   The browser hides [hidden] with display:none, but ANY author rule that
   sets display beats it - so `.ribbon{display:flex}` silently un-hid the
   demo ribbon. Caught in the browser, not in the code: a live district
   would have had "DEMONSTRATION - fictional district" across the top of
   their real portal. Anything hidden in this product is hidden for a
   reason, so this rule is load-bearing. */
[hidden]{display:none !important}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
h1,h2,h3{line-height:1.2;margin:0 0 .4em}
p{margin:0 0 1em}
a{color:var(--primary)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--primary);
  padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px;outline:3px solid var(--accent)}

:where(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ── demo ribbon ─────────────────────────────────────────── */
.ribbon{
  background:repeating-linear-gradient(45deg,#2b2b2b,#2b2b2b 12px,#232323 12px,#232323 24px);
  color:#fff;font-size:13px;letter-spacing:.02em;
  padding:9px 20px;display:flex;gap:12px;align-items:center;
  justify-content:center;flex-wrap:wrap;text-align:center}
.ribbon strong{letter-spacing:.14em;font-size:11px;
  background:#fff;color:#111;padding:2px 8px;border-radius:3px}
.ribbon code{opacity:.65;font-size:12px}

/* ── header ──────────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--line);background:var(--bg)}
.head-inner{display:flex;align-items:center;min-height:76px}
.brand{display:flex;align-items:center;gap:13px}
.mark{
  width:44px;height:44px;border-radius:11px;flex:none;
  background:var(--primary);color:#fff;
  display:grid;place-items:center;
  font-weight:700;font-size:15px;letter-spacing:.02em}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-name{font-weight:650;font-size:17px}
.brand-sub{font-size:13px;color:var(--ink-soft)}

/* ── hero ────────────────────────────────────────────────── */
.hero{
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--primary) 7%, #fff), var(--bg));
  padding:56px 0 40px;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(28px,5vw,42px);color:var(--primary);max-width:18ch}
.lede{font-size:clamp(16px,2.2vw,19px);color:var(--ink-soft);max-width:58ch}
.caveat{
  font-size:14px;color:var(--ink-soft);max-width:58ch;
  border-left:3px solid var(--accent);padding-left:12px;margin-top:22px}

/* ── the two doors ───────────────────────────────────────── */
.doors{
  display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  margin:40px auto}
.door{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;background:var(--bg-soft);display:flex;flex-direction:column}
.door h2{font-size:21px}
.door p{color:var(--ink-soft);font-size:15px}
.who{
  display:inline-block;align-self:flex-start;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;margin:0 0 12px}
.who-need{background:color-mix(in srgb,var(--primary) 14%,#fff);color:var(--primary)}
.who-give{background:color-mix(in srgb,var(--accent) 15%,#fff);color:var(--accent)}
.btn{
  display:inline-block;margin-top:auto;text-align:center;
  padding:13px 20px;border-radius:10px;font-weight:600;
  text-decoration:none;font-size:15px}
.btn-primary{background:var(--primary);color:#fff}
.btn-accent{background:var(--accent);color:#fff}
.btn:hover{filter:brightness(1.08)}

/* ── THE BOARD ───────────────────────────────────────────────
   A whiteboard surface, because this is a school and software
   that looks like software is forgettable. Needs go up and get
   struck off as the community fills them.

   NO HANDWRITING FONT. It was tried and cut: a product title
   straight off a retailer page ("Nike Revolution 7 Big Kids'
   Road Running Shoe, Black/White, 5Y") is long, precise and
   full of model numbers, and script type makes it unreadable.
   The personality lives in the board, the tray and the marker
   strike - the content stays plain, because the content is
   somebody's real product. */

.board-wrap{padding:8px 0 48px}

.board{
  position:relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,.95), rgba(246,248,250,.95)),
    #fbfcfd;
  border:1px solid #cdd4dc;
  border-radius:8px;
  box-shadow:
    0 1px 0 #fff inset,
    0 18px 38px -22px rgba(22,32,43,.45);
  padding:26px 22px 14px;
}
/* the aluminium frame edge */
.board::before{
  content:"";position:absolute;inset:-7px;border-radius:12px;z-index:-1;
  background:linear-gradient(180deg,#e8ecf0,#c3cad2 45%,#aeb6c0);
  box-shadow:0 10px 24px -14px rgba(22,32,43,.55)}

.board-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;
  margin-bottom:14px}
.board-head h2{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:22px;font-weight:650;
  color:var(--primary);margin:0;letter-spacing:.01em}
.board-stats{margin:0;font-size:14px;color:var(--ink-soft)}
.board-stats b{color:var(--ink);font-weight:650}
.stat-skel{display:inline-block;width:220px;height:14px;border-radius:4px;
  background:var(--bg-soft)}

.board-list{list-style:none;margin:0;padding:0}

/* A grid, not a wrapping flex row.
   Four columns - photo, what it is, price, action - so a product title
   of ANY length pushes nothing onto its own line. Retailer titles are
   as long as the retailer feels like making them, so the layout has to
   survive the worst one rather than the average one. */
.bl-row{
  display:grid;
  grid-template-columns:56px minmax(0,1fr) auto auto;
  align-items:center;
  gap:14px;
  padding:12px 4px;
  border-bottom:1px dashed #d6dce3}
.bl-row:last-child{border-bottom:0}
.bl-row.skeleton{display:block;height:52px;background:
  linear-gradient(90deg,transparent,rgba(0,0,0,.03),transparent)}

/* Who asked, at a glance.
   A family's request for one child carries the school's own colour. A
   teacher's request for a whole classroom takes the school's SECOND
   colour on the edge, plus a chip.

   NO background tint. It was tried: a tinted band made classroom rows
   read as more important than the students around them, which is
   backwards for a product that exists for the students. The job is to
   tell them apart, not to promote one.

   Two earlier attempts and why they failed: 3.5% of the primary was
   invisible, which is worse than not bothering; and mixing the two
   brand colours to make a third produced mud (navy + orange = brown).
   A school has exactly two colours and they are already chosen to look
   right beside each other, so use the second one rather than inventing
   a shade nobody picked.
   Colour is never the only signal: staff rows carry the words "For a
   classroom" too, because a colour-blind donor and a printed page both
   need them. */
.bl-row{border-left:4px solid transparent;padding-left:12px}
.bl-row.is-family{border-left-color:var(--primary)}
.bl-row.is-staff{
  border-left-color:var(--accent)}

.bl-kind{
  display:inline-block;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:var(--accent);
  padding:3px 8px;border-radius:999px;margin-right:4px;
  vertical-align:1px}

/* ── filters ─────────────────────────────────────────────
   Plain <select>s on purpose. A native dropdown is already
   keyboard-reachable, screen-reader-correct and usable one-handed on a
   phone; a custom one is a week of work to get back to where the
   browser started. */
.filters{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid #e3e8ed}
.filters-bar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:10px}
.filters-bar .f-search{flex:1 1 220px}
.filters-bar .f-search input{font:inherit;font-size:14px;padding:7px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.f-toggle{display:none;font:inherit;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;border:1.5px solid var(--primary);background:var(--bg);color:var(--primary);cursor:pointer}
.f-toggle.has-filters{background:var(--primary);color:#fff}
.filters-panel{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:end}
.filters .f{display:flex;flex-direction:column;gap:3px;min-width:0}
.filters .f > span{font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft)}
.filters select{
  font:inherit;font-size:14px;padding:7px 10px;border-radius:8px;
  border:1px solid var(--line);background:var(--bg);color:var(--ink);
  max-width:190px;
  /* 16px on phones or iOS zooms the page in and never back out - a real
     bug the prototype shipped and had to chase down. */
  }
@media (max-width:620px){ .filters select{font-size:16px} }
.f-clear{
  font:inherit;font-size:13px;padding:8px 12px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-soft);color:var(--ink-soft)}
.f-clear:hover{color:var(--ink)}
.board-count{margin-left:auto;color:var(--ink-soft)}

/* the key under the heading, so nobody has to guess */
.board-key{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  margin:0 0 10px;font-size:12.5px;color:var(--ink-soft)}
.board-key span{display:inline-flex;align-items:center;gap:6px}
.board-key i{width:12px;height:12px;border-radius:3px;display:block}
.board-key .k-family{background:var(--primary)}
.board-key .k-staff{background:var(--accent)}

/* The product photo. Same job as the wish board's: the real picture of
   the real thing is most of what makes a board read as real people
   wanting real things. Contained, not cropped - retailer photos are cut
   out on white and cropping them looks broken. */
.bl-thumb{
  width:56px;height:56px;border-radius:8px;
  background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;overflow:hidden}
.bl-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.bl-thumb-empty{
  background:
    repeating-linear-gradient(45deg,#f2f4f7,#f2f4f7 6px,#eaeef2 6px,#eaeef2 12px)}

.bl-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.bl-title:hover{color:var(--primary)}
.bl-title{
  /* It is a <button> so the whole name is keyboard reachable and opens
     the detail card. Strip every default a button brings with it. */
  appearance:none;background:none;border:0;padding:0;margin:0;
  font-family:inherit;text-align:left;cursor:pointer;
  font-size:15px;font-weight:600;line-height:1.35;color:var(--ink);
  /* Backstop. The name is already shortened before it gets here; this
     stops a pathological one from ever growing the row. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.bl-meta{font-size:12.5px;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-meta span+span::before{content:" · ";opacity:.5}

.bl-price{font-weight:700;font-size:16px;color:var(--primary);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bl-act{
  border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  background:var(--accent);color:#fff;padding:9px 16px;border-radius:9px;
  text-decoration:none;white-space:nowrap}
.bl-act:hover{filter:brightness(1.08)}
.bl-held{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--bg-soft);
  border:1px dashed #c6cdd6;padding:7px 11px;border-radius:999px;
  white-space:nowrap}

/* Narrow screens: ONE slim line per need, the way the shoe board does
   it. A small photo, the name on one line, the facts and the price on
   the line under it, and no button in the row - the whole row is the
   button and opens the card, which is where "Cover this" lives. The
   first version put the price and the button on their own second row
   and a phone showed four needs per screen; this shows nine. */
@media (max-width:620px){
  .board{padding:16px 12px 8px}
  .board-head h2{font-size:18px}
  .board-stats{font-size:13px}
  .filters{margin-bottom:10px;padding-bottom:10px}
  .filters-bar{gap:8px;margin-bottom:0;align-items:end}
  .filters-bar .f-search{flex:1 1 100%}
  .filters-bar .f-search > span{display:none}
  .filters-bar .f-search input{font-size:16px;padding:9px 12px;border-radius:999px}
  .f-toggle{display:inline-block;font-size:12px;padding:8px 14px}
  .filters-bar .f-sortwrap{flex:1 1 auto;flex-direction:row;align-items:center;gap:6px;
    border:1.5px solid var(--primary);border-radius:999px;padding:0 10px 0 12px}
  .filters-bar .f-sortwrap > span{color:var(--primary)}
  .filters-bar .f-sortwrap select{border:0;background:transparent;padding:7px 0;font-size:14px;max-width:none}
  /* the six dropdowns fold behind the Filters button */
  .filters-panel{display:none;margin-top:10px}
  .filters.open .filters-panel{display:flex}
  .filters-panel .f{flex:1 1 44%}
  .filters select{max-width:none;width:100%;padding:6px 8px}
  .board-key{font-size:12px;margin-bottom:6px}
  .bl-row{
    grid-template-columns:40px minmax(0,1fr) auto;
    gap:10px;padding:8px 2px 8px 10px;cursor:pointer}
  .bl-row:active{background:rgba(0,0,0,.03)}
  .bl-thumb{width:40px;height:40px;border-radius:6px}
  .bl-title{font-size:14px;-webkit-line-clamp:1}
  .bl-meta{font-size:12px}
  .bl-price{font-size:14px}
  .bl-act{display:none}
  .bl-held{display:none}
  /* crossed off is the signal; the word would wrap to a line of its own */
  .bl-taken-tag{display:none}
  .bl-row.taken .bl-price{display:inline-block}
  .bl-kind{font-size:10px;padding:2px 6px}
}

/* Ten rows then scroll. The page keeps its shape whether a district has
   nine students waiting or nine hundred.
   NOTE for later: this scrolls a full list. At a few hundred rows that
   is fine; past that the list needs windowing (only drawing what is on
   screen) the way the shoe board does. Not today's problem, but it is
   the reason that pattern exists. */
.board-scroll{max-height:812px;overflow-y:auto;overscroll-behavior:contain;
  margin:0 -4px;padding:0 4px}
/* on a phone the list scrolls inside its own box, so the page keeps its
   shape the way the prototype's list does; this sits after the desktop
   rule because the later rule wins at equal weight */
@media (max-width:620px){ .board-scroll{max-height:62vh;-webkit-overflow-scrolling:touch} }

/* A request somebody has taken is CROSSED OFF, like the shoe board and
   the wish list. A line through it says "not this one" faster than any
   label, and the board visibly working is the point.
   It does NOT mean the student has the thing - that is the school's
   internal state, not the public board's. It means stop picking it. */
.bl-row.taken{opacity:.62}
.bl-row.taken .bl-thumb{filter:grayscale(1)}
.bl-row.taken .bl-title,
.bl-row.taken .bl-price{position:relative;display:inline-block}
.bl-row.taken .bl-title::after,
.bl-row.taken .bl-price::after{
  content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2.5px;
  border-radius:3px;background:var(--accent);opacity:.85;
  transform:rotate(-.8deg)}
.bl-row.taken .bl-title{-webkit-line-clamp:1;cursor:default}
.bl-taken-tag{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap}

/* ── the detail card ─────────────────────────────────────── */
.peek{
  border:0;border-radius:14px;padding:0;max-width:620px;width:calc(100% - 32px);
  box-shadow:0 30px 70px -30px rgba(10,20,32,.6)}
.peek::backdrop{background:rgba(12,20,30,.55)}
.peek-x{
  position:absolute;top:10px;right:12px;border:0;background:none;
  font-size:26px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:4px 8px}
.peek-body{display:flex;gap:20px;padding:26px;flex-wrap:wrap}
.peek-photo{
  flex:none;width:168px;height:168px;border-radius:12px;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.peek-photo img{width:100%;height:100%;object-fit:contain}
.peek-main{flex:1 1 260px;min-width:0}
.peek-prog{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin:0 0 6px}
.peek h2{font-size:19px;line-height:1.3;margin:0 0 12px}
.peek-facts{margin:0 0 14px;display:grid;grid-template-columns:auto 1fr;
  gap:4px 14px;font-size:14px}
.peek-facts dt{color:var(--ink-soft)}
.peek-facts dd{margin:0;font-weight:600}
.peek-price{font-size:26px;font-weight:700;color:var(--primary);margin:0 0 14px}
.peek-note{font-size:14px;color:var(--ink-soft)}
.peek-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.peek-actions .btn{margin-top:0}
.peek-step2{border-top:1px solid var(--line);padding-top:14px;margin-bottom:12px}
.peek-ship{border-top:1px solid var(--line);padding-top:14px;margin-bottom:12px}
.peek-ship-h{font-size:16px;margin:0 0 4px}
.peek-ship-p{font-size:13.5px;color:var(--ink-soft);margin:0 0 10px;line-height:1.5}
.peek-ship-wait{color:#9a3412}
.peek-addr{font:inherit;font-size:15px;line-height:1.5;white-space:pre-wrap;margin:0 0 12px;
  padding:10px 12px;border:1.5px dashed var(--primary);border-radius:10px;background:var(--bg);
  color:var(--ink);user-select:all;-webkit-user-select:all}
.peek-ship-hint{font-size:12.5px;color:var(--ink-soft);margin:-4px 0 0}
.peek-ship .btn[disabled]{opacity:.45;cursor:not-allowed}
.peek-copy-done{background:var(--ok,#166534)!important;border-color:var(--ok,#166534)!important}
.peek-held{font-size:14px;color:var(--ink);margin:0 0 10px}
.peek-held b{color:var(--primary)}
.peek-ordref{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.peek-ordref span{font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-soft)}
.peek-ordref input{font:inherit;font-size:16px;padding:9px 11px;
  border:1px solid var(--line);border-radius:8px}
.btn-plain{background:none;border:0;font:inherit;font-size:14px;
  color:var(--ink-soft);cursor:pointer;text-decoration:underline;padding:0 6px}
.peek-fine{font-size:12.5px;color:var(--ink-soft);margin:0;line-height:1.5}

/* the marker tray */
.tray{display:flex;align-items:center;gap:9px;padding:14px 2px 2px;
  border-top:1px solid #e3e8ed;margin-top:6px}
.marker{width:48px;height:9px;border-radius:3px;display:block}
.marker-a{background:var(--primary)}
.marker-b{background:var(--accent)}
.eraser{width:30px;height:13px;border-radius:3px;
  background:linear-gradient(180deg,#eef1f4,#d4dae1);border:1px solid #c3cad2}

/* ── recently filled ─────────────────────────────────────── */
.filled{margin-top:26px}
.filled h3{font-size:14px;font-weight:650;color:var(--ink-soft);
  letter-spacing:.02em;margin-bottom:10px}
.filled-list{list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px}
.filled-list li{
  position:relative;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:19px;color:var(--ink-soft);
  background:var(--bg);border:1px solid var(--line);
  border-radius:8px;padding:7px 15px}
/* the marker strike. Slightly off-level and rounded, because a
   straight 1px rule reads as a strikethrough tag, not as somebody
   crossing a thing off a board. */
.filled-list li::after{
  content:"";position:absolute;left:8px;right:8px;top:52%;height:3px;
  border-radius:3px;background:var(--accent);opacity:.8;
  transform:rotate(-1.4deg)}

/* ── programs ────────────────────────────────────────────── */
.programs{margin:8px auto 48px}
.programs h2{font-size:20px;margin-bottom:16px}
.prog-list{list-style:none;padding:0;margin:0;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.prog{
  border:1px solid var(--line);border-left:4px solid var(--primary);
  border-radius:10px;padding:14px 16px;background:var(--bg)}
.prog h3{font-size:16px;margin-bottom:4px}
.prog .meta{font-size:13px;color:var(--ink-soft);margin:0}
.prog.skeleton{height:84px;background:var(--bg-soft);border-left-color:var(--line)}
.prog .who-tag{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft)}

/* ── how it works ────────────────────────────────────────── */
.how{background:var(--bg-soft);border-top:1px solid var(--line);padding:46px 0}
.how h2{font-size:20px;margin-bottom:22px}
.steps{list-style:none;padding:0;margin:0;counter-reset:s;
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.steps h3{font-size:16px}
.steps p{font-size:15px;color:var(--ink-soft);margin:0}
.step-n{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:14px;font-weight:700;
  margin-bottom:10px}

/* ── footer ──────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);padding:26px 0;font-size:14px}
.foot-inner{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap}
.foot-privacy{color:var(--ink-soft);max-width:52ch;margin:0}
.site-foot nav{display:flex;gap:16px;flex-wrap:wrap}

/* ── the unknown-hostname state ──────────────────────────── */
.fatal{padding:64px 0;text-align:center}
.fatal h2{color:var(--primary)}
.fatal p{color:var(--ink-soft)}

@media (prefers-reduced-motion:no-preference){
  .door,.prog{transition:transform .15s ease}
  .door:hover{transform:translateY(-2px)}
}

/* ── the request form (ask.html) and the keyed-link page ─────
   Same bones as the board. A parent on a phone, one-handed, in a
   car park, is the person this is for - so big targets, one column
   on narrow screens, and every error next to the field it is about. */
.ask-page{padding:28px 0 56px}
.ask-wrap{max-width:760px}
.crumb{font-size:14px;margin:0 0 14px}
.crumb a{text-decoration:none}
.ask-page h1{font-size:clamp(26px,4.5vw,36px);color:var(--primary);margin-bottom:14px}
.brand{text-decoration:none;color:inherit}

.promise{
  border:1px solid var(--line);border-left:4px solid var(--primary);
  border-radius:10px;background:var(--bg-soft);padding:14px 18px;margin:0 0 26px}
.promise p{font-size:15px;color:var(--ink);margin:0 0 6px}
.promise b{color:var(--primary)}
.promise-who{font-size:13.5px;color:var(--ink-soft);margin:0 !important}

.fs{border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px 8px;margin:0 0 18px;min-width:0}
.fs legend{font-weight:650;font-size:16px;padding:0 6px;color:var(--primary)}
.fs-lede{font-size:14px;color:var(--ink-soft);margin:0 0 14px}
.fs-private{background:var(--bg-soft)}

.grid2{display:grid;gap:14px 18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.fld{display:flex;flex-direction:column;gap:5px;margin:0 0 14px;min-width:0}
.fld > span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.fld > span small{font-weight:500;letter-spacing:0;text-transform:none}
.fld input[type=text],.fld input[type=url],.fld input[type=email],.fld input[type=password],.fld input[type=search],
.fld select,.fld textarea{
  font:inherit;font-size:16px;padding:10px 12px;border-radius:9px;
  border:1px solid #c6cdd6;background:var(--bg);color:var(--ink);width:100%;min-width:0}
.fld textarea{resize:vertical;line-height:1.45}
.fld [aria-invalid=true]{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,#fff)}
.hint{font-size:13px;color:var(--ink-soft);line-height:1.45}
.err{display:block;font-size:13.5px;color:var(--accent);font-style:normal;font-weight:600}
.err:empty{display:none}
.form-err{margin:0 0 14px;padding:10px 14px;border:1px solid var(--accent);border-radius:9px;
  background:color-mix(in srgb,var(--accent) 7%,#fff)}

.choice-row{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:4px 0 14px}
.choice-row-tight{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
.choice{display:flex;gap:10px;align-items:center;border:1px solid #c6cdd6;border-radius:10px;
  padding:11px 13px;cursor:pointer;background:var(--bg)}
.choice input{margin:0;width:18px;height:18px;accent-color:var(--primary);flex:none}
.choice span{display:flex;flex-direction:column;line-height:1.3;font-size:15px}
.choice small{color:var(--ink-soft);font-size:12.5px}
.choice:has(input:checked){border-color:var(--primary);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 22%,#fff)}

.link-row{display:flex;gap:10px;flex-wrap:wrap}
.link-row input{flex:1 1 260px}
.link-row .btn{margin:0;flex:none}

/* the product read back off the page */
.product{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);
  border-radius:12px;padding:14px;margin:0 0 16px;background:var(--bg)}
.product-photo{flex:none;width:96px;height:96px;border-radius:9px;border:1px solid var(--line);
  background:#fff;display:grid;place-items:center;overflow:hidden}
.product-photo img{width:100%;height:100%;object-fit:contain}
.product-main{min-width:0}
.product-name{font-weight:600;font-size:15px;line-height:1.35;margin:0 0 4px}
.product-price{font-weight:700;font-size:20px;color:var(--primary);margin:0 0 4px}
.product-ok{font-size:13px;color:var(--ink-soft);margin:0}
.product-msg{font-size:14px;color:var(--ink);margin:0 0 16px;padding:10px 14px;
  border-radius:9px;background:var(--bg-soft);border:1px solid var(--line)}

/* the preview reuses the board row, with the button for show */
.preview-list{border:1px dashed #c6cdd6;border-radius:10px;padding:4px 10px;margin:0 0 10px;background:#fbfcfd}
.preview-list .bl-act{cursor:default;opacity:.6}

.ask-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:6px}
.ask-actions .btn{margin:0;font-size:16px;padding:14px 24px;border:0;cursor:pointer;font-family:inherit}
.ask-actions .btn:disabled{opacity:.6;cursor:wait}

.result h2{font-size:26px;color:var(--primary)}
.result > p{font-size:16px;max-width:60ch}
.result-link{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;
  padding:14px 18px;margin:18px 0 22px;background:var(--bg-soft);display:flex;flex-direction:column;gap:6px}
.result-link span{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.result-link a{font-weight:600;word-break:break-all}
.result-link small{color:var(--ink-soft);font-size:13px;line-height:1.45}
.result .btn{margin:0 10px 0 0}

/* the keyed-link page */
.status-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:color-mix(in srgb,var(--primary) 14%,#fff);color:var(--primary);
  padding:4px 10px;border-radius:999px;margin:0 0 10px}
.status-facts{margin:16px 0 22px}
.door-sub{display:block;margin-top:6px;font-size:14px}

/* ── the staff console (staff.html) ──────────────────────── */
.head-staff{justify-content:space-between;gap:16px}
.whoami{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-soft);flex-wrap:wrap}
.who-role{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:color-mix(in srgb,var(--primary) 12%,#fff);color:var(--primary);padding:3px 9px;border-radius:999px}
.staff-page{padding:28px 0 56px}
.staff-page h1{font-size:clamp(24px,4vw,32px);color:var(--primary)}
.signin{max-width:480px}
.signin-form .fld{margin-bottom:12px}
.signin-actions{margin:4px 0 14px}
.signin-actions .btn,.signin-pw .btn{margin:0;border:0;cursor:pointer;font-family:inherit}
.signin-pw{border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin:0 0 14px}
.signin-pw summary{cursor:pointer;font-size:14px;color:var(--ink-soft)}
.signin-pw .fld{margin-top:10px}
.hint.ok{color:var(--primary);font-weight:600}

.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 12px}
.tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;font:inherit;font-size:15px;
  font-weight:600;color:var(--ink-soft);padding:10px 12px;cursor:pointer;margin-bottom:-1px}
.tab b{display:inline-block;min-width:20px;text-align:center;margin-left:6px;font-size:12px;
  background:var(--bg-soft);color:var(--ink);border-radius:999px;padding:1px 6px}
.tab b:empty{display:none}
.tab.is-on{color:var(--primary);border-bottom-color:var(--primary)}
.tab-lede{font-size:14px;color:var(--ink-soft);margin:0 0 16px;max-width:70ch}

.unmatched{margin:0 0 16px}
.unmatched details{border:1px dashed #c6cdd6;border-radius:10px;padding:10px 14px;background:var(--bg-soft)}
.unmatched summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--ink-soft)}
.um-form{display:grid;gap:10px 14px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:end;margin-top:12px}
.um-form .fld{margin:0}
.um-form .btn{margin:0;border:0;cursor:pointer;font-family:inherit;align-self:end}

.req-list{list-style:none;margin:0;padding:0}
.req{border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:10px;margin:0 0 10px;background:var(--bg)}
.req.is-manual_review,.req.is-system_pending,.req.is-needs_revision{border-left-color:var(--accent)}
.req.is-denied,.req.is-distributed,.req.is-cancelled{border-left-color:#c3cad2;opacity:.85}
.req-head{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;cursor:pointer}
.req-main{min-width:0}
.req-title{appearance:none;background:none;border:0;padding:0;font:inherit;font-size:15px;font-weight:600;
  text-align:left;cursor:pointer;color:var(--ink);line-height:1.35}
.req-title:hover{color:var(--primary)}
.req-meta{font-size:12.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req-meta span+span::before{content:" · ";opacity:.5}
.req-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.req-price{font-weight:700;color:var(--primary);font-variant-numeric:tabular-nums}
.chip{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
  background:var(--bg-soft);color:var(--ink-soft);white-space:nowrap}
.chip-manual_review,.chip-system_pending,.chip-needs_revision{background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent)}
.chip-published,.chip-reserved,.chip-order_reported{background:color-mix(in srgb,var(--primary) 12%,#fff);color:var(--primary)}
.chip-received,.chip-distributed{background:#e3f3e8;color:#1f6b3a}
.chip-denied{background:#f3e3e3;color:#8a2525}

.req-body{border-top:1px solid var(--line);padding:14px 16px 16px;background:#fbfcfd}
.req-cols{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:14px}
.req-col h4{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.req-col .peek-facts{font-size:13.5px}
.req-col a{font-size:14px}
.hist{list-style:none;margin:0;padding:0;font-size:13px;color:var(--ink-soft)}
.hist li{margin:0 0 6px;line-height:1.4}
.hist b{color:var(--ink)}
.hist-public{font-style:italic}

.req-actions{display:flex;flex-direction:column;gap:12px;border-top:1px dashed #d6dce3;padding-top:14px}
.act{display:flex;flex-direction:column;gap:8px;max-width:560px}
.act .fld{margin:0}
.act textarea,.act input[type=text]{font:inherit;font-size:15px;padding:8px 10px;border:1px solid #c6cdd6;border-radius:8px;width:100%}
.act .btn,.act-row .btn{margin:0;border:0;cursor:pointer;font-family:inherit;align-self:flex-start;font-size:14px;padding:10px 16px}
.act-row{flex-direction:row;align-items:center;flex-wrap:wrap}
.act-row select,.act-row input{font:inherit;font-size:14px;padding:8px 10px;border:1px solid #c6cdd6;border-radius:8px}
.req-actions .btn-plain{align-self:flex-start}
.act-msg{margin:0;font-size:14px;font-weight:600;color:var(--primary)}
.act-msg.is-bad{color:var(--accent)}

/* ── the company admin (admin.html) ──────────────────────── */
.admin-body{--primary:#14314F;--accent:#C75B12}
.admin-head{border-bottom:0}
.admin-nav{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-top:4px}
.admin-page .sec-head{margin:6px 0 18px}
.admin-page h1{font-size:clamp(22px,3.5vw,30px);color:var(--primary);margin-bottom:6px}
.admin-page .lede{font-size:15px;max-width:72ch}
.h2-sm{font-size:16px;color:var(--ink-soft);margin:26px 0 10px}

.admin-filters{margin-bottom:10px}
.admin-filters .f-grow{flex:1 1 220px}
.admin-filters .f-grow input{font:inherit;font-size:14px;padding:7px 10px;border-radius:8px;border:1px solid var(--line);width:100%}
.admin-filters .f-check{flex-direction:row;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft);padding-bottom:8px}
.admin-filters .f-check span{font-weight:500;letter-spacing:0;text-transform:none;font-size:13px}

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.tbl{border-collapse:collapse;width:100%;font-size:14px;min-width:760px}
.tbl th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);
  padding:10px 12px;border-bottom:1px solid var(--line);background:var(--bg-soft);white-space:nowrap}
.tbl td{padding:9px 12px;border-bottom:1px solid #eef1f4;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .nowrap{white-space:nowrap}
.tbl-name{font-weight:600;text-decoration:none;color:var(--ink)}
.tbl-name:hover{color:var(--primary);text-decoration:underline}
.tbl tr.is-supp td{opacity:.6}
.tbl .chip{margin-left:8px;vertical-align:middle}

.plain-list{list-style:none;margin:0 0 10px;padding:0;font-size:14px}
.plain-list li{margin:0 0 10px;line-height:1.4}
.plain-list .hint{display:block}
.add{margin-top:6px}
.add summary{cursor:pointer;font-size:13px;color:var(--primary);font-weight:600}
.mini-form{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-width:420px}
.mini-form-wide{max-width:none;flex-direction:row;flex-wrap:wrap}
.mini-form-wide input,.mini-form-wide select{flex:1 1 180px}
.mini-form input,.mini-form select,.mini-form textarea{font:inherit;font-size:14px;padding:8px 10px;border:1px solid #c6cdd6;border-radius:8px;width:100%}
.mini-form .btn{margin:0;border:0;cursor:pointer;font-family:inherit;align-self:flex-start;font-size:14px;padding:9px 14px}
.req-head-plain{cursor:default}
.req-title-static{font-size:15px;font-weight:600;line-height:1.35}
.swatch{width:40px;height:40px;border-radius:9px;border-bottom:6px solid;flex:none}
.req-head.req-head-plain{grid-template-columns:40px minmax(0,1fr) auto}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin-right:2px}
.dot-ok{background:#2a8c4a}.dot-bad{background:#c0392b}.dot-grey{background:#c3cad2}
#x-demo:disabled{opacity:.5;cursor:not-allowed}

/* ── the demo generator ──────────────────────────────────── */
.gen{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:18px 20px;margin:18px 0;background:var(--bg-soft)}
.gen-form .grid2{margin-bottom:6px}
.colour-row{display:flex;gap:8px;align-items:center}
.colour-row input[type=color]{width:46px;height:38px;padding:2px;border:1px solid #c6cdd6;border-radius:8px;background:#fff}
.colour-row input[type=text]{width:110px}
.logo-preview{max-height:64px;max-width:200px;margin-top:6px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px}
.check-grid{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:4px 0 10px}
.choice-sm{padding:7px 10px}
.choice-sm span{font-size:14px}
.choice-sm small{font-size:12px}
.extra-campuses{grid-column:1/-1;font:inherit;font-size:14px;padding:8px 10px;border:1px solid #c6cdd6;border-radius:8px}
.fld-short{max-width:200px}
.link-acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.link-acts .btn-plain{padding:0;font-size:13px}
#x-demos li{margin-top:12px}
.mark.mark-logo{background:#fff;border:1px solid var(--line);overflow:hidden;padding:3px}
.mark.mark-logo img{width:100%;height:100%;object-fit:contain;display:block}
.apollo-list{border:1px dashed #c6cdd6;border-radius:10px;padding:10px 12px;background:#fbfcfd}
.apollo-list li{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.apollo-list .btn-plain{padding:0;font-size:13px}
.req-col .btn.btn-primary{border:0;cursor:pointer;font-family:inherit;font-size:14px;padding:10px 16px;margin:0}