/* Plan front end. Tokens and layout come from the reviewed mockups (look_*.html) and the Compass header kit. */
:root { --navy:#162F6E; --hnavy:#0F1F37; --cobalt:#004AAD; --bluegrey:#6583B9; --clight:#799FE8; --blue:#809FDD; --grey:#CECECE; --orange:#C55A11; --orangebg:#FBE9DA; --thead:#E2E8F0; --page:#F3F6FB; --sub:#C9D8F6; --ink:#1a1a1a; --muted:#5E6B85;
  --dnml:#BB1A13; --dnmh:#E5A79A; --appl:#C2AED4; --apph:#5F4A78; --meets:#4D64B5; --masters:#508B45; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { font-family: Verdana, Geneva, sans-serif; color:var(--ink); background:var(--page); margin:0; font-size:13px; line-height:1.45; }
button { font-family:inherit; }
.cop { font-family:'Copperplate Gothic','Copperplate Gothic Light',Copperplate,'Times New Roman',serif; font-variant:small-caps; letter-spacing:.02em; color:var(--navy); }

/* header kit */
.ch { display:flex; align-items:stretch; height:84px; overflow:hidden; background:var(--navy); border-bottom:4px solid var(--clight); }
.ch .t { flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 12px 0 28px; min-width:0; }
.ch .wm { margin:0; white-space:nowrap; color:#fff; font-family:'Copperplate Gothic','Copperplate Gothic Light',Copperplate,'Times New Roman',serif; font-variant:small-caps; letter-spacing:.02em; font-size:24px; line-height:1.25; }
.ch .wm b { font-weight:700; } .ch .wm span { font-weight:400; }
.ch .app { color:var(--sub); font-size:13px; line-height:18px; margin-top:2px; } .ch .tagline { color:var(--sub); font-size:11px; line-height:15px; font-style:italic; }
.ch .logo { position:relative; flex-shrink:0; width:170px; margin-right:16px; }
.ch .logo img { position:absolute; top:50%; left:0; width:175px; height:175px; max-width:none; transform:translateY(-50%); object-fit:contain; }

/* frame and notebook tabs */
.frame { min-height:100vh; background:var(--page); display:flex; flex-direction:column; }
.tabs { background:var(--thead); border-bottom:1px solid var(--grey); padding:10px 22px 0; display:flex; gap:4px; align-items:flex-end; overflow-x:auto; }
.tabs button { padding:8px 16px; font-size:11px; color:var(--navy); background:#fff; border:1px solid var(--grey); border-bottom:none; border-radius:9px 9px 0 0; margin-bottom:-1px; position:relative; opacity:.85; cursor:pointer; white-space:nowrap; }
.tabs button.on { background:var(--page); font-weight:bold; opacity:1; box-shadow:inset 0 3px 0 var(--cobalt); z-index:1; }
.tabs button.on:after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--page); }
.tabs button:focus-visible { outline:2px solid var(--cobalt); outline-offset:-2px; }
.tabs .me { margin-left:auto; font-size:11px; color:var(--navy); padding:8px 0; white-space:nowrap; }
.tabs .me b { display:inline-block; width:22px; height:22px; border-radius:50%; background:var(--navy); color:#fff; text-align:center; line-height:22px; margin-right:6px; font-size:10px; }
.tabs .me a { color:var(--cobalt); }

/* coach line */
.coach { display:flex; gap:12px; align-items:flex-start; background:#fff; border-left:4px solid var(--cobalt); margin:18px 22px 0; padding:10px 14px; border-radius:0 8px 8px 0; }
.coach .av { width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; flex:none; }
.coach .txt { font-size:12px; } .coach .txt small { display:block; color:var(--muted); font-size:10px; margin-top:3px; }
.coach .ask { margin-left:auto; font-size:11px; padding:6px 12px; border-radius:999px; border:1px solid var(--cobalt); color:var(--cobalt); background:#fff; white-space:nowrap; align-self:center; cursor:pointer; }

/* body */
.body { padding:14px 22px 22px; display:grid; grid-template-columns:1.15fr 1fr; gap:18px; flex:1; }
.body.one { grid-template-columns:1fr; }
.card { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:14px 16px; }
.card h3 { margin:0 0 2px; font-size:18px; } .kv { font-size:11px; color:var(--muted); }
.track { display:flex; align-items:center; margin:12px 0 14px; }
.track .s { display:flex; flex-direction:column; align-items:center; flex:1; position:relative; }
.track .s:not(:last-child):after { content:""; position:absolute; top:13px; left:50%; width:100%; height:2px; background:var(--grey); z-index:0; }
.track .s.done:not(:last-child):after { background:var(--navy); }
.track .n { width:26px; height:26px; border-radius:50%; border:2px solid var(--grey); background:#fff; color:var(--muted); font-size:11px; display:flex; align-items:center; justify-content:center; z-index:1; }
.track .done .n { background:var(--navy); border-color:var(--navy); color:#fff; }
.track .now .n { background:#fff; border-color:var(--cobalt); color:var(--cobalt); font-weight:bold; box-shadow:0 0 0 3px #d6e2f7; }
.track .l { font-size:10px; color:var(--muted); margin-top:5px; text-align:center; line-height:1.2; }
.track .now .l { color:var(--cobalt); font-weight:bold; }
.row { display:flex; gap:10px; margin-top:10px; }
.stat { flex:1; background:var(--page); border-radius:6px; padding:8px 10px; }
.stat b { display:block; font-size:16px; color:var(--navy); } .stat span { font-size:10px; color:var(--muted); }
.stat.warn { background:#fdecea; } .stat.warn b { color:var(--dnml); }
.strip { display:flex; gap:3px; height:18px; margin:10px 0 4px; } .strip div { border-radius:3px; cursor:pointer; } .strip div:hover { outline:2px solid var(--cobalt); outline-offset:1px; }
.strip .prep { background:repeating-linear-gradient(135deg, var(--thead) 0 4px, #fff 4px 8px); border:1px solid var(--grey); }
.btn { display:inline-block; font-size:11px; padding:7px 14px; border-radius:999px; border:1px solid var(--navy); color:var(--navy); background:#fff; margin:10px 6px 0 0; cursor:pointer; }
.btn.p { background:var(--navy); color:#fff; }
.btn:focus-visible { outline:2px solid var(--cobalt); outline-offset:2px; }
.period { border:1px solid var(--grey); border-radius:8px; padding:10px 12px; margin-top:10px; border-left:6px solid var(--meets); background:#fff; }
.period.advanced { border-left-color:var(--masters); }
.period h4 { margin:0; font-size:12px; } .period .kv { margin:2px 0 6px; }
.period ul { margin:0; padding-left:16px; font-size:11px; } .period li { margin:2px 0; }
.gaps { font-size:11px; margin-top:8px; } .gaps span.gap { display:inline-block; font-size:10px; color:var(--ink); padding:2px 7px; border-radius:4px; margin-right:4px; }
.r { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:#fff; color:#000; border:1.5px solid #000; font-size:8px; font-weight:bold; line-height:1; margin-left:2px; vertical-align:middle; }
.r.s { border-color:var(--bluegrey); color:var(--bluegrey); }
table.t.std { table-layout:fixed; } table.t.std td { word-wrap:break-word; }
.foot { font-size:10px; color:var(--muted); padding:8px 22px; border-top:1px solid var(--thead); background:#fff; }
.foot a { color:var(--cobalt); }
.placeholder { grid-column:1 / -1; }
.placeholder h3 { margin-top:0; }

/* classes */
.classes { display:grid; grid-template-columns:1fr 1.35fr; gap:18px; grid-column:1 / -1; }
.plist .pc { display:block; width:100%; text-align:left; font:inherit; background:#fff; border:1px solid var(--grey); border-radius:8px; padding:12px 14px; margin-bottom:10px; border-left:6px solid var(--meets); cursor:pointer; }
.plist .pc.advanced { border-left-color:var(--masters); }
.plist .pc.on { outline:2px solid var(--cobalt); }
.plist .pc h4 { margin:0 0 2px; font-size:13px; }
.plist .add { display:block; width:100%; font:inherit; border:1px dashed var(--bluegrey); border-radius:8px; padding:12px 14px; color:var(--cobalt); font-size:11px; text-align:center; background:#fff; cursor:pointer; }
.form .sec { margin-top:14px; }
.form .sec h5 { margin:0 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.fld { display:grid; grid-template-columns:170px 1fr; gap:8px; align-items:center; margin:4px 0; font-size:11px; }
.fld.top { align-items:start; }
.in, .form input, .form select, .form textarea { border:1px solid var(--grey); border-radius:5px; padding:5px 8px; background:#fff; font:inherit; font-size:11px; color:var(--ink); width:100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline:2px solid var(--cobalt); border-color:var(--cobalt); }
.form input[type=number] { width:90px; }
.counts { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.counts label { background:var(--page); border-radius:6px; padding:6px 8px; font-size:10px; color:var(--muted); display:block; }
.counts input { display:block; width:100%; font-size:16px; color:var(--navy); border:none; background:transparent; padding:0 0 2px; }
.tags { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.tags span { display:inline-flex; align-items:center; gap:4px; font-size:10px; background:var(--thead); color:var(--navy); border-radius:4px; padding:3px 8px; }
.tags span button { border:none; background:none; color:var(--muted); cursor:pointer; padding:0; font-size:11px; line-height:1; }
.tags .plus { font:inherit; font-size:10px; background:#fff; border:1px dashed var(--bluegrey); color:var(--cobalt); border-radius:4px; padding:3px 8px; cursor:pointer; }
.chk { display:grid; grid-template-columns:repeat(2,1fr); gap:3px 12px; font-size:11px; }
.chk label { cursor:pointer; display:flex; align-items:center; gap:7px; line-height:1.3; } .chk input { margin:0; flex:0 0 auto; width:14px; height:14px; padding:0; accent-color:var(--navy); }   /* .form input sets width:100%; a checkbox must not take it */
.note { font-size:10px; color:var(--muted); margin-top:6px; }
.privacy { background:#fff; border:1px solid var(--grey); border-left:4px solid var(--navy); border-radius:0 8px 8px 0; padding:8px 12px; font-size:11px; margin-top:12px; }
.form .del { float:right; font-size:10px; color:var(--muted); background:none; border:none; cursor:pointer; margin-top:14px; text-decoration:underline; }

/* uploads */
.up { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; grid-column:1 / -1; min-width:0; }
.up > div { min-width:0; }
.drop { display:block; border:2px dashed var(--bluegrey); border-radius:10px; background:#fff; padding:18px; text-align:center; font-size:12px; color:var(--navy); cursor:pointer; }
.drop.over { background:var(--sub); border-color:var(--cobalt); }
.drop small { display:block; color:var(--muted); font-size:10px; margin-top:4px; }
.drop input { display:none; }
.prog { margin-top:10px; background:#fff; border:1px solid var(--grey); border-radius:8px; padding:8px 12px; font-size:11px; }
.prog .bar { height:8px; background:var(--thead); border-radius:4px; overflow:hidden; margin-top:6px; } .prog .bar div { height:100%; background:var(--cobalt); transition:width .4s; }
.inv-wrap { overflow-x:auto; }
table.inv { width:100%; border-collapse:collapse; font-size:11px; margin-top:12px; background:#fff; }
table.inv th { background:var(--navy); color:#fff; text-align:left; padding:6px 7px; font-weight:bold; white-space:nowrap; }
table.inv td { padding:6px 7px; border-bottom:1px solid var(--thead); vertical-align:top; }
table.inv tr.grp td { background:var(--thead); color:var(--navy); font-weight:bold; font-size:10px; text-transform:uppercase; letter-spacing:.04em; }
table.inv td.acts { white-space:nowrap; } table.inv td.acts button { background:none; border:none; color:var(--cobalt); cursor:pointer; font:inherit; font-size:10px; padding:0 4px; text-decoration:underline; }
.badge { display:inline-block; font-size:9px; padding:2px 6px; border-radius:4px; margin-left:4px; vertical-align:middle; white-space:nowrap; }
.badge.sample { background:#fff; border:1px solid var(--cobalt); color:var(--cobalt); }
.badge.parsed { background:#e9f3e7; color:var(--masters); }
.badge.queued { background:var(--thead); color:var(--muted); }
.badge.vision { background:#f3eefb; color:var(--apph); }
.badge.blocked { background:#fdecea; color:var(--dnml); }
.u { display:inline-block; font-size:10px; background:var(--page); border:1px solid var(--grey); border-radius:999px; padding:1px 8px; margin:1px 3px 1px 0; color:var(--navy); }
.u.q { border-style:dashed; color:var(--muted); }
.side .card { margin-bottom:12px; }
.side h4 { margin:0 0 6px; font-size:13px; color:var(--navy); }
.rule { font-size:11px; padding:5px 0; border-bottom:1px solid var(--thead); }
.rule b { color:var(--navy); }
.tiny { font-size:10px; color:var(--muted); }
.place { background:#fff; border:1px solid var(--cobalt); border-radius:8px; padding:8px 10px; margin-top:6px; font-size:11px; }
.place .opts { display:grid; grid-template-columns:repeat(2,1fr); gap:2px 10px; margin:4px 0 6px; }
.place label { cursor:pointer; font-weight:normal; } .place input { margin-right:5px; accent-color:var(--navy); }
.place .btn { margin-top:4px; padding:4px 10px; }

/* year plan */
.yp { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; grid-column:1 / -1; min-width:0; }
.yp > div { min-width:0; }
.src { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.src .s { background:var(--page); border:1px solid var(--grey); border-radius:8px; padding:10px 12px; font-size:11px; }
.src .s b { display:block; font-size:12px; color:var(--navy); margin-bottom:2px; }
.src .s.ok { border-left:4px solid var(--masters); } .src .s.need { border-left:4px solid var(--dnmh); }
.budget { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.budget .b { background:var(--page); border-radius:6px; padding:8px 10px; font-size:10px; color:var(--muted); }
.budget .b b { display:block; font-size:16px; color:var(--navy); }
.budget .b input { width:64px; font:inherit; font-size:16px; color:var(--navy); border:none; border-bottom:1px dashed var(--bluegrey); background:transparent; padding:0; }
.budget .b.warn { background:#fdecea; } .budget .b.warn b { color:var(--dnml); }
.budget .b.good { background:#e9f3e7; } .budget .b.good b { color:var(--masters); }
table.units { width:100%; border-collapse:collapse; font-size:11px; margin-top:10px; }
table.units th { background:var(--navy); color:#fff; text-align:left; padding:6px 7px; font-weight:bold; white-space:nowrap; }
table.units td { padding:6px 7px; border-bottom:1px solid var(--thead); vertical-align:top; }
table.units tr.prep td { background:repeating-linear-gradient(135deg, #f7f9fc 0 4px, #fff 4px 8px); }
table.units td.mv { white-space:nowrap; } table.units td.mv button { background:none; border:1px solid var(--grey); border-radius:3px; color:var(--navy); cursor:pointer; font-size:9px; padding:0 4px; line-height:14px; }
table.units td.mv button:disabled { opacity:.3; cursor:default; }
.days { display:inline-block; min-width:26px; text-align:center; border-radius:4px; padding:1px 5px; background:var(--thead); }
.days.dn { background:#fdecea; color:var(--dnml); } .days.up { background:#e9f3e7; color:var(--masters); }
input.days { width:40px; font:inherit; font-size:11px; border:1px solid var(--grey); }
.cov { font-size:11px; } .cov .ok { color:var(--masters); font-weight:bold; } .cov .miss { color:var(--dnml); font-weight:bold; }
.diff { font-size:11px; margin-top:6px; } .diff div { padding:5px 0; border-bottom:1px solid var(--thead); } .diff b { color:var(--navy); }
.pill { display:inline-block; font:inherit; font-size:10px; padding:2px 8px; border-radius:999px; border:1px solid var(--bluegrey); color:var(--navy); margin:2px 4px 2px 0; background:#fff; cursor:pointer; }
.pill.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.gatebox { background:#fff; border:2px solid var(--cobalt); border-radius:8px; padding:12px 14px; margin-top:12px; }
.gatebox.ok { border-color:var(--masters); }
.gatebox h4 { margin:0 0 4px; font-size:13px; color:var(--navy); }
.gatebox ul { margin:4px 0 8px; padding-left:16px; font-size:11px; }
.warnline { font-size:11px; background:#fdecea; border-left:4px solid var(--dnml); padding:6px 10px; margin:8px 0; }
.okline { font-size:11px; background:#e9f3e7; border-left:4px solid var(--masters); padding:6px 10px; margin:8px 0; }
.dirty { font-size:11px; color:var(--cobalt); margin-top:8px; }

/* assessment */
.rf { display:grid; grid-template-columns:210px 1fr; gap:18px; grid-column:1 / -1; min-width:0; }
.rf > div { min-width:0; }
.tlist { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:8px 0; font-size:11px; }
.tlist .h { padding:6px 14px; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.tlist button.t { display:flex; width:100%; font:inherit; font-size:11px; background:none; border:none; border-left:3px solid transparent; padding:7px 14px 7px 11px; justify-content:space-between; align-items:center; color:var(--ink); cursor:pointer; text-align:left; }
.tlist button.t.on { background:var(--page); color:var(--cobalt); font-weight:bold; border-left-color:var(--cobalt); }
.tlist .cnt { font-size:10px; color:var(--muted); }
.sec { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:12px 14px; margin-bottom:12px; }
.sec h3 { margin:0; font-size:16px; }
.sec h4 { margin:0 0 6px; font-size:12px; color:var(--navy); }
.comp { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:8px; }
.comp > div { background:var(--page); border-radius:6px; padding:6px 8px; font-size:10px; }
.comp > div > b { display:block; color:var(--navy); font-size:11px; }
.comp > div div { font-size:10px; color:var(--ink); }
.comp.parts { grid-template-columns:.6fr 1.2fr 1fr 1.6fr; }
.ref { border:1px solid var(--grey); border-radius:8px; padding:10px 12px; margin-top:8px; font-size:11px; position:relative; background:#fff; }
.ref .top { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:4px; }
.ref .top b { font-size:12px; }
.tag { display:inline-block; font-size:10px; background:var(--thead); color:var(--navy); border-radius:4px; padding:2px 7px; }
.tag.tea { background:var(--navy); color:#fff; } .tag.mine { background:var(--cobalt); color:#fff; }
.ref .stem { margin:6px 0; }
.ref .choices { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:6px; }
.ref .choices div { border:1px solid var(--thead); border-radius:5px; padding:4px 6px; font-size:10px; }
.ref .choices div.key { border-color:var(--masters); background:#e9f3e7; }
.ref .choices small { display:block; color:var(--muted); }
.pct { height:6px; background:var(--thead); border-radius:3px; margin-top:3px; overflow:hidden; } .pct div { height:100%; background:var(--bluegrey); }
.ref .choices div.key .pct div { background:var(--masters); }
.ref .meta { font-size:10px; color:var(--muted); margin-top:6px; }
.ref.tea:after { content:"TEA released \00b7 reference only"; position:absolute; right:10px; top:8px; font-size:9px; color:var(--dnml); border:1px solid var(--dnml); border-radius:3px; padding:1px 5px; letter-spacing:.03em; }
.ref.mine { border-left:5px solid var(--clight); }
.notice { font-size:11px; background:var(--page); border-left:4px solid var(--navy); padding:6px 10px; margin-top:8px; }
.empty { font-size:11px; color:var(--muted); background:var(--page); border:1px dashed var(--bluegrey); border-radius:6px; padding:8px 10px; margin-top:8px; }
.elps table { width:100%; border-collapse:collapse; margin-top:6px; }
.elps th { background:var(--thead); color:var(--navy); text-align:left; padding:4px 6px; font-size:10px; }
.elps td { padding:4px 6px; border-bottom:1px solid var(--thead); font-size:10px; vertical-align:top; }
.measures { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; font-size:10px; }
.measures div { background:var(--page); border-radius:6px; padding:6px 8px; } .measures b { display:block; color:var(--navy); font-size:11px; }

/* units */
.un { display:grid; grid-template-columns:200px 1fr; gap:18px; grid-column:1 / -1; min-width:0; }
.un > div { min-width:0; }
.steps-v { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:10px 0; font-size:11px; }
.steps-v button { display:flex; width:100%; font:inherit; font-size:11px; background:none; border:none; padding:8px 14px; gap:8px; align-items:center; color:var(--muted); cursor:pointer; text-align:left; }
.steps-v .n { width:22px; height:22px; border-radius:50%; border:2px solid var(--grey); display:flex; align-items:center; justify-content:center; font-size:10px; flex:none; background:#fff; }
.steps-v .done { color:var(--ink); } .steps-v .done .n { background:var(--navy); border-color:var(--navy); color:#fff; }
.steps-v .now { color:var(--cobalt); font-weight:bold; background:var(--page); } .steps-v .now .n { border-color:var(--cobalt); color:var(--cobalt); }
.steps-v .sel { outline:2px solid var(--cobalt); outline-offset:-2px; }
.steps-v small { display:block; font-weight:normal; color:var(--muted); font-size:10px; }
.steps-v .guide { border-top:1px solid var(--thead); margin-top:6px; } .steps-v .guide .n { background:var(--thead); color:var(--navy); }
.upick { width:100%; font:inherit; font-size:11px; padding:5px 8px; border:1px solid var(--grey); border-radius:6px; margin-bottom:8px; background:#fff; }
.panel { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:14px 16px; margin-bottom:14px; }
.panel h3 { margin:0; font-size:17px; }
.panel .st { font-size:10px; color:#fff; background:var(--navy); border-radius:4px; padding:2px 7px; margin-left:8px; vertical-align:middle; font-family:Verdana, Geneva, sans-serif; font-variant:normal; letter-spacing:0; }
.panel .st.edit { background:var(--cobalt); } .panel .st.wait { background:var(--bluegrey); }
table.t { width:100%; border-collapse:collapse; font-size:11px; margin-top:8px; }
table.t th { background:var(--navy); color:#fff; text-align:left; padding:5px 7px; font-weight:bold; }
table.t td { padding:5px 7px; border-bottom:1px solid var(--thead); vertical-align:top; }
.score { display:inline-block; min-width:22px; text-align:center; border-radius:4px; padding:1px 5px; color:#fff; font-weight:bold; }
.s9 { background:var(--masters); } .s7 { background:var(--meets); } .s5 { background:var(--apph); } .s3 { background:var(--dnml); }
.item { border:1px solid var(--grey); border-radius:8px; padding:10px 12px; margin-top:8px; font-size:11px; }
.item .top { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:4px; } .item .top b { font-size:12px; }
.item .meta { font-size:10px; color:var(--muted); } .item .stem { margin:6px 0; }
.item .choices { display:grid; grid-template-columns:repeat(2,1fr); gap:6px 18px; margin:8px 0 4px; }
.item .choices div { padding:4px 8px; border:1px solid var(--thead); border-radius:5px; }
.item .choices div.key { border-color:var(--masters); background:#e9f3e7; }
.item .choices b { color:var(--navy); margin-right:4px; }
.item .why { background:var(--page); border-radius:6px; padding:6px 8px; margin-top:6px; font-size:10px; }
.item.teacher { border-left:5px solid var(--clight); }
.tag.ok { background:#e9f3e7; color:var(--masters); } .tag.no { background:#fdecea; color:var(--dnml); }
.cov.full { color:var(--masters); font-weight:bold; } .cov.part { color:#8a5a00; font-weight:bold; }
.gatebox.small { padding:10px 14px; margin-top:10px; } .gatebox.small h4 { font-size:12px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
.two .card { padding:10px 12px; } .two h5 { margin:0 0 4px; font-size:11px; color:var(--navy); }
.delta { font-size:11px; margin-top:8px; padding:6px 10px; background:var(--page); border-radius:6px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }

/* teks */
.tk { grid-column:1 / -1; min-width:0; }
.seg { display:inline-flex; border:1px solid var(--navy); border-radius:999px; overflow:hidden; font-size:11px; margin:0 10px 12px 0; }
.seg button { font:inherit; font-size:11px; padding:6px 14px; color:var(--navy); background:#fff; border:none; cursor:pointer; }
.seg button.on { background:var(--navy); color:#fff; } .seg button:disabled { color:var(--muted); cursor:not-allowed; }
.cols { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.rc { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:0; overflow:hidden; }
.rc summary.rch { background:var(--navy); color:#fff; padding:8px 12px; cursor:pointer; list-style:none; }
.rc summary.rch::-webkit-details-marker { display:none; }
.rc summary.rch:after { content:"\25BE"; float:right; font-size:12px; color:var(--sub); }
.rc[open] summary.rch:after { content:"\25B4"; }
.rc .rch .q { display:block; font-size:10px; color:#fff; margin-top:3px; }
.rc .rch b { display:block; font-size:12px; } .rc .rch span.nm { display:block; font-size:10px; color:var(--sub); }
.rc .rcd { font-size:10px; color:var(--muted); padding:8px 12px 4px; border-bottom:1px solid var(--thead); }
.rc .ks { font-size:10px; color:var(--navy); font-weight:bold; padding:8px 12px 2px; }
.rc .se { display:block; width:100%; text-align:left; font:inherit; font-size:10px; padding:3px 12px 3px 20px; border:none; border-left:3px solid transparent; background:none; cursor:pointer; color:var(--ink); }
.rc .se:hover { background:var(--page); } .rc .se:focus-visible { outline:2px solid var(--cobalt); outline-offset:-2px; }
.rc .se.rd { border-left-color:var(--navy); font-weight:bold; background:var(--page); }
.rc .se.na { color:var(--muted); font-style:italic; }
.rc .more { font-size:10px; color:var(--muted); padding:6px 12px 10px; }
.psd { margin-bottom:12px; } .pscols { display:grid; grid-template-columns:repeat(2,1fr); gap:0 12px; padding-bottom:8px; }
.wf { margin:4px 12px 8px 20px; border:1px solid var(--grey); border-left:3px solid var(--cobalt); border-radius:0 6px 6px 0; background:#fff; font-size:10px; }
.wf summary { padding:5px 10px; cursor:pointer; color:var(--cobalt); font-weight:bold; list-style:none; }
.wf summary::-webkit-details-marker { display:none; }
.wf .m { padding:6px 10px 8px; border-top:1px solid var(--thead); } .wf .m b { color:var(--navy); }
.wf .ev { color:var(--muted); display:block; margin-top:2px; } .wf .dq { display:block; margin-top:3px; font-style:italic; }
.wf .rt { display:block; margin-top:3px; } .wf .rt a { color:var(--cobalt); }
.wf.none summary { color:var(--muted); font-weight:normal; }
@media (max-width:1100px) { .cols { grid-template-columns:1fr 1fr; } }

/* elps */
.el { grid-column:1 / -1; min-width:0; }
table.e { width:100%; border-collapse:collapse; font-size:10px; background:#fff; }
table.e th { background:var(--navy); color:#fff; text-align:left; padding:6px 8px; font-size:11px; }
table.e th.lv { background:var(--bluegrey); }
table.e td { padding:6px 8px; border-bottom:1px solid var(--thead); vertical-align:top; }
table.e td.dom { font-weight:bold; color:var(--navy); font-size:11px; background:var(--page); width:90px; }
table.e td.here { background:#eef3fb; }
table.e td .cnt { display:inline-block; font-size:10px; background:var(--thead); color:var(--navy); border-radius:4px; padding:2px 7px; margin-left:4px; }
.lvl { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin:10px 0 12px; }
.lvl div { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:8px 10px; font-size:10px; }
.lvl b { display:block; color:var(--navy); font-size:11px; margin-bottom:2px; }
.lvl div.here { border-color:var(--cobalt); box-shadow:inset 0 0 0 1px var(--cobalt); }
.sewrap { font-size:10px; } .sewrap div { padding:2px 0; } .sewrap b { color:var(--navy); margin-right:4px; }

/* strategies */
.st { grid-column:1 / -1; min-width:0; }
.flt { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; font-size:11px; align-items:center; }
.flt button { font:inherit; font-size:11px; border:1px solid var(--bluegrey); color:var(--navy); border-radius:999px; padding:3px 10px; background:#fff; cursor:pointer; }
.flt button.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.flt .cnt { margin-left:auto; color:var(--muted); font-size:10px; }
.sgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sh { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:12px 14px; font-size:11px; display:flex; flex-direction:column; gap:6px; }
.sh .hd { font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.sh h4 { margin:0; font-size:14px; }
.sh .when { display:flex; gap:6px; font-size:10px; color:var(--navy); flex-wrap:wrap; }
.sh .when span { background:var(--page); border-radius:4px; padding:1px 6px; }
.sh p { margin:0; color:var(--ink); }
.sh .cite { font-size:9px; color:var(--muted); margin-top:auto; padding-top:6px; border-top:1px solid var(--thead); line-height:1.4; }
.sh .open { font:inherit; font-size:10px; color:var(--cobalt); background:none; border:none; padding:0; cursor:pointer; text-align:left; text-decoration:underline; }
.sh.full { grid-column:1 / -1; display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:18px; }
.sh.full h4 { grid-column:1 / -1; }
.sh.full .blk h5 { margin:0 0 4px; font-size:10px; color:var(--navy); text-transform:uppercase; letter-spacing:.04em; }
.sh.full ol, .sh.full ul { margin:0; padding-left:16px; font-size:10px; } .sh.full li { margin:2px 0; }
.sh .stem { font-size:10px; color:var(--cobalt); font-style:italic; }
.sh .draft { font-size:9px; color:var(--dnml); border:1px solid var(--dnml); border-radius:3px; padding:1px 5px; margin-left:6px; vertical-align:middle; font-family:Verdana, Geneva, sans-serif; font-variant:normal; letter-spacing:.03em; }
.sh.pending { border-style:dashed; }

/* reflections */
.rx { display:grid; grid-template-columns:1.3fr 1fr; gap:18px; grid-column:1 / -1; min-width:0; }
.rx > div { min-width:0; }
.wk { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:11px; flex-wrap:wrap; }
.wk b { font-size:14px; color:var(--navy); }
.wk .nav { font:inherit; font-size:11px; border:1px solid var(--grey); border-radius:999px; padding:3px 10px; color:var(--navy); background:#fff; cursor:pointer; }
.wk .nav:disabled { opacity:.4; cursor:default; }
table.w { width:100%; border-collapse:collapse; font-size:11px; background:#fff; }
table.w th { background:var(--navy); color:#fff; text-align:left; padding:6px 7px; font-weight:bold; }
table.w td { padding:6px 7px; border-bottom:1px solid var(--thead); vertical-align:top; }
table.w td.day { font-weight:bold; color:var(--navy); width:84px; } table.w td.day small { display:block; font-weight:normal; color:var(--muted); font-size:9px; }
table.w td.hol { color:var(--muted); font-style:italic; }
table.w select, table.w input { font:inherit; font-size:10px; border:1px solid var(--grey); border-radius:4px; padding:2px 4px; background:#fff; width:100%; }
table.w select.taught { border-color:var(--masters); color:var(--masters); } table.w select.moved { border-color:var(--cobalt); color:var(--cobalt); border-style:dashed; } table.w select.skipped { border-color:var(--dnml); color:var(--dnml); }
.sg { font-size:10px; color:#fff; background:var(--bluegrey); border-radius:4px; padding:1px 6px; }
.sum { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.sum div { background:var(--page); border-radius:6px; padding:8px 10px; font-size:10px; color:var(--muted); }
.sum b { display:block; font-size:16px; color:var(--navy); }
.q { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:10px 12px; margin-top:10px; }
.q h5 { margin:0 0 4px; font-size:11px; color:var(--navy); }
.q .from { font-size:10px; color:var(--muted); margin-bottom:6px; }
.q textarea { width:100%; min-height:46px; font:inherit; font-size:11px; border:1px solid var(--grey); border-radius:6px; padding:8px; }
.per { font:inherit; display:inline-block; font-size:10px; padding:2px 8px; border-radius:999px; border:1px solid var(--bluegrey); color:var(--navy); margin-right:4px; background:#fff; cursor:pointer; }
.per.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.past { font-size:11px; } .past div { padding:6px 0; border-bottom:1px solid var(--thead); } .past b { color:var(--navy); }
.seen { font-size:10px; color:var(--muted); margin-top:8px; }

/* unit guide */
.ug { display:grid; grid-template-columns:230px 1fr; gap:18px; min-width:0; }
.ug > div { min-width:0; }
.toc { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:10px 0; font-size:11px; }
.toc .h { padding:6px 14px; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.toc button.i { display:flex; width:100%; font:inherit; font-size:11px; background:none; border:none; border-left:3px solid transparent; padding:7px 14px 7px 11px; justify-content:space-between; gap:8px; align-items:center; color:var(--ink); cursor:pointer; text-align:left; }
.toc button.i:hover { background:var(--page); }
.toc .n { width:18px; height:18px; border-radius:50%; background:var(--navy); color:#fff; font-size:9px; display:inline-flex; align-items:center; justify-content:center; margin-right:6px; flex:none; }
.toc .n.off { background:var(--thead); color:var(--muted); }
.toc .v { font-size:9px; color:var(--muted); white-space:nowrap; }
.cover { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:16px 18px; border-top:6px solid var(--navy); }
.cover h3 { margin:0; font-size:22px; }
.cover .line { font-size:11px; color:var(--muted); margin-top:4px; }
.meta { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px; }
.meta div { background:var(--page); border-radius:6px; padding:8px 10px; font-size:10px; color:var(--muted); }
.meta b { display:block; font-size:14px; color:var(--navy); }
.gsec { background:#fff; border:1px solid var(--grey); border-radius:8px; padding:12px 14px; margin-top:12px; }
.gsec h4 { margin:0 0 6px; font-size:13px; }
.gsec h4 .n { display:inline-flex; width:20px; height:20px; border-radius:50%; background:var(--navy); color:#fff; font-size:10px; align-items:center; justify-content:center; margin-right:8px; vertical-align:middle; font-family:Verdana, Geneva, sans-serif; font-variant:normal; }
.gsec h4 .n.off { background:var(--thead); color:var(--muted); }
.files { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:8px; margin-top:6px; }
.f { border:1px solid var(--grey); border-radius:6px; padding:8px 10px; font-size:10px; background:#fff; display:flex; gap:8px; align-items:flex-start; }
.f .ic { width:26px; height:32px; border-radius:3px; background:var(--thead); color:var(--navy); font-size:8px; font-weight:bold; display:flex; align-items:center; justify-content:center; flex:none; }
.f .ic.pdf { background:#fde2e2; color:#b00020; } .f .ic.json { background:#e2f3e3; color:#2e7d32; } .f .ic.txt { background:#dbe7fb; color:#1f4e9a; }
.f b { display:block; font-size:11px; color:var(--ink); } .f .v { color:var(--muted); }
.lsn { border-left:4px solid var(--navy); padding:6px 10px; margin-top:8px; font-size:11px; background:var(--page); border-radius:0 6px 6px 0; }
.stamp { display:inline-block; font-size:9px; border:1px solid var(--masters); color:var(--masters); border-radius:3px; padding:1px 6px; margin-left:6px; vertical-align:middle; font-family:Verdana, Geneva, sans-serif; font-variant:normal; letter-spacing:0; }
.stamp.ph { border-color:var(--grey); color:var(--muted); }
.dl { margin-top:12px; } .dl a.btn { text-decoration:none; }
@media print { body * { visibility:hidden; } #print-guide, #print-guide * { visibility:visible; } #print-guide { position:absolute; left:0; top:0; width:100%; } }

/* auth */
.auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.auth-card { width:100%; max-width:560px; background:#fff; border:1px solid var(--grey); border-radius:10px; overflow:hidden; }
.auth-body { padding:18px 22px 22px; }
.auth-tabs { display:flex; gap:4px; border-bottom:1px solid var(--grey); margin-bottom:14px; }
.auth-tabs button { background:none; border:none; padding:8px 12px; font-size:12px; color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; }
.auth-tabs button.on { color:var(--navy); font-weight:bold; border-bottom-color:var(--cobalt); }
.auth label { display:block; font-size:11px; color:var(--navy); margin:10px 0; }
.auth input { display:block; width:100%; margin-top:4px; padding:8px 10px; font:inherit; border:1px solid var(--grey); border-radius:6px; }
.auth input:focus { outline:2px solid var(--cobalt); border-color:var(--cobalt); }
.two-up { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.err { color:var(--dnml); font-size:11px; margin:6px 0 0; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--hnavy); color:#fff; padding:8px 14px; border-radius:999px; font-size:11px; }

@media (max-width:760px) {
  .body { grid-template-columns:1fr; padding:10px; gap:10px; }
  .ch { height:64px; } .ch .t { padding-left:14px; } .ch .wm { font-size:14px; } .ch .app { font-size:11px; } .ch .tagline { display:none; }
  .ch .logo { width:70px; margin-right:0; } .ch .logo img { width:100px; height:100px; }
  .tabs { padding:8px 10px 0; gap:3px; } .tabs button { font-size:10px; padding:6px 10px; } .tabs .me { display:none; }
  .coach { margin:10px 10px 0; padding:8px 10px; } .coach .ask { display:none; }
  .track .l { font-size:8px; }
  .two-up { grid-template-columns:1fr; }
  .classes { grid-template-columns:1fr; }
  .up { grid-template-columns:1fr; }
  .ug { grid-template-columns:1fr; } .meta { grid-template-columns:1fr 1fr; }
  .rx { grid-template-columns:1fr; } .sum { grid-template-columns:1fr; }
  .sgrid { grid-template-columns:1fr; } .sh.full { grid-template-columns:1fr; }
  .lvl { grid-template-columns:1fr 1fr; }
  .cols, .pscols { grid-template-columns:1fr; }
  .un { grid-template-columns:1fr; } .two { grid-template-columns:1fr; }
  .rf { grid-template-columns:1fr; } .comp, .measures { grid-template-columns:repeat(2,1fr); } .ref .choices { grid-template-columns:repeat(2,1fr); }
  .yp { grid-template-columns:1fr; } .src { grid-template-columns:1fr; } .budget { grid-template-columns:repeat(2,1fr); }
  .place .opts { grid-template-columns:1fr; }
  .fld { grid-template-columns:1fr; }
  .counts { grid-template-columns:repeat(2,1fr); }
}

.ic.docx { background:var(--cobalt); } .ic.csv { background:var(--bluegrey); } a.f:hover { outline:2px solid var(--clight); }