/* ============================================================================
   TransitionReady — the system. One file, every screen, every role.
   ----------------------------------------------------------------------------
   Source: docs/superpowers/specs/2026-09-03-tr-design-review/mockup-system.css
   and the company design system (sure-step-design-system.md). Shared Sure Step
   chrome (navy, teal, warm paper), TransitionReady's own voice inside
   (Newsreader for the words a student reads as a title, DM Sans for the rest).

   Rules of the file:
   - tokens first, then the shared components, nothing feature-specific;
   - teal is the ONLY action color; amber is for a finished thing worth
     celebrating, never for navigation; there is no green;
   - the portfolio document (.pf*, .tdoc*) is the student's design, not the
     app's — it does not read these tokens and this file does not style it.
   ========================================================================== */

/* ── fonts (self-hosted; no third-party page loads) ─────────────────────── */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/DMSans-Light.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/DMSans-Regular.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/DMSans-Medium.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/DMSans-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Newsreader-Regular.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Newsreader-Medium.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Newsreader-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/Newsreader-Italic.woff2') format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/Newsreader-MediumItalic.woff2') format('woff2')}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --tr-navy:#1E3A5F;
  --tr-teal:#1A7FA8; --tr-teal-h:#15668A; --tr-teal-soft:#DDF0F8; --tr-teal-ink:#0F5D7E;
  --tr-teal-on-dark:#7FC4DE; /* the accent for text and rules on navy — --tr-teal itself is 1.8:1 there */
  --tr-bg:#F2F0EC; --tr-bg2:#E8E5DF;
  --tr-surface:#FFFFFF; --tr-surface2:#F7F5F1; --tr-surface3:#EDEAE4;
  --tr-border:#DEDAD3; --tr-border2:#C8C3BA;
  --tr-ink:#1C1C1C; --tr-text2:#3A3A3A; --tr-muted:#88857E; --tr-faint:#9A887E;
  --tr-amber:#E8A100; --tr-amber-soft:#FEF8E2;
  --tr-danger:#D43C3C; --tr-danger-soft:#FDF0F0;
  --tr-r-card:12px; --tr-r-ctl:8px; --tr-r-pill:999px;
  --tr-shadow-card:0 1px 3px rgba(0,0,0,.07),0 2px 8px rgba(0,0,0,.05);
  --tr-shadow-elev:0 4px 18px rgba(0,0,0,.11),0 1px 4px rgba(0,0,0,.06);
  --tr-shadow-nav:0 2px 10px rgba(30,58,95,.35);
  --tr-focus:0 0 0 3px rgba(26,127,168,.12);
  --tr-font-display:'Newsreader',Georgia,serif;
  --tr-font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --tr-header-h:62px;
}

