:root{
  --paper:#FBE88C; --paper-line:#BA7517; --ink:#412402; --ink-2:#633806; --ink-3:#854F0B;
  /* Paper is yellow in BOTH modes, so text sitting on it must never flip. */
  --on-paper:#412402; --on-paper-2:#633806; --on-paper-3:#7A4A0A;
  --bg:#F6F4EE; --card:#FFFFFF; --rule:#E2DDD0; --accent:#0F6E56; --accent-bg:#E1F5EE;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:ui-serif,"Iowan Old Style",Palatino,Georgia,serif;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#14110B;--card:#1D1A13;--rule:#332D22;--ink:#F2E9D6;--ink-2:#C8B996;--ink-3:#A99A78;
        --accent:#5DCAA5;--accent-bg:#0E2A22;}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;
     -webkit-font-smoothing:antialiased;min-height:100dvh}
.wrap{max-width:34rem;margin:0 auto;padding:1.5rem 1.15rem 6rem;min-height:100dvh;
      display:flex;flex-direction:column}
.bar{height:3px;background:var(--rule);border-radius:2px;overflow:hidden;margin-bottom:1.75rem}
.bar span{display:block;height:100%;background:var(--accent);width:0;transition:width .35s ease}
.screen{display:none;flex-direction:column;gap:1.1rem;animation:in .28s ease both}
.screen.on{display:flex}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}.bar span{transition:none}}
h1{font-family:var(--serif);font-size:1.75rem;line-height:1.2;margin:0;font-weight:600;text-wrap:balance}
h2{font-family:var(--serif);font-size:1.35rem;line-height:1.25;margin:0;font-weight:600;text-wrap:balance}
p{margin:0;color:var(--ink-2)}
p.lead{color:var(--ink);font-size:1.05rem}
.kicker{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
button,input{font:inherit}
.btn{appearance:none;border:1px solid var(--on-paper);background:var(--paper);color:var(--on-paper);
     border-radius:10px;padding:.85rem 1.1rem;font-weight:600;cursor:pointer;width:100%;
     text-align:center;transition:transform .08s ease}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn.ghost{background:transparent;border-color:var(--rule);color:var(--ink-2);font-weight:500}
input[type=text]{width:100%;padding:.85rem .9rem;border:1px solid var(--rule);border-radius:10px;
                 background:var(--card);color:var(--ink)}
input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.card{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:1.05rem 1.1rem;
      display:flex;flex-direction:column;gap:.5rem;cursor:pointer;text-align:left;width:100%;
      transition:border-color .15s ease,background .15s ease}
.card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.card[aria-pressed=true]{border-color:var(--accent);background:var(--accent-bg)}
.card .nm{font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--ink);
          display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.card .tick{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rule);flex:none;
            display:grid;place-items:center;font-size:13px;color:transparent}
.card[aria-pressed=true] .tick{background:var(--accent);border-color:var(--accent);color:#fff}
.card .wt{font-size:.95rem;color:var(--ink)}
.card .rl{font-size:.88rem;color:var(--ink-2);border-left:2px solid var(--accent);padding-left:.7rem}
.card .wr{font-size:.85rem;color:var(--ink-2);background:var(--accent-bg);
          border-radius:8px;padding:.5rem .65rem}
.card .wr b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.card .lk{font-size:.8rem;color:var(--ink-3)}
.peek{appearance:none;background:none;border:0;border-bottom:1px dashed var(--ink-3);
      color:var(--ink-2);font-size:.9rem;padding:.2rem 0;cursor:pointer;align-self:flex-start}
.peek:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.peek[aria-expanded=true]{color:var(--accent);border-bottom-color:var(--accent)}
.peekbox{background:var(--card);border:1px solid var(--rule);border-radius:12px;
         padding:.95rem 1rem;display:flex;flex-direction:column;gap:.8rem}
/* A class with display:flex beats the UA stylesheet's [hidden]{display:none}. */
.peekbox[hidden]{display:none}
.peekbox .ph{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.11em;
             text-transform:uppercase;color:var(--ink-3)}
.peekbox .pj{display:flex;flex-direction:column;gap:.15rem}
.peekbox .pj b{font-size:.95rem;font-weight:600;color:var(--ink)}
.peekbox .pj span{font-size:.88rem;color:var(--ink-2)}
.peekbox .pf{font-size:.85rem;color:var(--ink-3);border-top:1px solid var(--rule);padding-top:.7rem}
/* ---- the board ---- */
.mapwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:.4rem 0}
.map{position:relative;width:100%;min-width:300px}
.map .path{position:absolute;background:var(--rule);border-radius:2px}
.map .path.walked{background:var(--accent)}
/* Tiles carry a NUMBER, not a name. Colour encodes the region; the legend names
   the regions and the panel names the place you land on. */
