/* ============================================================
   THE ADVISORY · 特优生学习工作室 · Planner
   v3 — Harvard.edu institutional gravitas
   Pure .gov/university feel: clean white, crimson accent,
   disciplined grids, sans-serif UI + serif display, NO
   editorial flourishes (no italics, no marginalia, no ¶/§,
   no Roman numerals, no drop caps, no pull-quotes).
   ============================================================ */

:root{
  --bg:         #ffffff;
  --bg-2:       #f7f7f5;
  --bg-3:       #eeeeea;
  --ink:        #1e1e1c;
  --ink-2:      #2b2a27;
  --ink-3:      #55534f;
  --ink-4:      #7a7773;
  --ink-5:      #a5a29d;
  --rule:       #d9d7d2;
  --rule-2:     #e6e4df;
  --crimson:    #a51c30;         /* Harvard Crimson */
  --crimson-d:  #8a1628;
  --crimson-bg: #f7e9ec;

  --red:        #a51c30;
  --red-bg:     #fbeef0;
  --red-bd:     #e7c7ce;
  --amber:      #8a5a00;
  --amber-bg:   #fbf2df;
  --amber-bd:   #e8d9ac;
  --green:      #1b5e3a;
  --green-bg:   #e8f1eb;
  --green-bd:   #c3d9c9;

  --serif: 'Source Serif 4','Noto Serif SC','Songti SC',Georgia,serif;
  --sans:  'Inter','PingFang SC','Noto Sans SC',-apple-system,'Helvetica Neue',sans-serif;
  --mono:  'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

[data-theme="crimson"] { --crimson:#a51c30; --crimson-d:#8a1628; --crimson-bg:#f7e9ec; }
[data-theme="navy"]    { --crimson:#00356b; --crimson-d:#002a55; --crimson-bg:#e8eff7; }
[data-theme="forest"]  { --crimson:#0f4d2a; --crimson-d:#0a3a20; --crimson-bg:#e8f1eb; }
[data-theme="ink"]     { --crimson:#1e1e1c; --crimson-d:#000;    --crimson-bg:#eeeeea; }

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Scrollbar minimal */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#d9d7d2;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:#a5a29d}

/* ============================================================
   TYPOGRAPHY PRIMITIVES — sober, NOT editorial
   ============================================================ */

.display{
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.08;
}
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--crimson);
}
.eyebrow.muted{ color:var(--ink-4) }
.label{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--ink-4);
}
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums }
.num{ font-variant-numeric:tabular-nums lining-nums }

hr.rule{ height:0;border:0;border-top:1px solid var(--rule);margin:0 }
hr.rule-ink{ height:0;border:0;border-top:1px solid var(--ink);margin:0 }
hr.rule-crimson{ height:0;border:0;border-top:3px solid var(--crimson);margin:0 }

/* ============================================================
   HEADER — the gov-style masthead
   A thin crimson bar, then a white header, then a dark nav rail.
   ============================================================ */

.harvard-top{
  background:var(--crimson);
  height:4px;
}
.masthead{
  border-bottom:1px solid var(--rule);
  padding: 18px 40px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 32px;
  align-items:center;
  background:var(--bg);
}
.masthead .mark{
  display:flex; align-items:center; gap:14px;
}
.masthead .shield{
  width:36px; height:42px; display:block;
  background:var(--crimson); color:#fff;
  position:relative;
  clip-path: polygon(0 0,100% 0,100% 65%,50% 100%,0 65%);
  font-family:var(--serif);
  font-weight:700;
  font-size:18px;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:6px;
  letter-spacing:-0.02em;
}
.masthead .wordmark{
  font-family:var(--serif); font-weight:600; font-size:22px;
  line-height:1.05; letter-spacing:-0.01em; color:var(--ink);
}
.masthead .wordmark .sub{
  display:block; font-family:var(--sans); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); font-weight:600; margin-top:3px;
}
.masthead .nav{
  display:flex; gap:28px; justify-content:center;
  font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-2);
}
.masthead .nav button{
  appearance:none; background:transparent; border:0; cursor:pointer;
  padding: 6px 0; color:var(--ink-2); font: inherit;
  border-bottom: 2px solid transparent;
}
.masthead .nav button.on{ color:var(--crimson); border-bottom-color:var(--crimson); font-weight:600; }
.masthead .nav button:hover{ color:var(--crimson); }
.masthead .utility{
  display:flex; gap:18px; align-items:center;
  font-family:var(--sans); font-size:12px; color:var(--ink-3);
}
.masthead .utility .search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--rule); background:var(--bg);
  padding: 6px 10px; min-width:220px;
}
.masthead .utility .search input{
  border:0; outline:0; background:transparent; font: inherit; color:var(--ink);
  width:100%;
}
.masthead .utility .search svg{ width:14px; height:14px; color:var(--ink-4); flex-shrink:0 }
.masthead .utility .role-switch{
  border:1px solid var(--ink-3); padding: 6px 12px;
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); cursor:pointer; background:var(--bg);
}
.masthead .utility .role-switch:hover{ border-color:var(--crimson); color:var(--crimson) }

/* Subnav — appears under the masthead when inside a student */
.subnav{
  background:var(--bg-2); border-bottom:1px solid var(--rule);
  padding: 10px 40px;
  display:flex; gap: 40px; align-items:center;
  font-family:var(--sans); font-size:13px; color:var(--ink-3);
}
.subnav .crumbs{ display:flex; gap:10px; align-items:center; color:var(--ink-4); }
.subnav .crumbs a{ color:var(--ink-3); cursor:pointer; }
.subnav .crumbs a:hover{ color:var(--crimson) }
.subnav .crumbs .sep{ color:var(--ink-5) }
.subnav .tabs{ display:flex; gap:4px; margin-left:auto; }
.subnav .tabs button{
  appearance:none; background:transparent; border:0; cursor:pointer;
  padding: 10px 18px; color:var(--ink-3); font:inherit; font-weight:500;
  border-bottom: 2px solid transparent; margin-bottom:-11px;
}
.subnav .tabs button.on{ color:var(--crimson); border-bottom-color:var(--crimson); font-weight:600; }
.subnav .tabs button:hover{ color:var(--crimson) }
.subnav .kbd-hint{ margin-left:20px; color:var(--ink-4); font-size:11px; }
.subnav .kbd-hint kbd{
  font-family:var(--mono); font-size:10px; color:var(--ink-3);
  border:1px solid var(--rule); background:var(--bg); padding: 1px 5px;
  margin: 0 2px;
}

/* ============================================================
   PAGE CONTAINER
   ============================================================ */
.wrap{ max-width:1440px; margin:0 auto; padding: 32px 40px 80px; }
.wrap-wide{ max-width:1600px; margin:0 auto; padding: 32px 40px 80px; }

