/* ── AI Engineer Track ── terminal theme ─────────────────────────── */

:root{
  --bg:      #0b0e0f;
  --panel:   #101416;
  --panel2:  #14191c;
  --line:    #232b2f;
  --line2:   #2f393e;
  --fg:      #c5cdd3;
  --dim:     #6b7a83;
  --dimmer:  #45525a;
  --green:   #3fb950;
  --green-d: #1c3a24;
  --amber:   #d29922;
  --cyan:    #4bb3c9;
  --blue:    #5a9ded;
  --red:     #d9544f;
  --violet:  #a371f7;
  --mono: 'JetBrains Mono','SF Mono',ui-monospace,Menlo,Consolas,monospace;
}

*{box-sizing:border-box; min-width:0}
html,body{margin:0;padding:0}
/* overflow-x:hidden makes html/body a scroll container, which silently kills
   position:sticky for everything inside — so it is scoped to the narrow
   widths that actually needed the horizontal clamp. Wide screens keep sticky. */
@media(max-width:1199px){html,body{overflow-x:hidden}}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--mono); font-size:13px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--green-d); color:#e8f5ea}
a{color:var(--cyan); text-decoration:none; border-bottom:1px dotted var(--dimmer)}
a:hover{color:var(--green); border-bottom-color:var(--green)}
h3{font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--dim);
   margin:22px 0 8px; font-weight:500}
.dim{color:var(--dim)}
.small{font-size:11.5px}
.hidden{display:none !important}

/* ── header ─────────────────────────────────────────────────────── */
header{
  position:sticky; top:0; z-index:40;
  background:var(--panel); border-bottom:1px solid var(--line);
  padding:10px 14px 0;
}
.brand{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.prompt{color:var(--green); font-weight:700}
.title{font-weight:700; letter-spacing:.04em}
.sub{color:var(--dim); font-size:11.5px}
.hud{display:flex; align-items:center; gap:6px; margin:8px 0; flex-wrap:wrap}
.hud-item{
  display:flex; align-items:baseline; gap:6px;
  border:1px solid var(--line); padding:2px 8px; background:var(--panel2);
}
.hud-item label{font-size:10px; color:var(--dimmer); letter-spacing:.1em}
.hud-item span{color:var(--green); font-weight:500; font-size:12px}
.bar{height:2px; background:var(--line); margin:0 -14px}
.bar-fill{height:100%; width:0; background:var(--green); transition:width .3s}

.btn{
  font-family:var(--mono); font-size:12px;
  background:var(--panel2); color:var(--fg);
  border:1px solid var(--line2); padding:3px 10px; cursor:pointer;
  border-radius:0; transition:.12s;
}
.btn:hover{border-color:var(--green); color:var(--green)}
.btn-sm{font-size:11px; padding:1px 7px}
.btn-danger:hover{border-color:var(--red); color:var(--red)}
.btn.on{border-color:var(--green); color:var(--green); background:var(--green-d)}

/* ── layout ─────────────────────────────────────────────────────── */
#layout{display:flex; align-items:flex-start; min-height:calc(100vh - 78px)}
#sidebar{
  width:280px; flex:0 0 280px; border-right:1px solid var(--line);
  background:var(--panel); position:sticky; top:78px;
  height:calc(100vh - 78px); overflow-y:auto;
}
.side-head{
  display:flex; justify-content:space-between; align-items:center; gap:6px;
  padding:8px 10px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--panel); z-index:2;
}
.chk-inline{font-size:11px; color:var(--dim); display:flex; align-items:center; gap:4px; cursor:pointer}
#main{flex:1; min-width:0; padding:18px 22px 80px; max-width:1000px}