/* ── icons: 24-box stroke symbols, colored by the current text color ────── */
.tr-ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ── the one header ─────────────────────────────────────────────────────── */
.tr-header{background:var(--tr-navy);min-height:var(--tr-header-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 32px;box-shadow:var(--tr-shadow-nav);position:sticky;top:0;z-index:1000;font-family:var(--tr-font-body)}
.tr-lock{display:flex;align-items:center;gap:14px;min-width:0}
.tr-lock svg{flex-shrink:0}
.tr-div{width:1px;height:28px;background:rgba(255,255,255,.18);flex-shrink:0}
.tr-word{color:#fff;font-family:var(--tr-font-display);font-size:1.3rem;font-weight:500;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.tr-eyebrow{color:rgba(255,255,255,.6);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:3px;white-space:nowrap}
.tr-acts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.tr-hbtn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:var(--tr-r-ctl);padding:7px 12px;font:600 .82rem var(--tr-font-body);cursor:pointer;transition:background .2s;white-space:nowrap}
.tr-hbtn:hover{background:rgba(255,255,255,.2)}
.tr-hbtn .tr-ic{width:16px;height:16px}
.tr-saved{color:rgba(255,255,255,.65);font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-role{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:var(--tr-r-pill);background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);white-space:nowrap}
.tr-role .tr-ic{width:12px;height:12px}
.tr-avatar{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:.85rem;font-weight:600;padding:4px 6px 4px 4px;background:none;border:0;border-radius:var(--tr-r-pill);cursor:pointer;font-family:var(--tr-font-body)}
.tr-avatar:hover,.tr-avatar[aria-expanded="true"]{background:rgba(255,255,255,.1)}
.tr-avatar b,.tr-avatar img{width:30px;height:30px;border-radius:50%;background:var(--tr-teal);display:grid;place-items:center;font-size:.75rem;font-weight:800;color:#fff;object-fit:cover;flex-shrink:0}
.tr-avatar .tr-ic{width:14px;height:14px;opacity:.7}
.tr-avatar .tr-avatar-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-menu{position:fixed;right:32px;top:calc(var(--tr-header-h) + 4px);background:var(--tr-surface);border:1px solid var(--tr-border);border-radius:10px;box-shadow:var(--tr-shadow-elev);width:240px;padding:6px;z-index:1001;font:.88rem var(--tr-font-body);color:var(--tr-text2)}
.tr-menu[hidden]{display:none}
.tr-menu-who{padding:9px 12px;font-size:.78rem;color:var(--tr-muted);line-height:1.4;word-break:break-word}
.tr-menu hr{border:0;border-top:1px solid var(--tr-border);margin:6px 0}
.tr-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:6px;border:0;background:none;text-align:left;font:inherit;color:var(--tr-text2);cursor:pointer;min-height:40px}
.tr-menu-item:hover,.tr-menu-item:focus-visible{background:var(--tr-surface2);outline:none}
.tr-menu-item .tr-ic{width:15px;height:15px;color:var(--tr-muted)}
.tr-menu-item.danger{color:var(--tr-danger)}
.tr-menu-item.danger .tr-ic{color:var(--tr-danger)}
@media(max-width:620px){
  .tr-header{padding:8px 16px}
  .tr-lock>svg,.tr-div{display:none}
  .tr-menu{right:12px;left:12px;width:auto}
  .tr-avatar .tr-avatar-name{display:none}
  /* .tr-acts wraps, so a long role label ("District administrator") pushed the
     avatar onto a second row and the header grew past 62px on a phone. The
     eyebrow under the wordmark already names the context, so the pill steps
     aside here rather than the header changing height. */
  .tr-role{display:none}
  .tr-tabs>div{padding:0 16px}
}
@media(max-width:480px){
  .tr-hbtn .tr-hbtn-label,.tr-saved{display:none}
  .tr-hbtn{padding:7px 9px}
}

/* ── tabs (staff dashboards, later the builder steps) ───────────────────── */
.tr-tabs{background:var(--tr-surface);border-bottom:1px solid var(--tr-border)}
.tr-tabs>div{max-width:980px;margin:0 auto;padding:0 32px;display:flex;gap:4px;height:50px;overflow-x:auto}
.tr-tab{display:flex;align-items:center;padding:0 14px;font:600 .88rem var(--tr-font-body);color:var(--tr-muted);border:0;border-bottom:3px solid transparent;background:none;cursor:pointer;white-space:nowrap}
.tr-tab:hover{color:var(--tr-ink)}
.tr-tab.on{color:var(--tr-ink);border-bottom-color:var(--tr-teal)}

/* ── page, titles, cards, tiles ─────────────────────────────────────────── */
.tr-page{max-width:980px;margin:0 auto;padding:36px 32px 80px;font-family:var(--tr-font-body);color:var(--tr-text2)}
.tr-page h1,.tr-page h2,.tr-page h3,.tr-card h2{font-family:var(--tr-font-display);font-weight:500;color:var(--tr-ink);margin:0;line-height:1.15}
.tr-ptitle{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.tr-ptitle h1{font-size:2rem}
.tr-ptitle small{color:var(--tr-muted);font-size:.85rem;font-weight:600}
.tr-card{background:var(--tr-surface);border:1px solid var(--tr-border);border-radius:var(--tr-r-card);padding:22px 24px;box-shadow:var(--tr-shadow-card);margin-bottom:16px}
.tr-card h2{font-size:1.2rem;margin-bottom:12px}
.tr-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 20px}
.tr-tile{background:var(--tr-surface);border:1px solid var(--tr-border);border-radius:var(--tr-r-card);padding:16px 18px}
.tr-tile b{font:600 1.8rem var(--tr-font-display);color:var(--tr-ink);font-variant-numeric:tabular-nums;display:block}
.tr-tile span{font-size:.82rem;color:var(--tr-muted)}
.tr-empty{padding:34px 20px;text-align:center;color:var(--tr-muted);font-size:.92rem}
.tr-empty b{display:block;color:var(--tr-ink);font-size:1rem;margin-bottom:4px;font-weight:600}
@media(max-width:620px){.tr-tiles{grid-template-columns:1fr}.tr-page{padding:22px 16px 60px}}

/* ── buttons, pills ─────────────────────────────────────────────────────── */
.tr-btn{display:inline-flex;align-items:center;gap:8px;background:var(--tr-teal);color:#fff;border:0;border-radius:var(--tr-r-ctl);padding:10px 18px;font:700 .88rem var(--tr-font-body);box-shadow:0 2px 6px rgba(26,127,168,.3);cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s;min-height:40px}
.tr-btn:hover{background:var(--tr-teal-h);transform:translateY(-1px)}
.tr-btn.ghost{background:transparent;color:var(--tr-text2);border:1.5px solid var(--tr-border2);box-shadow:none}
.tr-btn.ghost:hover{border-color:var(--tr-teal);background:var(--tr-teal-soft);color:var(--tr-teal-ink)}
.tr-btn.danger{background:var(--tr-danger-soft);color:var(--tr-danger);border:1px solid #F5B8B8;box-shadow:none}
.tr-btn .tr-ic{width:16px;height:16px}
.tr-btn[disabled]{opacity:.55;cursor:default;transform:none}
.tr-pill{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;border-radius:var(--tr-r-pill);padding:3px 10px;background:var(--tr-teal-soft);color:var(--tr-teal-ink)}
.tr-pill.amber{background:var(--tr-amber-soft);color:#7A5410}
.tr-pill.muted{background:var(--tr-bg2);color:var(--tr-muted)}
.tr-pill .tr-ic{width:12px;height:12px}

@media(prefers-reduced-motion:reduce){.tr-btn,.tr-hbtn{transition:none}.tr-btn:hover{transform:none}}