.map .node{position:absolute;transform:translate(-50%,-50%);width:48px;height:48px;
           border-radius:12px;border:2px solid var(--rule);background:var(--card);
           display:grid;place-items:center;cursor:default;padding:0;
           font-family:var(--sans);color:var(--ink-3);overflow:hidden;
           transition:transform .12s ease,box-shadow .15s ease}
.map .node .nno{font-size:1.15rem;font-weight:600;font-variant-numeric:tabular-nums;
                line-height:1;color:var(--rc,var(--ink-3));opacity:.55}
.map .node .nlab{font-size:.55rem;font-weight:700;letter-spacing:.06em}
.map .node.reach{border-color:var(--rc);cursor:pointer;
                 box-shadow:0 0 0 4px color-mix(in srgb,var(--rc) 22%,transparent)}
.map .node.reach .nno{opacity:1}
.map .node.reach:active{transform:translate(-50%,-50%) scale(.94)}
.map .node.seen{border-color:var(--rc);
                background:color-mix(in srgb,var(--rc) 16%,var(--card))}
.map .node.seen .nno{opacity:1}
.map .node.onboard{background:var(--paper);border-color:var(--on-paper)}
.map .node.onboard .nno{color:var(--on-paper);opacity:1}
.map .node.here{border-color:var(--ink);border-width:3px;
                box-shadow:0 0 0 4px color-mix(in srgb,var(--ink) 18%,transparent)}
.map .node.startnode{border-radius:50%;background:var(--ink);color:var(--card);
                     border-color:var(--ink);width:44px;height:44px}
.map .node.startnode .nlab{color:var(--card)}
.map .node:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.map .tok{position:absolute;transform:translate(-50%,-50%);width:16px;height:16px;
          border-radius:50%;background:var(--accent);border:2px solid var(--bg);
          z-index:5;transition:left .28s ease,top .28s ease;pointer-events:none;
          box-shadow:0 1px 4px rgba(0,0,0,.35)}
@media (prefers-reduced-motion:reduce){.map .tok{transition:none}}
.legend{display:flex;flex-wrap:wrap;gap:.5rem .9rem;font-family:var(--sans);
        font-size:.75rem;color:var(--ink-3);padding:.2rem 0 .1rem}
.legend span{display:flex;align-items:center;gap:.3rem}
.legend i{width:11px;height:11px;border-radius:3px;display:block}

#nodepanel:not(:empty){background:var(--card);border:1px solid var(--rule);
  border-radius:14px;padding:1.05rem 1.1rem;display:flex;flex-direction:column;gap:.55rem;
  margin-top:.4rem}
#nodepanel .pnum{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
                 font-family:var(--sans);font-size:1.05rem;font-weight:600;color:#14110B;
                 font-variant-numeric:tabular-nums}
#nodepanel .plane{font-family:var(--sans);font-size:.68rem;font-weight:700;
                  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
                  margin-top:-.2rem}
#nodepanel .pn{font-family:var(--serif);font-size:1.18rem;font-weight:600;margin-top:-.3rem}
#nodepanel .pw{font-size:.95rem}
#nodepanel .pr{font-size:.9rem;color:var(--ink-2);border-left:2px solid var(--accent);
               padding-left:.7rem}
#nodepanel .pv{font-size:.85rem;color:var(--ink-2);background:var(--accent-bg);
               border-radius:8px;padding:.5rem .65rem}
#nodepanel .pv b{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
#nodepanel .pu{font-family:var(--sans);font-size:.82rem;color:var(--ink-3);
               text-decoration:none;align-self:flex-start;border-bottom:1px dashed var(--rule)}
#nodepanel .pu::after{content:" \2197"}
#nodepanel .pu:hover{color:var(--accent);border-bottom-color:var(--accent)}

.cardwrap{display:flex;flex-direction:column}
.card .add{font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--accent);
           margin-top:.15rem}
.card[aria-pressed=true] .add{color:var(--accent)}
.visit{font-family:var(--sans);font-size:.82rem;color:var(--ink-3);text-decoration:none;
       align-self:flex-start;padding:.5rem .2rem .1rem;border-bottom:1px dashed var(--rule)}
