/* Shell: letterhead, top bar, sidebar, main column, page head, sections.
 *
 * ★ D0 — THE FULL-BLEED SHELL (design/DESIGN_DECISION.md §2, highest priority).
 *
 * The mockup capped .shell and .topbar-in at --w-page:1320px, so on a 1905px
 * monitor the whole application floated centred with 293px of dead margin each
 * side and the sidebar detached from the viewport edge. A training officer
 * scanning a 200-row roster lost ~590px of table width to symmetrical nothing.
 *
 * Here NOTHING in the chrome is capped:
 *   .topbar   — full width, padding only.
 *   .layout   — a two-column grid across the whole viewport.
 *   .sidebar  — column 1, so its left edge is the viewport's left edge (0).
 *   .main     — fills every remaining pixel.
 * Only prose and forms are measured, by .measure (--w-measure, ~72ch).
 * Tables and rosters are never measured — see table.css.
 *
 * --w-page survives as an ultra-wide guard, applied only above 2200px at the
 * very bottom of this file.
 */

/* ——— G4 — the letterhead: Kerala red over livery gold, at the top edge of
   every page. Two declarations; the only place --gold is spent. ——— */
.letterhead{
  height:var(--h-letterhead);
  border-top:var(--bw-2) solid var(--accent);
  border-bottom:var(--bw-hair) solid var(--gold);
}

/* ——— Top bar — FULL BLEED ————————————————————————————— */
.topbar{
  position:sticky;top:var(--sp-0);z-index:var(--z-topbar);
  background:var(--paper-2);
  border-bottom:var(--bw-2) solid var(--rule-ink);
}
.topbar-in{
  /* D0: no max-width, no auto margins. D1b: wraps rather than overflowing. */
  display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-5);
  min-width:0;
}
.brand{display:flex;align-items:center;gap:var(--sp-3);flex:0 0 auto;text-decoration:none;border:0;color:var(--ink)}
.brand:hover{color:var(--accent)}
.crest{width:var(--w-crest);height:var(--w-crest);color:var(--accent);flex:0 0 auto}
.wordmark{display:flex;flex-direction:column;line-height:var(--lh-tight)}
.wordmark b{font-family:var(--font-display);font-size:var(--fs-4);font-weight:var(--fw-bold);letter-spacing:var(--track-wide)}
.wordmark span{font-size:var(--fs-00);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3)}
.topbar-right{display:flex;align-items:center;gap:var(--sp-4);flex:0 0 auto;margin-left:auto;min-width:0}

.iconbtn{
  appearance:none;background:var(--paper-3);border:var(--bw-1) solid var(--rule-strong);
  width:var(--sz-input);height:var(--sz-input);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);
}
.iconbtn:hover{color:var(--accent);border-color:var(--accent-rule);background:var(--paper-hi)}
.iconbtn svg{width:var(--sz-icon-lg);height:var(--sz-icon-lg)}
.themeform{display:flex;margin:var(--sp-0)}

.userchip{display:flex;align-items:center;gap:var(--sp-3);border-left:var(--bw-1) solid var(--rule);padding-left:var(--sp-4)}
.userchip .who{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-1);line-height:var(--lh-tight);text-align:right}
.userchip .who b{font-size:var(--fs-1);font-weight:var(--fw-med)}
.avatar{
  width:var(--w-avatar);height:var(--w-avatar);flex:0 0 auto;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:var(--fs-3);
  border:var(--bw-1) solid var(--rule-strong);background:var(--paper-3);color:var(--ink-2);
}
.rolebadge{
  display:inline-block;padding:var(--sp-0) var(--sp-2);
  font-size:var(--fs-00);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:var(--fw-bold);
  border:var(--bw-1) solid currentColor;
}
.rolebadge-admin{color:var(--role-admin);background:var(--role-admin-bg)}
.rolebadge-institution{color:var(--role-inst);background:var(--role-inst-bg)}
.rolebadge-instructor{color:var(--role-instr);background:var(--role-instr-bg)}
.rolebadge-trainee{color:var(--role-trainee);background:var(--role-trainee-bg)}

.logoutform{display:flex;margin:var(--sp-0)}

/* ——— Shell: persistent left sidebar + main — FULL BLEED ————— */
.layout{
  /* D0: no max-width, no auto margins. Column 1 starts at viewport x=0. */
  display:grid;
  grid-template-columns:var(--w-sidebar) minmax(0,1fr);
  align-items:start;
}
.sidebar{
  border-right:var(--bw-1) solid var(--rule);
  padding:var(--sp-6) var(--sp-0) var(--sp-8);
  position:sticky;top:calc(var(--sp-9) + var(--sp-3));align-self:start;
  min-width:0;
}
.nav-head{padding:var(--sp-0) var(--sp-5) var(--sp-3);color:var(--ink-3)}
.nav{border-top:var(--bw-1) solid var(--rule)}
.navitem{
  display:flex;align-items:baseline;gap:var(--sp-3);width:100%;
  text-align:left;text-decoration:none;
  padding:var(--sp-4) var(--sp-5);
  border:0;
  border-bottom:var(--bw-1) solid var(--rule);
  border-left:var(--bw-3) solid transparent;
  color:var(--ink-2);background:transparent;
}
.navitem .lbl{font-family:var(--font-display);font-size:var(--fs-4);letter-spacing:var(--track-tight)}
.navitem .rt{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-00);color:var(--ink-3)}
.navitem:hover{background:var(--paper-hi);color:var(--ink)}
.navitem[aria-current="page"]{border-left-color:var(--accent);color:var(--accent);background:var(--paper-2)}
.navitem[aria-current="page"] .rt{color:var(--accent)}

