/* Near-black desk, panels a step lighter, cards a step lighter again; one lime
   accent for whatever is live (hover, editing, the primary button). Hairlines
   instead of shadows, except on what floats. The light theme is
   the same layout with its tones turned over (Menu > Appearance); the accent splits in two there,
   because lime reads as a fill on white but not as a line or as text. */
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{color-scheme:light dark;
  --disp:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --bg:#f2f3f0;--bar:#fbfbf9;--list:#e9ebe7;--card:#fff;--card-h:#fff;--field:#fff;--raise:#fff;
  --ink:#16181d;--mute:#5d636e;--faint:#858b96;--line:rgba(18,22,32,.11);--line2:rgba(18,22,32,.24);--wash:rgba(18,22,32,.06);--sb:rgba(18,22,32,.24);
  --accent:#5f8a0c;--fill:#c6f36b;--on-fill:#14170b;--glow:rgba(95,138,12,.22);--pill:#16181d;--pill-ink:#fff;
  --req:#d13a3a;--done:#16914f;--warn:#9a6d05;--over:#cf4e24;--info:#1a6fc0;--err:#d13a3a;--claude:#d9601a;--claude-on:#ff9a52;
  --float:0 12px 32px -8px rgba(18,22,32,.28),0 2px 6px rgba(18,22,32,.1);--scrim:rgba(30,34,44,.4)
}
/* Dark follows the system unless the person chose (data-theme on <html>). */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#0b0c10;--bar:#0e0f14;--list:#13151b;--card:#1b1e26;--card-h:#20242e;--field:#16181f;--raise:#242833;
  --ink:#f1f2f5;--mute:#979ca8;--faint:#6d717c;--line:rgba(255,255,255,.075);--line2:rgba(255,255,255,.17);--wash:rgba(255,255,255,.07);--sb:rgba(255,255,255,.2);
  --accent:#c6f36b;--fill:#c6f36b;--on-fill:#14170b;--glow:rgba(198,243,107,.18);--pill:#f4f5f8;--pill-ink:#0b0c10;
  --req:#ff6b6b;--done:#7ee8a8;--warn:#fcd34d;--over:#ff8a65;--info:#7cc4ff;--err:#ff8a7a;--claude:#ff9a52;--claude-on:#d9601a;
  --float:0 14px 36px -8px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.4);--scrim:rgba(4,5,8,.62)
}}
:root[data-theme=dark]{color-scheme:dark;
  --bg:#0b0c10;--bar:#0e0f14;--list:#13151b;--card:#1b1e26;--card-h:#20242e;--field:#16181f;--raise:#242833;
  --ink:#f1f2f5;--mute:#979ca8;--faint:#6d717c;--line:rgba(255,255,255,.075);--line2:rgba(255,255,255,.17);--wash:rgba(255,255,255,.07);--sb:rgba(255,255,255,.2);
  --accent:#c6f36b;--fill:#c6f36b;--on-fill:#14170b;--glow:rgba(198,243,107,.18);--pill:#f4f5f8;--pill-ink:#0b0c10;
  --req:#ff6b6b;--done:#7ee8a8;--warn:#fcd34d;--over:#ff8a65;--info:#7cc4ff;--err:#ff8a7a;--claude:#ff9a52;--claude-on:#d9601a;
  --float:0 14px 36px -8px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.4);--scrim:rgba(4,5,8,.62)
}
:root[data-theme=light]{color-scheme:light}
*{box-sizing:border-box}
/* Not scrollbar-width: with that set, Windows draws the little arrows too. */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--sb);border-radius:4px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:none}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:450 14px/1.5 "Inter","Segoe UI",system-ui,sans-serif;display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}
.ico{display:inline-grid;place-items:center;line-height:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:8px}
button:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
select,input[type=date],input[type=number]{font:inherit}

