/* Daily Desk. Narrow is the design; wide is the enhancement.
   No hex outside the three token blocks below. */
:root{
  --bg:#F1F3F3; --surface:#FFFFFF; --line:#D0D8D8; --text:#1A1F20;
  --muted:#5F6A6B; --faint:#8B9596; --accent:#8C2F31; --good:#2C6A4E;
  --rule:rgba(0,0,0,.06); --shadow:rgba(0,0,0,.12);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14181A; --surface:#1B2022; --line:#2C3437; --text:#E8ECEC;
    --muted:#9AA6A8; --faint:#6E797B; --accent:#D08487; --good:#6FBF95;
    --rule:rgba(255,255,255,.07); --shadow:rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --bg:#14181A; --surface:#1B2022; --line:#2C3437; --text:#E8ECEC;
  --muted:#9AA6A8; --faint:#6E797B; --accent:#D08487; --good:#6FBF95;
  --rule:rgba(255,255,255,.07); --shadow:rgba(0,0,0,.45);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 var(--sans);
     -webkit-font-smoothing:antialiased}

/* ---- chrome: two lines, and never more ---- */
.chrome{position:sticky;top:0;z-index:5;background:var(--surface);
        border-bottom:1px solid var(--line)}
.crow{display:flex;align-items:center;gap:8px;padding:6px 10px;min-height:34px}
.crow+.crow{border-top:1px solid var(--rule)}
.cdate{font-weight:600;letter-spacing:.01em}
.cstats{margin-left:auto;font:12px/1 var(--mono);font-variant-numeric:tabular-nums;
        color:var(--muted);white-space:nowrap}
.cstats b{color:var(--accent);font-weight:600}
.nav{display:flex;gap:4px}
.nav a,.tab{display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:26px;padding:0 8px;border:1px solid var(--line);
  border-radius:5px;background:var(--surface);color:var(--muted);
  text-decoration:none;font-size:12px;cursor:pointer;font-family:inherit}
.nav a:hover,.tab:hover{border-color:var(--faint);color:var(--text)}
.tab[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--surface)}
.tabs{margin-left:auto;display:flex;gap:4px}

/* ---- the register ---- */
main{padding:2px 0 60px}
.ghead{display:flex;align-items:baseline;gap:6px;padding:12px 10px 3px;
       font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
       color:var(--accent);margin:0}
.ghead .n{margin-left:auto;font:11px/1 var(--mono);color:var(--faint);font-weight:400}
.reg{list-style:none;margin:0;padding:0;background:var(--surface);
     border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.line{display:flex;align-items:flex-start;gap:8px;padding:7px 10px;
      border-bottom:1px solid var(--rule)}
.line:last-child{border-bottom:0}
.tick{flex:0 0 auto;width:15px;height:15px;margin-top:2px;border:1.5px solid var(--faint);
      border-radius:3px;background:transparent;cursor:pointer;padding:0}
.tick:hover{border-color:var(--text)}
.txt{flex:1 1 auto;min-width:0;word-wrap:break-word;overflow-wrap:anywhere}
.age{flex:0 0 auto;font:11px/1.4 var(--mono);color:var(--faint);
     font-variant-numeric:tabular-nums}
.line.hot .age{color:var(--accent);font-weight:600}
.line.done .tick{background:var(--good);border-color:var(--good)}
.line.done .txt{text-decoration:line-through;color:var(--faint)}

/* an empty desk should say something, not look broken */
.empty{padding:40px 16px;text-align:center;color:var(--faint);font-size:13px}
.empty b{display:block;color:var(--muted);font-weight:600;margin-bottom:4px}

.rail{display:none}
.rail.on{display:block}

/* ---- the detail as a narrow-mode sheet (the default presentation) ---- */
.detail{display:none}
.detail.on{display:block;position:fixed;inset:0;z-index:30;overflow-y:auto;
           padding:10px;background:var(--bg)}
body.sheet{overflow:hidden}
.gname{cursor:pointer}
.gname:hover{text-decoration:underline}
.card{border:1px solid var(--line);border-radius:7px;background:var(--surface);overflow:hidden}
.card-h{display:flex;align-items:center;padding:7px 11px;border-bottom:1px solid var(--line);
        background:var(--bg);font:600 10.5px/1.3 var(--sans);letter-spacing:.07em;
        text-transform:uppercase;color:var(--muted)}
.card-h .x{margin-left:auto;width:24px;height:24px;padding:0;border:1px solid var(--line);
           border-radius:5px;background:var(--surface);color:var(--muted);
           font-size:15px;line-height:1;cursor:pointer;font-family:inherit}
.card-h .x:hover{border-color:var(--accent);color:var(--accent)}
.card-b{padding:11px}
.dtext{margin:0 0 10px;font-size:14px}
.dtext[data-act="edit"]{cursor:text;border-radius:4px;padding:2px 4px;margin-left:-4px}
.dtext[data-act="edit"]:hover{background:var(--bg)}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:12.5px}
dl.kv dt{color:var(--faint)}
dl.kv dd{margin:0}
dl.kv dd.hotv{color:var(--accent);font-weight:600}
.dnote{margin:10px 0 0;padding:9px 4px 0;border-top:1px solid var(--rule);
       font-size:13px;color:var(--muted);cursor:text;white-space:pre-wrap}
.dnote.empty{color:var(--faint)}
.dnote:hover{color:var(--text)}
.dedit{width:100%;border:1px solid var(--accent);border-radius:5px;padding:6px 8px;
       background:var(--surface);color:var(--text);font:inherit;outline:0;resize:vertical}