/* Page head — clean crimson eyebrow + big serif title */
.page-head{
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
}
.page-head .eyebrow{ margin-bottom:8px }
.page-head h1{
  font-family:var(--serif); font-size:36px; font-weight:600;
  line-height:1.1; letter-spacing:-0.015em; color:var(--ink); margin: 0 0 8px;
}
.page-head .deck{
  font-family:var(--serif); font-size:17px; line-height:1.55; color:var(--ink-3);
  max-width: 72ch;
}
.page-head .meta{
  display:flex; gap:18px; margin-top:14px;
  font-family:var(--sans); font-size:12px; color:var(--ink-4);
}
.page-head .meta .dot{ color:var(--ink-5); }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ margin-top: 44px; }
.section-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px; margin-bottom: 18px;
}
.section-head h2{
  font-family:var(--serif); font-size:22px; font-weight:600;
  letter-spacing:-0.01em; margin:0; color:var(--ink);
}
.section-head .tools{ display:flex; gap:16px; font-size:12px; color:var(--ink-4); }

/* ============================================================
   BUTTONS — institutional
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  appearance:none; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.02em;
  padding: 8px 16px;
  background:var(--bg); color:var(--ink); border:1px solid var(--ink-3);
  border-radius:0;
  line-height:1.2;
}
.btn:hover{ border-color:var(--crimson); color:var(--crimson) }
.btn.primary{ background:var(--crimson); color:#fff; border-color:var(--crimson); }
.btn.primary:hover{ background:var(--crimson-d); border-color:var(--crimson-d); color:#fff }
.btn.ghost{ border-color:var(--rule); color:var(--ink-3); }
.btn.ghost:hover{ border-color:var(--crimson); color:var(--crimson) }
.btn.sm{ padding: 5px 10px; font-size:11.5px; }

.link{
  color:var(--crimson); font-weight:600; cursor:pointer;
  border-bottom:1px solid transparent;
}
.link:hover{ border-bottom-color: var(--crimson) }

/* ============================================================
   CARDS / PANELS — clean, hairline, flat
   ============================================================ */
.panel{
  background:var(--bg);
  border:1px solid var(--rule);
  padding: 22px 24px;
}
.panel.flat{ border:0; background:var(--bg-2); }
.panel h3{
  font-family:var(--serif); font-size:18px; font-weight:600;
  letter-spacing:-0.01em; margin: 0 0 12px;
}
.panel h3 .count{
  font-family:var(--sans); font-size:12px; color:var(--ink-4); font-weight:500;
  margin-left:10px;
}

/* Stat block */
.stat{
  display:flex; flex-direction:column; gap:4px;
  padding: 18px 22px;
  background:var(--bg); border:1px solid var(--rule);
}
.stat .k{
  font-family:var(--sans); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-4); font-weight:600;
}
.stat .v{
  font-family:var(--serif); font-size:42px; font-weight:600;
  letter-spacing:-0.02em; line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.stat .v .unit{ font-size:.4em; color:var(--ink-4); font-weight:500; margin-left:3px; }
.stat .v em{ color:var(--crimson); font-style:normal; }
.stat .d{
  font-family:var(--sans); font-size:12px; color:var(--ink-3); line-height:1.4;
}
.stat .d strong{ color:var(--crimson); font-weight:600; }

/* ============================================================
   PROGRESS BAR / GAUGE — institutional
   ============================================================ */
.progress{
  height:6px; background:var(--bg-3); position:relative; overflow:hidden;
}
.progress .fill{
  position:absolute; left:0; top:0; bottom:0; background:var(--crimson);
}
.progress.thin{ height:2px; background:var(--rule); }
.progress.thin .fill{ background:var(--ink); }

/* ============================================================
   STATUS CHIPS — traffic lights but institutional
   ============================================================ */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--sans); font-size:11px; letter-spacing:.04em; font-weight:600;
  padding: 3px 9px; border:1px solid transparent;
  line-height:1.3;
}
.chip.red   { color:var(--red);   background:var(--red-bg);   border-color:var(--red-bd); }
.chip.amber { color:var(--amber); background:var(--amber-bg); border-color:var(--amber-bd); }
.chip.green { color:var(--green); background:var(--green-bg); border-color:var(--green-bd); }
.chip.ink   { color:var(--ink);   background:var(--bg-3);     border-color:var(--rule); }
.chip.dot::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:currentColor; display:inline-block;
}

/* ============================================================
   STUDENT LIST (dashboard) — row cards
   ============================================================ */
.student-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.s-card{
  background:var(--bg); border:1px solid var(--rule);
  padding: 20px 22px; cursor:pointer;
  transition: border-color .12s;
  display:flex; flex-direction:column; gap:14px;
  position:relative;
}
.s-card:hover{ border-color:var(--ink); }
.s-card.active{ border-color:var(--crimson); border-left-width:3px; padding-left:20px; }
.s-card .head{
  display:flex; align-items:flex-start; gap:12px; justify-content:space-between;
}
.s-card .avatar{
  width:44px; height:44px; background:var(--crimson-bg); color:var(--crimson);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:20px; font-weight:600;
  border:1px solid var(--red-bd);
  flex-shrink:0;
}
.s-card .who{ flex:1; }
.s-card .name{
  font-family:var(--serif); font-size:19px; font-weight:600;
  letter-spacing:-0.005em; color:var(--ink); line-height:1.1;
}
.s-card .meta{
  font-family:var(--sans); font-size:11.5px; color:var(--ink-4); margin-top:4px;
}
.s-card .flags{
  display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:110px;
}
.s-card .stats{
  display:grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 0; border-top:1px solid var(--rule-2); padding-top:12px;
}
.s-card .stats .c{ display:flex; flex-direction:column; gap:2px; }
.s-card .stats .c + .c{ padding-left:12px; border-left:1px solid var(--rule-2); }
.s-card .stats .k{
  font-family:var(--sans); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); font-weight:600;
}
.s-card .stats .v{
  font-family:var(--serif); font-size:22px; font-weight:600;
  line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.s-card .stats .v em{ color:var(--crimson); font-style:normal; }
.s-card .stats .v .u{ font-size:.5em; color:var(--ink-4); font-weight:500; margin-left:2px; }
.s-card .note{
  font-family:var(--serif); font-size:13.5px; color:var(--ink-3); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  border-top: 1px solid var(--rule-2); padding-top:12px;
}
.s-card .note .from{
  display:block; font-family:var(--sans); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:4px; font-weight:600;
}
.s-card .pending{
  position:absolute; top:-1px; right:-1px;
  background:var(--crimson); color:#fff;
  font-family:var(--sans); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:700;
  padding: 3px 10px;
}

/* ============================================================
   DATA TABLE
   ============================================================ */
.dt{
  width:100%; border-collapse:collapse; background:var(--bg);
  border:1px solid var(--rule);
}
.dt thead th{
  font-family:var(--sans); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); font-weight:600;
  text-align:left; padding: 12px 14px; background:var(--bg-2);
  border-bottom: 1px solid var(--rule);
}
.dt thead th.num{ text-align:right; }
.dt tbody td{
  padding: 14px;
  border-bottom:1px solid var(--rule-2);
  font-family:var(--sans); font-size:13px; color:var(--ink-2); vertical-align:middle;
}
.dt tbody tr:last-child td{ border-bottom:0 }
.dt tbody tr:hover td{ background:var(--bg-2); cursor:pointer; }
.dt tbody tr.active td{ background:var(--crimson-bg); }
.dt td.num{
  text-align:right; font-variant-numeric:tabular-nums lining-nums;
  font-family:var(--serif); font-size:16px; font-weight:500;
}
.dt td.num em{ color:var(--crimson); font-style:normal; }
.dt td.name{ font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink); }
.dt td.name .sub{ display:block; font-family:var(--sans); font-size:11px; color:var(--ink-4); font-weight:400; margin-top:2px; }