/* ---- header ---- */
header{display:flex;align-items:center;gap:28px;flex:none;padding:14px 28px;background:var(--bar);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.logo{width:34px;height:34px;display:block;flex:none}
h1{font:700 21px/1 var(--disp);letter-spacing:-.02em;margin:0;white-space:nowrap}
/* The filter: one field holding a magnifier, the text box, the / hint and the
   Focus toggle (*), which lights up while on. */
.search{flex:0 1 536px;min-width:140px;height:42px;display:flex;align-items:center;gap:8px;padding:0 8px 0 13px;color:var(--mute);background:var(--field);border:1px solid var(--line);border-radius:12px}
.search:focus-within{border-color:var(--accent)}
#q{flex:1;min-width:0;font:inherit;color:var(--ink);background:none;border:0;padding:6px 2px;outline:none}
#q::placeholder{color:var(--faint)}
#q:disabled{opacity:.5}
#q::-webkit-search-cancel-button{display:none}
.search kbd{flex:none;min-width:22px;height:22px;display:grid;place-items:center;font-family:inherit;font-size:12px;font-weight:500;line-height:1;color:var(--mute);border:1px solid var(--line2);border-radius:6px}
.search:focus-within kbd,#q:not(:placeholder-shown)~kbd{display:none}
.ftog{flex:none;width:26px;height:26px;padding:3px 0 0;font-size:18px;font-weight:700;line-height:1;color:var(--faint)}
.ftog:hover{color:var(--req);background:var(--wash)}
.ftog[aria-pressed="true"]{color:var(--req);background:color-mix(in srgb,var(--req) 16%,transparent);box-shadow:0 0 0 1px var(--req) inset}
.hbtns{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}

/* ---- buttons ---- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:5px 13px;font-weight:500;white-space:nowrap;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:10px;transition:background .12s,border-color .12s}
.pill:hover{background:var(--wash);border-color:var(--line2)}
.pill:active{transform:translateY(1px)}
.pill:disabled{opacity:.5;cursor:default}
.pill[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.pill.quiet{background:none;border-color:transparent;color:var(--mute)}
.pill.quiet:hover{background:var(--wash);color:var(--ink)}
.pill.quiet[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.pill.primary{background:var(--fill);border-color:var(--fill);color:var(--on-fill);font-weight:600}
.pill.primary:hover{background:color-mix(in srgb,var(--fill) 88%,#fff)}
.pill.square{width:38px;padding:0}
header .pill,#arBtn{height:38px;border-radius:12px}
.pill .ico svg{width:16px;height:16px}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;font-size:12px;font-weight:700;line-height:20px;text-align:center;color:#1a0e09;background:#fcd34d}
.badge.over{background:#ff8a65}
.badge.n{color:var(--ink);background:var(--wash)}
#arBtn .badge.n{min-width:0;padding:0;color:var(--mute);background:none;font-weight:500}

/* ---- tab bar: pills, with the active one inverted ---- */
#tabbar{display:flex;align-items:center;gap:12px;flex:none;padding:12px 28px 12px 0;background:var(--bar);border-bottom:1px solid var(--line)}
#tabs{display:flex;align-items:center;gap:4px;padding:2px 0 2px 28px;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
#tabs::-webkit-scrollbar{display:none}
#tabs.more-l{mask-image:linear-gradient(90deg,transparent,#000 48px)}
#tabs.more-r{mask-image:linear-gradient(270deg,transparent,#000 48px)}
#tabs.more-l.more-r{mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
#arBtn{flex:none}
.tab{display:flex;align-items:center;gap:8px;flex:none;height:36px;max-width:280px;padding:0 14px;font-weight:500;color:var(--ink);white-space:nowrap;cursor:pointer;user-select:none;border-radius:11px;transition:background .12s}
.tab:hover{background:var(--wash)}
.tab.on,.tab.on:hover{color:var(--pill-ink);background:var(--pill);font-weight:600}
.tab.over{background:var(--glow);box-shadow:0 0 0 2px var(--accent) inset}
.tdot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c)}
.tab.on .tdot{background:currentColor}
.tname{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* A tab Claude has a token for. */
.tcl{flex:none;margin:-9px 0 0 -6px;font-size:17px;font-weight:700;line-height:1;color:var(--claude)}
.tab.on .tcl{color:var(--claude-on)}
.tab.add{width:36px;padding:0;justify-content:center;color:var(--mute);border:1px dashed var(--line2)}
.tab.add:hover{color:var(--ink);border-color:var(--mute)}
.tab.edit,.tab.edit:hover{width:200px;padding:0 4px;background:var(--field);box-shadow:0 0 0 1px var(--accent) inset}
.tn{width:100%;min-width:0;padding:4px 8px;font:inherit;font-weight:600;color:var(--ink);background:none;border:0}
.tn,.tn:focus-visible{outline:none}

/* ---- the tab's page: title, sums, and the lists under them ---- */
#stage{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#head,#board{position:relative}
#head{flex:none;padding:24px 28px 16px}
.hl{display:flex;align-items:center;gap:12px;min-width:0}
#head h2{margin:0;min-width:0;font:700 34px/1.15 var(--disp);letter-spacing:-.025em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* The active tab's own buttons, next to its title. */
.htools{display:flex;flex:none;gap:2px;opacity:0;transition:opacity .12s}
#head:hover .htools,.htools:focus-within{opacity:1}
@media (hover:none){.htools{opacity:1}} /* a touch screen has no hover to show them */
.hm{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:6px;min-height:20px}
.meta{display:flex;flex-wrap:wrap;font-size:13px;color:var(--mute)}
.meta span+span::before{content:"·";margin:0 10px;color:var(--faint)}
.meta .dn{color:var(--done)}
.prog{display:flex;align-items:center;gap:10px;flex:0 1 220px;min-width:90px;font-size:12px;color:var(--mute)}
.prog .bar{flex:1;height:6px;border-radius:3px;background:var(--wash);overflow:hidden}
.prog i{display:block;height:100%;border-radius:3px;background:var(--done);transition:width .25s}
#board{cursor:grab;display:flex;gap:18px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding:6px 28px 24px;flex:1 1 auto;min-height:0}
#board>*{cursor:auto}
#board.pan,#board.pan *{cursor:grabbing!important;user-select:none}
/* Menu > Background Image: the active tab's picture sits behind its whole page.
   The image itself comes from a <style> that app.js writes (showBackground),
   with no var() in it: Chromium drops a declaration that uses var() once it
   holds a multi-megabyte data: URL. Hence the veil is a layer of its own, there
   so the title stays readable whatever the picture is. */
.has-bg #stage{background-position:center;background-size:cover;background-repeat:no-repeat}
.has-bg #stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(color-mix(in srgb,var(--bg) 82%,transparent),color-mix(in srgb,var(--bg) 22%,transparent) 170px)}
.has-bg .newlist input{background:var(--list);border-style:solid}
.x{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 4px;color:var(--mute)}
.x:hover{color:var(--ink);background:var(--wash)}

/* ---- lists ---- */
.list{position:relative;flex:0 0 304px;max-width:86vw;max-height:100%;display:flex;flex-direction:column;padding:14px 12px 8px;background:var(--list);border:1px solid var(--line);border-radius:18px}
.lh{display:flex;align-items:center;gap:6px;padding:0 2px 8px 2px}
.lchip{flex:none;width:22px;height:22px;padding:0;display:grid;place-items:center}
.lchip::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--c,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent) inset}
.lchip:hover{background:var(--wash)}
.lt{field-sizing:content;flex:0 1 auto;min-width:3ch;max-width:100%;padding:2px 4px;font:600 15.5px/1.3 var(--disp);letter-spacing:-.01em;color:inherit;background:none;border:0;border-radius:6px;text-overflow:ellipsis}
.lt:hover{background:var(--wash)}
.lt:focus{background:var(--field);outline:1px solid var(--accent)}
.lc{flex:none;font-size:12px;color:var(--mute)}
.lc.zero{opacity:.55}
.lmore{flex:none;margin-left:auto}
/* The "..." menu: the colour, moving the list, deleting it. */
.lmenu{position:absolute;z-index:20;top:44px;right:10px;width:244px;padding:8px;background:var(--raise);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--float)}
.lmenu button.mi-b{display:flex;align-items:center;gap:10px;width:100%;padding:7px 8px;text-align:left}
.lmenu button.mi-b:hover{background:var(--wash)}
.lmenu .danger{color:var(--req)}
.lmenu hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.pal{display:flex;gap:5px;flex-wrap:wrap;padding:3px 2px}
.sw{flex:none;width:22px;height:22px;padding:0;border-radius:7px;background:var(--c);transition:transform .1s}
.sw:hover{transform:scale(1.12)}
.sw.none{background:none;border:1px dashed var(--line2)}
.sw.on{box-shadow:0 0 0 2px var(--raise),0 0 0 4px var(--ink)}
/* The scrolling part, with a fade and a count of what's further down. */
.cw{position:relative;display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.cw::before,.cw::after{content:"";position:absolute;left:0;right:0;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1}
.cw::before{top:0;height:18px;background:linear-gradient(var(--list),transparent)}
.cw::after{bottom:0;height:52px;background:linear-gradient(transparent,var(--list) 85%)}
.cw.up::before,.cw.down::after{opacity:1}
.more{position:absolute;z-index:4;left:50%;bottom:8px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;font-size:12px;font-weight:500;white-space:nowrap;color:var(--ink);background:var(--raise);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--float)}
.more:hover{border-color:var(--accent)}
.more .ico svg{width:12px;height:12px}
/* The scrollbar's room is always kept, out in the list's padding, so cards
   don't change width when a list starts to scroll. */
