:root{
  --paper:#faf8f5; --surface:#ffffff; --sunk:#f2efe9;
  --ink:#191b1f; --ink-2:#4b4d52; --muted:#7d7a73; --faint:#a5a199;
  --rule:#e4e0d9; --rule-2:#efece6;
  --accent:#2c6b58; --accent-soft:#e3ede9;
  --rust:#b04a2c; --rust-soft:#f6e6e0;
  --amber:#9c7016; --amber-soft:#f5ecd8;
  --blue:#3a5f86; --blue-soft:#e4ebf3;
  --shadow:0 1px 2px rgba(25,27,31,.06), 0 12px 32px rgba(25,27,31,.10);
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"IBM Plex Serif",Georgia,serif;
}
:root{ --ink-2:#4b4d52; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#141619; --surface:#1b1e22; --sunk:#202429;
    --ink:#e9e6e0; --ink-2:#b9b6b0; --muted:#8d8a84; --faint:#6b6862;
    --rule:#2b2f35; --rule-2:#24282d;
    --accent:#63a68e; --accent-soft:#1e2f2a;
    --rust:#d97a58; --rust-soft:#33211c;
    --amber:#d1a34a; --amber-soft:#2e2718;
    --blue:#7ba3cc; --blue-soft:#1c242e;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --paper:#141619; --surface:#1b1e22; --sunk:#202429;
  --ink:#e9e6e0; --ink-2:#b9b6b0; --muted:#8d8a84; --faint:#6b6862;
  --rule:#2b2f35; --rule-2:#24282d;
  --accent:#63a68e; --accent-soft:#1e2f2a;
  --rust:#d97a58; --rust-soft:#33211c;
  --amber:#d1a34a; --amber-soft:#2e2718;
  --blue:#7ba3cc; --blue-soft:#1c242e;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---- frame ---- */
.frame{display:grid;grid-template-columns:var(--rail-w,238px) 1fr;min-height:100vh}
.rail{border-right:1px solid var(--rule);background:var(--sunk);padding:14px 0 28px;display:flex;flex-direction:column;gap:18px;
  position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.brand{display:flex;align-items:baseline;gap:7px;padding:2px 16px 6px}
.brand b{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em}
.brand span{font-family:var(--mono);font-size:10px;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.railgroup{display:flex;flex-direction:column}
.railhead{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);padding:0 16px 6px}
.railitem{display:flex;align-items:center;gap:9px;padding:6px 16px;text-align:left;color:var(--ink-2);border-left:2px solid transparent;min-width:0}
.railitem>span:not(.dot):not(.n){overflow:hidden;text-overflow:ellipsis}
.railitem:hover{background:var(--rule-2);color:var(--ink)}
.railitem[aria-current="true"]{background:var(--surface);color:var(--ink);border-left-color:var(--accent)}
.railitem .n{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--faint)}
.railitem[aria-current="true"] .n{color:var(--muted)}
.dot{width:7px;height:7px;border-radius:2px;flex:none}
.railclient{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);padding:8px 16px 2px;text-transform:uppercase}
.railitem.subi{padding-left:26px;font-size:13px}
.chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-family:var(--mono);font-size:11px}
.chain span{border:1px solid var(--rule);border-radius:20px;padding:2px 9px;color:var(--muted);background:var(--surface)}
.chain span.now{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:500}
.chain span.next{border-style:dashed;color:var(--faint)}
/* A span with a height needs a display, or it collapses outside a flex parent. */
.bar{display:inline-block;vertical-align:middle;height:6px;border-radius:3px;background:var(--rule-2);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:var(--accent)}
.railfoot{margin-top:auto;padding:0 16px;display:flex;flex-direction:column;gap:8px}
.kbd{font-family:var(--mono);font-size:11px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--muted);background:var(--surface)}