.viewer-card{margin:var(--sp-6) var(--sp-5) var(--sp-0);border:var(--bw-1) solid var(--rule);background:var(--paper-2);padding:var(--sp-4)}
.viewer-card dt{font-size:var(--fs-00);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3);margin-top:var(--sp-3)}
.viewer-card dt:first-of-type{margin-top:var(--sp-0)}
.viewer-card dd{font-size:var(--fs-2);color:var(--ink)}
.sidefoot{
  margin:var(--sp-6) var(--sp-5) var(--sp-0);padding-top:var(--sp-4);
  border-top:var(--bw-1) solid var(--rule);
  color:var(--ink-3);font-size:var(--fs-0);line-height:var(--lh-snug);
}

.main{min-width:0;padding:var(--sp-6) var(--sp-6) var(--sp-9)}

/* ——— Page head ————————————————————————————————————————— */
.pagehead{display:flex;align-items:flex-end;gap:var(--sp-6);flex-wrap:wrap;padding-bottom:var(--sp-4)}
.pagehead .ph-main{flex:1 1 var(--fx-head);min-width:0}
.pagehead h1{
  font-family:var(--font-display);font-weight:var(--fw-reg);font-size:var(--fs-8);
  letter-spacing:var(--track-tight);line-height:var(--lh-tight);margin-top:var(--sp-2);
}
.pagehead .lede{color:var(--ink-2);font-size:var(--fs-3);margin-top:var(--sp-3);max-width:var(--w-lede)}
.pagehead .actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;padding-bottom:var(--sp-2)}
.rule-double{border-top:var(--bw-2) solid var(--rule-ink);border-bottom:var(--bw-1) solid var(--rule-ink);height:var(--sp-2);margin-bottom:var(--sp-5)}
.rule-hair{border:0;border-top:var(--bw-1) solid var(--rule);margin:var(--sp-5) var(--sp-0)}

.crumb{display:flex;gap:var(--sp-2);align-items:center;font-size:var(--fs-1);color:var(--ink-3);flex-wrap:wrap}
.crumb a{border:0;color:var(--ink-3)}
.crumb a:hover{color:var(--accent)}
.crumb svg{width:var(--sz-star-s);height:var(--sz-star-s)}

/* ——— Section titles: text + trailing hairline ——————————— */
.sect{display:flex;align-items:center;gap:var(--sp-4);margin:var(--sp-7) var(--sp-0) var(--sp-4)}
.sect:first-child{margin-top:var(--sp-0)}
.sect h2{font-size:var(--fs-0);letter-spacing:var(--track-caps);text-transform:uppercase;font-weight:var(--fw-bold);color:var(--ink-2);white-space:nowrap}
.sect .line{flex:1 1 auto;height:var(--bw-1);background:var(--rule)}
.sect .aside{font-size:var(--fs-1);color:var(--ink-3);white-space:nowrap}

/* ——— Generic arrangements ——————————————————————————————— */
/* Every grid track here is minmax(0,…) and every grid item is min-width:0.
 *
 * This is not belt-and-braces, it is a measured fix. A grid track written as
 * `1fr` is really `minmax(auto,1fr)`, and an IMPLICIT track (a grid with gap but
 * no grid-template-columns, which .stack was) is `auto` — in both cases the
 * track's floor is the max-content contribution of its widest child, so the
 * track can grow past its own container instead of shrinking. Measured on the
 * institution page at 390px: .stack was 351px wide with a resolved column of
 * 474.312px, overflowing the document by 111px. It is the same family of defect
 * as D1 — a box escaping the thing meant to contain it — and it has the same
 * kind of fix: constrain the container, do not paper over it with a media query.
 */
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--sp-6);align-items:start}
.split3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
.split > *,.split3 > *,.stack > *{min-width:0}
.gap-t{margin-top:var(--sp-6)}
.gap-b{margin-bottom:var(--sp-5)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-2) var(--sp-5);font-size:var(--fs-2)}
.kv dd{min-width:0;overflow-wrap:break-word}
.kv dt{font-size:var(--fs-0);letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3);padding-top:var(--sp-1)}
.kv dd{color:var(--ink)}

/* ——— Responsive ————————————————————————————————————————— */
@media (max-width:1020px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static;border-right:0;border-bottom:var(--bw-1) solid var(--rule);padding:var(--sp-4) var(--sp-0) var(--sp-5)}
  .nav{display:flex;overflow-x:auto;border-top:0}
  .navitem{border-bottom:0;border-left:0;border-top:var(--bw-3) solid transparent;white-space:nowrap;width:auto;padding:var(--sp-3) var(--sp-5)}
  .navitem[aria-current="page"]{border-left-color:transparent;border-top-color:var(--accent)}
  .navitem .rt{display:none}
  .nav-head{padding-left:var(--sp-5)}
  .viewer-card{display:none}
  .sidefoot{display:none}
  .main{padding:var(--sp-5) var(--sp-5) var(--sp-8)}
}
@media (max-width:640px){
  .topbar-right{width:100%;justify-content:space-between;gap:var(--sp-3);margin-left:var(--sp-0)}
  .userchip{border-left:0;padding-left:var(--sp-0)}
  .userchip .who{display:none}
  .pagehead h1{font-size:var(--fs-7)}
}
@media (max-width:420px){
  .main{padding:var(--sp-4) var(--sp-4) var(--sp-8)}
  .pagehead h1{font-size:var(--fs-6)}
  .wordmark span{display:none}
}

/* D0 — the ultra-wide guard, and the only place --w-page is spent. Below this
   width the shell is edge-to-edge; above it the line length would become
   uncomfortable even for a table, so the grid is centred. */
@media (min-width:2200px){
  .layout{max-width:var(--w-page);margin-left:auto;margin-right:auto}
  .topbar-in{max-width:var(--w-page);margin-left:auto;margin-right:auto}
}