.cards{position:relative;display:flex;flex-direction:column;gap:8px;min-height:6px;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;padding:2px 0 18px 2px;margin:0 -10px 0 -2px}
.cards::-webkit-scrollbar{width:10px}

/* ---- cards ---- */
.card{position:relative;padding:11px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;cursor:grab;flex:none;transition:background .1s,border-color .1s,box-shadow .12s}
.card:hover,.card:focus-within{z-index:3;background:var(--card-h);border-color:var(--accent);box-shadow:0 8px 22px -10px var(--glow),0 0 12px -4px var(--glow)}
.card.drag{display:none}
/* Where the card will land while it is being dragged. */
.slot{flex:none;border:1px dashed var(--line2);border-radius:12px;background:var(--wash)}
/* setDragImage's stand-in: off screen, and a wrapper round the tilted card
   because Chromium ignores a transform on the drag image element itself. */
.lift{position:fixed;left:-2000px;top:0;padding:24px}
.lift .card{transform:rotate(2.5deg);background:var(--card-h);border-color:var(--line2);box-shadow:var(--float)}
.lift .card>.acts,.lift .cb{display:none}
.lift .t,.lift .chips{transform:none!important}
/* The box and the text share a line, but the box overlays it: the text slides
   over on hover into room kept free on its right, so nothing rewraps and the
   cards below don't jump as the pointer goes by. */