.main{min-width:0;display:flex;flex-direction:column;transition:padding-right .18s cubic-bezier(.3,.7,.3,1)}
body.paneopen .main{padding-right:var(--pane-w,560px)}
@media (prefers-reduced-motion:reduce){.main{transition:none}}
@media (max-width:1100px){body.paneopen .main{padding-right:0}}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:5}
.topbar h1{margin:0;font-size:19px;font-weight:600;letter-spacing:-.01em}
.topbar .sub{color:var(--muted);font-size:14px}
.spacer{margin-left:auto}
.searchbtn{display:flex;align-items:center;gap:8px;border:1px solid var(--rule);background:var(--surface);border-radius:6px;padding:6px 9px 6px 11px;color:var(--muted);font-size:14px}
.searchbtn:hover{border-color:var(--muted);color:var(--ink)}
.toggle{border:1px solid var(--rule);background:var(--surface);border-radius:6px;padding:5px 10px;font-size:12px;color:var(--muted)}
.toggle[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .toggle[aria-pressed="true"],
:root:not([data-theme="light"]) .toggle[aria-pressed="true"]{color:#101512}
.pane{padding:20px 28px 90px;max-width:none}

/* ---- rows ---- */
.groups{display:flex;flex-direction:column;gap:26px}
.group>h2{margin:0 0 3px;font-size:13px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);display:flex;align-items:baseline;gap:8px}
.group>h2 em{font-style:normal;color:var(--faint);font-size:12px}
.group.over>h2{color:var(--rust)}
.rows{border-top:1px solid var(--rule)}
/* The header and the rows must share one column definition, or `auto` sizes each
   to its own content and the labels stop describing the cells under them. */
.row{display:grid;grid-template-columns:var(--rowcols);align-items:center;gap:11px;padding:10px 6px;border-bottom:1px solid var(--rule-2);width:100%;text-align:left}
:root{--rowcols:22px minmax(0,1fr) 70px 116px 30px 66px}
.row:hover{background:var(--surface)}
.row.ind{padding-left:30px}
.row.ind .title{color:var(--ink-2)}
.row.parent .title{font-weight:600}
/* Selection changes colour only. Anything that changes size makes rows jump
   under the cursor, which is the opposite of feeling fast. */
.check{width:16px;height:16px;border:1.5px solid var(--faint);border-radius:4px;flex:none}
.check:hover{border-color:var(--accent);background:var(--accent-soft)}
.rowmain{min-width:0}
.title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{display:flex;gap:8px;align-items:center;color:var(--faint);font-size:12.5px;margin-top:1px;flex-wrap:wrap}
.meta .mono{font-size:12px}
.crumb{color:var(--muted)}
.pill{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;padding:2px 7px;border-radius:20px;white-space:nowrap}
.pill.todo{background:var(--rule-2);color:var(--muted);border:1px solid var(--rule)}
.pill.doing{background:var(--blue-soft);color:var(--blue)}
.pill.review{background:var(--amber-soft);color:var(--amber)}
.pill.ready{background:var(--accent-soft);color:var(--accent)}
.pill.blocked{background:var(--rust-soft);color:var(--rust)}
.pill.waiting{background:var(--sunk);color:var(--ink-2);border:1px dashed var(--muted)}
/*//// -- Open loops: tabs and chips on one line, pickers under them. */
.olhead{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.olchips{display:flex;gap:6px;flex-wrap:wrap}
.olchip{text-decoration:none;white-space:nowrap}
.olchip b{font-family:var(--mono);font-weight:500;margin-left:3px}
.olchip.alert b{color:var(--rust)}
.olfilters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.olpick{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--muted);min-width:0;max-width:100%}
.olpick .ctl{max-width:220px}
.olstatuses{display:flex;gap:5px;flex-wrap:wrap}
.olstatus{text-decoration:none;font-family:var(--mono);font-size:12px;padding:3px 9px}
.olactive{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 16px}
.olactive .chip{text-decoration:none}
.olclear{font-size:13px}
.tcell a.plink{text-decoration:none;flex:0 4 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcell a.plink:hover{text-decoration:underline;color:var(--ink)}
.tcell .owner{color:var(--ink-2)}
.tcell .lateby{flex:none;font-family:var(--mono);font-size:11.5px;color:var(--rust);font-weight:500}
.tag{font-size:12px;color:var(--muted);background:var(--rule-2);border:1px solid var(--rule);padding:1px 6px;border-radius:4px}
.who{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;font-family:var(--mono);background:var(--rule-2);color:var(--ink-2);border:1px solid var(--rule);flex:none}
.when{font-family:var(--mono);font-size:12.5px;color:var(--muted);min-width:58px;text-align:right;font-variant-numeric:tabular-nums}
.when.late{color:var(--rust);font-weight:500}
.when.none{color:var(--faint)}
.prog{font-family:var(--mono);font-size:12px;color:var(--faint)}
.sub{color:var(--faint);font-size:12.5px}

/* ---- record hub ---- */
.hub{display:flex;flex-direction:column;gap:24px}
.hubhead{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.hubhead h1{margin:0;font-size:25px;letter-spacing:-.015em}
.fields{background:var(--surface);border:1px solid var(--rule);border-radius:8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.field{padding:11px 15px;border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);min-width:0}
.field dt{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:0 0 2px}
.field dd{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field a{color:var(--accent);text-decoration:none}
.field a:hover{text-decoration:underline}
.sec{display:flex;flex-direction:column;gap:2px}
.sechead{display:flex;align-items:baseline;gap:9px;padding-bottom:5px}
.sechead h3{margin:0;font-size:14.5px;font-weight:600}
.sechead .c{font-family:var(--mono);font-size:12px;color:var(--faint)}
.sechead .act{margin-left:auto;font-size:12px;color:var(--accent)}
.tablewrap{overflow-x:auto;border-top:1px solid var(--rule)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:400;padding:6px 10px 6px 0;border-bottom:1px solid var(--rule)}
td{padding:9px 12px 9px 0;border-bottom:1px solid var(--rule-2);white-space:nowrap}
td.grow{white-space:normal;min-width:180px}
tr.clickable:hover td{background:var(--surface)}
.feed{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.ev{display:grid;grid-template-columns:24px 1fr auto;gap:10px;padding:8px 0;border-bottom:1px solid var(--rule-2);align-items:start}
.ev p{margin:0}
.ev .t{font-family:var(--mono);font-size:12px;color:var(--faint);white-space:nowrap}
.quote{border-left:2px solid var(--rule);padding-left:10px;color:var(--ink-2);margin-top:3px}

/* ---- item pane ---- */
.scrim{position:fixed;inset:0;z-index:18;background:rgba(25,27,31,.28);opacity:0;pointer-events:none;transition:opacity .16s}
/* On a wide screen the page makes room for the pane, so there is nothing to dim.
   On a narrow one the pane covers the page and the scrim comes back. */
.scrim.on{opacity:0;pointer-events:none}
@media (max-width:1100px){.scrim.on{opacity:1;pointer-events:auto}}
.detail{position:fixed;top:0;right:0;bottom:0;width:min(var(--pane-w,560px),100%);background:var(--surface);border-left:1px solid var(--rule);box-shadow:var(--shadow);transform:translateX(102%);transition:transform .18s cubic-bezier(.3,.7,.3,1);overflow-y:auto;z-index:20}
.detail.on{transform:none}
@media (prefers-reduced-motion:reduce){.detail{transition:none}.scrim{transition:none}}
.dhead{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--surface)}
.dhead .crumb{font-size:12px}
.dbody{padding:16px 18px 60px;display:flex;flex-direction:column;gap:18px}
.dbody h2{margin:0;font-size:20px;letter-spacing:-.01em}
.props{display:grid;grid-template-columns:88px 1fr;gap:9px 12px;align-items:center;font-size:14px}
.props dt{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.props dd{margin:0;display:flex;align-items:center;gap:7px}
.chk{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule-2);font-size:14px}
.chk.done span{color:var(--faint);text-decoration:line-through}
.box{width:16px;height:16px;border:1.5px solid var(--faint);border-radius:3px;flex:none;display:grid;place-items:center;font-size:9px;color:var(--surface)}
.box.on{background:var(--accent);border-color:var(--accent);color:#fff}
.cmt{padding:9px 0;border-bottom:1px solid var(--rule-2);display:grid;grid-template-columns:24px 1fr;gap:10px}
.cmt .n{font-size:13px;color:var(--muted)}
.cmt p{margin:2px 0 0}
.composer{border:1px solid var(--rule);border-radius:7px;padding:9px 11px;color:var(--faint);background:var(--paper)}
.attach{display:flex;align-items:center;gap:9px;border:1px solid var(--rule);border-radius:7px;padding:7px 10px;font-size:12.5px;color:var(--ink-2)}
.attach .thumb{width:30px;height:24px;border-radius:3px;background:linear-gradient(135deg,var(--blue-soft),var(--accent-soft));border:1px solid var(--rule);flex:none}

/* ---- palette ---- */
.palette{position:fixed;inset:0;display:none;place-items:start center;padding-top:14vh;z-index:30}
.palette.on{display:grid}
.pbox{width:min(560px,92vw);background:var(--surface);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow);overflow:hidden}
.pin{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--rule)}
.pin input{flex:1;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);outline:none}
.pres{max-height:320px;overflow-y:auto;padding:6px}
.pres .r{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;width:100%;text-align:left;font-size:14px}
.pres .r:hover,.pres .r.sel{background:var(--sunk)}
.pres .r .k{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.pres .h{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);padding:8px 9px 4px}

/* ---- design notes ---- */
.note{display:none;border-left:2px solid var(--accent);background:var(--accent-soft);color:var(--ink-2);padding:8px 12px;border-radius:0 6px 6px 0;font-size:12.5px;margin:8px 0}
.note b{color:var(--ink)}
body.notes .note{display:block}
.legend{display:none;font-size:12.5px;color:var(--muted);border:1px dashed var(--rule);border-radius:7px;padding:10px 13px;margin-bottom:18px}
body.notes .legend{display:block}

/* Phones are handled in one place, at the end of this file. */

/*//// -- App additions beyond the prototype */
.flash{position:fixed;left:22px;bottom:22px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:10px;font-size:14px;z-index:50;opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;pointer-events:none;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow);max-width:min(460px,90vw)}
.flash.on{opacity:1;transform:none;pointer-events:auto}
.flash .acts{display:flex;gap:7px;margin-left:auto}
.flash button{background:rgba(255,255,255,.12);color:inherit;border-radius:7px;padding:4px 10px;font-size:13px;white-space:nowrap}
.flash button:hover{background:rgba(255,255,255,.24)}
:root[data-theme="dark"] .flash,:root:not([data-theme="light"]) .flash{background:var(--surface);color:var(--ink);border:1px solid var(--rule)}
:root[data-theme="dark"] .flash button,:root:not([data-theme="light"]) .flash button{background:var(--sunk)}
.qahint{font-family:var(--mono);font-size:11px;color:var(--faint)}
.row.done .title{color:var(--faint);text-decoration:line-through}
.check.on{background:var(--accent);border-color:var(--accent)}
.inp{border:1px solid var(--rule);background:var(--surface);border-radius:6px;padding:7px 10px;font:inherit;font-size:14px;color:var(--ink);width:100%}
.inp:focus{outline:2px solid var(--accent);outline-offset:-1px}
.btn{border:1px solid var(--rule);background:var(--surface);border-radius:6px;padding:6px 12px;font-size:14px}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
:root[data-theme="dark"] .btn.primary,:root:not([data-theme="light"]) .btn.primary{color:#101512}
.addrow{display:flex;gap:8px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--rule-2)}
.addrow .inp{border:0;background:none;padding:2px 0}
.empty{color:var(--faint);font-size:14px;padding:14px 6px}
/* A form control. Named .ctl, not .sel, because .sel means "this row is
   selected" and a class doing two jobs silently restyles rows under the cursor. */
.ctl{border:1px solid var(--rule);background:var(--surface);border-radius:6px;padding:4px 8px;font:inherit;font-size:13.5px;color:var(--ink)}
.pill.closed{background:var(--rule-2);color:var(--faint);border:1px solid var(--rule)}
.pill.active{background:var(--accent-soft);color:var(--accent)}
.pill.onboard{background:var(--blue-soft);color:var(--blue)}
.pill.paused{background:var(--rule-2);color:var(--muted);border:1px solid var(--rule)}
.pill.offboarding{background:var(--rust-soft);color:var(--rust)}
.prio{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;padding:1px 5px;border-radius:3px}
.prio.high{background:var(--amber-soft);color:var(--amber)}
.prio.urgent{background:var(--rust-soft);color:var(--rust)}
.prio.low{background:var(--rule-2);color:var(--faint)}
.lock{font-size:10px;color:var(--faint);font-family:var(--mono)}
.row.sel{background:var(--surface);box-shadow:inset 2px 0 0 var(--accent)}
.railitem.cur{background:var(--surface);color:var(--ink);border-left-color:var(--accent)}
a.railitem{text-decoration:none}

/*//// -- Drag handles for the rail and the item pane */
.grip{position:absolute;top:0;bottom:0;width:9px;cursor:col-resize;z-index:25;touch-action:none}
.grip::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;background:transparent;transition:background .12s}
.grip:hover::after,.grip.dragging::after{background:var(--accent)}
#rail-grip{right:-4px}
#pane-grip{left:-4px}   /* absolute inside .detail, which is the fixed element */
.detail:not(.on) #pane-grip{display:none}
body.resizing{cursor:col-resize;user-select:none}
body.resizing .detail{transition:none}
/*//// -- Board */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:14px;overflow-x:auto;padding-bottom:20px}
.bcol{min-width:0}
.bhead{display:flex;align-items:center;gap:8px;padding-bottom:9px;border-bottom:2px solid var(--rule)}
.bstack{display:flex;flex-direction:column;gap:9px;padding-top:11px;min-height:60px}
.bcard{display:flex;flex-direction:column;gap:9px;text-align:left;border:1px solid var(--rule);background:var(--surface);border-radius:8px;padding:11px 12px;text-decoration:none;color:inherit;width:100%}
.bcard:hover{border-color:var(--muted)}
.bt{font-size:14px;line-height:1.35}
.brow{display:flex;align-items:center;gap:8px}
.viewtabs{display:flex;gap:2px;border:1px solid var(--rule);border-radius:7px;padding:2px;background:var(--surface)}
.viewtabs a{font-size:13px;padding:3px 11px;border-radius:5px;text-decoration:none;color:var(--muted)}
.viewtabs a[aria-current="true"]{background:var(--sunk);color:var(--ink);font-weight:500}
/*//// -- Inbox */
.ev.unread{position:relative}
.ev.unread::before{content:"";position:absolute;left:-11px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--rust)}
.linkish{color:var(--accent);font:inherit;padding:0;text-align:left}
.linkish:hover{text-decoration:underline}
/*//// -- Pointer affordance: anything that acts on click says so */
.row,.ev.nav,tr.clickable,.bcard,.railitem,.pres .r,.linkish,.xbtn,
[data-act],[data-edit],[data-href],.viewtabs a{cursor:pointer}
.row:hover,.ev.nav:hover{background:var(--surface)}
.ev.nav{border-radius:5px}
.evright{display:flex;align-items:center;gap:8px}
.xbtn{color:var(--faint);font-size:15px;line-height:1;padding:3px 6px;border-radius:5px;opacity:0}
.ev:hover .xbtn,.ev.sel .xbtn{opacity:1}
.xbtn:hover{background:var(--rule-2);color:var(--ink)}
.ev.sel{background:var(--surface);box-shadow:inset 2px 0 0 var(--accent)}
/*//// -- Editable cells */
.cell{padding:2px 4px;border-radius:5px;font:inherit;color:inherit;text-align:left;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cell:hover{background:var(--rule-2);box-shadow:inset 0 0 0 1px var(--rule)}
.fieldedit{display:block;width:100%;white-space:nowrap}
.prio.ghost{color:var(--faint);background:none}
/*//// -- Popover picker, used by click and by keyboard alike */
.pop{position:fixed;z-index:40;width:270px;background:var(--surface);border:1px solid var(--rule);border-radius:9px;box-shadow:var(--shadow);padding:7px}
.pop .inp{border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:5px 6px}
.poplist{max-height:270px;overflow-y:auto;margin-top:5px}
.poplist button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:7px 8px;border-radius:6px;font-size:14px}
.poplist button:hover,.poplist button.on{background:var(--sunk)}
.poplist .hint{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
/*//// -- Mention autocomplete reuses the picker chrome */
.mention-link{color:var(--accent);text-decoration:none}
.mention-link:hover{text-decoration:underline}
#helpbody{padding:10px 14px 16px}
.helprow{display:grid;grid-template-columns:120px 1fr;gap:6px 14px;font-size:14px;padding:4px 0}
.helprow b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted)}
.helpsec{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);padding:14px 0 4px}
/*//// -- Quick add, reachable from anywhere with n */
.qarow{display:flex;align-items:center;gap:8px;padding:11px 14px;border-top:1px solid var(--rule);flex-wrap:wrap}
.chip{border:1px solid var(--rule);background:var(--paper);border-radius:20px;padding:4px 12px;font-size:13px;color:var(--muted)}
.chip:hover,.chip:focus-visible{border-color:var(--muted);color:var(--ink)}
.chip.set{background:var(--accent-soft);border-color:transparent;color:var(--accent);font-weight:500}
.palette[hidden]{display:none}
/*//// -- Row navigation is a mode, so arrows scroll the page until you ask for it */
body.rownav .row.sel,body.rownav .ev.sel,body.rownav tr.sel td{background:var(--surface)}
.navhint{font-family:var(--mono);font-size:11px;color:var(--accent);background:var(--accent-soft);padding:2px 9px;border-radius:20px}
/*//// -- Settings forms */
.addfield{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:12px 0 4px}
.sec+.sec{margin-top:30px}
.props dd .inp{max-width:360px}