/* ============================================================
   HEAT GRID
   ============================================================ */
.heat-tbl{ width:100%; border-collapse:collapse; background:var(--bg); border:1px solid var(--rule); }
.heat-tbl th, .heat-tbl td{ padding: 10px 12px; }
.heat-tbl thead th{
  font-family:var(--sans); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); font-weight:600;
  text-align:center; background:var(--bg-2); border-bottom:1px solid var(--rule);
}
.heat-tbl thead th:first-child{ text-align:left; }
.heat-tbl td{ border-bottom:1px solid var(--rule-2); }
.heat-tbl tr:last-child td{ border-bottom:0 }
.heat-tbl td.name{ font-family:var(--serif); font-size:14.5px; font-weight:600; color:var(--ink); }
.heat-tbl td.name .sub{ display:block; font-family:var(--sans); font-size:11px; color:var(--ink-4); margin-top:2px; font-weight:400; }
.heat-tbl td.hc{ text-align:center; }
.heat-cell{
  width:32px; height:32px; margin:0 auto; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:10.5px; color:#fff;
}
.heat-tbl tr:hover td{ background:var(--bg-2); cursor:pointer; }

/* ============================================================
   INBOX (DISPATCHES)
   ============================================================ */
.inbox-group{ margin-bottom: 40px; }
.inbox-row{
  display:grid;
  grid-template-columns: auto 1fr auto auto;
  column-gap: 18px; align-items: center;
  padding: 14px 18px; background:var(--bg);
  border:1px solid var(--rule); border-top:0;
}
.inbox-row:first-of-type{ border-top: 1px solid var(--rule); }
.inbox-row .avatar{
  width:36px; height:36px;
  background:var(--crimson-bg); color:var(--crimson);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:16px; font-weight:600;
  border:1px solid var(--red-bd); flex-shrink:0;
}
.inbox-row .who{
  font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink);
}
.inbox-row .who .sub{
  display:block; font-family:var(--sans); font-size:12px; color:var(--ink-3);
  font-weight:400; margin-top:3px; line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 560px;
}
.inbox-row .dt{
  font-family:var(--mono); font-size:11.5px; color:var(--ink-4);
}
.inbox-row:hover{ background:var(--bg-2); cursor:pointer; }

/* ============================================================
   STUDENT DETAIL
   ============================================================ */
.detail-hero{
  display:grid; grid-template-columns: auto 1fr auto;
  gap: 20px; align-items:center;
  padding-bottom: 24px; border-bottom: 1px solid var(--rule); margin-bottom: 28px;
}
.detail-hero .avatar{
  width:72px; height:72px;
  background:var(--crimson-bg); color:var(--crimson);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:32px; font-weight:600;
  border:1px solid var(--red-bd); flex-shrink:0;
}
.detail-hero .who h1{
  font-family:var(--serif); font-size:36px; font-weight:600;
  letter-spacing:-0.015em; margin: 0 0 4px; color:var(--ink);
}
.detail-hero .who .meta{
  font-family:var(--sans); font-size:13px; color:var(--ink-3);
  display:flex; gap:10px; align-items:center;
}
.detail-hero .who .meta .dot{ color:var(--ink-5) }
.detail-hero .actions{ display:flex; gap:10px; }

/* Two-column detail layout */
.detail-grid{ display:grid; grid-template-columns: 2fr 1fr; gap: 32px; }
.detail-grid.reverse{ grid-template-columns: 1fr 2fr; }

/* Programme / task list */
.tasklist{ border:1px solid var(--rule); background:var(--bg); }
.task-row{
  display:grid; grid-template-columns: 22px 100px 1fr auto;
  gap: 14px; align-items:center;
  padding: 12px 16px; border-bottom: 1px solid var(--rule-2);
  cursor:pointer; font-size:13.5px; color:var(--ink-2);
}
.task-row:last-child{ border-bottom:0 }
.task-row:hover{ background:var(--bg-2) }
.task-row .check{
  width:16px; height:16px; border:1.5px solid var(--ink-3); display:flex;
  align-items:center; justify-content:center; color:var(--crimson); font-size:12px;
}
.task-row.done .check{ background:var(--crimson); border-color:var(--crimson); color:#fff; }
.task-row.done .task{ color:var(--ink-4); text-decoration:line-through; text-decoration-color:var(--ink-5); }
.task-row .subj{ font-family:var(--serif); font-weight:600; font-size:14px; color:var(--ink-2); }
.task-row.done .subj{ color:var(--ink-4); }
.task-row .min{ font-family:var(--mono); font-size:11.5px; color:var(--ink-4); }

/* Feedback card */
.fb{
  border:1px solid var(--rule); background:var(--bg); padding: 16px 18px;
}
.fb + .fb{ margin-top:10px }
.fb .head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.fb .from{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--crimson); font-weight:700;
}
.fb .dt{ font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.fb .txt{ font-family:var(--serif); font-size:14.5px; line-height:1.55; color:var(--ink-2); }

/* Diagnostic log — 3-column or list */
.log-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px; }
.log-col{
  background:var(--bg); border:1px solid var(--rule); padding: 16px;
}
.log-col.red{ border-top: 3px solid var(--red); }
.log-col.amber{ border-top: 3px solid var(--amber); }
.log-col.green{ border-top: 3px solid var(--green); }
.log-col h4{
  font-family:var(--sans); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; margin: 0 0 12px;
  display:flex; justify-content:space-between; align-items:center;
}
.log-col.red h4{ color:var(--red); }
.log-col.amber h4{ color:var(--amber); }
.log-col.green h4{ color:var(--green); }
.log-col h4 .n{ font-family:var(--mono); font-size:11px; color:var(--ink-4); font-weight:500; letter-spacing:0; }
.log-item{
  padding: 12px 0; border-top: 1px solid var(--rule-2); cursor:pointer;
}
.log-item:first-child{ border-top:0 }
.log-item .ttl{
  font-family:var(--serif); font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink);
}
.log-item .dt{
  font-family:var(--serif); font-size:13px; line-height:1.5; color:var(--ink-3);
  margin-top:4px;
}
.log-item .meta{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-5);
  margin-top:6px; display:flex; justify-content:space-between;
}
.log-item .meta .act{
  font-family:var(--sans); font-size:10.5px; letter-spacing:.05em;
  color:var(--crimson); font-weight:700; cursor:pointer;
}
.log-col.green .log-item .ttl{ color:var(--ink-4); text-decoration:line-through; text-decoration-color:var(--ink-5); }