.row{position:relative;padding-right:26px}
.t{display:block;width:fit-content;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;user-select:text;transition:transform .12s}/* draggable=true implies user-select:none in Chromium; keep card text selectable */
.chips{transition:transform .12s;display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:7px 26px 0 0}
.card:hover .t,.card:focus-within .t,.card.done .t,.card:hover .chips,.card:focus-within .chips,.card.done .chips{transform:translateX(26px)}
input[type=checkbox]{appearance:none;flex:none;width:18px;height:18px;margin:0;cursor:pointer;background:var(--field) center/12px no-repeat;border:1.5px solid var(--line2);border-radius:5px;transition:background-color .1s,border-color .1s}
input[type=checkbox]:hover{border-color:var(--done)}
input[type=checkbox]:checked{border-color:var(--done);background-color:var(--done);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1a12' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.500 4.500L19 7.500'/%3E%3C/svg%3E")}
input[type=checkbox]:disabled{opacity:.45;cursor:default}
.cb{position:absolute;left:0;top:1px;opacity:0;transition:opacity .12s,background-color .1s,border-color .1s}
.card:hover .cb,.card:focus-within .cb,.card.done .cb{opacity:1}
.star{color:var(--req);user-select:none;font-weight:700;margin-right:3px}
.card.req .t,.ar.req .at,.pr.req .t{font-weight:650}
.card.done{background:var(--card)}
.card.done .t,.card.done.req .t,.ar.done .at,.pr.done .t{text-decoration:line-through;color:var(--faint);font-weight:450}
.card.done .star,.ar.done .star,.pr.done .star,.card.done .lnk,.ar.done .lnk,.pr.done .lnk{color:var(--faint)}
.lnk{display:inline-flex;align-items:center;gap:3px;vertical-align:bottom;color:var(--accent);text-decoration:none;cursor:pointer;white-space:nowrap;font-weight:500}
.lnk:hover{text-decoration:underline}
.lnk .ico svg{width:13px;height:13px}
/* Planned for today: a little bar in the accent on the card's edge. */
.card.plan::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
/* Separators: a line, or a line with a label in it. */
.card.sep{padding:2px 4px;background:none;border-color:transparent;box-shadow:none}
.sepl{display:flex;align-items:center;gap:10px;min-height:22px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.sepl::before,.sepl::after{content:"";flex:1;border-top:1px solid var(--line2)}
.sepl:empty{gap:0}
.sepl span{min-width:0;overflow-wrap:anywhere;text-align:center}
.card.sep:hover,.card.sep:focus-within{background:none;border-color:transparent;box-shadow:none}
.card.sep:hover .sepl{color:var(--ink)}
/* Stickers: no card round them, tilted, with a white die-cut edge. */
.card.img{padding:12px 6px;background:none;border-color:transparent}
.card.img:hover,.card.img:focus-within{background:none;border-color:transparent;box-shadow:none}
.stk{display:block;max-width:calc(100% - 16px);height:auto;margin:0 auto;user-select:none;-webkit-user-drag:none;transform:rotate(-3deg);transition:transform .15s;
  filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 5px 7px rgba(0,0,0,.35))}
.card.img:nth-child(even) .stk{transform:rotate(2.5deg)}
.card.img:hover .stk{transform:rotate(0) scale(1.02)}

/* The hover strip: floats across the card's bottom edge rather than opening a
   row, so it covers neither this card's text nor the next one's and nothing
   moves. It belongs to the card, so the pointer can reach it past the edge. */
.acts{display:flex;gap:2px}
.acts button{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 7px;font-size:12.5px;font-weight:500;color:var(--mute)}
.acts button:hover{color:var(--ink);background:var(--wash)}
.acts button[aria-pressed="true"]{color:var(--accent)}
.acts .req-b{font-size:17px;font-weight:700;padding-top:3px}
.acts .req-b[aria-pressed="true"]{color:var(--req)}
.acts .snp.has{color:var(--accent)}
.card>.acts{position:absolute;z-index:2;right:8px;bottom:-15px;padding:1px;background:var(--raise);border:1px solid var(--line2);border-radius:9px;box-shadow:var(--float);opacity:0;pointer-events:none;transition:opacity .1s}
.card:hover>.acts,.card:focus-within>.acts{opacity:1;pointer-events:auto}
.card>.acts button{min-width:24px;padding:0 4px}
.card>.acts .ico svg{width:14px;height:14px}
/* Editing: the card itself is the field. */
.card.editing{cursor:default;background:var(--field);border-color:var(--accent)}
.card.editing .cb,.card.editing>.acts,.card.editing .chips{display:none}
.card.editing .row{padding-right:0}
.card.sep.editing{padding:11px 14px;background:var(--field);border-color:var(--accent)}
.card.editing textarea{display:block;padding:0;background:none;border:0;border-radius:0;outline:none}
.efoot{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:8px}
.eb{height:25px;padding:0 8px;font-size:12px;font-weight:500;color:var(--mute)}
.eb:hover{color:var(--ink);background:var(--wash)}
.eb.save{display:inline-flex;align-items:center;gap:5px;color:var(--on-fill);background:var(--fill);font-weight:600}
.eb.save:hover{color:var(--on-fill);background:color-mix(in srgb,var(--fill) 88%,#fff)}
.eb .ico svg{width:11px;height:11px}
.card.flash{animation:flash 1.6s ease-out}
.acts .jrf.spin{color:var(--accent);pointer-events:none}
.acts .jrf.spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--accent),0 0 24px var(--glow)}}