/*//// -- Table cells that pair an avatar with a name should stay on one line */
td.who-cell{white-space:nowrap}
td.who-cell .who{vertical-align:middle;margin-right:8px;display:inline-grid}
/*//// -- Playbook suggestion on a record */
.playbook{border:1px solid var(--accent);background:var(--accent-soft);border-radius:9px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.playbook b{color:var(--ink)}
.pbrow{display:flex;gap:9px;flex-wrap:wrap}
/*//// -- Your name at the bottom opens the things that are about you */
.usermenu{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:8px;text-align:left;min-width:0}
.usermenu:hover{background:var(--rule-2)}
.usermenu .un{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usermenu .ur{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--faint)}
.usersheet{position:absolute;bottom:52px;left:10px;right:10px;background:var(--surface);border:1px solid var(--rule);border-radius:9px;box-shadow:var(--shadow);padding:5px;z-index:30;display:flex;flex-direction:column}
.usersheet a,.usersheet button{display:block;padding:8px 10px;border-radius:6px;font-size:14px;color:var(--ink);text-decoration:none;text-align:left;width:100%}
.usersheet a:hover,.usersheet button:hover{background:var(--sunk)}
.usersheet .danger{color:var(--rust)}
.railfoot{position:relative}
/* A display value beats the hidden attribute, so say so explicitly. */
[hidden]{display:none !important}
/*//// -- Search scopes */
.scopes{display:flex;gap:5px;padding:8px 12px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.scopes button{font-size:12.5px;padding:3px 10px;border-radius:20px;color:var(--muted);border:1px solid transparent}
.scopes button[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:500}
.scopes button:hover{border-color:var(--rule)}
.pres .snip{color:var(--muted);font-size:12.5px;display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pres .r{align-items:flex-start;flex-direction:column;gap:1px}
.pres .r .top{display:flex;width:100%;align-items:center;gap:10px}
/*//// -- Share links */
.sharelink{font-family:var(--mono);font-size:12.5px;color:var(--accent);background:var(--rule-2);padding:3px 8px;border-radius:5px;cursor:pointer}
tr.off td{opacity:.45}
/*//// -- Field inputs inside the composer */
#qa-record-fields{border-top:1px solid var(--rule);padding:12px 14px 14px;max-height:46vh;overflow-y:auto}
.qafields{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:11px 14px}
.qafield{display:flex;flex-direction:column;gap:5px}
.qafield>span{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.qafield .inp,.qafield .ctl{width:100%}
.multi{display:flex;flex-wrap:wrap;gap:6px}
.multi .chip{display:flex;align-items:center;gap:6px;font-size:12.5px;padding:3px 9px}
/*//// -- Item pane extras */
.attach .thumb{object-fit:cover}
img.thumb{width:34px;height:26px;border-radius:3px;border:1px solid var(--rule)}
.dhead .xbtn{opacity:1;font-size:14px}
.chk .xbtn{opacity:0}
.chk:hover .xbtn{opacity:1}
.props dd .chip{padding:3px 10px;font-size:12.5px}
/*//// -- Time log */
.timelog{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.timerow{display:grid;grid-template-columns:26px 62px 1fr auto 24px;align-items:center;gap:9px;padding:5px 0;border-bottom:1px solid var(--rule-2);font-size:13px}
.timerow .tnote{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/*//// -- History stays folded away until asked for */
.hist{border-top:1px solid var(--rule-2);padding-top:10px}
.hist summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);list-style:none;display:flex;gap:8px;align-items:baseline}
.hist summary::-webkit-details-marker{display:none}
.hist summary::before{content:"\25B8";display:inline-block;transition:transform .12s;color:var(--faint)}
.hist[open] summary::before{transform:rotate(90deg)}
.hist summary:hover{color:var(--ink)}
.hist .feed{margin-top:8px}
/*//// -- The running timer, always visible */
.timerbar{display:flex;align-items:center;gap:9px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:4px 6px 4px 12px;font-size:13px;max-width:340px}
.timerbar b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.timerbar .el{font-family:var(--mono);font-size:12.5px}
.timerbar button{background:var(--accent);color:#fff;border-radius:14px;padding:3px 10px;font-size:12px}
:root[data-theme="dark"] .timerbar button,:root:not([data-theme="light"]) .timerbar button{color:#101512}

/*//// -- Item pane, minimal pass ------------------------------------------- */
.dhead{gap:8px;padding:12px 14px}
.dhead .xbtn{opacity:.55;font-size:14px;padding:4px 6px}
.dhead .xbtn:hover,.dhead .xbtn.on{opacity:1}
.dhead .xbtn.on{color:var(--accent)}
.dbody{padding:14px 16px 60px;gap:14px}
.dbody h2{font-size:19px;line-height:1.3}

/* One row of small controls instead of a label/value grid: the labels were
   saying what the control already says. */
.pmeta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mini{font:inherit;font-size:12.5px;color:var(--ink-2);background:var(--sunk);border:1px solid transparent;border-radius:6px;padding:3px 7px;max-width:170px}
.mini:hover{border-color:var(--rule);color:var(--ink)}
.mini:focus{outline:2px solid var(--accent);outline-offset:-1px}
.pmeta .chip{padding:2px 9px;font-size:12px}
.pmeta .chip[data-quiet]{opacity:.4}
.pmeta .chip[data-quiet]:hover{opacity:1}
.pmeta a.chip{text-decoration:none}

/* The description is the only long-form field now. */
.desc{border:1px solid transparent;border-radius:8px;padding:9px 11px;min-height:54px;line-height:1.55;background:var(--sunk);white-space:pre-wrap}
.desc:hover{border-color:var(--rule)}
.desc:focus{outline:2px solid var(--accent);outline-offset:-1px;background:var(--surface)}
.desc:empty::before{content:attr(data-placeholder);color:var(--faint)}

/* A block only renders when it has content, so its heading can be quiet. */
.pblock{display:flex;flex-direction:column;gap:5px}
.phead{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.phead em{font-style:normal;color:var(--muted)}
.pblock .rows{border-top:0}
.pblock .row{padding:6px 4px}

/* One row of verbs, instead of four empty sections waiting to be used. */
.addbar{display:flex;flex-wrap:wrap;gap:4px}
.addbar button{font-size:12.5px;color:var(--faint);padding:4px 9px;border-radius:6px}
.addbar button:hover{background:var(--sunk);color:var(--accent)}
#addslot:empty{display:none}

/* Time reads as a chip; clicking the number opens the log, the icon runs it. */
.tchip{display:flex;align-items:center;gap:7px;background:var(--sunk);border-radius:20px;padding:3px 11px 3px 8px;font-size:12.5px;color:var(--ink-2)}
.tchip:hover{color:var(--ink)}
.tchip.on{background:var(--accent-soft);color:var(--accent)}
.tchip .ti{font-size:13px;line-height:1}
.tchip .tv{font-family:var(--mono)}
.timelog{background:var(--sunk);border-radius:8px;padding:8px 10px}
.timerow{grid-template-columns:24px 54px 1fr auto 22px;font-size:12.5px;border-bottom-color:var(--rule)}
.timerow:last-of-type{border-bottom:0}
.cmt{padding:7px 0}
.chk{padding:5px 0}
.attach{padding:6px 9px;font-size:13px}
.attach a{color:var(--ink);text-decoration:none}
.attach a:hover{color:var(--accent)}
.hist{margin-top:2px}
.hist summary em{font-style:normal;color:var(--faint);font-family:var(--mono);font-size:11px}
/*//// -- Project header: a line of facts, not a form */
.hmeta{display:flex;flex-wrap:wrap;gap:5px 16px;align-items:baseline;padding:2px 0 4px}
.hbit{display:inline-flex;align-items:baseline;gap:6px;font-size:13.5px;color:var(--ink-2)}
.hbit i{font-style:normal;font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.hbit a{color:var(--accent);text-decoration:none}
.hbit .cell{padding:1px 5px}
/*//// -- Project view controls */
.viewrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 6px}
.vlabel{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}
.vreset{font-size:12.5px;color:var(--accent);text-decoration:none}
.vreset:hover{text-decoration:underline}
.inlineadd{display:flex;gap:7px;align-items:center}
.inlineadd .inp{max-width:170px;padding:4px 9px;font-size:13px}

/* A header over the rows, so a blank cell still says what it is. */
.colhead{display:grid;grid-template-columns:var(--rowcols);gap:11px;
  padding:0 6px 5px;border-bottom:1px solid var(--rule);margin-bottom:2px}
.colhead .ch{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--faint);text-decoration:none;text-align:right;white-space:nowrap}
.colhead .ch:hover{color:var(--ink)}
.colhead .ch.on{color:var(--accent)}
/* Each cell fills its track and right-aligns, so header and value share an edge. */
.row>.cell,.row>.when{justify-self:end}
.row>.cell{text-align:right}

/* Dragging */
.row.drag{cursor:grab}
.row.dragging{opacity:.4}
.droppable.over{background:var(--accent-soft);border-radius:6px}
.row.dropbefore{box-shadow:inset 0 2px 0 var(--accent)}
.sechandle{opacity:0;cursor:grab;margin-left:4px}
.group:hover .sechandle{opacity:.5}
.sechandle:hover{opacity:1}
h2 [contenteditable]{outline:0}
h2 [contenteditable]:focus{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/*//// -- Date grid inside the picker */
.pop.wide{width:430px}
.pop.wide .poplist{max-height:none;overflow:visible}
.datepick{display:flex;gap:8px}
.datepick .cal{flex:1;min-width:0;padding:2px;margin:0;border-bottom:0}
.calside{width:112px;flex:none;display:flex;flex-direction:column;gap:1px;padding-left:8px;border-left:1px solid var(--rule)}
.calstep{margin-top:auto;padding-top:6px;display:grid;gap:3px}
.calstep button{font-family:var(--mono);font-size:12.5px;background:var(--sunk)}
.poplist .cd{justify-content:center;width:auto;padding:5px 0;font-size:12.5px}
.poplist .cd.sel{background:var(--accent-soft);color:var(--accent);font-weight:600}
.dateb{min-width:96px;text-align:left;cursor:pointer}
.cal{padding:2px 2px 8px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.calhead{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 8px;font-size:13.5px}
.calhead button{padding:2px 9px;border-radius:6px;color:var(--muted);font-size:15px;line-height:1}
.poplist .calhead button{width:auto}
.calhead b{white-space:nowrap}
.calhead button:hover{background:var(--sunk);color:var(--ink)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.calgrid i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint);padding-bottom:3px}
.cd{font-size:12.5px;padding:5px 0;border-radius:6px;color:var(--ink-2)}
.cd:hover{background:var(--accent);color:#fff}
.cd.today{color:var(--accent);font-weight:600}
:root[data-theme="dark"] .cd:hover,:root:not([data-theme="light"]) .cd:hover{color:#101512}
/*//// -- Shortcut hints, off unless asked for */
.keyhint{display:none;font-family:var(--mono);font-size:10px;color:var(--faint);
  border:1px solid var(--rule);border-radius:4px;padding:0 4px;margin-left:auto}
body.showkeys .keyhint{display:inline-block}
body.showkeys .railitem .n{margin-left:6px}
body.showkeys .kbd{opacity:1}
.kbd{opacity:.55}
/*//// -- Row grid gains a grip and a caret, so header and rows move together */
/* Checkbox first, as it always was. The grip lives outside the row entirely and
   the caret sits with the title, so neither pushes the content sideways. */
:root{--rowcols:22px minmax(0,1fr) 70px 116px 30px 66px}
.grip-cell{display:flex;justify-content:center}
.rgrip{opacity:0;cursor:grab;color:var(--faint);font-size:11px;letter-spacing:-3px;line-height:1;user-select:none}
.row:hover .rgrip,.row.sel .rgrip{opacity:.65}
.rgrip:hover{opacity:1;color:var(--ink)}
.caret{color:var(--faint);font-size:11px;line-height:1;padding:2px;border-radius:4px;transition:transform .12s}
.caret.open{transform:rotate(90deg)}
.caret:hover{color:var(--ink);background:var(--rule-2)}
.caret.ghost{pointer-events:none}
.subcount{margin-left:8px;color:var(--faint)}
/* Adding a subtask should be one hover away, not a trip into the pane. */
.addsub{opacity:0;font-size:11.5px;color:var(--faint);padding:2px 8px;border-radius:20px;white-space:nowrap}
.row:hover .addsub,.row.sel .addsub{opacity:1}
.addsub:hover{background:var(--accent-soft);color:var(--accent)}
.subs{display:block}
.subs .row{padding-left:4px}
/* Dropping onto the middle of a row nests; between rows reorders. */
.row.nesting{box-shadow:inset 0 0 0 2px var(--accent);border-radius:6px}
.subrow-add{padding-left:52px}
/* The count belongs beside the title, not under it. */
.tline{display:flex;align-items:baseline;gap:9px;min-width:0}
.tline .title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subcount{margin-left:0;flex:none}

/*//// -- Row: one line, nothing shifted sideways */
.row{position:relative}
.rgrip{position:absolute;left:-16px;top:50%;transform:translateY(-50%);opacity:0;cursor:grab;
  color:var(--faint);font-size:11px;letter-spacing:-3px;line-height:1;user-select:none;padding:4px 2px}
.row:hover .rgrip,.row.sel .rgrip{opacity:.6}
.rgrip:hover{opacity:1;color:var(--ink)}
.grip-cell{display:none}

/* Title, caret and marks share one line; the title is the part that truncates. */
.tcell{display:flex;align-items:baseline;gap:8px;min-width:0}
.tcell .caret{flex:none;align-self:center}
.rowmain{min-width:0;flex:0 1 auto;text-align:left}
.rowmain .title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcell .prog,.tcell .tag,.tcell .crumb,.tcell .cid{flex:none}
.tcell .crumb{color:var(--faint);font-size:12.5px}
.tcell .cid{color:var(--accent);font-size:11.5px}
.tcell .tag{font-size:11.5px;padding:0 6px}
.tcell .prog{font-size:11.5px}
.row{padding:8px 6px}
.subs .row{padding-left:26px}
/* The caret has to read as a control at a glance, not a speck. */
.caret{font-size:13px;color:var(--muted);padding:3px 4px;margin-left:-4px}
.caret:hover{color:var(--ink)}
.row.parent .title{font-weight:600}

/* The caret sits after the title so the title never moves, and it has to be big
   enough to read as a control rather than punctuation. */
.tcell .caret{font-size:15px;line-height:1;color:var(--muted);padding:2px 5px;margin:0;border-radius:5px;flex:none}
.tcell .caret:hover{background:var(--rule-2);color:var(--ink)}
.tcell .caret.open{transform:rotate(90deg)}
.tcell .subcount{color:var(--faint)}
/* + sub rides at the end of the marks, a short hop from the title. */
.tcell .addsub{position:static;margin-left:2px}
a.cid{text-decoration:none}
a.cid:hover{text-decoration:underline}

/*//// -- Your password, on Your settings. */
.pwform{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pwform .inp{max-width:200px}

/*//// -- What an event changed, under its line in the feed. */
.chg{display:inline-block;font-size:12.5px;color:var(--ink-2);background:var(--sunk);border-radius:5px;padding:1px 7px;margin:3px 5px 0 0}
.chg b{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-right:5px}

/*//// -- Sortable table headings. */
th.sortable{padding-right:14px}
th.sortable a{color:inherit;text-decoration:none;display:inline-block;white-space:nowrap}
th.sortable a:hover{color:var(--ink-2)}
th.sorted a{color:var(--accent)}

/*//// -- Tracker columns: resizable, and sized by what is in them.
   `sized` means the tracker has stored widths, which is also what turns on fixed
   layout: that is what makes a 800-character note end in an ellipsis instead of
   making the table as wide as itself. */
.viewtools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.colmax{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted)}
.colmax .inp{width:72px;text-align:right}

/*//// -- A menu: one button, and a panel under it that is not there until
   asked for. `details` rather than a div and a flag, because the open state,
   the keyboard and the screen-reader wiring all come free; the only script is
   the one that closes it when you click elsewhere. Used for the tracker's
   Columns and for the share links. */
.menu{position:relative;display:inline-block}
.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"\25be";color:var(--faint);font-size:11px}
.menu[open]>summary{background:var(--sunk);color:var(--ink)}
.menu>summary .c{font-family:var(--mono);font-size:10.5px;color:var(--faint);font-style:normal}
.menupanel{position:absolute;top:calc(100% + 6px);left:0;z-index:24;width:290px;
  background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  box-shadow:var(--shadow);padding:11px 12px 9px;
  max-height:min(72vh,620px);overflow-y:auto;overscroll-behavior:contain}
.menu.wide .menupanel{width:min(820px,calc(100vw - 32px))}
.menuhead{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  margin:0 0 6px}
.widthtools .menuhead{margin-top:11px;padding-top:10px;border-top:1px solid var(--rule-2)}
.menurow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.menunote{margin:7px 0 0;line-height:1.45}

/*//// -- The column list. Rows of one height, so a drag has a short, obvious
   target and the swap cannot oscillate the way it can between a 320px column
   and a 96px one. The name row is in the list but cannot move: showing it keeps
   the list a picture of the table, which it would not be without it. */
.collist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.collist li{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:6px;
  font-size:13.5px;color:var(--ink);background:var(--surface);cursor:grab;user-select:none}
.collist li:hover{background:var(--sunk)}
.collist li.pinned{cursor:default;color:var(--muted)}
.collist li.pinned:hover{background:none}
.collist .grabdot{width:12px;color:var(--faint);font-size:13px;line-height:1;touch-action:none}
.collist .cname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.collist li .sub{margin-left:auto;font-size:11px}
.collist li.lifted{background:var(--sunk);box-shadow:var(--shadow);cursor:grabbing;opacity:.9}
body.listmoving{cursor:grabbing}

/*//// -- Dragging a heading. The heading follows the pointer and a line shows
   where the column lands. It used to reorder live instead, which meant nothing
   moved at all until the pointer passed the midpoint of the next column along -
   300px of travel on a wide table, with only a dimmed heading to suggest
   anything was happening. */
th.movable.lifted{opacity:.75;background:var(--sunk);z-index:4}
.dropline{position:fixed;width:2px;background:var(--accent);z-index:30;pointer-events:none}
table.cols{table-layout:auto}
table.cols.sized{table-layout:fixed;min-width:100%}  /* width is set inline, see trackerPage */
/* One line per row. A column with a width is a column you decided the width of,
   so content that does not fit ends in an ellipsis rather than making the row
   two lines tall and the table ragged. td.grow sets white-space:normal for the
   unsized case, which is why this has to say so again. */
table.cols.sized td,table.cols.sized th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.cols.sized td.grow{white-space:nowrap;min-width:0}
table.cols.sized td>.cell{max-width:100%;display:block}
/* While measuring, nothing may clamp a cell: .cell carries max-width:100% and
   overflow:hidden, and under an intrinsic (max-content) table that percentage
   stops the content reporting its real width, so every column measured as wide
   as its heading and no wider. */
table.cols.measuring td,table.cols.measuring th{overflow:visible;white-space:nowrap}
table.cols.measuring .cell{max-width:none;overflow:visible;display:inline}
th.sortable{position:relative}
/* Inside the heading, not straddling its edge: a sized table clips its cells,
   and a grip hanging over the border was clipped away and could not be grabbed. */
.colgrip{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;z-index:2}
.colgrip:hover,.colgrip.on{background:var(--accent);opacity:.5}
body.colresizing{cursor:col-resize;user-select:none}

/*//// -- Dragging a heading to reorder its column. A heading is not text anyone
   copies, so selection is off on the movable ones: without it a sideways drag
   starts a text selection across the row instead of a column move. The dragged
   heading dims so it is obvious which column is following the pointer. */
th.movable{user-select:none}
th.movable:hover{cursor:grab}
th.movable a{cursor:inherit}
th.movable.moving{opacity:.5}
body.colmoving{cursor:grabbing;user-select:none}
body.colmoving th.movable:hover{cursor:grabbing}

/*//// -- The hamburger. Only ever visible on a phone, where the rail is a drawer. */
.railtoggle{display:none;place-items:center;width:34px;height:34px;margin-left:-7px;flex:none;
  border-radius:8px;color:var(--ink-2);font-size:18px;line-height:1}
.railtoggle:hover{background:var(--rule-2);color:var(--ink)}

/*//// -- Phones ------------------------------------------------------------
   Everything width-dependent lives here, in one block, because it used to be
   spread across the file and the pieces disagreed.

   The rail was a horizontal scroll strip across the top. Three things were
   wrong with that: it kept `height:100vh`, so the whole first screen of every
   page was navigation and the content began below the fold; it hid `.railfoot`,
   which is the user menu, so on a phone there was no Your settings, no Trash,
   no Admin and no way to log out; and a strip cannot show a nested list, so the
   recent projects lost their client headings. A drawer keeps the rail as it is
   and just moves it off-screen until asked for. */
@media (max-width:820px){
  .frame{grid-template-columns:1fr}
  /* dvh, not vh: with vh the foot of the drawer sits under the browser's own
     toolbar, and the foot is where the user menu is. */
  .rail{position:fixed;left:0;top:0;bottom:0;height:100dvh;width:min(290px,86vw);z-index:28;
    border-right:1px solid var(--rule);box-shadow:var(--shadow);padding:14px 0 20px;
    transform:translateX(-102%);transition:transform .18s cubic-bezier(.3,.7,.3,1)}
  body.railopen .rail{transform:none}
  body.railopen{overflow:hidden}
  body.railopen .scrim{opacity:1;pointer-events:auto}
  #rail-grip,#pane-grip{display:none}
  .railtoggle{display:grid}
  /* Comfortable to tap, not to point at. */
  .railitem{padding:9px 16px}
  .railitem.subi{padding-left:28px}
  .usersheet a,.usersheet button{padding:11px 10px}

  /* The bar fits one line: a way in, where you are, and the two verbs. */
  .topbar{padding:9px 12px;gap:9px}
  .topbar h1{font-size:17px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar .sub,.navhint,.kbd{display:none}
  .searchbtn{padding:6px 10px;flex:none}
  .btn{flex:none}
  .timerbar{max-width:150px}
  .pane{padding:14px 12px 80px}
  .hubhead h1{font-size:21px}
  /* A record page is where tapping a tracker row lands, and it is the screen
     that is supposed to hold everything at once. Two columns of 172px with
     `nowrap` left most values as an ellipsis, so here they wrap instead. */
  .field dd{white-space:normal}
  .props{grid-template-columns:80px minmax(0,1fr)}

  /* Three of the six row columns, because the other three cost 120px of a
     364px row and the name is what you are reading. Priority and status are
     marks; the assignee is one person by definition, it is yours on My Work,
     and the pane says who on every other screen. They have to come out of the
     grid rather than just go invisible: a hidden pill still held its track,
     which is what used to leave the remaining cells under the wrong headings
     and the avatar printed over the date. */
  .row{grid-template-columns:22px minmax(0,1fr) 58px;gap:9px}
  .row>[data-edit="priority"],.row>[data-edit="status"],
  .row>[data-edit="assignee"]{display:none}
  .colhead{display:none}
  .check{width:21px;height:21px}
  .who{width:28px;height:28px}
  /* And the title gets its own line. Inside .tcell the title is `flex:0 1 auto`
     while every mark beside it is `flex:none`, so at this width the name is the
     one thing that shrinks: a task in a project with a tag lost its name and
     kept the tag, and the overflow pushed the assignee and due date out over
     each other. Giving the title the full line makes the marks wrap under it. */
  .tcell{flex-wrap:wrap;align-items:center;row-gap:2px}
  .tcell .rowmain{flex:1 1 100%}
  .tcell .caret{margin-left:-2px}
  /* + sub is a hover affordance on a row that is already two lines, and the AID
     chip repeats the project crumb next to it. */
  .tcell .addsub,.tcell .cid{display:none}
  .row{padding:9px 6px}

  /* The stored widths stay, and stay applied. Dropping them for `auto` was the
     first thing tried here and it made Clients 6360px instead of 3593: those
     widths are also what caps an 818-character note at 320px, so without them
     every long column demands its full content width. A wide tracker on a phone
     is a sideways scroll either way; what it must not be is unanchored. */
  /* So the name stays put. Three screens to the right of a 19-column table you
     otherwise cannot tell whose row you are reading. */
  table.cols th:first-child,table.cols td:first-child{position:sticky;left:0;
    background:var(--paper);box-shadow:1px 0 0 var(--rule-2)}
  table.cols th:first-child{z-index:3}
  table.cols td:first-child{z-index:1}
  tr.clickable:hover td:first-child{background:var(--surface)}
  /* Fit, Same width and Reset measure in this browser and save for everyone.
     That is a desktop tool, and 110px of a phone screen. */
  .widthtools{display:none}
  .tablewrap{overscroll-behavior-x:contain}

  /* iOS zooms the page in when a control under 16px takes focus, and does not
     zoom back out afterwards. Every one of these has to be named: .pin input
     and .inlineadd .inp each beat a bare `input` on specificity, so the search
     box and the add-a-section box kept their 15px and kept zooming. .desc is
     contenteditable, which iOS treats the same way. */
  .inp,.ctl,.mini,.desc,input,select,textarea,
  .pin input,.inlineadd .inp{font-size:16px}
  .colmax .inp{width:72px}

  /* The pane covers the page, so it may as well have the whole width. */
  .detail{width:100%;border-left:0}
  .pop{width:min(270px,calc(100vw - 20px))}
  /* No room for two columns: the shortcuts go under the month as a wrapping row. */
  .pop.wide{width:min(320px,calc(100vw - 20px));max-height:calc(100dvh - 16px);overflow-y:auto}
  .datepick{flex-direction:column}
  .calside{width:auto;flex-direction:row;flex-wrap:wrap;gap:4px;padding:6px 0 0;border-left:0;border-top:1px solid var(--rule)}
  .calside>button{width:auto}
  .calstep{margin:0;padding:0;display:flex;gap:4px}
  .calstep button{width:auto}
  .palette{padding-top:6vh}
  .pres{max-height:56vh}
  #qa-record-fields{max-height:40vh}
  .flash{left:12px;right:12px;bottom:12px;max-width:none}
  /* A board column nearly fills the screen, so swiping lands on one at a time. */
  .board{grid-auto-columns:minmax(82vw,1fr)}
  /* Open loops: the pickers take a line each and the chips wrap. The status
     pill and avatar are out of the row here, so the row's own owner and
     overdue marks are what carry them. */
  .olhead{gap:10px}
  .olhead .viewtabs{width:100%}
  .olhead .viewtabs a{flex:1;text-align:center;padding:6px 4px}
  .olchip,.olstatus{padding:6px 11px}
  .olfilters{gap:8px}
  .olpick{flex:1 1 100%;justify-content:space-between}
  .olpick .ctl{flex:1 1 0;width:0;max-width:none;min-width:0}
  .olapply{display:none}
}

/*//// -- Touch. An affordance that waits for a hover is simply missing here. */
@media (hover:none){
  /* The handle is the whole gesture on a phone: a finger dragging a row would
     otherwise be the panel scrolling, and a list of eighteen has to scroll. */
  .collist li{padding:9px 7px}
  .collist .grabdot{width:28px;font-size:17px;margin:-9px 0 -9px -7px;padding:9px 0 9px 7px}

  .addsub,.xbtn,.chk .xbtn,.sechandle{opacity:.55}
  /* Row dragging is HTML5 drag-and-drop, which a touchscreen does not fire, and
     a column grip needs a pointer it can place to the pixel. */
  .rgrip,.colgrip{display:none}
}