/* Distribution bars */
.distro{ border:1px solid var(--rule); background:var(--bg); }
.dr{
  display:grid; grid-template-columns: 110px 1fr 60px;
  gap: 14px; align-items:center;
  padding: 10px 16px; border-bottom: 1px solid var(--rule-2);
}
.dr:last-child{ border-bottom:0 }
.dr .s{ font-family:var(--serif); font-size:14px; font-weight:500; color:var(--ink-2); }
.dr .bar{ height:8px; background:var(--bg-3); position:relative; }
.dr .bar .f{ position:absolute; left:0; top:0; bottom:0; background:var(--ink); }
.dr .bar .f.crimson{ background:var(--crimson); }
.dr .m{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); text-align:right; }

/* ============================================================
   DRAFT REVIEW — gov-style approval card
   ============================================================ */
.draft{
  background:var(--bg); border:1px solid var(--rule);
  border-left: 3px solid var(--crimson);
  padding: 0;
}
.draft .bar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 20px; background:var(--bg-2);
  border-bottom:1px solid var(--rule);
}
.draft .bar .status{
  display:flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; font-weight:700; color:var(--crimson);
}
.draft .bar .status::before{
  content:""; width:8px; height:8px; background:var(--crimson);
}
.draft .bar .meta{ font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.draft .body{ padding: 24px; }
.draft .body h4{
  font-family:var(--serif); font-size:22px; font-weight:600;
  line-height:1.2; letter-spacing:-0.01em; margin: 0 0 14px;
}
.draft .body .sum{
  font-family:var(--serif); font-size:15.5px; line-height:1.6; color:var(--ink-2);
}
.draft .acts{
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule-2);
  display:flex; flex-direction:column; gap:10px;
}
.draft .acts li{
  list-style:none; padding: 10px 14px; background:var(--bg-2);
  font-family:var(--sans); font-size:13px; color:var(--ink-2);
  border-left: 2px solid var(--crimson);
}
.draft .acts li .en{
  display:block; font-family:var(--sans); font-size:11px; color:var(--ink-4); margin-top:2px;
}
.draft .note{
  margin-top: 20px; padding: 14px 18px; background:var(--crimson-bg);
  border-left: 2px solid var(--crimson);
  font-family:var(--serif); font-size:15px; line-height:1.5; color:var(--ink);
}
.draft .controls{
  padding: 16px 24px; border-top: 1px solid var(--rule); background:var(--bg-2);
  display:flex; gap:10px; justify-content:flex-end;
}

/* ============================================================
   FAMILY SIDE — clean white, less density
   ============================================================ */
.fam-wrap{ max-width: 820px; margin: 0 auto; padding: 40px 32px 80px; }
.fam-head{
  text-align:center; padding: 20px 0 28px; border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}
.fam-head .eyebrow{ margin-bottom:10px }
.fam-head h1{
  font-family:var(--serif); font-size:36px; font-weight:600;
  letter-spacing:-0.015em; margin: 0 0 10px;
}
.fam-head .sub{
  font-family:var(--serif); font-size:15px; color:var(--ink-4); font-style:normal;
}
.fam-tabs{
  display:flex; justify-content:center; gap: 28px;
  padding: 0 0 16px; margin-bottom: 32px; border-bottom: 1px solid var(--rule);
}
.fam-tabs button{
  appearance:none; background:transparent; border:0; cursor:pointer;
  padding: 4px 0; color:var(--ink-3); font: inherit; font-size:13px; font-weight:500;
  border-bottom: 2px solid transparent; margin-bottom:-17px;
}
.fam-tabs button.on{ color:var(--crimson); border-bottom-color:var(--crimson); font-weight:600; }

.fam-section{ margin-bottom: 44px; }
.fam-section h3{
  font-family:var(--serif); font-size:22px; font-weight:600;
  margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}

.fam-epistle{
  font-family:var(--serif); font-size:16px; line-height:1.7; color:var(--ink-2);
}
.fam-epistle p{ margin: 0 0 1em; }
.fam-sign{
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule-2);
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--sans); font-size:12px; color:var(--ink-4);
}
.fam-sign .name{ font-family:var(--serif); font-size:15px; font-weight:600; color:var(--ink); }

/* Check items */
.checklist{ border:1px solid var(--rule); background:var(--bg); }
.check-row{
  display:grid; grid-template-columns: 22px 1fr;
  gap: 14px; align-items:flex-start;
  padding: 14px 18px; border-bottom:1px solid var(--rule-2);
  cursor:pointer;
}
.check-row:last-child{ border-bottom:0 }
.check-row .box{
  width:16px; height:16px; border:1.5px solid var(--ink-3); display:flex;
  align-items:center; justify-content:center; color:#fff; font-size:11px;
  margin-top:2px;
}
.check-row.done .box{ background:var(--crimson); border-color:var(--crimson); }
.check-row .t{ font-family:var(--serif); font-size:15px; line-height:1.55; color:var(--ink-2); }
.check-row.done .t{ color:var(--ink-4); text-decoration:line-through; text-decoration-color:var(--ink-5); }
.check-row .t .en{ display:block; font-family:var(--sans); font-size:12px; color:var(--ink-4); margin-top:3px; }
.check-row:hover{ background:var(--bg-2) }

/* Reflection input */
.reflect{
  border:1px solid var(--rule); background:var(--bg); padding: 18px 20px;
}
.reflect textarea{
  width:100%; min-height: 100px; border:0; outline:0; resize:none;
  font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--ink);
  background:transparent;
}
.reflect .foot{
  display:flex; justify-content:space-between; align-items:center; margin-top:10px;
  padding-top:10px; border-top:1px solid var(--rule-2);
  font-family:var(--mono); font-size:11px; color:var(--ink-4);
}

/* Week plan */
.weekplan{ border:1px solid var(--rule); background:var(--bg); }
.wp-row{
  display:grid; grid-template-columns: 90px 1fr 60px;
  gap: 16px; align-items:center; padding: 14px 18px;
  border-bottom:1px solid var(--rule-2);
}
.wp-row:last-child{ border-bottom:0 }
.wp-row .d{
  font-family:var(--serif); font-size:15px; font-weight:600; color:var(--crimson);
}
.wp-row .d .dt{
  display:block; font-family:var(--mono); font-weight:400; font-size:11px;
  color:var(--ink-4); margin-top:2px;
}
.wp-row .blocks{ display:flex; flex-wrap:wrap; gap:6px 14px; font-family:var(--sans); font-size:13px; color:var(--ink-2); }
.wp-row .blocks .b{
  background:var(--bg-2); padding:4px 10px; border:1px solid var(--rule-2);
  font-size:12.5px;
}
.wp-row .blocks .b .m{ color:var(--ink-4); font-family:var(--mono); font-size:11px; margin-left:4px; }
.wp-row .total{ font-family:var(--mono); font-size:12px; color:var(--ink-3); text-align:right; }