/* ---- text fields ---- */
textarea{width:100%;font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:10px;padding:8px 10px;resize:none}
/* "Add a card": a quiet row with a plus, until you type in it. */
.addwrap{position:relative;flex:none;margin-top:-4px;color:var(--mute)}
.addwrap>.ico{position:absolute;left:13px;top:12px;pointer-events:none}
.addwrap>.ico svg,.imgbtn svg{width:15px;height:15px}
textarea.add{display:block;padding:9px 38px;font-weight:450;background:none;border-color:transparent;overflow:hidden;cursor:text;transition:background .12s}
textarea.add::placeholder{color:var(--mute)}
textarea.add:hover{background:var(--wash)}
textarea.add:focus{background:var(--field);border-color:var(--accent);outline:none}
.imgbtn{position:absolute;right:5px;top:5px;width:28px;height:28px;display:grid;place-items:center;padding:0;color:var(--mute)}
.imgbtn:hover{color:var(--ink);background:var(--wash)}
.addhint{display:none;padding:4px 4px 2px;font-size:11.5px;color:var(--faint)}
.addwrap:focus-within .addhint{display:block}
.newlist{flex:0 0 304px;max-width:86vw}
.newlist input{width:100%;height:56px;padding:0 18px;font:inherit;font-weight:500;color:var(--ink);background:none;border:1px dashed var(--line2);border-radius:18px;transition:background .12s,border-color .12s}
.newlist input::placeholder{color:var(--mute)}
.newlist input:placeholder-shown{text-align:center;cursor:pointer}
.newlist input:hover{background:var(--wash);border-color:var(--mute)}
.newlist input:focus{text-align:left;background:var(--field);border-style:solid;border-color:var(--accent);outline:none;cursor:text}

