/* harrhys.com · components.css · replies, scripts, links, checks, print sheet */
/* ---------- two-pane pages (replies) ---------- */
.pane2{display:grid;grid-template-columns:270px 1fr;gap:16px;align-items:start}
.plist{display:flex;flex-direction:column;gap:6px;max-height:72vh;overflow:auto;padding:2px}
.pitem{display:block;text-decoration:none;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--card);transition:border-color .2s,box-shadow .2s}
.pitem:hover{border-color:color-mix(in srgb,var(--sage) 50%,var(--line))}
.pitem b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pitem small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pitem.on{border-color:var(--sage);box-shadow:inset 3px 0 0 var(--sage)}
@media (max-width:760px){.pane2{grid-template-columns:1fr}.plist{max-height:40vh}}

/* ---------- scripts, replies, links, checks ---------- */
.vars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media (max-width:760px){.vars{grid-template-columns:1fr 1fr}}
.scr{padding:12px 0;border-bottom:1px solid var(--line)}
.scr h3{font:600 1rem "Exo 2",sans-serif;letter-spacing:0;text-transform:none}
.scr code.cmd{display:block;margin-top:8px;white-space:pre-wrap;word-break:break-all;flex:1}
.scr .row{flex-wrap:nowrap;align-items:stretch}
.chip{display:inline-block;padding:1px 8px;border-radius:2px;font:400 .78rem "Share Tech Mono",ui-monospace,monospace;letter-spacing:.04em;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.ok{color:var(--done);border-color:var(--done)}
.chip.warn{color:var(--blue-ink);border-color:var(--blue)}
.chip.bad{color:var(--danger);border-color:var(--danger)}
.chk-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.chk-row:last-child{border-bottom:0}
.chk-row p{margin:0 0 4px}
.flags{margin:0;padding-left:18px}.flags li{margin:4px 0}
.lnk{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--card);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.lnk:hover{border-color:var(--sage);box-shadow:0 0 16px var(--glow)}
.lnk small{display:block;color:var(--muted);font:400 .78rem "Share Tech Mono",ui-monospace,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.ledit{display:grid;grid-template-columns:1.2fr 2fr 1fr auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
@media (max-width:760px){.ledit{grid-template-columns:1fr 1fr}}
.spell{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:12px}
.spell div{border:1px solid var(--line);border-radius:4px;padding:8px 10px;background:var(--paper)}
.spell b{display:block;font:400 1.6rem "Share Tech Mono",ui-monospace,monospace;color:var(--sage-d)}
.spell small{color:var(--muted)}
table.hops{width:100%;border-collapse:collapse;margin-top:8px}
table.hops th{text-align:left;font:400 .75rem "Share Tech Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 4px;border-bottom:1px solid var(--line)}
table.hops td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:top}
table.hops td:first-child{width:2em;color:var(--muted)}
table.hops td:nth-child(3),table.hops td:nth-child(4){white-space:nowrap;font-family:"Share Tech Mono",ui-monospace,monospace}
table.hops .bad{color:var(--danger)}
table.kv.hk td:first-child{width:32%;vertical-align:top}
table.kv.hk td:last-child{font-weight:400;font-size:.92rem;overflow-wrap:anywhere}
table.kv.hk small{color:var(--muted)}
.hraw summary{cursor:pointer;list-style-position:inside}.hraw summary h3{display:inline}
.hraw table.kv.hk td{font-size:.8rem}.hraw table.kv.hk td:first-child{width:24%;font-family:"Share Tech Mono",ui-monospace,monospace}
.hbar{display:flex;align-items:center;gap:10px;margin:6px 0}.hbar span{flex:none;width:90px;font-size:.9rem}.hbar .bar{height:8px}

/* ---------- to do ---------- */
/* priority colours: P1 red, P2 yellow, P3 green, P4 grey */
.td{--pc:var(--skip)}.td.p1{--pc:var(--danger)}.td.p2{--pc:var(--blue)}.td.p3{--pc:var(--sage)}
.tdl{list-style:none;margin:0;padding:0}
.td{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;padding:9px 4px;border-bottom:1px solid var(--line);align-items:start}
.tdl>.td:last-child{border-bottom:0}
.td-chk{appearance:none;width:22px;height:22px;margin:1px 0 0;border:2px solid var(--pc);border-radius:50%;cursor:pointer;display:grid;place-content:center;background:var(--card);transition:background-color .2s,transform .2s var(--spring)}
.td-chk:hover{transform:scale(1.1);background:color-mix(in srgb,var(--pc) 18%,var(--card))}
.td-chk:checked{background:var(--done);border-color:var(--done)}
.td-chk:checked::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.td-main{min-width:0;cursor:pointer}
.td-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px}
.td-t{font-weight:600;overflow-wrap:anywhere}
.td-p{font:400 .72rem "Share Tech Mono",ui-monospace,monospace;padding:0 5px;border:1px solid var(--pc);color:var(--pc);border-radius:2px}
.td.p2 .td-p{color:var(--blue-ink)}.td.p3 .td-p{color:var(--sage-d)}
.td-tag{font:400 .78rem "Share Tech Mono",ui-monospace,monospace;color:var(--sage-d)}
.td-meta{font-size:.8rem;color:var(--muted)}
.td-sla{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:4px;font-size:.82rem;color:var(--muted)}
.td-bar{flex:0 0 80px;height:4px;background:var(--line);border-radius:2px;overflow:hidden}.td-bar>span{display:block;height:100%;background:var(--done);transition:width .6s var(--ease)}
.td-left{font-weight:600;color:var(--ink)}
.td-due{font:400 .78rem "Share Tech Mono",ui-monospace,monospace}
.sla-warn .td-bar>span{background:var(--blue)}.sla-warn .td-left{color:var(--blue-ink)}
.sla-bad .td-bar>span{background:var(--danger)}.sla-bad .td-left{color:var(--danger);font-weight:700}
.sla-bad{box-shadow:inset 3px 0 0 var(--danger)}
.td.is-done .td-t{text-decoration:line-through;color:var(--muted)}
.td.leaving{animation:tdOut .38s var(--ease) forwards}
@keyframes tdOut{to{opacity:0;transform:translateX(18px)}}
/* ---------- to do: service-desk ticket queue ---------- */
/* quick add + preview of what was understood */
.td-addrow{display:flex;gap:8px}.td-addrow .td-new{flex:1;min-width:0}
.td-parse{display:flex;flex-wrap:wrap;gap:6px}.td-parse:not(:empty){margin-top:8px}
.td-hint{margin:8px 0 0;font-size:.82rem;color:var(--muted)}.td-hint b{font:400 .8rem "Share Tech Mono",ui-monospace,monospace;color:var(--ink)}
.td-addp{margin:6px 0 14px}
/* layout: views sidebar | table | ticket drawer (when one is open) */
.tkwrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;align-items:start}
.tkwrap.has-d{grid-template-columns:210px minmax(0,1fr) minmax(360px,440px)}
/* views sidebar */
.tkside{position:sticky;top:calc(var(--hh,64px) + 12px);display:flex;flex-direction:column;gap:14px;padding:12px 10px;background:var(--tile);border:1px solid var(--line);border-radius:4px}
.tkvg{display:flex;flex-direction:column;gap:1px}.tkvg>.mlabel{color:var(--muted);padding:0 6px 4px}
.tkv{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;border:0;border-radius:3px;background:transparent;font:500 .88rem "Exo 2",sans-serif;color:var(--ink);text-align:left}
.tkv span:not(.tkp-dot){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkv b{font:400 .78rem "Share Tech Mono",ui-monospace,monospace;color:var(--muted)}
.tkv:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);box-shadow:none}
.tkv.on{background:var(--sage-l);color:var(--sage-d);font-weight:700;box-shadow:inset 3px 0 0 var(--sage)}.tkv.on b{color:var(--sage-d)}
.tkv.hot b{color:#fff;background:var(--danger);border-radius:9px;padding:0 6px}
.tkp-dot{flex:none;width:8px;height:8px;border-radius:2px;background:var(--skip)}.tkp-dot.p1{background:var(--danger)}.tkp-dot.p2{background:var(--blue)}.tkp-dot.p3{background:var(--sage)}
.tkset summary{cursor:pointer;padding:0 6px;list-style-position:inside;color:var(--muted)}.tkset[open] summary{margin-bottom:6px}
.tkslar{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 6px;font-size:.84rem}
.tkslar span{display:flex;align-items:center;gap:4px;color:var(--muted)}.tkslar input{width:64px;padding:3px 6px;font-size:.84rem}
.tkset .chk{padding:6px 6px 0;font-size:.84rem}
/* table header bar + bulk actions */
.tkbar2{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.tkbar2 h2{margin:0;font-size:1.25rem;display:flex;align-items:baseline;gap:8px}.tkbar2 h2 small{font:400 .85rem "Share Tech Mono",ui-monospace,monospace;color:var(--sage-d)}
.tkcount{font:400 .8rem "Share Tech Mono",ui-monospace,monospace;color:var(--muted);border:1px solid var(--line);border-radius:9px;padding:0 7px}
.tkbar2 input{max-width:320px}
/* bulk actions: a floating bar near the bottom of the screen (centred on the ticket list by JS via --cx), so it follows
   you down a long queue. Slides up when tickets are selected. */
.tkbulk{position:fixed;z-index:9;left:var(--cx,50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));width:max-content;max-width:min(var(--mw,100vw),calc(100vw - 24px));box-sizing:border-box;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:8px 8px 8px 16px;border:1px solid var(--sage);border-radius:4px;background:var(--card);
  box-shadow:0 14px 40px rgba(0,0,0,.32),0 0 0 4px color-mix(in srgb,var(--sage) 12%,transparent);
  opacity:0;visibility:hidden;transform:translate(-50%,18px);transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s .3s}
.tkbulk.show{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .3s cubic-bezier(.22,1,.36,1),visibility 0s}
.tkbulk-n{font-weight:700;white-space:nowrap;color:var(--sage-d)}.tkbulk-sep{width:1px;align-self:stretch;margin:2px 4px;background:var(--line)}
.tkbulk button{padding:5px 12px;font-size:.86rem}.tkbulk select{width:auto;padding:4px 8px;font-size:.86rem}
.tkbulk .tkbulk-x{padding:4px 9px;color:var(--muted)}
@media (max-width:640px){.tkbl,.tkbulk-sep{display:none}.tkbulk{gap:6px;padding:7px 8px}.tkbulk button{padding:4px 10px}}
/* columns button: a small icon at the right-hand end of the table header (phones: next to the search, as there's no header) */
.tkcolbtn{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;font-size:.95rem;line-height:1;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}
.tkcolbtn:hover,.tkcolbtn:focus-visible{color:var(--sage-d);border-color:var(--sage)}
.tkcolhid{font:700 .7rem "Exo 2",sans-serif;color:var(--sage-d)}
.tk th.c-act{text-align:right;padding-right:10px;vertical-align:middle}
.tkcolbtn-bar{display:none;font-size:.86rem;padding:6px 10px}
/* column menu (a popover: floats above everything, closes on Esc or clicking elsewhere) */
.tkcolpop{position:fixed;inset:auto;margin:0;width:300px;max-height:min(72vh,600px);padding:0;display:none;flex-direction:column;overflow:hidden;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:4px;box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 0 1px color-mix(in srgb,var(--sage) 25%,transparent)}
.tkcolpop:popover-open{display:flex;animation:tkcpIn .18s cubic-bezier(.22,1,.36,1)}
@keyframes tkcpIn{from{opacity:0;transform:translateY(-4px) scale(.98)}}
.tkcp-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 16px 10px;border-bottom:1px solid var(--line)}
.tkcp-h b{font:700 1.05rem Rajdhani,"Exo 2",sans-serif;letter-spacing:.06em;text-transform:uppercase}.tkcp-h span{font-size:.78rem;color:var(--muted)}
/* "auto" marker on fields the ticket filled in itself, and the fill-in-blanks button in Settings */
.tkauto{display:inline-block;margin-left:4px;padding:0 5px;border-radius:3px;font:600 .66rem "Exo 2",sans-serif;letter-spacing:.04em;text-transform:uppercase;vertical-align:1px;color:var(--sage-d);background:color-mix(in srgb,var(--sage) 16%,transparent)}
.tkautoall{display:block;width:100%;margin:6px 0 4px;padding:5px 8px;font-size:.8rem;text-align:left;color:var(--sage-d);border:1px dashed color-mix(in srgb,var(--sage) 50%,transparent)}
.tkset-h{display:block;margin:6px 0 2px;font-size:.74rem;color:var(--muted)}
.tkcp-hint{margin:0;padding:8px 16px 0;font-size:.76rem;line-height:1.4;color:var(--muted)}
.tkcp-pin{flex:none;margin-left:auto;display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--muted);opacity:.75;cursor:pointer}
.tkcp-pin svg{width:13px;height:13px;fill:currentColor}
.tkcp-pin:hover:not(:disabled){opacity:1;border-color:var(--line);box-shadow:none}
.tkcp-pin.on{opacity:1;color:var(--sage-d);background:color-mix(in srgb,var(--sage) 14%,transparent)}
.tkcp-pin:disabled{opacity:.2;cursor:default}.tkcp-pin.on:disabled{opacity:.6}
.tkcp-b{overflow:auto;padding:6px 8px}
.tkcp-g{padding:4px 0 6px}.tkcp-g+.tkcp-g{border-top:1px solid var(--line)}
.tkcp-gl{display:block;padding:8px 8px 4px;font:400 .68rem "Share Tech Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tkcp-r{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 8px;border-radius:3px;cursor:pointer;font-size:.9rem}
.tkcp-r:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}.tkcp-r.fixed{cursor:default}
.tkcp-l{min-width:0}.tkcp-l small{display:block;font-size:.72rem;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}/* always present, so rows never change height */
.tkcp-f{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.tkcp-f button{padding:5px 14px;font-size:.84rem}.tkcp-f .ghost{color:var(--muted)}
/* on/off switches */
.sw{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:34px!important;height:20px;margin:0;padding:0!important;border:0!important;border-radius:999px;background:var(--line);cursor:pointer;transition:background-color .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.sw:checked{background:var(--sage-d)}.sw:checked::after{transform:translateX(14px)}
.sw:disabled{opacity:.55;cursor:default}.sw:focus-visible{outline:2px solid var(--sage);outline-offset:2px;box-shadow:none}
/* columns squeezed out for space: hidden cells, and their values shown under the subject instead */
.tk .tkhid{display:none}
.tkms{display:none;margin-top:3px;font-size:.78rem;color:var(--muted)}.tk.has-sq .tkms{display:block}
.tkm{display:none}.tkm.on{display:inline}.tkm b{font-weight:600;color:color-mix(in srgb,var(--muted) 70%,transparent);margin-right:2px}
/* the table */
.tktw{background:var(--tile);border:1px solid var(--line);border-radius:4px;overflow:auto}
table.tk{width:100%;border-collapse:collapse;font-size:.9rem}
.tk th{position:sticky;top:0;z-index:1;background:color-mix(in srgb,var(--card) 45%,transparent);text-align:left;padding:0;border-bottom:1px solid var(--line);white-space:nowrap}
.tksort{width:100%;padding:9px 10px;border:0;border-radius:0;background:transparent;text-align:left;font:400 .72rem "Share Tech Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tksort:hover{color:var(--ink);box-shadow:none}.tksort.on{color:var(--sage-d)}
.tk td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tk tbody tr:last-child td{border-bottom:0}
/* the whole cell is the click target for the checkbox (see todo.js), and the box itself is bigger */
.tk th.c-sel,.tk td.c-sel{width:44px;padding-left:14px;padding-right:4px;cursor:pointer}
.tk .c-sel input,.tk th input{accent-color:var(--sage-d);width:18px;height:18px;margin:0;cursor:pointer;vertical-align:middle}
.tk th.c-sel{padding:8px 4px 8px 14px}
.tkr{cursor:pointer;transition:background-color .15s}
.tkr td:first-child{box-shadow:inset 3px 0 0 var(--pc,var(--skip))}
.tkr.p1{--pc:var(--danger)}.tkr.p2{--pc:var(--blue)}.tkr.p3{--pc:var(--sage)}
.tkr:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.tkr.sel{background:color-mix(in srgb,var(--sage-l) 55%,transparent)}
.tkr.open{background:color-mix(in srgb,var(--sage-l) 80%,transparent)}.tkr.open td{border-bottom-color:var(--sage)}
.tkr.st-bad{background:color-mix(in srgb,var(--danger) 6%,transparent)}
.tkr.st-met,.tkr.st-miss{opacity:.8}
.tkr.leaving{animation:tdOut .32s var(--ease) forwards}
.c-id{width:72px;font:400 .82rem "Share Tech Mono",ui-monospace,monospace;color:var(--muted);white-space:nowrap}
.c-sub{min-width:220px}
.tk-subj{display:block;padding:0;border:0;background:none;font:600 .95rem "Exo 2",sans-serif;color:var(--ink);text-align:left;cursor:pointer;line-height:1.3}
.tk-subj:hover{color:var(--sage-d);box-shadow:none;text-decoration:underline}
.tk-meta{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:3px;font-size:.78rem;color:var(--muted)}.tk-meta i{font-style:normal;opacity:.6}
.tknote{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-pri{width:130px}
.tkp{width:auto;padding:3px 24px 3px 8px;font:600 .8rem "Exo 2",sans-serif;border-radius:3px;border:1px solid var(--line);background-color:var(--card);cursor:pointer}
.tkp.p1{border-color:var(--danger);color:var(--danger)}.tkp.p2{border-color:var(--blue);color:var(--blue-ink)}.tkp.p3{border-color:var(--sage);color:var(--sage-d)}
.tkp-pill{font:600 .8rem "Exo 2",sans-serif;color:var(--muted)}
.c-st{width:120px;white-space:nowrap}.c-st small{display:block;font-size:.74rem;color:var(--muted)}
.tks{font:600 .82rem "Exo 2",sans-serif;white-space:nowrap}
.tks.bad{color:var(--danger)}.tks.warn{color:var(--blue-ink)}.tks.ok{color:var(--sage-d)}.tks.met,.tks.miss{color:var(--muted)}
.c-due{width:190px}.c-due b{display:block;font-size:.88rem}.c-due small,.c-cr small{display:block;font-size:.74rem;color:var(--muted)}
.st-bad .c-due b{color:var(--danger)}.st-warn .c-due b{color:var(--blue-ink)}.c-due b.okt{color:var(--sage-d)}.c-due b.bad{color:var(--danger)}
.tkbar{display:block;width:120px;height:3px;margin-top:4px;background:var(--line);border-radius:2px;overflow:hidden}.tkbar i{display:block;height:100%;background:var(--done)}
.st-warn .tkbar i{background:var(--blue)}.st-bad .tkbar i{background:var(--danger)}.tkbar.big{width:100%;height:5px;margin:6px 0 4px}
.c-cr{width:130px;white-space:nowrap}
/* optional columns (column chooser) */
.c-x small{display:block;font-size:.74rem;color:var(--muted)}
.c-type,.c-req,.c-asg,.c-cat{width:130px}.c-upd,.c-res{width:130px;white-space:nowrap}.c-age,.c-subs{width:80px;white-space:nowrap}
.c-tags{width:140px}.c-tags .td-tag{margin-right:6px}
/* too many columns for the space: scroll sideways instead of cutting columns off */
/* pinned columns too wide for the space: the subject narrows and wraps rather than the table scrolling sideways */
.tk.squeeze .c-sub{min-width:90px}
.tk.squeeze2{table-layout:fixed;width:100%}.tk.squeeze2 td,.tk.squeeze2 th{width:auto!important;min-width:0!important;overflow:hidden;text-overflow:ellipsis}
.tk.squeeze2 .c-sub{width:20%!important}.tk.squeeze2 .c-sel{width:44px!important}.tk.squeeze2 .c-act{width:48px!important}.tk.squeeze2 .tksort{padding-left:6px;padding-right:6px;overflow:hidden;text-overflow:ellipsis}
.c-act{width:96px;text-align:right;white-space:nowrap}.c-act .ghost{font-size:.8rem;padding:3px 9px;border-color:var(--line)}
.tkres:hover{border-color:var(--done);color:var(--sage-d)}
/* ticket drawer */
.tkd{position:sticky;top:calc(var(--hh,64px) + 12px);max-height:calc(100vh - var(--hh,64px) - 24px);overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;background:var(--tile);box-shadow:0 0 0 1px var(--sage),0 10px 30px rgba(0,0,0,.18)}
.tkd-head{display:flex;align-items:center;gap:10px}.tkd-num{font:400 .9rem "Share Tech Mono",ui-monospace,monospace;color:var(--muted)}.tkd-x{margin-left:auto;padding:2px 9px}
.tkd-subj{font:700 1.15rem "Exo 2",sans-serif!important;padding:6px 8px!important}
.tkd-acts{display:flex;gap:6px;flex-wrap:wrap}.tkd-acts button{padding:6px 12px;font-size:.86rem}
.tkd-sla{padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--tile)}
.tkd-sla>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.tkd-sla b{font-size:1.05rem}.tkd-sla small{color:var(--muted);font-size:.78rem}
.tkd-sla.st-bad{border-color:var(--danger)}.tkd-sla.st-bad b{color:var(--danger)}.tkd-sla.st-warn{border-color:var(--blue)}.tkd-sla.st-warn b{color:var(--blue-ink)}.tkd-sla.st-ok b{color:var(--sage-d)}
.tkd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tkd-grid select,.tkd-grid input{margin-top:4px}
.tkd-hint{margin:-4px 0 0;font-size:.8rem;color:var(--muted)}.tkd-hint .ghost{font-size:.8rem;color:var(--sage-d);padding:2px 6px}
.tkd textarea{min-height:110px;margin-top:4px}
.tkd-sec{display:flex;flex-direction:column;gap:5px;padding-top:10px;border-top:1px solid var(--line)}.tkd-sec .mlabel{color:var(--muted)}
.td-sub{display:flex;align-items:center;gap:8px;font-size:.9rem}.td-sub.is-done span{text-decoration:line-through;color:var(--muted)}
.td-sub input{accent-color:var(--done);width:16px;height:16px}.td-sub span{flex:1}
#tkd-subnew{padding:6px 9px;font-size:.88rem}
.tkd-log{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:7px}
.tkd-log li{position:relative;font-size:.84rem}.tkd-log li::before{content:"";position:absolute;left:-17px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 2px var(--card)}
.tkd-log b{display:block;font-weight:600}.tkd-log small{color:var(--muted);font-size:.74rem}
/* laptops: the drawer floats over the table instead of taking a column */
@media (max-width:1399px){.tkwrap.has-d{grid-template-columns:200px minmax(0,1fr)}
  /* floating over the table: a touch more opaque plus a blur, so the rows behind don't fight the text */
  .tkd{position:fixed;z-index:30;top:calc(var(--hh,64px) + 8px);right:12px;bottom:12px;width:min(440px,calc(100vw - 24px));max-height:none;
    background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
/* smooth queue / ticket changes (View Transitions): the sidebar, add box, table and drawer animate as separate layers,
   rows glide between positions; the rest of the page swaps instantly so the background lights never freeze */
.vt-tk .page-todo .td-addp{view-transition-name:tk-add}
.vt-tk .page-todo .tkside{view-transition-name:tk-side}
.vt-tk .page-todo .tkbar2{view-transition-name:tk-head}
.vt-tk .page-todo .tktw,.vt-tk .page-todo .tkmain>.empty{view-transition-name:tk-table}
.vt-tk .page-todo .tkd{view-transition-name:tk-drawer}
/* the header and the floating selection bar stay on top while it animates: otherwise the snapshot of a panel that's
   scrolled up under the header (the raise-a-ticket box) was drawn across the header for a moment */
.vt-tk header.top{view-transition-name:site-head}.vt-tk #tkbulk{view-transition-name:tk-bulkbar}
::view-transition-group(site-head),::view-transition-group(tk-bulkbar){z-index:100}
::view-transition-old(site-head),::view-transition-new(site-head),::view-transition-old(tk-bulkbar),::view-transition-new(tk-bulkbar){animation:none}
/* the floating drawer's frosted blur can't be captured in the animation snapshot, so it flickered on its own where the
   drawer had been when closing: while animating, the drawer is solid instead */
.vt-tk .page-todo .tkd{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--card)!important}
::view-transition-old(root),::view-transition-new(root){animation:none}/* the table's snapshot keeps its real size and is clipped while the box resizes, so text never stretches or squashes.
   Only the table: clipping the add box and drawer too cut their drop shadows off for the length of every animation */
::view-transition-group(tk-table){overflow:clip}
::view-transition-old(*),::view-transition-new(*){height:100%;object-fit:none;object-position:left top}
::view-transition-group(*){animation-duration:.32s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(*),::view-transition-new(*){animation-duration:.22s}
::view-transition-new(tk-drawer){animation:tkdIn .34s cubic-bezier(.22,1,.36,1) both}
::view-transition-old(tk-drawer){animation:tkdOut .22s ease both}
@keyframes tkdIn{from{opacity:0;transform:translateX(28px)}}
@keyframes tkdOut{to{opacity:0;transform:translateX(28px)}}
/* tablets / phones: views become a scrolling strip; rows become cards */
.tkviews{display:flex;flex-direction:column;gap:14px}
/* narrower windows (incl. a window snapped to half a monitor): the views move above the table, so the table gets the full
   width. They wrap onto more lines rather than scrolling sideways; Settings stay available underneath */
@media (max-width:1099px){.tkwrap,.tkwrap.has-d{grid-template-columns:minmax(0,1fr)}
  .tkside{position:static;gap:4px;padding:6px}
  .tkviews{flex-direction:row;flex-wrap:wrap;gap:4px}
  .tkvg{display:contents}.tkvg>.mlabel{display:none}
  .tkv{width:auto;white-space:nowrap;border:1px solid var(--line)}
  .tkset{padding:2px 4px}.tkset[open] .tkslar{display:inline-flex;margin:4px 14px 0 0}.tkset[open] .chk{display:inline-flex;margin-top:4px}}
/* the table fits whatever width it's given (drawer open or not): columns tighten as it narrows, then fitTable() (todo.js)
   hides the least important ones one by one, and only phone-sized widths turn rows into cards */
.tkmain{container:tkm/inline-size;min-width:0}
.tktw{overflow-x:clip}
.c-sub{min-width:180px}
@container tkm (max-width:990px){.tk .c-due{width:150px}.tk .c-st{width:96px}.tk .c-pri{width:118px}.tk .c-act{width:44px}.tkres-l{display:none}
  .tk .c-act .ghost{padding:3px 8px}.tknote{max-width:220px}}
@container tkm (max-width:870px){.tk .c-id{width:62px}.tk .c-due{width:132px}.tk .c-due small{display:none}}
/* table layout (anything wider than a phone): short columns hug their content and Subject takes the rest; every row is
   the same height (title, meta line and squeezed-columns line are one line each, cut short with … if too long) */
@container tkm (min-width:561px){
  .tk th:not(.c-sub),.tk td:not(.c-sub){width:1%;white-space:nowrap}
  .tk .c-sub{max-width:0}
  .tk .tk-subj{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tk .tk-meta,.tk.has-sq .tkms{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.35em;line-height:1.35}
  .tk .tk-meta>*{margin-right:6px}.tk .tk-meta .tknote{display:inline;max-width:none}.tk .tkm.on{margin-right:12px}}
@container tkm (max-width:560px){.tk thead{display:none}.tk,.tk tbody,.tk tr,.tk td{display:block;width:auto}
  .tkr{position:relative;padding:10px 12px 10px 40px;border-bottom:1px solid var(--line);box-shadow:inset 3px 0 0 var(--pc,var(--skip))}
  .tk td{border:0;padding:2px 0}.tk td.c-sel{position:absolute;left:0;top:0;width:auto;padding:10px 10px 12px 12px;box-shadow:none}
  .tk .c-id{display:inline-block;width:auto;margin-right:8px}.tk .c-st{display:inline-block;width:auto}
  .tk .c-pri,.tk .c-due,.tk .c-cr{display:inline-block;width:auto;margin:4px 14px 0 0;vertical-align:top}.tk .c-due small{display:block}.tk .c-cr{display:inline-block}
  .tk .c-act{text-align:left;margin-top:6px;width:auto}.tkres-l{display:inline}
  .tk td.c-x{display:inline-block;width:auto;margin:4px 14px 0 0;vertical-align:top}
  .tk td.c-st{margin:4px 14px 0 0;vertical-align:top}
  .tk td.c-x::before{content:attr(data-label);display:block;font:400 .66rem "Share Tech Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .tkbar2 input{max-width:none;flex:1;min-width:0}
  .tkcolbtn-bar{display:inline-flex}}
/* home tile: beside coming up and the clock, compact rows */
.td-home .spread{margin-bottom:8px}.td-home .td-new,.td-home .td-addrow .primary{padding-top:6px;padding-bottom:6px}
.td-home .tdl{margin-top:4px}.td-home .td{padding:5px 2px}.td-home .td-sla{margin-top:1px}
.td-home{display:flex;flex-direction:column}.td-none{margin:10px 0 0;font-size:.95rem}
/* summary strip pinned to the foot of the tile */
.td-sum{margin-top:auto;padding-top:8px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.8rem;color:var(--muted)}.td-sum b{font:400 .95rem "Share Tech Mono",ui-monospace,monospace;color:var(--ink)}
.td-sp.p1 b{color:var(--danger)}.td-sp.p2 b{color:var(--blue-ink)}.td-sp.p3 b{color:var(--sage-d)}
.td-home .tdl{margin-bottom:4px}
/* to-do page: the dashboard link stands out next to the SLA chip */
.dashbtn{padding:9px 16px;font-size:.95rem}.dashbtn span{margin-right:4px}
.td-home .spread .row{gap:6px;flex-wrap:nowrap}
/* ---------- task dashboard ---------- */
/* chart colours, validated per theme against the tile surface: one accent + a de-emphasis grey */
:root{--ch-acc:#118A45;--ch-muted:#A9B3AC;--ch-track:color-mix(in srgb,var(--line) 55%,transparent)}
:root[data-theme="dark"]{--ch-acc:#19A85A;--ch-muted:#5E6B63}
.dfilter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 14px}.dfilter .seg{margin:0}.dfilter small{color:var(--muted);font-size:.82rem}
.dkpis{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-auto-rows:1fr;gap:12px}/* every tile the same size */
.dk{display:flex;flex-direction:column;gap:3px;padding:12px 14px}
.dkl{font:400 .72rem "Share Tech Mono",ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.dk strong{font-size:2rem;line-height:1.1;font-variant-numeric:normal}.dk.dkmain strong{font-size:2.6rem;color:var(--sage-d)}/* (was "hero", which picked up the home page hero's 28px bottom margin and came out shorter than its row) */
.dks{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dks a{color:inherit}
.dk.isbad{border-color:var(--danger)}.dk.isbad strong{color:var(--danger)}.dk.iswarn{border-color:var(--blue)}
.dd{display:inline-block;font-size:.78rem;color:var(--muted)}.dd.good{color:var(--sage-d)}.dd.bad{color:var(--danger)}
.dmeter{display:block;height:6px;margin:4px 0 2px;border-radius:3px;background:var(--ch-track);overflow:hidden}.dmeter i{display:block;height:100%;border-radius:0 3px 3px 0;background:var(--ch-acc)}
.dmeter.warn i{background:var(--blue)}.dmeter.bad i{background:var(--danger)}
.dst{font:600 .75rem "Exo 2",sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap}.dst.bad,.dst.miss{color:var(--danger)}.dst.warn{color:var(--blue-ink)}.dst.ok{color:var(--sage-d)}
.dgrid{display:grid;gap:12px;margin-top:12px}.dg2{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.dg3,.dg3b{grid-template-columns:repeat(3,minmax(0,1fr))}
.dcard{display:flex;flex-direction:column;padding:14px 16px;min-width:0}.dcard h3{margin:0;font-size:1.1rem}.dcard>.spread{align-items:flex-start;margin-bottom:10px}
.dsub{margin:2px 0 0;font-size:.8rem;color:var(--muted)}
.dtbl{font-size:.8rem;padding:3px 10px;border-color:var(--line)}
.dtable{display:none}.dcard.tv .dtable{display:block;max-height:260px;overflow:auto}.dcard.tv .dviz{display:none}
.dtab th{text-align:left;font:400 .72rem "Share Tech Mono",ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:4px;border-bottom:1px solid var(--line)}
.dtab td{font:400 .88rem "Exo 2",sans-serif!important;width:auto!important;color:var(--ink)!important;font-variant-numeric:tabular-nums}
/* horizontal bars: <=12px thick, square at the baseline, 4px rounded tip, value at the tip */
.dbars{display:flex;flex-direction:column;gap:10px}
.dbar{display:grid;grid-template-columns:minmax(90px,auto) 1fr 3.2em;grid-template-rows:auto auto;align-items:center;gap:0 10px;border-radius:3px;outline-offset:3px}
.dbl{font-size:.86rem;white-space:nowrap}.dbar>b{font:600 .9rem "Exo 2",sans-serif;text-align:right;font-variant-numeric:tabular-nums}
.dbar small{grid-column:2/-1;font-size:.74rem;color:var(--muted)}
.dbt{position:relative;height:12px;background:var(--ch-track);border-radius:0 4px 4px 0}.dbt i{display:block;height:100%;background:var(--ch-acc);border-radius:0 4px 4px 0;transition:width .6s var(--ease)}
.dtgt::after{content:"";position:absolute;left:50%;top:-4px;bottom:-4px;width:2px;background:var(--ink);opacity:.55}
.dtgt i.over{background:var(--blue)}
.dpp{display:inline-block;font:400 .7rem "Share Tech Mono",ui-monospace,monospace;padding:0 5px;border-radius:2px;color:#fff;background:var(--skip)}
.dpp.p1{background:var(--danger)}.dpp.p2{background:var(--blue);color:#04140B}.dpp.p3{background:var(--sage);color:#04140B}
/* columns: <=24px wide, rounded cap, square at the baseline, value on the cap */
.dcols{flex:1;display:flex;align-items:stretch;gap:6px;min-height:150px}
.dcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;border-radius:3px;outline-offset:2px}
.dcol b{font:600 .82rem "Exo 2",sans-serif;min-height:1.1em}.dcol small{font-size:.74rem;color:var(--muted);white-space:nowrap}
.dct{flex:1;width:100%;max-width:24px;display:flex;align-items:flex-end;border-bottom:1px solid var(--line)}.dct i{display:block;width:100%;background:var(--ch-acc);border-radius:4px 4px 0 0;transition:height .6s var(--ease)}
/* line chart */
.lcleg{display:flex;gap:16px;font-size:.84rem;margin-bottom:8px}.lcleg span{display:flex;align-items:center;gap:6px}.lcleg b{font-variant-numeric:tabular-nums}
.lk{display:inline-block;width:14px;height:3px;border-radius:2px}.lk.s-acc{background:var(--ch-acc)}.lk.s-muted{background:var(--ch-muted)}
.lc{position:relative;padding-left:26px}
.lcp{position:relative;height:200px}
.lcp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lcg{stroke:var(--line);stroke-width:1}
.lcl{stroke-width:2;stroke-linejoin:round;stroke-linecap:round}.lcl.s-acc{stroke:var(--ch-acc)}.lcl.s-muted{stroke:var(--ch-muted)}
.lcy{position:absolute;left:-26px;transform:translateY(-50%);font:400 .72rem "Share Tech Mono",ui-monospace,monospace;color:var(--muted);font-variant-numeric:tabular-nums}
.lcx{position:relative;height:18px;margin-top:4px}.lcx span{position:absolute;transform:translateX(-50%);font-size:.72rem;color:var(--muted);white-space:nowrap}
.lcx span:first-child{transform:none}.lcx span:last-child{transform:translateX(-100%)}
.lcx-line{position:absolute;top:0;bottom:0;width:1px;background:var(--muted);opacity:.6;pointer-events:none}
.lcdot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;box-shadow:0 0 0 2px var(--card);pointer-events:none}.lcdot.s-acc{background:var(--ch-acc)}.lcdot.s-muted{background:var(--ch-muted)}
.lchit{position:absolute;inset:-8px 0;cursor:crosshair;border-radius:3px}
/* lists */
.dlist{display:flex;flex-direction:column}
.drow{display:flex;align-items:center;gap:8px;padding:7px 2px;border-bottom:1px solid var(--line);text-decoration:none;font-size:.9rem}.drow:last-child{border-bottom:0}
.drow:hover .drt{color:var(--sage-d)}.drt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.drs{color:var(--muted);font-size:.76rem;white-space:nowrap}.dnone{margin:0;font-size:.92rem}
/* tooltip */
.dtip{position:fixed;z-index:55;display:none;pointer-events:none;max-width:260px;padding:7px 10px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);font-size:.82rem;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.dtip span{display:flex;align-items:center;gap:6px;margin-top:3px}.dtip b{font-variant-numeric:tabular-nums}
@media (max-width:1439px){.dkpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1099px){.dg2,.dg3,.dg3b{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.dkpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dk strong{font-size:1.6rem}.dk.dkmain strong{font-size:2rem}}
/* header badge: overdue count */
.tdb{display:inline-block;min-width:17px;margin-left:5px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font:700 .68rem/17px "Exo 2",sans-serif;text-align:center;vertical-align:1px;letter-spacing:0}
.tdb[hidden]{display:none}
/* undo bar for completed / deleted tasks */
#undobar{position:fixed;left:50%;bottom:calc(68px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);display:flex;gap:14px;align-items:center;padding:7px 8px 7px 16px;background:var(--ink);color:var(--paper);border-radius:4px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--ease);z-index:11;max-width:calc(100vw - 32px)}
#undobar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#undobar.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#undobar button{padding:4px 12px;background:transparent;color:var(--sage);border-color:var(--sage);flex:none}

/* ---------- printable handover sheet ---------- */
#printsheet{display:none}
@media print{
  body>*:not(#printsheet){display:none!important}
  body::before,body::after{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  #printsheet{display:block;font:10.5pt/1.4 "Exo 2",Arial,sans-serif;color:#000}
  #printsheet h1{font:700 20pt Rajdhani,Arial,sans-serif;text-transform:none;letter-spacing:0;text-shadow:none!important;margin:0 0 10px;color:#000}
  #printsheet h2{font:700 13pt Rajdhani,Arial,sans-serif;text-transform:none;letter-spacing:0;margin:14px 0 4px;border-bottom:1px solid #999;color:#000}
  #printsheet ul{list-style:none;padding:0;margin:0;columns:2;column-gap:24px}
  #printsheet li{break-inside:avoid;padding:2px 0}
  .ps-box{display:inline-block;min-width:2.4em;border:1px solid #000;text-align:center;margin-right:8px;font-size:8.5pt}
  .ps-meta{width:100%;border-collapse:collapse}.ps-meta th,.ps-meta td{border:1px solid #999;padding:4px 6px;text-align:left}.ps-meta th{background:#eee;width:15%}
  .ps-notes{white-space:pre-wrap}
  .ps-sign{display:flex;gap:20px;margin-top:30px}.ps-sign div{flex:1}.ps-sign span{display:block;border-bottom:1px solid #000;height:30px}
  .ps-foot{margin-top:18px;font-size:8pt;color:#555}
}