.visit:hover,.visit:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
.visit::after{content:" \2197"}

.rankrow{display:flex;gap:.7rem;align-items:center;background:var(--card);
         border:1px solid var(--rule);border-radius:12px;padding:.8rem .9rem}
.rankrow .rk{flex:none;width:26px;height:26px;border-radius:50%;background:var(--accent);
             color:#fff;display:grid;place-items:center;font-family:var(--sans);
             font-size:.85rem;font-weight:600;font-variant-numeric:tabular-nums}
.rankrow .rkbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.rankrow .rkbody b{font-family:var(--serif);font-size:1.02rem;font-weight:600}
.rankrow .rkbody span{font-family:var(--sans);font-size:.83rem;color:var(--ink-2)}
.rankrow .rkw{color:var(--accent)!important;font-variant-numeric:tabular-nums}
.rankrow .rkctl{flex:none;display:flex;flex-direction:column;gap:.2rem}
.rankrow .mv{appearance:none;background:none;border:1px solid var(--rule);border-radius:6px;
             width:30px;height:24px;color:var(--ink-2);cursor:pointer;font-size:11px;
             display:grid;place-items:center;padding:0}
.rankrow .mv:disabled{opacity:.3;cursor:default}
.rankrow .mv:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rankrow .mv.drop{color:var(--ink-3);font-size:15px}
.stack{display:flex;flex-direction:column;gap:.7rem}
.foot{margin-top:auto;padding-top:1.5rem;display:flex;flex-direction:column;gap:.6rem}
.back{background:none;border:0;color:var(--ink-3);font-size:.85rem;cursor:pointer;padding:.4rem;
      align-self:center}
.count{font-size:.85rem;color:var(--ink-3);text-align:center}
.postit{background:var(--paper);border:.5px solid var(--paper-line);border-radius:2px;
        padding:1.1rem 1.25rem;color:var(--on-paper);transform:rotate(-.5deg)}
.postit p,.postit b,.postit span{color:var(--on-paper)}
.postit .row .bx{color:var(--on-paper-3)}
.postit .row span[style*="line-through"]{color:var(--on-paper-3)!important}
/* Tape sits INSIDE the note — a negative margin pushes the overhang onto the page
   background, which reads as a stray grey bar in dark mode. */
.postit .tp{width:100px;height:18px;background:rgba(255,255,255,.5);
            border:.5px solid rgba(186,117,23,.3);margin:0 auto 12px;transform:rotate(1.5deg)}
.row{display:flex;gap:.6rem;align-items:flex-start;padding:.35rem 0;font-size:.95rem}
.row .bx{flex:none;width:18px;text-align:center;color:var(--ink-3)}
.laneh{margin-top:.5rem}
.sr{position:absolute;left:-9999px}

/* ---------- the ranked job board (v18, second cut) ---------- */
.chip{appearance:none;border:1px solid var(--rule);background:var(--card);color:var(--ink-2);
      border-radius:999px;padding:.35rem .85rem;font-size:.85rem;cursor:pointer}
.chip-on{border-color:var(--accent);background:var(--accent-bg);color:var(--ink);font-weight:600}
#filters{display:flex;flex-wrap:wrap;gap:.45rem}
.jobcard{background:var(--card);border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.jobopen{border-color:var(--accent)}
.jobdone{opacity:.72}
.jobhead{appearance:none;border:0;background:none;color:var(--ink);width:100%;text-align:left;
         display:flex;align-items:center;gap:.8rem;padding:.95rem 1rem;cursor:pointer}
.jobhead:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.rk2{flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;background:var(--paper);
     color:var(--on-paper);font-weight:700;display:flex;align-items:center;justify-content:center}
.jobdone .rk2{background:var(--accent-bg);color:var(--accent)}
.jobhb{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.jobhb b{font-family:var(--serif);font-size:1.05rem;line-height:1.3}
.jobtags{font-size:.78rem;color:var(--ink-3)}
.jobcaret{flex:0 0 auto;font-size:.7rem;color:var(--ink-3)}
.jobbody{padding:0 1rem 1rem;display:flex;flex-direction:column;gap:.8rem;
         border-top:1px dashed var(--rule);padding-top:.9rem}
.jpay{color:var(--accent);font-size:.95rem}
.jobbody .visit{color:var(--ink-2);font-size:.9rem;text-decoration:underline dotted}