:root{
  --ground:#EEF0EC; --surface:#FFFFFF; --surface-2:#F5F7F3; --ink:#1B2129; --ink-2:#4E5863; --ink-3:#7D8893;
  --rule:#D3D9D1; --rule-2:#E4E8E1; --grid:#E6EAE3; --grid-strong:#AEB7AC;
  --accent:#2149C9; --accent-ink:#FFFFFF; --accent-soft:#E3E9FB; --red:#C4312A; --red-soft:#FBE7E5;
  --warn:#9A5B00; --warn-soft:#FFF0D4; --ok:#1F7A4D;
  --shadow:0 10px 30px rgba(20,30,40,.16), 0 1px 3px rgba(20,30,40,.08);
  --p1:#4A56D2; --p2:#128B86; --p3:#1F6BD0; --p4:#D2681A; --p5:#C4312A; --p6:#B0348F;
  --p7:#5F8A12; --p8:#9A6A1D; --p9:#7539BB; --p10:#1789B2; --p11:#2C7A57; --p12:#5B6470;
  --type-core:#2149C9; --type-major:#7539BB; --type-minor:#128B86; --type-elective:#B0680E;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --lane:26px; --label-w:230px; --top-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#14171B; --surface:#1D2126; --surface-2:#22272D; --ink:#E7E9E4; --ink-2:#B5BCC4; --ink-3:#818B95;
    --rule:#343B44; --rule-2:#2A3037; --grid:#282E35; --grid-strong:#4F5963;
    --accent:#8CA5FF; --accent-ink:#0E1633; --accent-soft:#263252; --red:#FF837B; --red-soft:#4A2422;
    --warn:#F2B75C; --warn-soft:#3E3018; --ok:#5CC48F;
    --shadow:0 12px 34px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
    --p1:#7B85F0; --p2:#2FB0AA; --p3:#4C8FEA; --p4:#EA8A3C; --p5:#E85A52; --p6:#D25CB4;
    --p7:#8BB93A; --p8:#C29040; --p9:#A06BE0; --p10:#3FAEDA; --p11:#4FA37E; --p12:#8A93A0;
    --type-core:#8CA5FF; --type-major:#C7A4F5; --type-minor:#5FCFC7; --type-elective:#F2B75C;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#14171B; --surface:#1D2126; --surface-2:#22272D; --ink:#E7E9E4; --ink-2:#B5BCC4; --ink-3:#818B95;
  --rule:#343B44; --rule-2:#2A3037; --grid:#282E35; --grid-strong:#4F5963;
  --accent:#8CA5FF; --accent-ink:#0E1633; --accent-soft:#263252; --red:#FF837B; --red-soft:#4A2422;
  --warn:#F2B75C; --warn-soft:#3E3018; --ok:#5CC48F;
  --shadow:0 12px 34px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  --p1:#7B85F0; --p2:#2FB0AA; --p3:#4C8FEA; --p4:#EA8A3C; --p5:#E85A52; --p6:#D25CB4;
  --p7:#8BB93A; --p8:#C29040; --p9:#A06BE0; --p10:#3FAEDA; --p11:#4FA37E; --p12:#8A93A0;
  --type-core:#8CA5FF; --type-major:#C7A4F5; --type-minor:#5FCFC7; --type-elective:#F2B75C;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground); color:var(--ink); font:14px/1.45 var(--sans); -webkit-font-smoothing:antialiased}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
button:focus-visible,[contenteditable]:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.dot:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
[contenteditable]{outline-offset:2px; border-radius:3px}
[contenteditable]:hover{box-shadow:0 0 0 1px var(--rule)}
[contenteditable]:focus{box-shadow:0 0 0 2px var(--accent); outline:none; background:var(--surface)}
input[type=text],input[type=number],input[type=password],textarea,select{font:inherit; color:var(--ink); background:var(--surface-2); border:1px solid var(--rule); border-radius:6px; padding:6px 8px}
input[type=number]{width:64px; font-family:var(--mono)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
a{color:var(--accent)}

/* ---------- login page ---------- */
.authwrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.authcard{width:min(400px,100%); background:var(--surface); border:1px solid var(--rule); border-radius:16px; box-shadow:var(--shadow); padding:28px 26px}
.authcard h1{margin:0 0 4px; font:600 22px var(--display); letter-spacing:-.01em}
.authcard p.lede{margin:0 0 20px; color:var(--ink-3); font-size:13px; line-height:1.5}
.authcard label{display:block; font-size:12px; color:var(--ink-2); margin:14px 0 5px; letter-spacing:.02em}
.authcard input{width:100%}
.authcard .btn.primary{width:100%; justify-content:center; margin-top:20px; padding:10px 12px}
.authcard .err{margin-top:12px; padding:9px 11px; background:var(--red-soft); color:var(--red); border-radius:8px; font-size:12.5px}
.authcard .hint{margin-top:16px; font-size:12px; color:var(--ink-3); line-height:1.5}
.authcard .setup-badge{display:inline-block; margin-bottom:10px; padding:2px 9px; border-radius:20px; background:var(--accent-soft); color:var(--accent); font:600 11px var(--mono); letter-spacing:.04em; text-transform:uppercase}

/* ---------- top bar ---------- */
.top{position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--top-h); padding:8px 24px; background:var(--surface); border-bottom:1px solid var(--rule)}
.brand{min-width:0}
.brand h1{margin:0; font:600 21px/1.15 var(--display); letter-spacing:-.01em; text-wrap:balance}
.brand p{margin:2px 0 0; color:var(--ink-3); font-size:12.5px}
.tools{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.btn{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); font-weight:500; font-size:13px; white-space:nowrap}
a.btn{color:var(--ink); text-decoration:none}
.btn:hover{background:var(--surface-2); border-color:var(--grid-strong)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.btn.primary:hover{filter:brightness(1.05)}
.btn.danger{color:var(--red)}
.btn:disabled{opacity:.45; cursor:default}
.seg{display:inline-flex; border:1px solid var(--rule); border-radius:8px; overflow:hidden; background:var(--surface)}
.seg button{padding:7px 14px; font-weight:500; font-size:13px; color:var(--ink-2)}
.seg button.on{background:var(--ink); color:var(--ground)}
.save{font:12px var(--mono); color:var(--ink-3); white-space:nowrap}
.save.dirty{color:var(--warn)}
.who{display:flex; align-items:center; gap:8px; padding:5px 6px 5px 5px; border:1px solid var(--rule); border-radius:20px; font-size:12.5px}
.who .av{width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font:600 11px var(--mono)}
.who .role{color:var(--ink-3); font-size:11px; text-transform:uppercase; letter-spacing:.04em}

/* ---------- notice ---------- */
.notice{display:flex; gap:14px; align-items:center; margin:18px 24px 0; padding:10px 14px; background:var(--accent-soft); border:1px solid transparent; border-radius:10px; font-size:13px; color:var(--ink-2)}
.notice b{color:var(--ink)}
.notice button{margin-left:auto; font-weight:600; color:var(--accent); white-space:nowrap}

/* ---------- app shell ---------- */
.app{display:grid; grid-template-columns:270px minmax(0,1fr); gap:24px; padding:20px 24px 80px; align-items:start}
.rail{position:sticky; top:calc(var(--top-h) + 16px); max-height:calc(100vh - var(--top-h) - 32px); overflow:auto; padding:16px 16px 14px; background:var(--surface); border:1px solid var(--rule); border-radius:12px}
.rail h2{margin:0 0 2px; font:600 15px/1.2 var(--display)}
.rail .lede{margin:0 0 12px; font-size:12px; color:var(--ink-3)}
.plos{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.plo{display:grid; grid-template-columns:28px minmax(0,1fr) auto auto auto; align-items:center; gap:8px; padding:5px 6px; border-radius:8px}
.plo:hover{background:var(--surface-2)}
.plo.focus{background:var(--accent-soft)}
.plo.faded{opacity:.45}
.dot{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:500 12px var(--mono); color:#fff; background:var(--c); border:2px solid transparent}
.plo.focus .dot{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--c)}
.plo .name{font-size:13px; line-height:1.3; padding:1px 4px; min-width:0; overflow-wrap:anywhere}
.plo .cnt{font:11.5px var(--mono); color:var(--ink-3); padding:1px 6px; border-radius:10px; background:var(--surface-2); min-width:26px; text-align:center}
.plo .cnt.zero{color:var(--warn); background:var(--warn-soft)}
.swatch{width:16px; height:16px; border-radius:50%; background:var(--c); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--rule); opacity:.5; flex:none}
.plo:hover .swatch,.plo:focus-within .swatch{opacity:1}
.swatch:hover{box-shadow:0 0 0 1px var(--grid-strong); transform:scale(1.1)}
.plo .x{width:22px; height:22px; border-radius:6px; color:var(--ink-3); font-size:15px; line-height:1; opacity:.35}
.plo:hover .x,.plo:focus-within .x{opacity:1}
.plo .x:hover{background:var(--red-soft); color:var(--red)}
.rail .hint{margin:12px 0 0; font-size:11.5px; color:var(--ink-3); line-height:1.4}
.addbtn{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; margin-top:8px; border:1px dashed var(--grid-strong); border-radius:8px; font-size:12.5px; font-weight:500; color:var(--ink-2)}
.addbtn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}

/* ---------- years & boards ---------- */
.year{margin-bottom:44px}
.yhead{display:flex; align-items:baseline; gap:14px; margin:0 0 12px; flex-wrap:wrap}
.yhead h2{margin:0; font:700 clamp(22px,2.4vw,30px)/1.05 var(--display); letter-spacing:-.015em}
.yhead .meta{font:12px var(--mono); color:var(--ink-3)}
.yhead .del{margin-left:auto; font-size:12px; color:var(--ink-3)}
.yhead .del:hover{color:var(--red)}
.board{background:var(--surface); border:1px solid var(--rule); border-radius:12px; margin-bottom:16px; overflow-x:auto}
.binner{min-width:900px}
.bhead{display:grid; grid-template-columns:var(--label-w) minmax(0,1fr); align-items:end; border-bottom:1px solid var(--rule)}
.bhead .sem{padding:12px 14px 10px}
.bhead .sem h3{margin:0; font:600 17px/1.2 var(--display)}
.bhead .sem .tag{display:inline-block; margin-top:3px; font:11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.wk{display:grid; grid-template-columns:repeat(14,1fr); padding:10px 0 8px}
.wk span{position:relative; text-align:center; font:11.5px var(--mono); color:var(--ink-3); font-variant-numeric:tabular-nums}
.wk span.key{color:var(--ink); font-weight:500}
.wk span.key i{display:block; font-style:normal; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); margin-top:-1px}
.row{display:grid; grid-template-columns:var(--label-w) minmax(0,1fr); border-top:1px solid var(--rule-2)}
.bhead + .row{border-top:0}
.subj{display:flex; flex-direction:column; gap:5px; padding:12px 12px 12px 14px; border-right:1px solid var(--rule); min-width:0}
.subj .sn{font-weight:600; font-size:13.5px; line-height:1.3; padding:1px 4px; margin:-1px -4px; overflow-wrap:anywhere}
.subj .sub{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.subj .note{font-size:11.5px; color:var(--red); background:var(--red-soft); padding:1px 7px; border-radius:10px}
.subj .k{font:11px var(--mono); color:var(--ink-3)}
.subj .coord{font-size:11.5px; color:var(--ink-3)}
.subj .coord b{color:var(--ink-2); font-weight:500}
.subj .more{width:24px; height:22px; border-radius:6px; color:var(--ink-3); font-size:16px; line-height:1; letter-spacing:.05em}
.subj .more:hover{background:var(--surface-2); color:var(--ink)}
.stype{display:inline-flex; align-items:center; gap:4px; padding:1px 7px 1px 6px; border-radius:10px; font:600 10px var(--mono); letter-spacing:.05em; text-transform:uppercase; color:#fff; background:var(--tc)}
.stype.core{--tc:var(--type-core)} .stype.major{--tc:var(--type-major)} .stype.minor{--tc:var(--type-minor)} .stype.elective{--tc:var(--type-elective)}

.tl{position:relative; display:grid; grid-template-columns:repeat(14,1fr); grid-auto-rows:var(--lane); padding:10px 0 8px; cursor:copy;
  background-image:repeating-linear-gradient(to right, transparent 0, transparent calc(100%/14 - 1px), var(--grid) calc(100%/14 - 1px), var(--grid) calc(100%/14));}
.tl.empty{grid-auto-rows:var(--lane)}
.tl .ph{grid-column:1 / -1; grid-row:1; align-self:center; justify-self:center; font-size:12px; color:var(--ink-3); pointer-events:none}
.mk{position:absolute; top:0; bottom:0; left:calc(100% * var(--w) / 14); border-left:1.5px dashed var(--grid-strong); pointer-events:none; z-index:0}
.mk.mid{border-color:var(--red); opacity:.55}
.ms{position:absolute; top:-9px; left:calc(100% * (var(--w) - .5) / 14); transform:translateX(-50%); width:18px; height:18px; border-radius:50%; border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); font:500 9.5px var(--mono); display:grid; place-items:center; z-index:3; pointer-events:none}
.bar{position:relative; z-index:1; display:flex; align-items:center; gap:5px; height:calc(var(--lane) - 4px); margin:2px 1px; padding:0 8px 0 3px; border-radius:6px; background:var(--c); color:#fff; font-size:12px; cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none; overflow:hidden; min-width:0; transition:opacity .15s}
.bar:active{cursor:grabbing}
.bar .n{flex:none; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.24); display:grid; place-items:center; font:500 11px var(--mono)}
.bar .t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; min-width:0}
.bar .t em{font-style:normal; opacity:.8; font-weight:400}
.bar .ai{flex:none; width:15px; height:15px; opacity:.92}
.bar .ai svg{display:block; width:100%; height:100%}
.bar .h{position:absolute; top:0; bottom:0; width:9px; cursor:ew-resize; z-index:2}
.bar .h.l{left:0} .bar .h.r{right:0}
.bar .h::after{content:""; position:absolute; top:6px; bottom:6px; left:3px; width:2px; border-radius:2px; background:rgba(255,255,255,.55); opacity:0; transition:opacity .15s}
.bar:hover .h::after{opacity:1}
.bar.tent{background:transparent; border:1.5px dashed var(--c); color:var(--c); height:calc(var(--lane) - 5px)}
.bar.tent .n{background:var(--c); color:#fff}
.bar.tent .h::after{background:var(--c)}
.bar.dim{opacity:.13}
.bar.drag{opacity:.9; box-shadow:var(--shadow); z-index:5}
.addrow{padding:8px 14px 10px; border-top:1px solid var(--rule-2)}
.addyear{margin-top:8px}

/* ---------- assessment hover tooltip ---------- */
.atip{position:fixed; z-index:65; width:260px; max-width:calc(100vw - 16px); background:var(--ink); color:var(--ground); border-radius:10px; padding:10px 12px; font-size:12px; line-height:1.45; box-shadow:var(--shadow); pointer-events:none}
.atip .code{display:inline-block; font:600 10px var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--ground); opacity:.6; margin-bottom:2px}
.atip .ttl{font:600 13px var(--display); margin-bottom:5px}
.atip .rows{display:grid; grid-template-columns:auto 1fr; gap:2px 8px; font-size:11.5px; opacity:.85}
.atip .rows b{font-weight:500; opacity:.7}
.atip .cta{margin-top:6px; font-size:10.5px; opacity:.6; letter-spacing:.02em}

/* ---------- matrix ---------- */
.matrix{background:var(--surface); border:1px solid var(--rule); border-radius:12px; overflow:auto}
.mx{border-collapse:separate; border-spacing:0; width:100%; min-width:900px; font-size:13px}
.mx th,.mx td{padding:0; border-bottom:1px solid var(--rule-2); text-align:center; vertical-align:middle}
.mx thead th{position:sticky; top:0; z-index:2; background:var(--surface); border-bottom:1px solid var(--rule); padding:12px 4px 10px}
.mx thead th:first-child,.mx td:first-child{text-align:left; padding-left:16px; padding-right:12px; min-width:250px}
.mx thead th .dot{margin:0 auto 4px}
.mx thead th small{display:block; font:10.5px/1.25 var(--sans); font-weight:400; color:var(--ink-3); max-width:76px; margin:0 auto; text-wrap:balance}
.mx .grp td{background:var(--surface-2); text-align:left; padding:8px 16px; font:600 12px var(--display); letter-spacing:.02em; color:var(--ink-2)}
.mx .grp td b{color:var(--ink); font-size:13px; margin-right:8px}
.mx td.sname{font-weight:500; padding:9px 12px 9px 16px}
.mx td.sname span{display:block; font:11px var(--mono); color:var(--ink-3); font-weight:400; margin-top:1px}
.mx td.cell{height:40px; width:64px}
.cov{display:inline-grid; place-items:center; min-width:34px; height:24px; padding:0 6px; border-radius:6px; font:500 12px var(--mono); color:#fff; background:var(--c)}
.cov.t{background:transparent; border:1.5px dashed var(--c); color:var(--c)}
.cov.none{color:var(--rule); font-size:14px}
.mx tr.tot td{background:var(--surface-2); font:500 12px var(--mono); color:var(--ink-2); height:34px; border-bottom:1px solid var(--rule)}
.mx tr.tot td:first-child{font:600 12px var(--sans); color:var(--ink-2)}
.mx tr.tot td.gap{color:var(--warn); background:var(--warn-soft)}
.gaps{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-bottom:16px}
.gap-card{background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:14px 16px}
.gap-card h4{margin:0 0 6px; font:600 14px var(--display)}
.gap-card p{margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.5}
.gap-card .chips{display:flex; flex-wrap:wrap; gap:4px; margin-top:6px}
.chip{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; font:500 11px var(--mono); color:#fff; background:var(--c)}
.gap-card .ok{color:var(--ok); font-weight:500}

/* ---------- assessments library ---------- */
.atools{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap}
.atools a.btn{text-decoration:none}
.importbox{display:flex; align-items:center; gap:12px; margin:6px 0 4px}
.importbox .fname{font-size:12.5px; color:var(--ink-3)}
.acards{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.acard{background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:8px; text-align:left; cursor:pointer}
.acard:hover{border-color:var(--grid-strong); box-shadow:var(--shadow)}
.acard .ahead{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.acard .code{font:600 11px var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3)}
.acard .ttl{font:600 15px var(--display); line-height:1.25; margin-top:1px}
.acard .weight{flex:none; font:600 13px var(--mono); color:var(--accent); background:var(--accent-soft); padding:2px 9px; border-radius:20px}
.acard .meta{font-size:12px; color:var(--ink-2); line-height:1.5}
.acard .links{display:flex; flex-wrap:wrap; gap:4px; margin-top:2px}
.acard .links .chip{width:auto; padding:0 8px; border-radius:12px}
.acard .none{font-size:11.5px; color:var(--ink-3); font-style:italic}
.newacard{border:1.5px dashed var(--grid-strong); border-radius:12px; display:flex; align-items:center; justify-content:center; min-height:120px; color:var(--ink-2); font-weight:500; gap:6px}
.newacard:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}

/* ---------- popover & modal ---------- */
.pop{position:fixed; z-index:60; width:320px; max-width:calc(100vw - 16px); background:var(--surface); border:1px solid var(--rule); border-radius:12px; box-shadow:var(--shadow); padding:14px; max-height:calc(100vh - 24px); overflow:auto}
.pop h4{margin:0 0 10px; font:600 14px var(--display)}
.pop label{display:block; font-size:11.5px; color:var(--ink-3); margin:10px 0 4px; letter-spacing:.02em}
.pop .picker{display:flex; flex-wrap:wrap; gap:6px}
.pop .picker .dot{width:28px; height:28px; cursor:pointer}
.pop .picker .dot.sel{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--c)}
.pop .picker .dot:hover{transform:translateY(-1px)}
.pop .rowf{display:flex; align-items:center; gap:8px}
.pop .rowf span{font-size:12.5px; color:var(--ink-2)}
.pop .foot{display:flex; gap:8px; margin-top:14px; align-items:center; flex-wrap:wrap}
.pop .foot .spacer{flex:1}
.pop .chips{display:flex; flex-wrap:wrap; gap:4px}
.pop .wchip{width:30px; height:26px; border:1px solid var(--rule); border-radius:6px; font:12px var(--mono); color:var(--ink-2); background:var(--surface-2)}
.pop .wchip.on{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.pop input[type=text],.pop select{width:100%}
.pop .check{display:flex; align-items:center; gap:8px; font-size:13px; margin-top:10px}
.pop .selname{font-size:12.5px; color:var(--ink-2); margin-top:6px; min-height:1.2em}
.pop .confirm{display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--red)}
.pop .alink-card{margin-top:6px; padding:9px 10px; background:var(--surface-2); border-radius:8px; font-size:12px}
.pop .alink-card .ttl{font-weight:600; margin-bottom:2px}
.pop .alink-actions{display:flex; gap:6px; margin-top:8px}
.modal p.hint{font-size:11.5px; color:var(--ink-3); line-height:1.5; margin-top:-6px}
.printpick{max-height:44vh; overflow:auto; border:1px solid var(--rule-2); border-radius:10px; padding:12px 14px}
.pp-year + .pp-year{margin-top:14px; padding-top:14px; border-top:1px solid var(--rule-2)}
.pp-year h4{margin:0 0 8px; font:600 13px var(--display)}
.pp-sem{margin-bottom:8px}
.pp-sem:last-child{margin-bottom:0}
.pp-semname{display:block; font:600 10.5px var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}
.pp-empty{font-size:12px; color:var(--ink-3); font-style:italic}
.pchk{display:flex; align-items:center; gap:7px; font-size:13px; padding:3px 0; cursor:pointer}
.pchk input{cursor:pointer}
.colorrow{display:flex; align-items:center; gap:10px; margin-top:6px}
.colorrow input[type=color]{width:44px; height:34px; padding:2px; border:1px solid var(--rule); border-radius:8px; background:var(--surface); cursor:pointer}
.colorrow .hex{font-size:12.5px; color:var(--ink-2); text-transform:uppercase}
.swatches{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.swatch-opt{width:100%; aspect-ratio:1; border-radius:8px; background:var(--c); border:2px solid transparent}
.swatch-opt:hover{border-color:var(--ink)}
.overlay{position:fixed; inset:0; z-index:70; background:rgba(15,20,26,.45); display:grid; place-items:center; padding:16px; overflow:auto}
.modal{width:min(640px,100%); background:var(--surface); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow); padding:20px; margin:auto}
.modal.wide{width:min(760px,100%)}
.modal h3{margin:0 0 6px; font:600 18px var(--display)}
.modal p{margin:0 0 12px; color:var(--ink-2); font-size:13px}
.modal textarea{width:100%; height:240px; font:12px/1.4 var(--mono); resize:vertical}
.modal .foot{display:flex; gap:8px; margin-top:12px; align-items:center; flex-wrap:wrap}
.modal .foot .spacer{flex:1}
.modal .msg{font-size:12.5px; color:var(--ok)}
.modal .msg.err{color:var(--red)}
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:80; background:var(--ink); color:var(--ground); padding:8px 14px; border-radius:8px; font-size:13px; box-shadow:var(--shadow); pointer-events:none; max-width:min(480px,calc(100vw - 32px)); text-align:center}

/* ---------- assessment form & detail (shared) ---------- */
.afield{display:flex; flex-direction:column; gap:4px; margin-bottom:12px}
.afield label{font-size:11.5px; color:var(--ink-3); letter-spacing:.02em}
.afield input,.afield textarea{width:100%}
.afield textarea{height:64px; resize:vertical; font-family:var(--sans); font-size:13px; line-height:1.45}
.afield.tall textarea{height:90px}
.agrid{display:grid; grid-template-columns:1fr 1fr; gap:0 14px}
.agrid3{display:grid; grid-template-columns:repeat(3,1fr); gap:0 14px}
.asection{margin-top:18px; padding-top:16px; border-top:1px solid var(--rule-2)}
.asection > h4{margin:0 0 10px; font:600 13px var(--display)}
.listrows{display:flex; flex-direction:column; gap:8px}
.listrow{display:flex; gap:8px; align-items:flex-start; background:var(--surface-2); border-radius:8px; padding:8px}
.listrow .lr-fields{flex:1; display:flex; flex-direction:column; gap:6px; min-width:0}
.listrow .lr-fields input,.listrow .lr-fields textarea{width:100%}
.listrow .lr-del{flex:none; width:26px; height:26px; border-radius:6px; color:var(--ink-3)}
.listrow .lr-del:hover{background:var(--red-soft); color:var(--red)}
.rubricrow{background:var(--surface-2); border-radius:10px; padding:10px; margin-bottom:8px}
.rubricrow .rr-top{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.rubricrow .rr-top input[type=text]{flex:1}
.rubricrow .rr-bands{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.rubricrow .rr-bands div{display:flex; flex-direction:column; gap:3px}
.rubricrow .rr-bands label{font:600 9.5px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3)}
.rubricrow .rr-bands textarea{height:64px; font-size:11.5px; line-height:1.35; resize:vertical}
@media (max-width:640px){ .rubricrow .rr-bands{grid-template-columns:1fr 1fr} .agrid,.agrid3{grid-template-columns:1fr} }

.detail-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:4px}
.detail-head .code{font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.detail-head h3{margin:2px 0 0}
.detail-weight{flex:none; text-align:center; background:var(--accent-soft); color:var(--accent); border-radius:12px; padding:6px 14px}
.detail-weight b{display:block; font:700 20px var(--mono)}
.detail-weight span{display:block; font-size:10px; letter-spacing:.05em; text-transform:uppercase}
.factgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 20px; margin:14px 0; font-size:13px}
.factgrid .f dt{font-size:11px; color:var(--ink-3); letter-spacing:.02em; margin-bottom:2px}
.factgrid .f dd{margin:0; color:var(--ink)}
.callout{background:var(--warn-soft); color:var(--warn); border-radius:10px; padding:10px 12px; font-size:12.5px; line-height:1.5; margin:14px 0}
.detail-section{margin:18px 0}
.detail-section h4{margin:0 0 8px; font:600 13px var(--display)}
.structlist{list-style:none; margin:0; padding:0; counter-reset:st; display:flex; flex-direction:column; gap:10px}
.structlist li{counter-increment:st; display:flex; gap:10px}
.structlist li::before{content:counter(st); flex:none; width:22px; height:22px; border-radius:50%; background:var(--surface-2); color:var(--ink-2); font:600 11px var(--mono); display:grid; place-items:center; margin-top:1px}
.structlist b{display:block; font-size:13px}
.structlist span{display:block; font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-top:1px}
.checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.checklist li{display:flex; gap:8px; font-size:13px; align-items:flex-start}
.checklist li::before{content:"☐"; color:var(--ink-3); flex:none}
.rubtable-wrap{overflow-x:auto; border:1px solid var(--rule-2); border-radius:10px}
.rubtable{border-collapse:collapse; width:100%; min-width:760px; font-size:12px}
.rubtable th,.rubtable td{border:1px solid var(--rule-2); padding:8px 10px; text-align:left; vertical-align:top; line-height:1.45}
.rubtable th{background:var(--surface-2); font:600 11px var(--sans); color:var(--ink-2)}
.rubtable td.crit{font-weight:600; width:150px}
.rubtable td.crit small{display:block; font:500 11px var(--mono); color:var(--ink-3); margin-top:2px}
.linkedwrap{margin:14px 0}
.linkedwrap ul{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.linkedwrap li{font-size:12.5px; color:var(--ink-2)}
.linkedwrap b{color:var(--ink)}

/* ---------- manage access ---------- */
.userlist{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.userrow{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:10px; padding:8px 10px; background:var(--surface-2); border-radius:8px}
.userrow .av{width:30px; height:30px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font:600 12px var(--mono)}
.userrow .nm{font-weight:500; font-size:13px}
.userrow .un{font:11px var(--mono); color:var(--ink-3)}
.userrow select{font-size:12px; padding:4px 6px}
.userrow .del{width:26px; height:26px; border-radius:6px; color:var(--ink-3)}
.userrow .del:hover{background:var(--red-soft); color:var(--red)}

@media (max-width:980px){
  .app{grid-template-columns:1fr}
  .rail{position:static; max-height:none}
  .plos{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  :root{--label-w:190px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

.print-only{display:none}

@page{ size: A4 landscape; margin: 12mm; }

@media print{
  :root{--top-h:0px}
  body{background:#fff; color:#111}
  .top{position:static; border:0; padding:0 0 8px}
  .tools,.notice,.addbtn,.hint,.subj .more,.plo .x,.plo .swatch,.yhead .del,.addrow,.bar .h{display:none !important}
  .app{display:none !important}
  .plos{display:grid; grid-template-columns:repeat(3,1fr); gap:0}
  .year{break-inside:avoid}
  .board{overflow:visible; break-inside:avoid}
  .binner{min-width:0}
  *{print-color-adjust:exact; -webkit-print-color-adjust:exact}

  .print-only{display:block}
  #printBoard .pb-legend{margin-bottom:18px}
  #printBoard .pb-legend h2{margin:0 0 8px; font:600 15px var(--display)}
  #printBoard .pb-legend .plos{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:5px 14px}
  #printBoard .pb-legend .plo{display:flex; align-items:center; gap:7px; font-size:12px}
  #printBoard .pb-legend .dot{width:20px; height:20px; font-size:10px; flex:none}
  #printBoard .yhead h2{margin:0 0 10px; font:700 clamp(20px,2.2vw,26px)/1.05 var(--display); letter-spacing:-.015em}

  .print-assessments{break-before:page; padding-top:4px}
  .print-assessments .pa-title{margin:0 0 14px; font:700 24px var(--display)}
  .print-assessments .pa-card{break-inside:avoid; padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--rule-2)}
  .print-assessments .pa-card:last-child{border-bottom:0}
  .print-assessments .rubtable{min-width:0; font-size:10.5px}
  .print-assessments .rubtable-wrap{overflow:visible}
}