/* ============================================================
   SHARE IMAGE (1080×1920)
   ============================================================ */
.share{
  width:1080px; height:1920px; background:var(--bg);
  position:relative; font-family:var(--sans); color:var(--ink);
  padding: 0; overflow:hidden; border: 1px solid var(--rule);
}
.share-crimson{ height:12px; background:var(--crimson); }
.share-inner{ padding: 60px 70px; }

/* ============================================================
   CHART CAPTION
   ============================================================ */
.chart svg{ width:100%; height:auto; display:block; }
.chart-cap{
  font-family:var(--sans); font-size:11px; color:var(--ink-4);
  display:flex; justify-content:space-between; padding-top:10px; border-top: 1px solid var(--rule-2);
  margin-top: 14px;
}

/* ============================================================
   v3 adaptations — map React-only classes to Flask anchor links
   and fill in gaps the vendored source sheet didn't cover.
   Candidates for a proper pass in Task 13.
   ============================================================ */

/* Masthead / dashboard styles used by dashboard.html + student.html shell
   (these are referenced from base_harvard.html block overrides). */
.mast-inner{
  max-width:1440px; margin:0 auto; padding: 18px 40px;
  display:grid; grid-template-columns: auto 1fr auto; column-gap: 32px; align-items:center;
}
.mast-inner .brand{
  display:flex; align-items:center; gap:14px; text-decoration:none;
}
.mast-inner .brand .wordmark-main{
  font-family:var(--serif); font-weight:600; font-size:22px;
  line-height:1.05; letter-spacing:-0.01em; color:var(--ink);
}
.mast-inner .brand .sub{
  display:block; font-family:var(--sans); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-4); font-weight:600; margin-top:3px;
}
.mast-nav{ display:flex; gap:28px; justify-content:center; }
.mast-nav .nav-item{
  font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-2);
  padding: 6px 0; border-bottom: 2px solid transparent; text-decoration:none;
}
.mast-nav .nav-item:hover{ color:var(--crimson); }
.mast-nav .nav-item.active,
.mast-nav .nav-item.on{ color:var(--crimson); border-bottom-color:var(--crimson); font-weight:600; }
.display.display-h1{
  font-family:var(--serif); font-size:36px; font-weight:600;
  line-height:1.1; letter-spacing:-0.015em; color:var(--ink); margin: 0 0 8px;
}
.cohort-meta{
  display:flex; gap:12px; margin-top:14px;
  font-family:var(--sans); font-size:12.5px; color:var(--ink-3);
}
.cohort-meta em.crimson,
em.crimson{ color:var(--crimson); font-style:normal; font-weight:600; }
.cohort-meta .sep{ color:var(--ink-5); }
.view-switcher{
  display:flex; gap:8px; margin: 16px 0 24px;
  border-bottom: 1px solid var(--rule); padding-bottom: 16px;
}

/* Subnav: vendor rule styles only `<button>` inside .tabs. Extend to
   anchor links so we can wire real routes to the Today/Week/Record tabs. */
.subnav .tabs a.tab,
.subnav .tabs button.tab{
  appearance:none; background:transparent; border:0; cursor:pointer;
  padding: 10px 18px; color:var(--ink-3); font: inherit; font-weight:500;
  font-family:var(--sans); font-size:13px; text-decoration:none;
  border-bottom: 2px solid transparent; margin-bottom:-11px;
}
.subnav .tabs a.tab.on,
.subnav .tabs button.tab.on,
.subnav .tabs .tab.on{
  color:var(--crimson); border-bottom-color:var(--crimson); font-weight:600;
}
.subnav .tabs a.tab:hover,
.subnav .tabs button.tab:hover{ color:var(--crimson); }
.subnav .tabs .tab .zh{ font-style:normal; color:var(--ink-4); margin-left:4px; }
.subnav .tabs .tab.on .zh{ color:var(--crimson); }

/* Traj panel = one-subject GPA chart + caption */
.traj{ background:var(--bg); border:1px solid var(--rule); padding:18px 20px; }
.traj h3{
  font-family:var(--serif); font-size:17px; font-weight:600;
  margin: 0 0 10px; letter-spacing:-0.01em;
}
.traj h3 .count{
  font-family:var(--sans); font-size:11px; color:var(--ink-4); font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; margin-left:10px;
}
.traj-svg{ width:100%; height:auto; display:block; }

/* Reinforce button[type=submit] that carries .btn classes */
button.btn{ font-family:var(--sans); }

/* Family-side helpers for task 9-10: read-only tasklist + checklist */
.wrap-narrow{ max-width:820px; margin:0 auto; padding: 40px 24px 80px; }
.tasklist.read-only .task-row{ cursor:default; }
.tasklist.read-only .task-row:hover{ background:var(--bg); }
.checklist .check-row[style*="cursor:default"]:hover{ background:var(--bg); }

/* ============================================================
   LOGIN PAGE — Task 12
   ============================================================ */