.hint{margin:9px 0 0;font-size:11.5px;color:var(--faint);line-height:1.4}
.line.sel,.ghead.sel{background:var(--bg)}

/* ---- wide: the enhancement ---- */
.mast{display:none}
.detail{display:none}
@media (min-width:900px){
  .tabs{display:none}
  .wrap{display:grid;grid-template-columns:1fr 360px;gap:0;align-items:start}
  /* --head is the sticky header's measured height at this width (87.3px, so
     88). The side column sticks below it; keep the two in step if the header
     ever gains or loses a row. */
  :root{--head:88px}
  .side{position:sticky;top:var(--head);border-left:1px solid var(--line);
        max-height:calc(100vh - var(--head));overflow-y:auto}
  .rail,.rail.on{display:block}
  .mast{display:flex;align-items:flex-start;gap:24px;padding:18px 20px 14px;
        background:var(--surface);border-bottom:1px solid var(--line)}
  .eyebrow{font:600 10.5px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
           color:var(--accent);margin-bottom:6px}
  .mast h1{font:400 25px/1.15 var(--serif);margin:0}
  .sub{margin:5px 0 0;color:var(--muted);font-size:13px;max-width:52ch}
  .stats{margin-left:auto;display:flex;gap:22px;text-align:right}
  .stats b{display:block;font:600 25px/1 var(--mono);font-variant-numeric:tabular-nums}
  .stats span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
  /* This row holds nothing but .cdate and .cstats, and the masthead above
     already carries both - an empty 34px band in the one place where vertical
     space is the whole point. */
  .crow-stats{display:none}
  .cdate,.cstats{display:none}
  /* the sheet stops being a sheet and becomes the right-hand column */
  .detail.on{position:static;inset:auto;padding:12px;overflow:visible;background:transparent}
  .detail.on+.railwrap{display:none}
  body.sheet{overflow:auto}
}

/* ---- actions inside the detail panel ---- */
.acts{display:flex;gap:5px;margin-top:11px;flex-wrap:wrap}
.tab.danger{color:var(--accent);border-color:var(--accent)}
.undo{margin-left:8px;border:1px solid var(--accent);border-radius:4px;
  background:transparent;color:var(--accent);font:inherit;padding:1px 8px;cursor:pointer}

/* ---- capture ---- */
.addbtn{margin-left:6px;width:18px;height:18px;line-height:16px;padding:0;
        border:1px solid var(--line);border-radius:4px;background:var(--surface);
        color:var(--muted);font-size:13px;cursor:pointer;font-family:inherit}
.addbtn:hover{border-color:var(--accent);color:var(--accent)}
.newline input{border:0;outline:0;background:transparent;color:var(--text);
               font:inherit;width:100%;padding:0}
.newline .tick{opacity:.35}
.say{position:fixed;left:10px;right:10px;bottom:10px;z-index:20;padding:9px 12px;
     border:1px solid var(--accent);border-radius:6px;background:var(--surface);
     color:var(--accent);font-size:13px;box-shadow:0 6px 20px var(--shadow)}

/* ---- quick capture and new groups ----
   Capture and search share ONE row. Search gets no bar of its own: this page is
   docked beside real work, and vertical space is the scarcest thing it has. */
/* Inside .chrome, which is the sticky element. It used to stick on its own at
   top:69px - the measured height of the day page's two-row chrome - and the
   Find page, whose chrome is one row, got a dead band where sticky pushed the
   bar DOWN to meet that number. The header sticks as one block instead. */
.quickbar{display:flex;align-items:center;gap:6px;
          padding:6px 10px;background:var(--surface);
          border-top:1px solid var(--rule)}
.quickbar form{margin:0;min-width:0}
.qcap{flex:1 1 auto}
.qfind{flex:0 0 118px}
.qfind.wide{flex:1 1 auto}
.quickbar input{width:100%;border:1px solid var(--line);border-radius:5px;
  background:var(--bg);color:var(--text);font:inherit;padding:6px 9px;outline:0;
  -webkit-appearance:none;appearance:none}
.quickbar input:focus{border-color:var(--accent)}
.quickbar input::placeholder{color:var(--faint)}
.newgroup{display:block;width:calc(100% - 20px);margin:10px;padding:7px;
  border:1px dashed var(--line);border-radius:6px;background:transparent;
  color:var(--faint);font:inherit;cursor:pointer}
.newgroup:hover{border-color:var(--accent);color:var(--accent)}
.newgroup input.groupname{width:100%;border:0;outline:0;background:transparent;
  color:var(--text);font:inherit;text-align:center;padding:0}


/* ---- search results and the bin ---- */
.line.withmeta{flex-wrap:wrap}
.meta{flex:1 0 100%;margin-left:23px;font:11px/1.4 var(--mono);color:var(--faint)}
.line.binned{flex-wrap:wrap;gap:6px}
.line.binned .txt{flex:1 1 100%;color:var(--muted)}
.line.binned .meta{margin-left:0;flex:1 1 auto}
.binacts{margin-left:auto;display:flex;gap:5px;flex:0 0 auto}
.binhint{padding:0 11px;max-width:62ch}
.pager{display:flex;align-items:center;justify-content:center;gap:10px;
       padding:12px 10px;font-size:12px}
.pager a{color:var(--accent);text-decoration:none;border:1px solid var(--line);
         border-radius:5px;padding:4px 9px}
.pager a:hover{border-color:var(--accent)}
.pager .off{color:var(--faint);padding:4px 9px}
.pager .pos{font:11px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}