/* ── sidebar weeks ──────────────────────────────────────────────── */
.phase-hd{
  padding:12px 10px 4px; font-size:10.5px; letter-spacing:.12em;
  color:var(--amber); border-top:1px solid var(--line); margin-top:4px;
}
.phase-hd .g{color:var(--dimmer); display:block; letter-spacing:0; font-size:10.5px; margin-top:2px}
.wk{
  display:grid; grid-template-columns:34px 1fr auto; gap:8px; align-items:center;
  padding:5px 10px; cursor:pointer; border-left:2px solid transparent;
  color:var(--fg);
}
.wk:hover{background:var(--panel2)}
.wk.sel{background:var(--panel2); border-left-color:var(--green)}
.wk.done .wk-t{color:var(--dimmer); text-decoration:line-through}
.wk.gap{opacity:.55}
.wk.locked .wk-t{color:var(--dim)}
.wk.now{border-left-color:var(--amber)}
.wk-n{color:var(--dimmer); font-size:11px}
.wk.now .wk-n{color:var(--amber); font-weight:700}
.wk-t{font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wk-badge{font-size:10px; color:var(--dimmer)}
.wk-badge.ok{color:var(--green)}

/* ── week pane ──────────────────────────────────────────────────── */
.pane{animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.rule{color:var(--line2); user-select:none; white-space:pre; overflow:hidden; font-size:12px}
.wk-head h1{font-size:19px; margin:2px 0 6px; font-weight:700; letter-spacing:.01em;
            overflow-wrap:anywhere}
.meta{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--dim); margin-bottom:14px}
.meta b{color:var(--fg); font-weight:500}
.tag{border:1px solid var(--line2); padding:0 6px; font-size:10.5px; letter-spacing:.06em}
.tag.now{border-color:var(--amber); color:var(--amber)}
.tag.gap{border-color:var(--violet); color:var(--violet)}
.tag.done{border-color:var(--green); color:var(--green)}

.why{
  border-left:2px solid var(--amber); background:var(--panel);
  padding:10px 14px; margin:0 0 20px; color:#aeb9c0;
}
.why::before{content:'why this week  '; color:var(--amber); font-size:10.5px; letter-spacing:.12em; display:block; margin-bottom:4px}

.lockbar{
  border:1px solid var(--violet); background:#17121f; padding:8px 12px;
  margin-bottom:16px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.lockbar span{color:#c3aee8; font-size:12px; flex:1 1 220px}

/* day headers */
.day{
  display:flex; gap:12px; align-items:baseline;
  padding:14px 8px 4px; border-bottom:1px solid var(--line2);
}
.day-n{color:var(--amber); font-size:11px; letter-spacing:.16em; font-weight:700}
.day-h{color:var(--dimmer); font-size:11px}
.day-p{margin-left:auto; color:var(--dimmer); font-size:11px}
.day.today{border-bottom-color:var(--green)}
.day.today .day-n{color:var(--green)}
.day.today .day-n::after{content:' ◀ today'; letter-spacing:.06em}

/* tasks */
.task{
  display:grid; grid-template-columns:16px 1fr 42px 22px; gap:10px; align-items:start;
  padding:6px 8px; border-bottom:1px solid var(--line);
}
.notebtn{
  background:none; border:none; cursor:pointer; padding:0; font-size:13px;
  color:var(--dimmer); font-family:var(--mono); line-height:1.5;
}
.notebtn:hover{color:var(--green)}
.notebtn.has{color:var(--blue)}

/* ── one visual language: BLUE means "you wrote something here" ──── */

/* a task you've written a note on — thin blue rail down the whole block */
.task.noted,.task-sub.noted{border-left:2px solid var(--blue); padding-left:6px}
.task.noted{padding-left:6px}
.task-sub.noted{padding-left:32px}

/* any note field holding content: blue rail + blue text. The old #dbe3e9
   was a near-white grey one shade off the empty state (#c5cdd3) — the
   difference was lightness only, which the eye does not register. Hue is
   what makes it read as "written", and blue is the signal already in use. */
textarea.hasnote,input.hasnote{
  border-left:2px solid var(--blue) !important;
  color:#8fbdf5 !important;
  /* background-color, not background — the shorthand would wipe the
     scroll-shadow background-image set further down */
  background-color:#0b1116 !important;
  --nbg:#0b1116;
}

/* sidebar / heading marker */
.nmark{
  color:var(--blue); margin-left:5px; font-size:11px; letter-spacing:.04em;
  white-space:nowrap;
}
.wk.done .nmark{color:var(--blue); opacity:.75}

/* resources + note attached to a task */
.task-sub{padding:2px 8px 8px 34px; border-bottom:1px solid var(--line)}
/* nothing attached and no note yet — collapse until the ✎ is used */
.task-sub.bare{padding:0; border-bottom:none}
.task-sub.bare .note-wrap:not(.hidden){padding:6px 0 8px}
.task-res{display:flex; gap:8px; align-items:baseline; padding:3px 0; font-size:11.5px}
.task-res a{color:var(--dim)}
.task-res a:hover{color:var(--green)}
.rdot{color:var(--dimmer); width:13px; flex:none; text-align:center}
.task-res input.rchk{
  appearance:none; width:11px; height:11px; flex:none; margin:0; cursor:pointer;
  border:1px solid var(--line2); background:var(--panel2); position:relative; top:1px;
}
.task-res input.rchk:checked{border-color:var(--green); background:var(--green-d)}
.task-res input.rchk:checked::after{content:'✓'; color:var(--green); position:absolute; left:0; top:-6px; font-size:11px}
.rrole{font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; flex:none; width:30px}
.rrole.primary{color:var(--green)}
.rrole.reference{color:var(--dimmer)}
.note-wrap{margin-top:6px}
.note-wrap textarea{
  width:100%; min-height:84px; resize:vertical; padding:8px;
  background-color:#0a0d0e; color:var(--fg); border:1px solid var(--line);
  font-family:var(--mono); font-size:12px; line-height:1.6;
}
.note-wrap textarea:focus{outline:none; border-color:var(--amber)}
.task:hover{background:var(--panel)}
.task input{
  appearance:none; width:13px; height:13px; margin-top:4px; cursor:pointer;
  border:1px solid var(--line2); background:var(--panel2); position:relative; flex:none;
}
.task input:checked{border-color:var(--green); background:var(--green-d)}
.task input:checked::after{
  content:'✓'; color:var(--green); position:absolute; left:1px; top:-4px; font-size:12px;
}
.task label{cursor:pointer}
.task.done label{color:var(--dimmer); text-decoration:line-through}
.task .h{color:var(--dimmer); font-size:11px; text-align:right; padding-top:2px}

/* resources */
.res{display:grid; grid-template-columns:64px 1fr; gap:10px; padding:4px 8px; align-items:baseline}
.res:hover{background:var(--panel)}
.rtype{font-size:10px; letter-spacing:.08em; text-align:right; color:var(--dimmer)}
.rtype.video{color:var(--red)}
.rtype.course{color:var(--violet)}
.rtype.blog{color:var(--amber)}
.rtype.doc{color:var(--cyan)}
.rtype.repo{color:var(--green)}

/* code */
.code{border:1px solid var(--line); margin:10px 0; background:#0a0d0e}
.code-hd{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:4px 10px; border-bottom:1px solid var(--line); background:var(--panel2);
  font-size:11px; color:var(--dim);
}
.code pre{margin:0; padding:12px; overflow-x:auto; font-size:12px; line-height:1.6}
.code code{font-family:var(--mono)}
.k{color:var(--violet)} .s{color:var(--green)} .c{color:var(--dimmer); font-style:italic}
.n{color:var(--amber)} .f{color:var(--cyan)}

/* callouts */
.deliv,.check{border:1px solid var(--line); padding:10px 14px; margin:10px 0}
.deliv{border-left:2px solid var(--green)}
.check{border-left:2px solid var(--cyan)}
.deliv::before{content:'deliverable'; color:var(--green)}
.check::before{content:'self-check'; color:var(--cyan)}
.deliv::before,.check::before{font-size:10.5px; letter-spacing:.12em; display:block; margin-bottom:4px}

/* notes + timer */
textarea#notes{
  width:100%; min-height:170px; resize:vertical;
  background-color:#0a0d0e; color:var(--fg); border:1px solid var(--line);
  font-family:var(--mono); font-size:12.5px; line-height:1.65; padding:10px;
}
textarea#notes:focus{outline:none; border-color:var(--green)}
.notes-hd{display:flex; justify-content:space-between; align-items:baseline}
.saved{font-size:10.5px; color:var(--green)}

.timer{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0}
.clock{font-size:20px; color:var(--amber); font-weight:700; letter-spacing:.04em; min-width:92px}
.clock.run{color:var(--green)}
.timer input[type=number]{
  width:62px; background:var(--panel2); border:1px solid var(--line2); color:var(--fg);
  font-family:var(--mono); font-size:12px; padding:3px 6px;
}
.logs{margin-top:8px; font-size:11.5px; color:var(--dim)}
.logrow{display:flex; justify-content:space-between; gap:10px; padding:2px 0; border-bottom:1px solid var(--line)}
.logrow.neg{color:var(--amber)}
.logrow button{background:none; border:none; color:var(--dimmer); cursor:pointer; font-family:var(--mono)}
.logrow button:hover{color:var(--red)}

.hbar{height:6px; background:var(--line); margin-top:6px; position:relative}
.hbar i{position:absolute; left:0; top:0; bottom:0; background:var(--green)}
.hbar i.over{background:var(--amber)}

/* modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.75); z-index:100;
       display:flex; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto}
.modal-box{background:var(--panel); border:1px solid var(--line2); width:100%; max-width:560px}
.modal-head{display:flex; justify-content:space-between; align-items:center;
            padding:8px 14px; border-bottom:1px solid var(--line); color:var(--dim)}
.modal-body{padding:14px 18px 22px}
.fld{display:grid; grid-template-columns:70px 1fr; gap:10px; align-items:center; margin:6px 0}
.fld span{color:var(--dim); font-size:11.5px}
.fld input{
  background:#0a0d0e; border:1px solid var(--line); color:var(--fg);
  font-family:var(--mono); font-size:12px; padding:5px 8px; width:100%;
}
.fld input:focus{outline:none; border-color:var(--green)}
.row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}

/* ── full-screen note editor ────────────────────────────────────── */
.ed-box{
  background:var(--panel); border:1px solid var(--line2); width:100%;
  max-width:1080px; height:min(84vh,760px); display:flex; flex-direction:column;
}
.ed-head{display:flex; gap:10px; align-items:center; padding:8px 12px;
         border-bottom:1px solid var(--line)}
.ed-title{color:var(--fg); font-size:12px; flex:1; overflow:hidden;
          text-overflow:ellipsis; white-space:nowrap}
.ed-tools{display:flex; gap:4px; align-items:center; padding:6px 10px;
          border-bottom:1px solid var(--line); background:var(--panel2); flex-wrap:wrap}
.ed-spacer{flex:1}
.tb{
  background:none; border:1px solid transparent; color:var(--dim); cursor:pointer;
  font-family:var(--mono); font-size:12px; min-width:26px; height:24px; padding:0 6px;
}
.tb:hover{border-color:var(--line2); color:var(--green); background:var(--panel)}
.ed-body{flex:1; display:flex; min-height:0}
.ed-body textarea{
  flex:1; width:100%; resize:none; border:none; outline:none; padding:14px 16px;
  background:#0a0d0e; color:var(--fg); font-family:var(--mono);
  font-size:13px; line-height:1.75;
}
.ed-prev{display:none; flex:1; overflow-y:auto; padding:14px 18px;
         border-left:1px solid var(--line); font-size:13px; line-height:1.7}
.ed-body.split .ed-prev{display:block}
.ed-foot{display:flex; justify-content:space-between; padding:6px 12px;
         border-top:1px solid var(--line); font-size:11px}

/* rendered markdown */
.mdh{margin:14px 0 6px; font-size:13px; color:var(--green); letter-spacing:.02em}
.ed-prev p,.nb-v p{margin:0 0 8px}
.ed-prev ul,.ed-prev ol,.nb-v ul,.nb-v ol{margin:6px 0; padding-left:20px}
.ed-prev li,.nb-v li{margin:2px 0}
.ed-prev blockquote,.nb-v blockquote{
  margin:8px 0; padding:2px 12px; border-left:2px solid var(--amber); color:var(--dim)}
.mdcode{
  background:#0a0d0e; border:1px solid var(--line); padding:10px 12px; margin:8px 0;
  overflow-x:auto; font-size:12px; line-height:1.6; white-space:pre}
.mdi{background:var(--panel2); border:1px solid var(--line); padding:0 4px; font-size:12px}
.nb-v b,.ed-prev b{color:#e2e8ec}

/* ── lab: read-only multi-file code reference ───────────────────── */
.lab{border:1px solid var(--line2); background:var(--panel); margin:8px 0 4px}
.lab-hd{
  display:flex; gap:10px; align-items:center; padding:8px 10px;
  background:var(--panel2); cursor:pointer; flex-wrap:wrap;
}
.lab-hd:hover{background:#182026}
.lab-hd:hover .lab-toggle{border-color:var(--green); color:var(--green); background:var(--green-d)}
.lab-tag{
  color:var(--green); border:1px solid var(--green-d); background:#0e1a12;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; padding:1px 6px; flex:none;
}
.lab-title{font-size:12px; color:var(--fg); flex:1 1 200px}
.lab-meta{font-size:10.5px; color:var(--dimmer)}
.lab-toggle{
  background:var(--green-d); border:1px solid var(--green); color:var(--green);
  cursor:pointer; font-family:var(--mono); font-size:11.5px; font-weight:500;
  padding:4px 12px; letter-spacing:.04em; white-space:nowrap; flex:none;
}
.lab-toggle:hover{background:var(--green); color:#0b0e0f}
.lab.open .lab-toggle{background:none; border-color:var(--line2); color:var(--dim)}
.lab.open .lab-hd:hover .lab-toggle{border-color:var(--green); color:var(--green)}
/* closed labs pulse a hairline so the affordance reads at a glance */
.lab:not(.open){border-color:var(--green-d)}
.lab:not(.open) .lab-hd{border-left:2px solid var(--green)}

.lab-body{display:none; max-height:70vh; overflow-y:auto; padding:0 10px 10px}
.lab.open .lab-body{display:block}
.lab-intro{color:var(--dim); font-size:11.5px; margin:9px 0 8px; line-height:1.6}

.lab-tabs{
  display:flex; gap:2px; flex-wrap:wrap; position:sticky; top:0; z-index:2;
  background:var(--panel); padding:2px 0 0; border-bottom:1px solid var(--line2);
}
.lab-tab{
  background:none; border:1px solid transparent; border-bottom:none; cursor:pointer;
  color:var(--dim); font-family:var(--mono); font-size:11.5px; padding:5px 10px 4px;
  display:flex; flex-direction:column; gap:1px; line-height:1.3;
}
.lab-tab:hover{color:var(--fg); background:var(--panel2)}
.lab-tab.on{
  color:var(--green); border-color:var(--line2); background:var(--bg);
  margin-bottom:-1px; padding-bottom:5px;
}
.lab-file{font-size:9.5px; color:var(--dimmer); letter-spacing:.02em}
.lab-tab.on .lab-file{color:var(--dim)}
.lab-note{
  color:#9fb0ba; font-size:11.5px; line-height:1.65; margin:10px 0 2px;
  border-left:2px solid var(--line2); padding-left:10px;
}
.lab-code{margin-top:8px}
.lab-code pre{max-height:none}

@media(max-width:820px){
  .lab-body{max-height:60vh; padding:0 6px 8px}
  .lab-title{flex-basis:100%}
  .lab-tab{font-size:11px; padding:5px 8px 4px}
}

/* expand affordance */
.expand{
  background:none; border:1px solid transparent; color:var(--dimmer); cursor:pointer;
  font-family:var(--mono); font-size:12px; padding:0 5px; align-self:start;
}
.expand:hover{color:var(--blue); border-color:var(--line2)}
.expand.sm{font-size:10.5px; letter-spacing:.06em; margin-top:4px}
.nb-item{grid-template-columns:52px 1fr 26px}

@media(max-width:820px){
  .ed-box{height:92vh; max-width:none}
  .ed-body.split{flex-direction:column}
  .ed-body.split .ed-prev{border-left:none; border-top:1px solid var(--line)}
  .modal{padding:12px 8px}
}

.toast{
  position:fixed; bottom:18px; left:50%; transform:translateX(-50%);
  background:var(--panel2); border:1px solid var(--green); color:var(--green);
  padding:6px 16px; font-size:12px; z-index:200;
}
.toast.err{border-color:var(--red); color:var(--red)}

/* ── tonight strip ──────────────────────────────────────────────── */
.tonight{border:1px solid var(--line2); background:var(--panel); margin-bottom:22px}
.tn-head{display:flex; gap:12px; align-items:baseline; padding:8px 12px;
         border-bottom:1px solid var(--line); flex-wrap:wrap}
.tn-head .prompt{font-size:12px}
.tn-meta{color:var(--dim); font-size:11.5px; flex:1 1 220px}
.tn-meta b{color:var(--fg); font-weight:500}
.tn-head .btn{margin-left:auto}
.tonight.collapsed .tn-body{display:none}
.tn-body{padding:2px 12px 10px}
.tn-empty{color:var(--dim); padding:10px 0 6px; font-size:12px}
.tn-next{color:var(--cyan); font-size:10.5px; letter-spacing:.14em; padding:8px 8px 0; display:block}
.tn-foot{display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:10px 0 2px;
         font-size:11.5px; color:var(--dim); border-top:1px solid var(--line); margin-top:4px}
.tn-foot .clock{font-size:15px; min-width:72px}
.tn-go{margin-left:auto}

.dots{display:inline-flex; gap:4px; align-items:center; vertical-align:middle}
.dot{width:9px; height:9px; border:1px solid var(--line2); background:var(--panel2)}
.dot.on{background:var(--green); border-color:var(--green)}
.dot.today{border-color:var(--amber)}
.dot.future{opacity:.3}

.recall{border-top:1px dashed var(--line2); margin-top:10px; padding-top:8px}
.rc-tag{color:var(--violet); font-size:10.5px; letter-spacing:.12em}
.rc-q{color:#aeb9c0; margin:4px 0 6px; font-size:12px}
.rc-a{white-space:pre-wrap; background:#0a0d0e; border:1px solid var(--line); padding:8px;
      margin-top:6px; font-size:12px}

/* pace */
#hud-pace.ok{color:var(--green)} #hud-pace.behind{color:var(--amber)} #hud-pace.ahead{color:var(--cyan)}

/* deliverable link + checkpoint answer */
.deliv input,.check textarea{
  width:100%; margin-top:8px; background-color:#0a0d0e; color:var(--fg); border:1px solid var(--line);
  font-family:var(--mono); font-size:12px; padding:6px 8px;
}
.deliv input:focus,.check textarea:focus{outline:none; border-color:var(--green)}
.check textarea{min-height:76px; resize:vertical; line-height:1.6}
.ship-link{display:inline-block; margin-top:6px; font-size:11.5px}
.ans-hd{display:flex; justify-content:space-between; font-size:10.5px; color:var(--dimmer);
        margin-top:8px; letter-spacing:.08em}

/* notebook view */
.nb-search{width:100%; background:#0a0d0e; color:var(--fg); border:1px solid var(--line2);
           font-family:var(--mono); font-size:13px; padding:8px 10px; margin:6px 0 14px}
.nb-search:focus{outline:none; border-color:var(--green)}
.ship-row{display:grid; grid-template-columns:44px 1fr; gap:10px; padding:6px 8px;
          border-bottom:1px solid var(--line); font-size:12px}
.ship-row .wn{color:var(--amber); font-size:11px; padding-top:2px}
.ship-row .dl{color:var(--dim); font-size:11.5px; display:block; margin-top:2px}
.nb-week{margin-top:18px}
.nb-week h4{margin:0 0 4px; font-size:12px; font-weight:700}
.nb-week h4 a{color:inherit; border:none}
.nb-week h4 a:hover{color:var(--green)}
.nb-item{display:grid; grid-template-columns:52px 1fr; gap:10px; padding:6px 8px;
         border-bottom:1px solid var(--line)}
.nb-k{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dimmer); padding-top:2px}
.nb-k.answer{color:var(--cyan)} .nb-k.task{color:var(--amber)} .nb-k.week{color:var(--green)}
.nb-q{color:var(--dim); font-size:11.5px; margin-bottom:3px}
/* the notebook renders the same notes, so it carries the same blue */
.nb-v{white-space:pre-wrap; font-size:12px; color:#8fbdf5}
mark{background:var(--green-d); color:#e8f5ea; padding:0 1px}

/* milestones */
.wk .ms{color:var(--amber); margin-left:4px}
.tag.ms{border-color:var(--amber); color:var(--amber)}

.mobile-only{display:none}

/* mobile */
@media(max-width:820px){
  .mobile-only{display:inline-block}
  #sidebar.collapsed{max-height:0; overflow:hidden; border-bottom:none}
  .tn-head .btn{margin-left:0}
  .tn-go{margin-left:0}
  #layout{flex-direction:column}
  #sidebar{
    width:100%; flex:none; position:static; height:auto;
    max-height:40vh; border-right:none; border-bottom:1px solid var(--line);
  }
  #main{padding:14px 12px 60px; max-width:100%}
  .hud-item{font-size:11px}
  .wk-head h1{font-size:15.5px; line-height:1.4}
  .rule{display:none}          /* decorative 120-char rules would force overflow */
  .why,.deliv,.check,.lockbar{padding:9px 11px}
  .res{grid-template-columns:52px 1fr; gap:8px}
  .task{grid-template-columns:16px 1fr; gap:8px}
  .task .h{display:none}
  .code pre{font-size:11.5px}
}

/* ── bench: measured results under the deliverable ──────────────── */
/* amber = something you measured. green is reference, blue is your prose. */
.bench{border:1px solid var(--line2); background:var(--panel); margin:10px 0}
.bench:not(.open){border-color:#4a3a12}
.bench:not(.open) .bench-hd{border-left:2px solid var(--amber)}
.bench-hd{
  display:flex; gap:10px; align-items:center; padding:8px 10px;
  background:var(--panel2); cursor:pointer; flex-wrap:wrap;
}
.bench-hd:hover{background:#182026}
.bench-tag{
  color:var(--amber); border:1px solid #4a3a12; background:#1a1408;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; padding:1px 6px; flex:none;
}
.bench-title{font-size:12px; color:var(--fg); flex:1 1 200px}
.bench-toggle{
  background:#1a1408; border:1px solid var(--amber); color:var(--amber);
  cursor:pointer; font-family:var(--mono); font-size:11.5px; font-weight:500;
  padding:4px 12px; letter-spacing:.04em; white-space:nowrap; flex:none;
}
.bench-toggle:hover{background:var(--amber); color:#0b0e0f}
.bench.open .bench-toggle{background:none; border-color:var(--line2); color:var(--dim)}
.bench.open .bench-hd:hover .bench-toggle{border-color:var(--amber); color:var(--amber)}

.bench-body{display:none; padding:0 10px 10px}
.bench.open .bench-body{display:block}
.bench-intro{color:var(--dim); font-size:11.5px; margin:9px 0 8px; line-height:1.6}

/* the table scrolls inside itself — the page never scrolls sideways */
.bench-scroll{overflow-x:auto; margin:8px 0}
.bench-tbl{border-collapse:collapse; font-size:11.5px; min-width:100%}
.bench-tbl th,.bench-tbl td{
  border:1px solid var(--line2); padding:5px 10px; text-align:right; white-space:nowrap;
}
.bench-tbl thead th{
  background:var(--panel2); color:var(--dim); font-weight:500;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
}
.bench-tbl tbody th{
  text-align:left; color:var(--fg); font-weight:400; background:var(--panel2);
}
.bn-hint{display:block; font-size:9.5px; color:var(--dimmer); letter-spacing:.02em}
.bench-tbl td{color:var(--dim); font-variant-numeric:tabular-nums}
.bn-win{color:var(--amber)}
.bench-verdict{
  color:var(--fg); font-size:11.5px; line-height:1.65; margin:10px 0 2px;
  border-left:2px solid var(--amber); padding-left:10px;
}
.bench-note{
  width:100%; min-height:70px; resize:vertical; background-color:#0b1116; --nbg:#0b1116;
  border:1px solid var(--line2); color:var(--fg);
  font-family:var(--mono); font-size:12px; line-height:1.6; padding:8px 10px;
}
.bench-note:focus{outline:none; border-color:var(--amber)}

/* raw per-call rows: first 10 by default, the rest on request */
.bench-raw{border-top:1px solid var(--line2); margin-top:12px; padding-top:10px}
.bench-rawhd{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
}
.bench-rawtog{
  background:none; border:1px solid var(--line2); color:var(--dim); cursor:pointer;
  font-family:var(--mono); font-size:11px; padding:3px 10px;
  letter-spacing:.04em; text-transform:none; white-space:nowrap;
}
.bench-rawtog:hover{border-color:var(--amber); color:var(--amber)}
.bench-rawtbl{font-size:11px}
.bench-rawtbl tbody th{color:var(--dimmer); font-size:10.5px; text-align:right}
.bench-rawtbl td{font-variant-numeric:tabular-nums}
.bench-raw .bn-more{display:none}
.bench-raw.all .bn-more{display:table-row}

/* ── right rail: the docked timer ───────────────────────────────── */
/* Empty and zero-width until the timer is moved in, so the pane keeps
   its full measure on narrower screens. */
#rail{width:0; flex:0 0 0}
.timer-man{display:flex; gap:8px; align-items:center}

@media(min-width:1200px){
  /* body is the scroll container (it has overflow-y:auto), so the sticky
     card is measured against #rail. The rail must therefore NOT stretch to
     full page height — align-self:flex-start keeps it card-sized, and the
     card then pins under the 78px header instead of scrolling away. */
  #rail{
    width:250px; flex:0 0 250px; padding:18px 16px 40px;
    align-self:flex-start; border-left:1px solid var(--line);
    position:sticky; top:78px;
    max-height:calc(100vh - 78px); overflow-y:auto;
  }
  #rail:empty{border-left:none}
  #main{max-width:1000px}

  /* docked: one column, so it reads as a panel rather than a toolbar */
  #timecard.docked{background:var(--panel); border:1px solid var(--line2); padding:10px 12px}
  #timecard.docked h3{margin-top:0}
  #timecard.docked .timer{flex-direction:column; align-items:stretch; gap:7px}
  #timecard.docked .clock{font-size:26px; text-align:center; min-width:0; padding:2px 0}
  #timecard.docked .timer > .btn{width:100%; padding:7px}
  #timecard.docked .timer-man{display:flex}
  #timecard.docked .timer-man input[type=number]{flex:1; min-width:0}
  #timecard.docked .logs{max-height:190px; overflow-y:auto}
  #timecard.docked .logrow{font-size:11px}
}

/* ── notes: "there is more below" ───────────────────────────────────
   macOS uses overlay scrollbars, so a note with more text than fits looked
   identical to one that ended there — measured: a plain overflowing div
   reserves 0px, styled or not. Native scrollbars therefore cannot carry
   this signal, so the indicator is painted instead.

   Two background layers per edge (Lea Verou's scroll-shadow):
     · a COVER, background-attachment:local, so it travels with the text and
       sits exactly at the first/last line
     · a SHADOW, background-attachment:scroll, pinned to the element edge
   At the top of the content the cover sits over the shadow and hides it;
   scroll down and the cover moves away, revealing the fade. Net effect: the
   blue fade is visible only while there is genuinely more text that way. */
.tnote, textarea#notes, textarea#answer, .bench-note{
  --nbg:#0a0d0e;                       /* must match the field's own bg */
  background-image:
    linear-gradient(var(--nbg) 40%, rgba(0,0,0,0)),
    linear-gradient(rgba(0,0,0,0), var(--nbg) 60%),
    linear-gradient(to bottom, rgba(90,157,237,.55), rgba(90,157,237,0)),
    linear-gradient(to top,    rgba(90,157,237,.55), rgba(90,157,237,0));
  background-repeat:no-repeat;
  background-size:100% 28px, 100% 28px, 100% 16px, 100% 16px;
  background-position:top, bottom, top, bottom;
  background-attachment:local, local, scroll, scroll;
}

/* Kept for platforms that still draw a classic scrollbar (Windows, Linux,
   or macOS set to "always show"). Harmless where bars are overlay. */
.tnote::-webkit-scrollbar,
textarea#notes::-webkit-scrollbar,
textarea#answer::-webkit-scrollbar,
.bench-note::-webkit-scrollbar{width:10px}
.tnote::-webkit-scrollbar-track,
textarea#notes::-webkit-scrollbar-track,
textarea#answer::-webkit-scrollbar-track,
.bench-note::-webkit-scrollbar-track{background:#0a0d0e; border-left:1px solid var(--line)}
.tnote::-webkit-scrollbar-thumb,
textarea#notes::-webkit-scrollbar-thumb,
textarea#answer::-webkit-scrollbar-thumb,
.bench-note::-webkit-scrollbar-thumb{background:#2e4a6e; border:2px solid #0a0d0e}
.tnote:hover::-webkit-scrollbar-thumb,
textarea#notes:hover::-webkit-scrollbar-thumb,
textarea#answer:hover::-webkit-scrollbar-thumb,
.bench-note:hover::-webkit-scrollbar-thumb{background:var(--blue)}

/* Firefox ignores ::-webkit-scrollbar; this guard never matches Chrome, so
   the two never fight over which scrollbar model to use. */
@supports (-moz-appearance:none){
  .tnote, textarea#notes, textarea#answer, .bench-note{
    scrollbar-width:thin; scrollbar-color:#2e4a6e #0a0d0e;
  }
}