/* The assignment screens (8-11) were built as a second design: bare left
   headings in ink, pill tabs, 20px-radius buttons, three different board
   widths. Everything else -- the TP screens, the home page, the dashboards
   -- uses the paper header card with a terracotta rule, an eyebrow, a
   centred Newsreader title in teal, and 6px buttons. Ramy, 20 Sep 2026:
   "there are two different designs here." Loaded after each screen's own
   styles, so these win. */
:root{ --terracotta:oklch(37.5% 0.058 195); --sand-deep:oklch(94.8% 0.01 85); --ink-warm:oklch(30% 0.042 58); }
body.hub-assign .board{ max-width:960px; }
.header{ border-top:2px solid var(--terracotta); text-align:center; padding:24px 26px 22px; }
.header h1{ font-family:'Newsreader',Georgia,serif; font-size:1.95rem; font-weight:700; color:var(--teal); line-height:1.2; margin:0; }
.header .eyebrow{ font-family:'Instrument Sans','Karla',sans-serif; font-weight:600; font-size:10px; letter-spacing:0.22em; color:var(--grey); text-transform:uppercase; margin:0 0 4px; }
.header .sub{ margin:10px auto 0; max-width:640px; font-size:0.88rem; color:var(--grey); line-height:1.6; }
.header .meta{ justify-content:center; }
.header .crit{ text-align:center; }
.header .note{ text-align:center; }
.header .outcome-badge{ margin:12px auto 0; }
.picker{ justify-content:center; }
.picker button{ border-radius:6px; }
.btn{ border-radius:6px; font-size:0.86rem; font-weight:600; }
.back{ color:var(--teal); }
#printBtn, .actions button{ border-radius:6px; }