.login-page { min-height: 100vh; background: var(--bg-2); }
.login-wrap { max-width: 480px; margin: 0 auto; padding: 40px 24px; }
.login-mast { display: flex; align-items: center; gap: 14px; padding: 16px 0 32px; border-bottom: 1px solid var(--rule); }
.shield-mini { width: 32px; height: 38px; background: var(--crimson); clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); display: flex; align-items: center; justify-content: center; color: white; font-family: var(--serif); font-weight: 600; font-size: 20px; }
.login-brand .wordmark { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.login-brand .sub { font-size: 12px; color: var(--ink-4); letter-spacing: 0.04em; }
.login-card { background: var(--bg); border: 1px solid var(--rule); padding: 40px 32px; margin-top: 32px; }
.login-error { background: var(--red-bg); border: 1px solid var(--red-bd); padding: 10px 14px; color: var(--red); font-size: 13px; margin: 16px 0 0; }
.login-form { display: grid; gap: 16px; margin-top: 28px; }
.login-label { display: grid; gap: 6px; }
.login-input { border: 1px solid var(--rule); padding: 10px 12px; font-family: var(--sans); font-size: 14px; background: var(--bg); }
.login-input:focus { outline: none; border-color: var(--ink); }
.login-submit { margin-top: 8px; width: 100%; justify-content: center; }
.login-foot { text-align: center; margin-top: 24px; color: var(--ink-4); font-size: 11px; letter-spacing: 0.1em; }

/* ============================================================
   TWEAKS PANEL + TOAST — Task 12
   ============================================================ */
.tweaks { position: fixed; bottom: 20px; right: 20px; z-index: 50; }
.tweaks-toggle { width: 40px; height: 40px; border: 1px solid var(--ink-3); background: var(--bg); font-size: 18px; cursor: pointer; }
.tweaks-toggle:hover { border-color: var(--crimson); color: var(--crimson); }
.tweaks-body { position: absolute; bottom: 48px; right: 0; background: var(--bg); border: 1px solid var(--ink-3); padding: 16px; width: 220px; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.tweaks-group { margin-bottom: 14px; }
.tweaks-group:last-child { margin-bottom: 0; }
.tweaks-row { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.tweaks-btn { flex: 1; border: 1px solid var(--rule); background: var(--bg); padding: 4px 8px; font-size: 11px; cursor: pointer; }
.tweaks-btn:hover { border-color: var(--crimson); color: var(--crimson); }

.toast { position: fixed; bottom: 80px; right: 20px; background: var(--ink); color: var(--bg); padding: 12px 20px; font-size: 13px; opacity: 0; transform: translateY(10px); transition: opacity .15s, transform .15s; z-index: 60; box-shadow: 0 8px 28px rgba(0,0,0,.25); pointer-events: none; max-width: 320px; }
.toast.show { opacity: 1; transform: translateY(0); }

/* ============================================================
   v3.1 — Login language toggle
   ============================================================ */
.login-lang-toggle { display: flex; gap: 12px; padding: 12px 0; font-family: var(--sans); font-size: 12px; }
.login-lang-toggle a { color: var(--ink-4); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; }
.login-lang-toggle a.on { color: var(--crimson); font-weight: 600; }
.login-lang-toggle a:hover { color: var(--ink); }

/* ============================================================
   v3.1 — Mobile responsiveness
   Cohort grid + split panels collapse to 1 col below ~760px so
   cards stay readable on 414px phones (Norman's feedback after v3).
   ============================================================ */
@media (max-width: 760px) {
  .student-grid, .cohort-grid, .grid-3 { grid-template-columns: 1fr !important; gap: 12px; }
  .masthead .nav, .mast-nav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .stats-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .split-2, .detail-grid, .fb-grid-2 { grid-template-columns: 1fr !important; gap: 16px; }
  .wrap { padding: 16px !important; }
  .display-h1 { font-size: 28px !important; }
  .dt { font-size: 12px; }
  .heat-tbl, .dt { overflow-x: auto; }
  .kbd-hint, .kbd { display: none; }
  .gpa-form { grid-template-columns: 1fr !important; }
  .log-grid { grid-template-columns: 1fr !important; gap: 12px; }
}

/* ============================================================
   v3.2 — Special A logo + pill-style language toggle
   Norman's v3.1 feedback: the raw blue underline <a> toggle + the
   CSS-clip-path "T" shield + the wordy "The Advisory." h1 were ugly.
   This block adds:
     .lang-toggle   pill-style segmented control (zh / en)
     .lang-chip     segment button
     .login-logo    centered brand image on the login page
     .mast-logo     masthead brand image (teacher + family)
   Old .shield / .shield-mini / .share-shield / .login-lang-toggle
   rules above are retained but no longer referenced; safe to prune
   in a later cleanup pass.
   ============================================================ */

/* Pill-style language toggle (login page) */
.lang-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 32px auto 24px;
  border: 1px solid var(--ink-3);
  width: fit-content;
}
.lang-chip {
  padding: 6px 16px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  background: transparent;
  border: 0;
}
.lang-chip.on { background: var(--ink); color: var(--bg); }
.lang-chip:first-child { border-right: 1px solid var(--ink-3); }
.lang-chip:not(.on):hover { background: var(--bg-2); color: var(--ink); }

/* Login logo image block (replaces the clip-path .shield-mini + wordmark) */
.login-logo { text-align: center; margin: 8px auto 24px; }
.login-logo img { display: inline-block; height: auto; max-width: 100%; }

/* Masthead brand logo (teacher + family + base default) */
.mast-logo {
  height: 44px;
  width: auto;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* v3.3 — masthead lang chip mini (replaces Tweaks panel lang toggle) */
.utility { display: flex; align-items: center; gap: 8px; }
.lang-chip-mini {
  padding: 4px 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  border: 1px solid var(--rule);
}
.lang-chip-mini.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lang-chip-mini:not(.on):hover { color: var(--ink); border-color: var(--ink-3); }

/* v3.3 — kill anchor default styles inside whole-card links */
.s-card { color: var(--ink); text-decoration: none; display: block; }
.s-card:hover { border-color: var(--ink); }
.s-card * { color: inherit; text-decoration: none; }
.s-card .stats .v em,
.s-card em.crimson,
.s-card .crimson { color: var(--crimson) !important; }

.inbox-row, a.inbox-row, .heat-name, a.heat-name { color: var(--ink); text-decoration: none; }
.inbox-row *, a.inbox-row * { color: inherit; text-decoration: none; }
.inbox-row:hover, a.inbox-row:hover { background: var(--bg-2); }

/* v3.4 — schedule time labels */
.tasklist.with-time .task-row{
  grid-template-columns: 22px 56px 100px 1fr auto;
}
.tl-time{
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.wp-row .blocks .b .wp-time{
  color: var(--crimson); font-style: normal; font-family: var(--mono);
  font-size: 11px; margin-right: 6px; font-variant-numeric: tabular-nums;
}

/* ============================================================
   v3.5 — Stat row as connected hairline-divided strip
   Norman: 4 separate boxed cards looked busy; Harvard institutional
   rule joins the cells into a single information row with hairlines.
   ============================================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--bg);
  margin-bottom: 24px;
}
.stats-row.three-up { grid-template-columns: repeat(3, 1fr); }
.stats-row .stat,
.stats-row .stat-card {
  border: none;
  border-right: 1px solid var(--rule);
  padding: 16px 20px;
  background: transparent;
  margin: 0;
}
.stats-row .stat:last-child,
.stats-row .stat-card:last-child { border-right: none; }

/* v3.5 — stat label / value rhythm tightened */
.stats-row .stat .k,
.stats-row .stat-card .eyebrow,
.stats-row .stat-card .k { margin-bottom: 8px; font-size: 11px; }
.stats-row .stat .v,
.stats-row .stat-card .stat-value,
.stats-row .stat-card .v {
  font-family: var(--serif); font-size: 36px; font-weight: 600;
  line-height: 1; letter-spacing: -0.02em;
}
.stats-row .stat .d,
.stats-row .stat-card .stat-sub,
.stats-row .stat-card .d {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  margin-top: 6px; font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
  }
  .stats-row .stat,
  .stats-row .stat-card {
    border-bottom: 1px solid var(--rule);
  }
  .stats-row .stat:nth-child(2n),
  .stats-row .stat-card:nth-child(2n) { border-right: none; }
  .stats-row .stat:nth-last-child(-n+2),
  .stats-row .stat-card:nth-last-child(-n+2) { border-bottom: none; }
}

/* === v4 admin: ledger table + empty state === */

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 14px;
  margin-top: var(--space-4, 24px);
}

.ledger thead th {
  text-align: left;
  font-weight: 500;
  color: var(--muted, #6b6b6b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  padding: var(--space-2, 12px) var(--space-3, 16px);
  border-bottom: 1px solid var(--ink, #1a1a1a);
}

.ledger tbody td {
  padding: var(--space-3, 16px);
  border-bottom: 1px solid var(--rule, #e6e6e6);
  vertical-align: top;
}

.ledger tbody tr:hover td {
  background: var(--paper-soft, #faf8f4);
}

.ledger td.actions {
  white-space: nowrap;
}

.ledger td.actions a,
.ledger td.actions button {
  margin-right: var(--space-2, 12px);
}

.ledger a.rl {
  color: var(--ink, #1a1a1a);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ledger a.rl:hover {
  color: var(--crimson, #a51c30);
  border-bottom-color: var(--crimson, #a51c30);
}

.empty {
  padding: var(--space-6, 48px) 0;
  color: var(--muted, #6b6b6b);
  font-style: italic;
  text-align: center;
}

.view-switcher .num {
  display: inline-block;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  color: var(--muted, #6b6b6b);
  margin-left: 4px;
}

/* === Flash messages (admin actions) === */
.flash-rail {
  max-width: 720px;
  margin: var(--space-3, 16px) auto 0;
  padding: 0 var(--space-3, 16px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flash {
  padding: 12px 16px;
  font-size: 14px;
  border-left: 3px solid var(--rule, #e6e6e6);
  background: var(--paper-soft, #faf8f4);
  font-family: var(--sans, Inter, sans-serif);
}

.flash.flash-success {
  border-left-color: var(--crimson, #a51c30);
}

.flash.flash-error {
  border-left-color: #b91c1c;
}

/* === v4 profile tab === */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5, 32px);
  margin-top: var(--space-4, 24px);
  max-width: 880px;
}

.profile-block {
  border-top: 1px solid var(--ink, #1a1a1a);
  padding-top: var(--space-3, 16px);
}

.profile-block .section-title {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #6b6b6b);
  margin: 0 0 var(--space-3, 16px) 0;
}

.profile-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--space-3, 16px);
  margin: 0;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 14px;
}

.profile-dl dt {
  color: var(--muted, #6b6b6b);
}

.profile-dl dd {
  margin: 0;
}

.snap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 14px;
}

.snap-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule, #e6e6e6);
}

.snap-label {
  color: var(--muted, #6b6b6b);
}

.snap-num {
  font-family: var(--mono, "JetBrains Mono", monospace);
}

.profile-notes {
  font-family: var(--serif, "Source Serif 4", serif);
  line-height: 1.6;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 11px;
  border: 1px solid var(--ink, #1a1a1a);
}

.badge.dim {
  color: var(--muted, #6b6b6b);
  border-color: var(--rule, #e6e6e6);
}

@media (max-width: 760px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

/* === v4 calendar dual-column === */
.wrap.wide { max-width: 1200px; }

.weeknav {
  display: flex;
  gap: var(--space-3, 16px);
  font-family: var(--mono, monospace);
  font-size: 12px;
  margin-top: var(--space-3, 16px);
}
.weeknav a { color: var(--ink, #1a1a1a); text-decoration: none; }
.weeknav a:hover { color: var(--crimson, #a51c30); }

.cal-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-5, 32px);
  margin-top: var(--space-5, 32px);
  align-items: start;
}

.cal-left .section-title,
.cal-right .section-title {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #6b6b6b);
  border-top: 1px solid var(--ink, #1a1a1a);
  padding-top: var(--space-3, 16px);
  margin: 0 0 var(--space-3, 16px) 0;
}

.weekgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2, 12px);
}

.day-col {
  border-right: 1px solid var(--rule, #e6e6e6);
  padding-right: var(--space-2, 12px);
  min-height: 120px;
}
.day-col:last-child { border-right: 0; }

.day-head {
  font-size: 10px;
  color: var(--muted, #6b6b6b);
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-2, 12px) 0;
}

.cal-block {
  display: block;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--paper-soft, #faf8f4);
  text-decoration: none;
  color: var(--ink, #1a1a1a);
  font-family: var(--sans, Inter, sans-serif);
  font-size: 12px;
  line-height: 1.4;
  border-left: 2px solid var(--rule, #e6e6e6);
}
.cal-block:hover { border-left-color: var(--crimson, #a51c30); }

.cal-time { display: block; font-size: 10px; color: var(--muted, #6b6b6b); }
.cal-name { font-weight: 500; }
.cal-task { display: block; color: var(--muted, #6b6b6b); }

.inbox-group { margin-bottom: var(--space-4, 24px); }
.inbox-group h3 {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 12px;
  font-weight: 500;
  margin: 0 0 var(--space-2, 12px) 0;
  color: var(--ink, #1a1a1a);
}
.inbox-group h3 .num {
  font-family: var(--mono, monospace);
  color: var(--muted, #6b6b6b);
  margin-left: 4px;
}

.inbox-group.prio-red h3::before { content: "● "; color: var(--crimson, #a51c30); }
.inbox-group.prio-amber h3::before { content: "● "; color: #d97706; }
.inbox-group.prio-yellow h3::before { content: "● "; color: #ca8a04; }

.inbox-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-2, 12px);
  padding: 6px 0;
  border-bottom: 1px solid var(--rule, #e6e6e6);
  text-decoration: none;
  color: var(--ink, #1a1a1a);
  font-family: var(--sans, Inter, sans-serif);
  font-size: 13px;
  align-items: baseline;
}
.inbox-row:hover .ix-go { color: var(--crimson, #a51c30); }
.ix-name { color: var(--ink, #1a1a1a); }
.ix-time { color: var(--muted, #6b6b6b); font-size: 11px; }
.ix-go { color: var(--muted, #6b6b6b); font-size: 11px; }

.empty-state {
  padding: var(--space-5, 32px) 0;
  text-align: center;
  color: var(--muted, #6b6b6b);
  font-style: italic;
}

@media (max-width: 980px) {
  .cal-split { grid-template-columns: 1fr; }
  .weekgrid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
  .weekgrid { grid-template-columns: repeat(2, 1fr); }
}

/* === v4 archive === */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 16px);
  align-items: end;
  margin: var(--space-4, 24px) 0;
  padding: var(--space-3, 16px);
  border-top: 1px solid var(--ink, #1a1a1a);
  border-bottom: 1px solid var(--rule, #e6e6e6);
  font-family: var(--sans, Inter, sans-serif);
  font-size: 13px;
}
.filter-bar label { display: flex; flex-direction: column; gap: 4px; color: var(--muted, #6b6b6b); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.filter-bar select, .filter-bar input[type="date"] {
  font-family: var(--sans, Inter, sans-serif);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--rule, #e6e6e6);
  background: white;
}

.chip-row { display: flex; gap: 4px; }
.chip {
  padding: 4px 10px;
  border: 1px solid var(--rule, #e6e6e6);
  font-family: var(--mono, monospace);
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink, #1a1a1a);
}
.chip.active { background: var(--ink, #1a1a1a); color: white; border-color: var(--ink, #1a1a1a); }

.type-badge {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  border: 1px solid var(--rule, #e6e6e6);
  color: var(--muted, #6b6b6b);
  text-transform: uppercase;
}

.paginator {
  display: flex;
  gap: var(--space-3, 16px);
  align-items: center;
  justify-content: center;
  padding: var(--space-4, 24px) 0;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 13px;
}
.paginator a { color: var(--ink, #1a1a1a); text-decoration: none; }
.paginator a:hover { color: var(--crimson, #a51c30); }
.page-num { color: var(--muted, #6b6b6b); }

/* === v4 masthead nav links === */
.masthead .nav {
  display: flex;
  gap: var(--space-4, 24px);
  font-family: var(--sans, Inter, sans-serif);
  font-size: 13px;
  align-items: center;
}

.masthead .nav a {
  color: var(--ink, #1a1a1a);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.02em;
}

.masthead .nav a:hover {
  color: var(--crimson, #a51c30);
}

.masthead .nav a.nav-active {
  color: var(--crimson, #a51c30);
  border-bottom-color: var(--crimson, #a51c30);
}

@media (max-width: 760px) {
  .masthead .nav {
    overflow-x: auto;
    white-space: nowrap;
    font-size: 12px;
    gap: var(--space-3, 16px);
  }
}

/* === v5 self-plan block === */
.self-plan-block {
  margin-top: var(--space-5, 32px);
  border-top: 1px solid var(--ink, #1a1a1a);
  padding-top: var(--space-3, 16px);
}
.self-plan-block .block-title {
  font-family: var(--serif, "Source Serif 4", serif);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 var(--space-3, 16px) 0;
}
.self-plan-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-3, 16px) 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.self-plan-form fieldset legend {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b6b6b);
  margin-bottom: 6px;
  padding: 0;
}
.self-plan-form input[type="text"],
.self-plan-form textarea {
  font-family: var(--serif, "Source Serif 4", serif);
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--rule, #e6e6e6);
  background: white;
  width: 100%;
  box-sizing: border-box;
}
.self-plan-form label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b6b6b);
  margin-bottom: var(--space-3, 16px);
}
.self-plan-snapshot {
  font-family: var(--serif, "Source Serif 4", serif);
  padding-left: var(--space-3, 16px);
}
.teacher-feedback {
  margin-top: var(--space-4, 24px);
  border-left: 2px solid var(--crimson, #a51c30);
  padding-left: var(--space-3, 16px);
}
.teacher-feedback .feedback-body {
  font-family: var(--serif, "Source Serif 4", serif);
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
}

/* === v5 self-plan review === */
.review-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-5, 32px);
  margin-top: var(--space-4, 24px);
}
.review-left .draft { padding-left: var(--space-3, 16px); border-left: 2px solid var(--rule, #e6e6e6); }
.ai-panel {
  background: var(--paper-soft, #faf8f4);
  padding: var(--space-3, 16px);
  font-size: 13px;
  margin-bottom: var(--space-4, 24px);
}
.ai-panel ul { margin: 0 0 var(--space-3, 16px) 0; padding-left: var(--space-3, 16px); }
.feedback-editor textarea {
  font-family: var(--serif, "Source Serif 4", serif);
  width: 100%;
  font-size: 14px;
  padding: var(--space-3, 16px);
  border: 1px solid var(--rule, #e6e6e6);
  box-sizing: border-box;
}

@media (max-width: 980px) { .review-split { grid-template-columns: 1fr; } }

/* === v5.2 monthly === */
.fam-wrap { max-width: 720px; margin: 0 auto; padding: var(--space-4, 24px); }
.fam-month-head { display: flex; justify-content: space-between; align-items: baseline; }
.month-letter {
  margin: var(--space-4, 24px) 0;
  padding: var(--space-3, 16px);
  border-left: 2px solid var(--crimson, #a51c30);
}
.letter-body {
  font-family: var(--serif, "Source Serif 4", serif);
  font-size: 16px;
  line-height: 1.7;
  white-space: pre-wrap;
}
.month-section { margin: var(--space-4, 24px) 0; }
.month-section .section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #6b6b6b);
  border-top: 1px solid var(--rule, #e6e6e6);
  padding-top: var(--space-2, 12px);
}
.checkrow {
  display: flex;
  align-items: center;
  gap: var(--space-3, 16px);
  padding: 6px 0;
  border-bottom: 1px solid var(--rule, #e6e6e6);
}
.checkrow .check {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  color: var(--ink, #1a1a1a);
}
.checkrow .check.done { color: var(--crimson, #a51c30); }
.checkrow .title { flex: 1; font-family: var(--serif, "Source Serif 4", serif); font-size: 15px; }
.checkrow .title.done { text-decoration: line-through; color: var(--muted, #6b6b6b); }
.checkrow .source { font-size: 11px; color: var(--muted, #6b6b6b); }
.month-add-form {
  display: flex;
  gap: 8px;
  margin-top: var(--space-3, 16px);
}
.month-add-form input[type="text"] {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--rule, #e6e6e6);
  font-family: var(--serif, "Source Serif 4", serif);
  font-size: 14px;
}

/* === v5.3 yearly timeline === */
.fam-year-head { margin-bottom: var(--space-4, 24px); }
.year-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--rule, #e6e6e6);
}
.month-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-3, 16px);
  padding: var(--space-3, 16px) 0;
  position: relative;
}
.month-row::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 22px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--rule, #e6e6e6);
  background: white;
  border-radius: 50%;
}
.month-row.has-items::before {
  background: var(--crimson, #a51c30);
  border-color: var(--crimson, #a51c30);
}
.month-marker {
  font-size: 12px;
  color: var(--muted, #6b6b6b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-left: var(--space-3, 16px);
}
.month-items { font-family: var(--serif, "Source Serif 4", serif); }
.month-items .checkrow { padding: 4px 0; border: none; }
.month-items .kind {
  font-size: 11px;
  padding: 1px 6px;
  border: 1px solid var(--rule, #e6e6e6);
  color: var(--muted, #6b6b6b);
}

/* === v5.3 yearly edit table === */
.year-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans, Inter, sans-serif);
  font-size: 13px;
  margin: var(--space-3, 16px) 0;
}
.year-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted, #6b6b6b);
  border-bottom: 1px solid var(--ink, #1a1a1a);
  padding: var(--space-2, 12px);
}
.year-table td { padding: var(--space-2, 12px); border-bottom: 1px solid var(--rule, #e6e6e6); }
.year-table input[type="text"], .year-table input[type="month"], .year-table select {
  padding: 4px 6px;
  border: 1px solid var(--rule, #e6e6e6);
  font-size: 13px;
  width: 100%;
}