/* ---- the status line: a small note that floats up over the bottom of the
   window and goes away by itself, unless it is an error ---- */
#status{position:fixed;z-index:60;left:50%;bottom:20px;transform:translateX(-50%);max-width:min(760px,calc(100vw - 40px));padding:9px 15px;font-size:13px;font-weight:500;overflow-wrap:anywhere;color:var(--ink);background:var(--raise);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--float);pointer-events:none}
#status:empty{display:none}
#status.err{color:var(--err);border-color:var(--err);pointer-events:auto;user-select:text}

/* ---- side panel: a drawer that slides over the board ---- */
#panel{position:fixed;top:0;right:0;bottom:0;width:min(400px,100%);padding:20px;overflow-y:auto;background:var(--bar);border-left:1px solid var(--line2);box-shadow:var(--float);transform:translateX(100%);visibility:hidden;transition:transform .18s,visibility .18s;z-index:5}
#panel.open{transform:none;visibility:visible}
#panel .ph{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px}
#panel .ph strong,.mbox .ph strong{flex:1;min-width:0;font:700 20px/1.2 var(--disp);letter-spacing:-.015em}
.ar{padding:11px 13px;margin-bottom:8px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.ar .at{overflow-wrap:anywhere;white-space:pre-wrap}
.ar .m,.pr .m{margin-top:3px;font-size:12px;color:var(--mute)}
.ar>.acts{flex-wrap:wrap;margin:7px -6px -4px}
.ar .stk{margin:8px auto}
.empty{color:var(--mute);padding:10px 4px}
.hint{color:var(--mute);font-size:13px;margin:0 0 12px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- due dates: a chip under the card text, an editor, and the Due panel ---- */
.due,.snip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px 0 6px;font-size:12px;font-weight:500;color:var(--mute);background:var(--wash);border:1px solid transparent;border-radius:7px}
.due:hover,.snip:hover{color:var(--ink);border-color:var(--line2)}
.due .ico svg,.snip .ico svg{width:12px;height:12px}
.due.soon{color:var(--info);background:color-mix(in srgb,var(--info) 14%,transparent)}
.due.today{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
.due.over{color:var(--over);background:color-mix(in srgb,var(--over) 16%,transparent)}
.due.zz{color:var(--mute);background:none;border:1px dashed var(--line2)}
.due.ok{color:var(--faint);background:none;text-decoration:line-through}
.duebox{display:flex;flex-direction:column;gap:7px;margin-top:9px;cursor:default}
.dd,.nd,.rs{font-size:13px;color:var(--ink);background:var(--field);border:1px solid var(--line2);border-radius:8px;padding:3px 7px;min-height:28px}
.dd:focus,.nd:focus,.rs:focus{border-color:var(--accent);outline:none}
.rs option{background:var(--raise);color:var(--ink)}
.qd,.snz{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.qd button,.snz button{padding:2px 9px;font-size:12.5px;font-weight:500;color:var(--ink);background:var(--wash);border:1px solid transparent}
.qd button:hover,.snz button:hover{border-color:var(--accent)}
.qd .ico{color:var(--mute);margin-right:2px}
.dg{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:18px 2px 8px}
.dg .n{font-weight:500;letter-spacing:0;color:var(--faint)}
.due-row.over .when{color:var(--over);font-weight:600}
.due-row.today .when{color:var(--warn);font-weight:600}
.due-row.zz{opacity:.72}
.snz{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.snz .m{margin:0 3px 0 0}
.nwrap{display:inline-flex;gap:4px;align-items:center}
.nd{width:60px}

/* ---- dialogs (Jira, day plan, snippet) ---- */
.modal{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:20px;background:var(--scrim)}
.mbox{width:min(760px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--list);border:1px solid var(--line2);border-radius:18px;box-shadow:var(--float)}
.mbox:focus{outline:none}
.mbox .ph{display:flex;align-items:center;gap:8px}
.mbox .ph strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbox .hint{margin:0}
.mf{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:500;color:var(--mute)}
.mf.in{flex-direction:row;align-items:center;gap:7px}
.mi{font:inherit;color:var(--ink);background:var(--field);border:1px solid var(--line2);border-radius:10px;padding:7px 10px;resize:vertical}
.mi:focus{border-color:var(--accent);outline:none}
textarea.mi{font-family:Consolas,"Cascadia Mono",monospace;font-size:13px}
.merr{color:var(--err);font-size:13px;white-space:pre-wrap}
.merr:empty{display:none}
.mlist{flex:1 1 auto;min-height:80px;overflow-y:auto;padding:6px;background:var(--bg);border:1px solid var(--line);border-radius:12px}
.mfoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mfoot .sp{flex:1}
.mfoot .mf.in{min-width:0;max-width:100%}
.mfoot .mf.in>select{flex:0 1 auto;min-width:0;text-overflow:ellipsis}
.mall{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--mute);cursor:pointer}
.jr{display:flex;align-items:baseline;gap:10px;padding:6px 9px;border-radius:9px;cursor:pointer}
.jr:hover{background:var(--wash)}
.jr input{align-self:center}
.jk{font-weight:600;white-space:nowrap}
.js{flex:1;min-width:0;overflow-wrap:anywhere}
.jt{font-size:12px;color:var(--mute);white-space:nowrap}
.jr[hidden]{display:none}
.jp{display:flex;flex-wrap:wrap;gap:6px}
.jp[hidden]{display:none}
.jp button{height:28px;padding:0 10px;font-size:13px;font-weight:600;color:var(--ink);background:var(--wash);border:1px solid transparent;border-radius:14px}
.jp button:hover{border-color:var(--line2)}
.jp button[aria-pressed="true"]{background:var(--fill);color:var(--on-fill)}
.jp .n{font-weight:500;opacity:.7}
.jr.have{opacity:.5;cursor:default}
.jr.have:hover{background:none}
.pr{display:flex;align-items:flex-start;gap:10px;padding:8px 9px;border-radius:9px}
.pr:hover{background:var(--wash)}
.pr>input{margin-top:1px}
.pr .pt{flex:1;min-width:0}
.pr .t{cursor:auto;width:auto}
.pr>.acts{flex:none}
.mbox.wide{width:min(1000px,100%);height:calc(100vh - 40px)}
.snipof{color:var(--mute);font-size:13px;margin-top:-6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
textarea.snipta{flex:1 1 auto;min-height:120px;resize:none;tab-size:4;line-height:1.45}
textarea.snipta.nowrap{white-space:pre;overflow-wrap:normal;overflow-x:auto}
.snipinfo{color:var(--mute);font-size:12px}

/* ---- to-do lists on cards ---- */
.todo{display:flex;flex-direction:column;gap:1px;margin-top:7px}
.ti{display:flex;align-items:flex-start;gap:8px;min-height:22px;padding:1px 0}
.ti input[type=checkbox]{width:15px;height:15px;margin-top:2px;border-radius:4px;background-size:10px}
.tt{flex:1;min-width:0;font-size:13.5px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;user-select:text}
.ti.done .tt{text-decoration:line-through;color:var(--faint)}
.ti.done .lnk{color:var(--faint)}
.tx{flex:none;width:20px;height:20px;font-size:15px;line-height:1;color:var(--mute);opacity:0;transition:opacity .1s}
.ti:hover .tx,.tx:focus-visible{opacity:1}
.tx:hover{color:var(--err);background:var(--wash)}
input.tedit{flex:1;min-width:0;font:inherit;font-size:13.5px;line-height:1.4;padding:0;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--accent);border-radius:0;outline:none}
input.tdadd{display:block;width:100%;margin-top:1px;padding:2px 0 2px 23px;font:inherit;font-size:13px;color:var(--ink);background:none;border:0;border-bottom:1px dashed transparent;border-radius:0;outline:none}
input.tdadd::placeholder{color:var(--faint)}
.card:hover input.tdadd{border-bottom-color:var(--line2)}
input.tdadd:focus{border-bottom:1px solid var(--accent)}
.tmore{align-self:flex-start;margin-left:19px;padding:1px 4px;font-size:12px;color:var(--mute)}
.tmore:hover{color:var(--ink);background:var(--wash)}
.tdp{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 5px 0 6px;font-size:12px;font-weight:500;color:var(--mute);background:var(--wash);border:1px solid transparent;border-radius:7px}
.tdp:hover{color:var(--ink);border-color:var(--line2)}
.tdp.ok{color:var(--done)}
.tdp .ico svg{width:12px;height:12px}
.tdp .ico:last-child{opacity:.7;transition:transform .12s}
.tdp.shut .ico:last-child{transform:rotate(-90deg)}
.acts .tdb.has{color:var(--accent)}
.lift input.tdadd{display:none}

/* ---- attached files ---- */
.snip.att>span:last-child{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acts .atb.has{color:var(--accent)}
.card.fileover,.mbox.fileover{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.mlist.flist{flex:0 1 auto;min-height:120px;max-height:55vh}
.fr{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:9px}
.fr:hover{background:var(--wash)}
.fx{flex:none;min-width:44px;padding:3px 5px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-align:center;color:var(--mute);background:var(--wash);border-radius:6px}
.fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none;font-weight:500}
.fn:hover{color:var(--accent);text-decoration:underline}
.fs{flex:none;font-size:12px;color:var(--mute)}
.fr>.acts{flex:none}
.acts a.dl{display:inline-grid;place-items:center;height:24px;padding:0 7px;font-size:12.5px;font-weight:500;color:var(--mute);text-decoration:none;border-radius:8px}
.acts a.dl:hover{color:var(--ink);background:var(--wash)}

/* ---- small windows: buttons drop their labels, then the title goes, and a
   low window gives the page title's height back to the cards ---- */
@media (max-width:1100px){header .lbl,#tabbar .lbl{display:none}header{gap:16px}}
@media (max-width:760px){h1{display:none}.search{min-width:110px}header{gap:10px;padding:10px 14px}#tabbar{padding-right:14px}#tabs{padding-left:14px}#head{padding:14px 14px 10px}#board{padding:4px 14px 14px}}
/* A phone can't fit the filter and five buttons in one row: the filter gets a row of its own, and Jira goes,
   as the menu has it. The / hint is for keyboards. */
@media (max-width:560px){header{flex-wrap:wrap;row-gap:10px}.search{order:3;flex:1 1 100%;min-width:0}.search kbd,#jiBtn{display:none}.hbtns{gap:6px}}
@media (max-height:640px){#head{padding-top:12px;padding-bottom:8px}#head h2{font-size:22px}.hm{margin-top:2px}}

/* ---- the menu behind the header button ---- */
.appmenu{position:fixed;z-index:60;top:64px;right:20px;display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));gap:4px 10px;max-width:calc(100vw - 24px);max-height:calc(100vh - 84px);overflow:auto;padding:10px;background:var(--raise);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--float)}
.amh{padding:9px 9px 3px;font-size:12px;font-weight:600;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ami{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:5px 9px;text-align:left;font-size:13.5px;border-radius:7px}
.ami:hover,.ami:focus-visible{background:var(--wash)}
.ami:disabled{opacity:.45;cursor:default;background:none}
.ami kbd{flex:none;font:500 11.5px/1 inherit;color:var(--faint)}
.ami.chk span{position:relative;padding-left:18px}
.ami.chk.on span::before{content:"\2713";position:absolute;left:0;color:var(--accent);font-weight:700}
@media (max-width:560px){.appmenu{grid-template-columns:1fr;right:12px}
  .modal{padding:10px}.mbox{padding:14px}.mbox .ph .pill{padding:5px 10px}.js{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mfoot .mf.in{flex:1 1 100%}.mfoot .mf.in>span{min-width:28px}.mfoot>.mf.in+.pill{margin-left:auto}}

/* ---- signed out ---- */
#signedout{flex:none;padding:8px 28px;background:var(--over);color:#14170b;font-weight:600}
#signedout a{color:inherit}

/* ---- iOS ---- */
/* Safari zooms in on any field under 16px when it gets the focus, and never zooms back out. Only iOS has
   -webkit-touch-callout, and every iOS browser is Safari underneath; !important beats the smaller sizes
   set on particular fields here and in site.css. Locking the viewport's zoom would do it too, but costs
   pinch-zoom on Android. */
@supports (-webkit-touch-callout:none){input,textarea,select{font-size:max(16px,1em)!important}}