/* ==================================================================
   TADOODLE — app.css

   Visual language carried over from v230: the same ten themes, type,
   chips, task sheets and panels. What is new is the connection state
   (section 9 of the agreed design): offline and signed out change the
   look of the whole app, not a chip.
   ================================================================== */

/* ---------------- theme tokens, verbatim from v230 ----------------
   Every theme is the same ten variables. Adding one is one block. */
[data-theme="midnight"]{
  --bg:#0C0E1C; --bg2:#141833; --surface:#1B2044; --raise:#242A57;
  --text:#F0F2FF; --muted:#8891CC; --line:#2E3568;
  --accent:#7C5CFF; --accent2:#00E9C3; --onAccent:#0C0E1C; --shade:rgba(0,0,0,.55);
}
[data-theme="carbon"]{
  --bg:#DFDAC9; --bg2:#D3CDBA; --surface:#FDFCF7; --raise:#EDE9DC;
  --text:#1C2536; --muted:#5E6A7E; --line:#C4BCA6;
  --accent:#6B3FA0; --accent2:#2F6F8F; --onAccent:#FFFFFF; --shade:rgba(28,37,54,.22);
}
[data-theme="sunset"]{
  --bg:#FFF3E9; --bg2:#FFE5D4; --surface:#FFFFFF; --raise:#FFEEE2;
  --text:#3A1526; --muted:#9A6C74; --line:#FFD0B4;
  --accent:#FF4F70; --accent2:#FF9E2C; --onAccent:#FFFFFF; --shade:rgba(154,60,80,.24);
}
[data-theme="citrus"]{
  --bg:#F7F9E8; --bg2:#EDF2CE; --surface:#FFFFFF; --raise:#F2F6DC;
  --text:#1F2A12; --muted:#6B7A50; --line:#D4E0A8;
  --accent:#7BC410; --accent2:#FF8A00; --onAccent:#12200A; --shade:rgba(60,80,30,.2);
}
[data-theme="blueprint"]{
  --bg:#0A2540; --bg2:#0F3050; --surface:#123A61; --raise:#18497A;
  --text:#E6F3FF; --muted:#7FA8CC; --line:#1F5488;
  --accent:#33D6FF; --accent2:#FFD84D; --onAccent:#062033; --shade:rgba(0,0,0,.45);
}
[data-theme="bubblegum"]{
  --bg:#FFF0F8; --bg2:#FFE0F1; --surface:#FFFFFF; --raise:#FFE9F5;
  --text:#3D1338; --muted:#A56495; --line:#FFC4E4;
  --accent:#FF3DA6; --accent2:#8B5CFF; --onAccent:#FFFFFF; --shade:rgba(160,50,120,.24);
}
[data-theme="forest"]{
  --bg:#0E1F18; --bg2:#153027; --surface:#1B3B30; --raise:#244D3F;
  --text:#EAF6EF; --muted:#84AD9B; --line:#2A5748;
  --accent:#3FE08A; --accent2:#FFB43D; --onAccent:#0A1A14; --shade:rgba(0,0,0,.5);
}
[data-theme="mono"]{
  --bg:#FFFFFF; --bg2:#F0F0F0; --surface:#FFFFFF; --raise:#F5F5F5;
  --text:#000000; --muted:#6E6E6E; --line:#000000;
  --accent:#000000; --accent2:#FF3B00; --onAccent:#FFFFFF; --shade:rgba(0,0,0,.9);
}
[data-theme="ember"]{
  --bg:#140D0B; --bg2:#1F1512; --surface:#2A1D18; --raise:#3A2820;
  --text:#FFEFE6; --muted:#B08D7C; --line:#452F26;
  --accent:#FF6B2C; --accent2:#FFC93D; --onAccent:#150D09; --shade:rgba(0,0,0,.55);
}
[data-theme="lagoon"]{
  --bg:#04262B; --bg2:#073840; --surface:#0A4650; --raise:#0F5A66;
  --text:#E3FBFB; --muted:#77B6BC; --line:#146873;
  --accent:#2EE6D6; --accent2:#FF7E6B; --onAccent:#042126; --shade:rgba(0,0,0,.45);
}

:root{
  --display:"Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --r:20px; --rs:12px;
  --warn:#FF9E2C; --danger:#FF3B30;
  /* The second accent as text, and the label colour on it as a fill. The
     built-in themes keep their v230 look through these defaults; a custom
     palette derives both so they stay readable. */
  --accent2Ink:var(--accent2); --onAccent2:var(--onAccent);
}

/* ---------------- connection state ----------------
   One attribute on <html> changes the whole interface. The accents drain
   to grey and the page takes a hatched ground, whichever theme is on, so
   nobody mistakes an offline or signed-out app for a working one. Declared
   after the themes and more specific than them, so it always wins. */
html[data-conn="offline"], html[data-conn="manual"], html[data-conn="signed_out"]{
  --accent:#9AA0AE; --accent2:#C3C7D1; --onAccent:#15171C;
  --accent2Ink:var(--muted); --onAccent2:#15171C;
}
html[data-conn="offline"] body, html[data-conn="manual"] body, html[data-conn="signed_out"] body{
  background-image:repeating-linear-gradient(135deg, transparent 0 18px, rgba(128,128,128,.08) 18px 36px);
}
.connband{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin:0 -22px 8px;padding:14px 22px;background:#23252B;color:#F2F3F6;border-bottom:3px solid #9AA0AE;
  font-size:14.5px;line-height:1.45}
.staleband{position:fixed;top:0;left:0;right:0;margin:0;z-index:60;border-bottom-color:var(--warn)}
.connband strong{font-weight:800;margin-right:4px}
.connband .bandtext{flex:1;min-width:220px}
.connband .btn{background:#F2F3F6;color:#15171C;padding:10px 18px;font-size:14px}
.connband .btn:hover{background:#FFFFFF;color:#15171C}

/* ---------------- base ---------------- */
*{box-sizing:border-box}
/* The hidden attribute is only display:none in the browser sheet, so any
   class that sets display beats it. This settles it for everything. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--display); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea,select{
  font:inherit; color:var(--text); background:var(--bg2);
  border:2px solid var(--line); border-radius:12px; padding:10px 13px; caret-color:var(--accent);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input[type="time"],input[type="date"]{cursor:pointer}
:focus-visible{outline:3px solid var(--accent2);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion: reduce){ *{transition:none !important} }

.app{max-width:1120px;margin:0 auto;padding:0 22px 100px;display:none}
.app.on{display:block}

/* ---------------- header ---------------- */
/* One line. The chips are controls and the tagline is a slogan, so when
   there is not room for both it is the slogan that gives way. Letting the
   whole row drop below the wordmark is what made a sync jerk the page:
   shorter words fitted, longer ones did not, and the masthead changed
   height every few seconds. */
.masthead{display:flex;align-items:center;gap:16px;flex-wrap:nowrap;padding:26px 0 20px}
.wordmark{font-size:30px;font-weight:800;letter-spacing:-.035em;margin:0;line-height:1}
.wordmark span{color:var(--accent)}
.tagline{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.masthead .right{margin-left:auto;display:flex;align-items:center;gap:9px;flex-wrap:nowrap;flex:none}
.chip{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--surface);border:2px solid var(--line);padding:9px 14px;border-radius:999px;
  white-space:nowrap;text-align:center;
  transition:transform .12s ease, border-color .12s ease}

/* A chip whose words change must not change width with them. Syncing is
   shorter than Saved 3:05 PM, and letting it shrink re-wraps the whole row
   and jerks the page every time a sync runs. Each of these is held at the
   width of its own longest state. */
/* Wide enough for Saved 12:05 PM, which is the longest of the states that
   changes constantly. The rare ones, 3 need attention and the like, are
   allowed to be wider: they do not flicker, so they do not jerk anything. */
#btnSync{min-width:21ch}
#btnAlarms{min-width:12ch}
#btnChat{min-width:9.5ch}
/* A theme name is the person's own, and some are long. It gets the room
   that is left, and only it is allowed to lose its tail, because it is the
   one chip whose full text nobody needs to read. */
#btnTheme{max-width:22ch;overflow:hidden;text-overflow:ellipsis}

/* The row itself holds one line (see .masthead .right above). Below the
   width where seven of them fit, they get smaller rather than folding onto a
   second line, because a masthead that changes height moves everything under it. */
@media (max-width:1240px){ .tagline{display:none} }
@media (max-width:1180px){
  .chip{font-size:10px;padding:8px 11px;letter-spacing:.04em}
  .masthead .right{gap:7px}
  #btnSync{min-width:20ch}
}
@media (max-width:980px){
  .chip{font-size:9.5px;padding:7px 9px;letter-spacing:.02em}
  .masthead .right{gap:5px}
  #btnTheme .sw{margin-right:4px}
  #btnTheme{max-width:13ch}
}
/* On a phone there is no width to be had, so it wraps deliberately rather
   than squeezing to nothing, and the chips stay a usable size. */
/* On a phone there is no width to be had, so the row goes under the
   wordmark deliberately and the chips stay a usable size. It is a size
   the layout settles at, not one it flickers between. */
@media (max-width:720px){
  .masthead{flex-wrap:wrap}
  .masthead .right{flex-wrap:wrap;justify-content:flex-end;flex:1 1 100%;margin-left:0}
  .chip{font-size:10px;padding:8px 12px}
}
.chip:hover{transform:translateY(-2px);border-color:var(--accent)}
.chip.good{border-color:var(--accent2);color:var(--accent2Ink)}
.chip.primary{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
.chip.primary:hover{background:var(--accent2);border-color:var(--accent2);color:var(--onAccent2)}
.chip.warn{border-color:#FF4444;color:#FF6A6A}
/* v298: the bell. An icon rather than a word, so it keeps the height of the
   chips beside it; the badge sits inside it the way chat's does. */
.chip.bell{display:inline-flex;align-items:center;justify-content:center;padding-left:11px;padding-right:11px}
.chip.bell svg{display:block;flex:none}
.chip.bell .unread{margin-left:6px}

/* ---------------- layout ---------------- */
.layout{display:grid;grid-template-columns:238px minmax(0,1fr);gap:34px;padding-top:10px}
.layout > main{min-width:0}
/* On a narrow screen the day comes first and the lists follow it: the day
   is what somebody opens the app to see. */
@media(max-width:820px){
  .layout{grid-template-columns:1fr;gap:28px}
  .layout > main{order:1}
  .layout > aside{order:2}
  .listscroll{max-height:none}
  .date{font-size:36px}
}

/* ---------------- sidebar ---------------- */
.side h2{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.listscroll{max-height:38vh;overflow-y:auto;overscroll-behavior:contain;margin:2px -4px 0;padding:0 4px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.sidefoot{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  border-top:2px solid var(--line);margin:8px 0;padding-top:8px}
.addlist{font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:6px 12px;border-radius:9px}
.addlist:hover{color:var(--accent);background:var(--bg2)}
.listfilter{width:100%;margin-bottom:10px;padding:9px 12px;font-size:13.5px;border-radius:11px}
.hcount{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.1em}
.listrow{display:flex;align-items:center;gap:2px}
.listrow .listbtn{flex:1;min-width:0;margin-bottom:0}
.listcog{flex:none;width:26px;height:26px;border-radius:50%;color:var(--muted);font-size:14px;line-height:0;
  opacity:0;transition:opacity .12s, background .12s, color .12s}
.listrow:hover .listcog,.listrow:focus-within .listcog{opacity:1}
.listcog:hover{background:var(--raise);color:var(--accent)}
@media (hover:none){ .listcog{opacity:.7} }
.listrow{margin-bottom:3px}
.listbtn.arch{opacity:.6}
.pinmark{flex:none;font-size:10px;color:var(--muted);opacity:.8}
.grouplbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin:10px 0 6px 4px}
.browseall{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  margin-top:6px;padding:9px 12px;border-radius:11px;border:2px dashed var(--line);
  font-size:13px;font-weight:600;color:var(--muted)}
.browseall:hover{border-color:var(--accent);color:var(--accent)}
.browseall span{font-family:var(--mono);font-size:10px}
.tally{display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:var(--muted);line-height:1.45}
.tally .big{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--accent2Ink)}
.listbtn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:6px 7px;
  border-radius:13px;font-size:14.5px;font-weight:500;margin-bottom:3px;
  border:2px solid transparent;transition:background .14s, transform .14s}
.listbtn > span:not(.dot):not(.n):not(.deftag){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listbtn:hover{background:var(--bg2);transform:translateX(3px)}
.listbtn.sel{background:var(--surface);border-color:var(--accent);font-weight:700}
.dot{width:13px;height:13px;border-radius:50%;flex:none;display:inline-block}
.listbtn .n{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted)}
.sidehead{margin:18px 0 8px !important}
.deftag.copytag{color:var(--muted);border-color:var(--line)}
.deftag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent2Ink);border:1.5px solid var(--accent2);border-radius:999px;padding:1px 6px;flex:none}

/* ---------------- day head ---------------- */
.dayhead{display:flex;align-items:center;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.nav{background:var(--surface);border:2px solid var(--line);width:46px;height:46px;border-radius:50%;
  font-size:20px;font-weight:700;line-height:0;transition:transform .14s, background .14s}
.nav:hover{background:var(--accent);color:var(--onAccent);border-color:var(--accent);transform:scale(1.08)}
.daytitle{display:flex;flex-direction:column;gap:0}
.dow{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.date{font-size:46px;font-weight:800;letter-spacing:-.045em;margin:0;line-height:1.02}
.viewlist{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:14px;font-weight:700;color:var(--muted)}
.viewlist .dot{width:10px;height:10px}
.headlist{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.headlist .viewlist{margin-top:0}
.sharedmark{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent2Ink);border:1.5px solid var(--accent2);border-radius:999px;padding:1px 7px;margin-left:4px}
.titlecog{flex:none;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  font-size:12.5px;font-weight:700;background:var(--surface);border:2px solid var(--accent2);color:var(--accent2Ink);
  transition:background .14s,color .14s,border-color .14s}
.titlecog:hover{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
.todaymark{align-self:center;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--onAccent2);background:var(--accent2);padding:6px 12px;border-radius:999px}
.dayhead .r{margin-left:auto}

/* ---------------- view switch, week and calendar (from v230) ---------------- */
.viewswitch{display:flex;gap:6px;margin:0 0 14px}
.viewswitch button{padding:8px 15px;border-radius:999px;border:2px solid var(--line);
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.viewswitch button:hover{border-color:var(--accent);color:var(--text)}
.viewswitch button.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
.dayrows{display:flex;flex-direction:column;gap:11px}
.dayrow{background:var(--bg2);border:2px solid var(--line);border-radius:16px;overflow:hidden}
.dayrow.today{border-color:var(--accent)}
.dayrow.over,.mday.over{border-color:var(--accent2);background:var(--surface)}
.dayrow header{display:flex;align-items:baseline;gap:10px;padding:11px 15px;
  border-bottom:2px solid var(--line);background:var(--surface)}
.dayrow.today header{background:var(--bg2)}
.dayopen{display:inline-flex;align-items:baseline;gap:10px;padding:0;text-align:left}
.dayopen:hover .dname{color:var(--accent)}
.dayrow .dname{font-size:15.5px;font-weight:800;letter-spacing:-.01em}
.dayrow.today .dname{color:var(--accent)}
.dayrow .dnum{font-family:var(--mono);font-size:11px;color:var(--muted)}
.dayrow .dgap{font-family:var(--mono);font-size:10px;color:var(--muted);opacity:.75}
.dayrow .tnow{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--accent);color:var(--onAccent);padding:2px 7px;border-radius:999px}
.dayrow .dcount{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.dayrow .dcount.late{color:#FF3B30;font-weight:700}
.dayrow .cards{padding:9px 11px;display:flex;flex-direction:column;gap:7px}
.rolldock{position:sticky;bottom:12px;z-index:6;display:flex;gap:9px;justify-content:center;flex-wrap:wrap;
  margin-top:14px;padding:9px;background:var(--surface);border:2px solid var(--line);
  border-radius:999px;box-shadow:0 12px 30px -14px var(--shade)}
.rollbtn{padding:11px 20px;border-radius:999px;border:2px dashed var(--line);
  color:var(--muted);font-size:13px;font-weight:700;transition:all .14s}
.rollbtn:hover{border-style:solid;border-color:var(--accent);color:var(--accent)}
.wcard{text-align:left;width:100%;background:var(--surface);border:2px solid var(--line);
  border-radius:11px;padding:8px 10px;font-size:13px;line-height:1.35;
  display:flex;gap:7px;align-items:flex-start}
.wcard[draggable="true"]{cursor:grab}
.wcard:hover{border-color:var(--accent)}
.wcard.carried{border-color:var(--accent2)}
.wcard.isdone{opacity:.5}
.wcard.isdone .t{text-decoration:line-through}
.wcard .dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:4px}
.wcard .t{flex:1;min-width:0;word-wrap:break-word}
.wcard .tm{font-family:var(--mono);font-size:9.5px;color:var(--muted);white-space:nowrap}
.wcard.dragging{opacity:.5}
.weekempty{padding:8px 4px;margin:0;font-size:11.5px;color:var(--muted);text-align:center}
.monthgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.monthdow{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding-bottom:2px}
.mday{background:var(--bg2);border:2px solid var(--line);border-radius:13px;min-height:96px;
  padding:7px 8px;text-align:left;display:flex;flex-direction:column;gap:4px;transition:border-color .14s}
.mday:hover{border-color:var(--accent)}
.mday.out{opacity:.4}
.mday.today{border-color:var(--accent)}
.mday .n{font-size:13.5px;font-weight:700}
.mday.today .n{color:var(--accent)}
.mday .pips{display:flex;flex-wrap:wrap;gap:3px}
.mday .pip{width:7px;height:7px;border-radius:50%}
.mday .more{margin-top:auto;font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.mday .overdue{color:#FF3B30;font-weight:700}
.undated{margin-top:18px;background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:13px 15px}
.undated h4{margin:0 0 9px;font-size:13.5px;font-weight:700}
.undated .cards{display:flex;flex-wrap:wrap;gap:7px}
.undated .wcard{width:auto;max-width:260px}
@media(max-width:820px){
  .dayrow header{padding:9px 12px;gap:7px}
  .dayrow .dname{font-size:14.5px}
  .monthgrid{gap:4px}
  .mday{min-height:64px;padding:5px}
  .mday .more{font-size:8.5px}
}

/* ---------------- notices ----------------
   §7 and §11: nothing discarded is silent, and a warning carries the
   means to act on it. Notices stay until dismissed. */
.notices{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.notice{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 14px 12px 18px;
  background:var(--surface);border:2px solid var(--line);border-left-width:6px;border-radius:var(--rs);font-size:14px;line-height:1.45}
.notice.info{border-left-color:var(--accent2)}
.notice.warn{border-left-color:var(--warn)}
.notice.danger{border-color:var(--danger)}
.notice .ntext{flex:1;min-width:220px}
.notice .nacts{display:flex;align-items:center;gap:8px}
.notice .btn{padding:8px 14px;font-size:13px}
.nx{width:30px;height:30px;border-radius:50%;color:var(--muted);font-size:18px;line-height:1}
.nx:hover{background:var(--raise);color:var(--text)}

/* ---------------- quick add ---------------- */
.quick{display:flex;margin:22px 0 8px;background:var(--surface);border:3px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .16s}
.quick:focus-within{border-color:var(--accent)}
.quick input{flex:1;min-width:0;background:transparent;border:0;border-radius:0;padding:20px 22px;font-size:17px;font-weight:500}
.quick input:focus{outline:none}
.quick .time{width:150px;flex:none;border-left:2px solid var(--line);font-family:var(--mono);font-size:14px}
.quick button{background:var(--accent);color:var(--onAccent);padding:0 32px;font-weight:800;font-size:17px;
  letter-spacing:-.01em;transition:background .14s}
.quick button:hover{background:var(--accent2);color:var(--onAccent2)}
/* Add and set is the quieter of the two: the common case is just adding it. */
.quick #qAddSet{background:var(--surface);color:var(--muted);font-size:13.5px;font-weight:700;
  padding:0 18px;border-left:2px solid var(--line)}
.quick #qAddSet:hover{background:var(--raise);color:var(--text)}
/* v297: Assign in the add bar, inside a shared list */
.quick .assignin{border-left:2px solid var(--line);font-family:var(--mono);font-size:14px}
.quick .assignin:disabled{color:var(--muted)}
.quicksuggest{margin:0 0 8px}
@media(max-width:560px){
  .quick{flex-wrap:wrap}
  .quick #qText{flex:1 1 100%;border-bottom:2px solid var(--line)}
  .quick .time{flex:1;width:auto;border-left:0}
  .quick button{padding:14px 26px}
}
.mic{flex:none;width:44px;align-self:stretch;color:var(--muted);font-size:13px;line-height:0;
  border-left:2px solid var(--line);transition:color .14s, background .14s}
.mic:hover{color:var(--accent)}
.mic.on{background:#FF3B30;color:#fff;animation:pulse 1.6s ease-in-out infinite}
/* v288: the typing box gets the whole top row; mic, date, time, Add and
   Add & set sit on a row beneath it. Before this they shared one row and
   left the typing box only a few words wide. Placed after the rules above
   so it overrides them, including the 560px ones. */
.quick{flex-wrap:wrap}
.quick #qText{flex:1 1 100%;border-bottom:2px solid var(--line)}
.quick .mic{width:54px;min-height:50px;border-left:0;border-right:2px solid var(--line)}
.quick .time{flex:0 1 180px;width:auto;border-left:0;border-right:2px solid var(--line);padding:12px 16px}
.quick button[data-act="quick-add"]{margin-left:auto;padding:12px 34px}
.quick #qAddSet{padding:12px 20px}
@media(max-width:560px){
  .quick .time{flex:1 1 130px;min-width:0;padding:12px 10px;border-bottom:2px solid var(--line)}
  .quick .time:last-of-type{border-right:0}
  .quick .mic{flex:none;border-bottom:2px solid var(--line)}
  .quick button[data-act="quick-add"]{margin-left:0;flex:1 1 50%;padding:14px 20px}
  .quick #qAddSet{flex:1 1 40%;border-left:2px solid var(--line);padding:14px 16px}
}
.pastezone{margin:10px 0 0;padding:14px;border:2px dashed var(--line);border-radius:13px;
  font-size:12.5px;color:var(--muted);text-align:center;cursor:pointer;transition:border-color .14s, background .14s}
.pastezone:hover{border-color:var(--accent);color:var(--text)}
.pastezone.flash{border-color:var(--accent2);background:var(--bg2);border-style:solid}
.pastenote{margin:8px 0 0}
.quicknote{margin:6px 2px 0;font-size:12.5px;color:#FF6A6A;font-weight:600}
.taskarea{margin-top:22px}

/* ---------------- task sheets ---------------- */
.sheet{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:14px;
  margin-bottom:9px;padding:0 16px;transition:border-color .14s ease, box-shadow .14s ease}
.sheet:hover{border-color:var(--accent);box-shadow:0 8px 20px -12px var(--shade)}
.sheet.carried{border-color:var(--accent2)}
.sheet.done{opacity:.72;border-style:dashed}
.sheet.done:hover{box-shadow:none}
.sheet.missed{border-color:#FF6A6A}
.sheet .top{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 0}
.box{flex:none;width:24px;height:24px;border:2.5px solid var(--muted);border-radius:8px;
  position:relative;transition:border-color .14s, background .14s, transform .14s}
.box:hover{border-color:var(--accent);background:var(--accent);transform:scale(1.12)}
.box.on{border-color:var(--accent2);background:var(--accent2)}
.box.on::after{content:"";position:absolute;left:6.5px;top:1.5px;width:6px;height:12px;
  border:solid var(--onAccent2);border-width:0 3px 3px 0;transform:rotate(43deg)}
.body{flex:1;min-width:0}
.titlerow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.title{font-size:16px;font-weight:600;letter-spacing:-.012em;word-wrap:break-word;line-height:1.35;cursor:pointer}
.title:hover{color:var(--accent)}
.sheet.done .title{text-decoration:line-through;color:var(--muted)}
.titleedit{flex:1 1 100%;min-width:0;font-size:16px;font-weight:600;padding:7px 10px}
.notes{margin-top:2px;font-size:13px;color:var(--muted);white-space:pre-wrap;word-wrap:break-word;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.04em;background:var(--raise);padding:4px 10px;border-radius:999px;color:var(--muted);white-space:nowrap}
.tag.time{background:var(--accent);color:var(--onAccent)}
.tag.time.silent{background:transparent;color:var(--text);border:2px solid var(--accent)}
.tag.carrytag{color:var(--accent2Ink)}
.tag.misstag{background:rgba(255,59,48,.16);color:#FF6A6A}
.tag.listtag .dot{width:8px;height:8px}
.actions{flex:none;display:flex;align-items:center;gap:6px}
.cta:hover,.cta[aria-expanded="true"]{background:var(--accent);color:var(--onAccent)}
.minihead{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent2Ink);margin:2px 0 8px 2px}
.undatedhead{margin-top:22px}
.minisep{height:0;border-top:2px dashed var(--line);margin:16px 6px 14px;border-radius:2px}
.empty{color:var(--muted);font-size:15px;padding:18px 4px}

/* ---------------- your record, from v230 ---------------- */
.rangebar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.rchip{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:var(--surface);border:2px solid var(--line);padding:9px 15px;border-radius:999px}
.rchip:hover{border-color:var(--accent)}
.rchip.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
.hero{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--onAccent);
  border-radius:var(--r);padding:26px 28px;margin-bottom:16px;position:relative}
.heronum{font-family:var(--mono);font-size:58px;font-weight:700;line-height:.95;letter-spacing:-.04em}
.herolbl{font-size:15px;margin-top:7px;opacity:.92}
.herostreak{position:absolute;top:20px;right:22px;font-family:var(--mono);font-size:11px;font-weight:700;
  background:rgba(0,0,0,.24);padding:7px 14px;border-radius:999px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:11px;margin-bottom:8px}
.scard{background:var(--surface);border:2px solid var(--line);border-radius:15px;padding:15px 17px}
.scard b{display:block;font-family:var(--mono);font-size:27px;font-weight:700;line-height:1;color:var(--accent)}
.scard span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:7px;line-height:1.4}
.barwrap{background:var(--surface);border:2px solid var(--line);border-radius:15px;padding:17px 19px}
.barrow{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.barrow:last-of-type{margin-bottom:0}
.barlbl{width:104px;flex:none;font-size:13.5px}
.bartrack{flex:1;height:11px;background:var(--bg2);border-radius:99px;overflow:hidden}
.bartrack i{display:block;height:100%;border-radius:99px;transition:width .4s ease}
.barn{width:44px;flex:none;text-align:right;font-family:var(--mono);font-size:12.5px;font-weight:700}
.barnote{margin:13px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.heat{display:flex;gap:4px;background:var(--surface);border:2px solid var(--line);
  border-radius:15px;padding:16px 18px;overflow-x:auto}
.hmcol{display:flex;flex-direction:column;gap:4px}
.hm{width:15px;height:15px;border-radius:4px;background:var(--bg2)}
.hm.l0{background:var(--bg2)}
.hm.l1{background:color-mix(in srgb,var(--accent2) 28%,var(--bg2))}
.hm.l2{background:color-mix(in srgb,var(--accent2) 52%,var(--bg2))}
.hm.l3{background:color-mix(in srgb,var(--accent2) 76%,var(--bg2))}
.hm.l4{background:var(--accent2)}
.hm.lx{background:transparent}
@media(max-width:620px){ .barlbl{width:78px;font-size:12.5px} }

/* ---------------- the task row, from v230 ---------------- */
.sheet.hassteps .top{cursor:pointer}
.sheet.hassteps .top:hover .title{color:var(--accent)}
.sheet.done .actions,.sheet.done .box{opacity:1}
.sheet.done .cta,.sheet.done .icon{opacity:1}
.stamp{position:absolute;right:16px;top:-11px;font-family:var(--mono);font-weight:700;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--onAccent);background:var(--accent2);
  padding:5px 12px;border-radius:999px;pointer-events:none;box-shadow:0 5px 14px -6px var(--shade)}
.stamp.hot{background:#FF3B30;color:#fff;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;height:34px;min-width:34px;padding:0 14px;
  font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;background:var(--raise);
  transition:transform .14s, background .14s, color .14s}
.cta:hover{transform:translateY(-2px)}
.cta.add{background:var(--accent);color:var(--onAccent)}
.cta.add:hover{background:var(--accent2);color:var(--onAccent2)}
.cta.imgs{background:var(--accent2);color:var(--onAccent2);font-family:var(--mono);font-weight:700}
.cta.imgs:hover{filter:brightness(1.12)}
.cta.open{background:var(--raise);color:var(--text);border:2px solid var(--accent)}
.cta.open:hover{background:var(--accent);color:var(--onAccent)}
.cta .caret{font-size:9px;transition:transform .18s ease}
.cta.isopen .caret{transform:rotate(90deg)}
.cta .count{font-family:var(--mono);font-weight:700}
.prog{width:36px;height:6px;border-radius:99px;background:var(--shade);overflow:hidden;flex:none}
.prog i{display:block;height:100%;background:var(--accent2);border-radius:99px;transition:width .3s ease}
.icon{flex:none;width:34px;height:34px;border-radius:50%;background:var(--raise);color:var(--muted);
  font-size:15px;line-height:0;transition:background .14s, color .14s, transform .14s}
.icon:hover{background:var(--accent);color:var(--onAccent);transform:translateY(-2px)}
.cta.imgs.thumb{position:relative;padding:0;width:38px;height:38px;border-radius:11px;overflow:hidden;
  flex:none;border:2px solid var(--line)}
.cta.imgs.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cta.imgs.thumb .n{position:absolute;right:2px;bottom:2px;font-family:var(--mono);font-size:8.5px;
  font-weight:700;background:rgba(0,0,0,.68);color:#fff;padding:1px 4px;border-radius:6px}
.tag.seqtag{background:var(--accent2);color:var(--onAccent2);font-weight:700}
.tag.rectag{color:var(--accent2Ink);font-weight:700}
.tag.datetag{cursor:pointer;transition:background .14s,color .14s}
.tag.datetag:hover{background:var(--accent);color:var(--onAccent)}
.tag.datetag.nodate{border:1px dashed var(--line);color:var(--accent)}
.tag.listtag{cursor:pointer;transition:background .14s,color .14s}
.tag.listtag:hover{background:var(--accent);color:var(--onAccent)}
.tag.listtag.nolist{border:1px dashed var(--line);color:var(--accent)}
.tag.listtag.sharedtag{border:1.5px dashed var(--accent2)}
/* v296: list, due date, time and assignee on their own row under the title */
.metarow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:7px}
/* The due date chip carries the browser's date input, invisible and exactly
   over the chip, so the browser opens its picker right there. */
.datewrap{position:relative;display:inline-flex}
.chipdate{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;
  opacity:0;pointer-events:none}
.tag.assigntag{cursor:pointer;transition:background .14s,color .14s}
.tag.assigntag:hover,.tag.assigntag.on{background:var(--accent);color:var(--onAccent)}
.tag.assigntag.nobody{border:1px dashed var(--line);color:var(--accent)}
.tag.assigntag.nobody:hover,.tag.assigntag.nobody.on{color:var(--onAccent)}
/* v303: yours, assigned to you, is marked on the row and on its chip */
.sheet.yours::before{content:"";position:absolute;left:-2px;top:12px;bottom:12px;width:6px;
  border-radius:0 6px 6px 0;background:var(--accent);pointer-events:none}
.tag.assigntag.me{background:var(--accent);color:var(--onAccent);font-weight:800}
/* The Mine toggle on a shared list's title row */
.titlecog.mine.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
/* v304: the Assigned to me entry's dot is the same mark as a row that is yours */
/* v306: who is on a shared list, in List options */
.peoplelist .blockchip{gap:6px;padding-right:11px}
.peoplelist .blockchip.me{border-color:var(--accent)}
.blockchip .ptag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-left:2px}
.titlecog.people{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dot.assigneddot{background:var(--accent);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
/* The assign box under a row, laid out like the steps drawer */
.assignbox{margin:0 0 14px 38px;padding:12px 16px;background:var(--bg2);border-radius:12px}
.assignbox .blocklist{margin-bottom:10px}
.assignbox .acts{margin-top:10px}
/* v297: a task that just moved is flashed where it landed */
.sheet.flash{animation:sheetflash 1.8s ease-out}
@keyframes sheetflash{
  0%,35%{border-color:var(--accent);box-shadow:0 0 0 5px var(--accent)}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion: reduce){ .sheet.flash{animation:none;border-color:var(--accent)} }
.shmark{font-size:10px;opacity:.75;margin-right:1px}
.byline{display:block;margin-top:7px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--accent2Ink);font-weight:700}
.byline.me{color:var(--muted);font-weight:600}
.linktag{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-size:12px;
  font-weight:600;letter-spacing:0;background:var(--raise);color:var(--accent);
  padding:5px 11px;border-radius:999px;text-decoration:none;max-width:240px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:1.5px solid var(--line);transition:background .14s,color .14s}
.linktag:hover{background:var(--accent);color:var(--onAccent);border-color:var(--accent)}
.linktag .arr{font-size:9px;opacity:.75}

/* ---------------- sub-tasks, in a drawer under the row ---------------- */
.stepswrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease}
.stepswrap.open{grid-template-rows:1fr}
.stepswrap > .stepsinner{overflow:hidden;min-height:0}
.steps{margin:0 0 14px 38px;padding:12px 16px;background:var(--bg2);border-radius:12px}
.step{display:flex;align-items:center;gap:12px;padding:5px 0}
.sbox{flex:none;width:20px;height:20px;border:2.5px solid var(--muted);border-radius:7px;
  position:relative;transition:border-color .14s, background .14s, transform .14s}
.sbox:hover{border-color:var(--accent);background:var(--accent);transform:scale(1.14)}
.sbox.on{border-color:var(--accent2);background:var(--accent2)}
.sbox.on::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--onAccent2);border-width:0 2.5px 2.5px 0;transform:rotate(43deg)}
.step .txt{flex:1;font-size:14.5px;font-weight:500;line-height:1.35;word-wrap:break-word;cursor:text}
.step .txt:hover{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.step.on .txt{text-decoration:line-through;color:var(--muted)}
.stepedit{width:100%;border:2px solid var(--accent);background:var(--surface);color:var(--text);
  border-radius:8px;padding:4px 8px;font-size:inherit;font-family:inherit;line-height:1.3}
.stepedit:focus{outline:none}
.step .kill{flex:none;width:26px;height:26px;border-radius:50%;color:var(--muted);font-size:15px;
  line-height:0;opacity:0;transition:opacity .12s, background .12s}
.step:hover .kill,.step:focus-within .kill{opacity:1}
.step .kill:hover{background:#FF3B30;color:#fff}
@media (hover:none){ .step .kill{opacity:.8} }
.addstep{display:flex;gap:8px;align-items:center;margin-top:8px;background:var(--surface);
  border:2px dashed var(--line);border-radius:999px;padding:4px 5px 4px 15px;transition:border-color .14s}
.addstep:focus-within{border-color:var(--accent);border-style:solid}
.addstep input{flex:1;background:transparent;border:0;padding:6px 0;font-size:14px;font-weight:500}
.addstep input:focus{outline:none}
.addstep button{background:var(--accent);color:var(--onAccent);border-radius:999px;padding:7px 17px;
  font-size:12.5px;font-weight:700}
.addstep button:hover{background:var(--accent2);color:var(--onAccent2)}

/* ---------------- the carry bar and the list note, from v230 ---------------- */
.carrybar{display:flex;align-items:center;gap:12px;margin:20px 0 0;padding:16px 20px;
  background:var(--surface);border-left:6px solid var(--accent2);border-radius:var(--rs);font-size:14.5px;line-height:1.5}
.carrybar b{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--accent2Ink)}
.listnote{margin:12px 0 0;padding:0 4px;font-size:13.5px;line-height:1.55;color:var(--muted);max-width:78ch}
.chip .unread{display:inline-block;margin-left:7px;font-family:var(--mono);font-size:9.5px;font-weight:700;
  background:var(--accent);color:var(--onAccent);padding:1px 6px;border-radius:999px}
.sendtask{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 12px;font-size:13px;
  background:var(--bg2);border:2px dashed var(--accent2);border-radius:12px}
.sendtask b{font-weight:700}
.msg .tasklink{font-size:13px;font-weight:600;color:var(--accent2Ink)}

.detail{border-top:2px dashed var(--line);padding:14px 0 16px}
.detail .drow{display:flex;gap:12px;flex-wrap:wrap}
.detail .field{display:flex;flex-direction:column;margin-bottom:12px}
.detail .field.grow{flex:1;min-width:160px}
.detail textarea{min-height:76px;resize:vertical;width:100%}
.flabel{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.dacts{display:flex;justify-content:flex-end}
.repeatrow select{min-width:200px}
.dowrow{display:flex;gap:5px;flex-wrap:wrap;margin:-2px 0 12px}
.dowbtn{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:7px 9px;
  border-radius:9px;border:2px solid var(--line);background:var(--bg2)}
.dowbtn.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
.chkrow{display:flex;align-items:center;gap:10px;font-size:14px;margin:0 0 8px;cursor:pointer}
.chkrow input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.repeatnote{margin:0 0 14px}

/* ---------------- panels ---------------- */
.veil{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;
  align-items:center;justify-content:center;padding:22px;z-index:50}
.card{background:var(--surface);border:3px solid var(--line);border-radius:26px;width:100%;max-width:470px;
  padding:30px;max-height:90vh;overflow:auto;box-shadow:0 30px 70px -20px rgba(0,0,0,.7)}
.card h3{margin:0 0 20px;font-size:26px;font-weight:800;letter-spacing:-.03em}
.card.wide{max-width:560px}
.subhead{font-size:15px;font-weight:700;letter-spacing:-.015em;margin:22px 0 6px}
.snote{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 12px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.field input,.field select{width:100%;padding:13px 15px;border-radius:14px;font-size:15.5px;font-weight:500}
.detail .field input,.detail .field select{padding:10px 12px;font-size:14.5px}
.acts{display:flex;gap:11px;margin-top:24px;flex-wrap:wrap}
/* A button that fills the row, but wraps to its own line rather than being
   squeezed until its label breaks. */
.acts .grow{flex:1 1 200px}
.btn{white-space:nowrap}
.acts.stack{flex-direction:column;align-items:stretch;gap:8px}
.filegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px;margin-bottom:10px}
.filecard{margin:0;background:var(--bg2);border:2px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column}
.filecard.bad{border-color:#FF6A6A}
.fthumb{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--raise);overflow:hidden}
.fthumb img{width:100%;height:100%;object-fit:cover;display:block}
.fdoc{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--muted)}
.filecard figcaption{display:flex;flex-direction:column;gap:2px;padding:8px 10px 6px}
.filecard figcaption b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filecard figcaption span{font-family:var(--mono);font-size:10px;color:var(--muted)}
.fstate{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2Ink)}
.fstate.bad{color:#FF6A6A;text-transform:none;letter-spacing:0;font-size:10.5px}
.facts{display:flex;align-items:center;gap:6px;padding:0 8px 8px;margin-top:auto}
.fopen{flex:1;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;text-align:center;padding:5px 8px;border:2px solid var(--accent);border-radius:999px}
.fopen:hover{background:var(--accent);color:var(--onAccent)}
.facts .btn{flex:1;padding:6px 10px;font-size:11.5px;white-space:normal}
.filenote{margin:0;align-self:center;font-size:12px}
.steplist{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.steprow{display:flex;align-items:center;gap:10px}
.box.small{width:19px;height:19px;border-width:2px;border-radius:6px}
.box.small.on::after{left:5px;top:1px;width:5px;height:9px;border-width:0 2.5px 2.5px 0}
.steptext{flex:1;min-width:0;padding:7px 10px;font-size:14px;border-radius:9px;background:var(--bg2)}
.steprow .box.on + .steptext{color:var(--muted);text-decoration:line-through}
.addrow{display:flex;gap:8px}
.addrow input{flex:1;min-width:0;padding:9px 11px;font-size:14px;border-radius:10px}
.addrow .btn{padding:9px 16px;font-size:13.5px}
.linkadd{flex-wrap:wrap}
.linkadd input[data-link-label]{flex:1 1 130px}
.linkadd input[data-link-url]{flex:2 1 200px}
.linklist{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.linkrow{display:flex;align-items:center;gap:10px;padding:8px 11px;background:var(--bg2);
  border:2px solid var(--line);border-radius:11px}
.linkrow .lmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.linkrow .lmeta b{font-size:13.5px;font-weight:600}
.linkrow .lmeta i{font-family:var(--mono);font-size:10.5px;font-style:normal;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkrow .go{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);text-decoration:none;padding:5px 10px;
  border:2px solid var(--accent);border-radius:999px;white-space:nowrap}
.linkrow .go:hover{background:var(--accent);color:var(--onAccent)}
.linkrow .lbad{font-size:11.5px;color:#FF6A6A;font-weight:600}
.linknote{margin:6px 0 0}
.x{width:28px;height:28px;flex:none;border-radius:50%;font-size:17px;line-height:1;color:var(--muted)}
.x:hover{background:var(--raise);color:#FF6A6A}
.tag.steptag{color:var(--accent2Ink)}
.alarmcard{max-width:420px;border-color:var(--accent)}
.alarmhead{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.alarmcard h3{margin-bottom:8px}
.soundgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}
.soundbtn{padding:11px 8px;border-radius:12px;border:2px solid var(--line);background:var(--bg2);
  font-size:13.5px;font-weight:600;transition:border-color .14s,background .14s}
.soundbtn:hover{border-color:var(--accent)}
.soundbtn.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
.soundgrid.own{grid-template-columns:repeat(2,minmax(0,1fr))}
.ownsound{position:relative}
.ownsound .soundbtn{width:100%;padding-right:26px}
.ownsound .soundbtn i{display:block;font-family:var(--mono);font-size:9px;font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.ownsound .soundbtn.on i{color:var(--onAccent);opacity:.8}
.ownsound .delx{top:4px;right:4px;opacity:.75}
.soundbtn[disabled]{opacity:.55;pointer-events:none}
input[type="range"]{width:100%;accent-color:var(--accent);padding:0;border:0;background:none}
@media(max-width:560px){ .soundgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.planlist{margin:0 0 14px;padding-left:20px;font-size:14px;line-height:1.6}
.choose{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.choice{display:flex;flex-direction:column;gap:6px;text-align:left;padding:16px 18px;border-radius:16px;
  border:3px solid var(--line);background:var(--bg2);transition:border-color .14s, transform .14s}
.choice:hover{border-color:var(--accent);transform:translateY(-2px)}
.choice.danger:hover{border-color:#FF3B30}
.choice b{font-size:15.5px;letter-spacing:-.015em}
.choice span{font-size:13.5px;color:var(--muted);line-height:1.5}
.dangerzone{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:16px;border-top:2px solid var(--line);flex-wrap:wrap}
.btn{background:var(--accent);color:var(--onAccent);padding:14px 24px;border-radius:999px;
  font-weight:700;font-size:15.5px;transition:transform .14s, background .14s}
.btn:hover{transform:translateY(-2px);background:var(--accent2);color:var(--onAccent2)}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn.ghost{background:var(--raise);color:var(--text)}
.btn.ghost:hover{background:var(--line)}
.btn.danger{background:transparent;color:#FF6A6A;border:2px solid rgba(255,59,48,.5);padding:10px 18px;font-size:14px}
.btn.danger:hover{background:#FF3B30;color:#fff;border-color:#FF3B30}
.srow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.srow .sname{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.srow .skind{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.srow .sreason{font-size:12.5px;color:#FF6A6A;font-weight:600}
.srow .btn{padding:8px 14px;font-size:13px}
.logrow{font-size:13px;line-height:1.45;padding:8px 0 8px 10px;border-left:3px solid var(--line);margin-bottom:6px}
.logrow.warn{border-left-color:var(--warn)}
.logrow.danger{border-left-color:var(--danger)}

/* ---------------- photo backdrop (from v230) ----------------
   A picture is a layer, not a theme: any palette above can wear one. The
   panel colours are re-derived as translucent in JS so the picture shows
   through without touching the theme's accents. */
html[data-photo="on"] body{
  background-image:var(--photo);
  background-size:var(--photoFit,cover);
  background-position:var(--photoPos,center center);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-color:var(--photoMat,#101018);
}
/* The scrim sits between the picture and the app, so text that is not on a
   panel stays readable over a busy photograph. */
#scrim{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
html[data-photo="on"] #scrim{display:block}
html[data-photo="on"] .app,
html[data-photo="on"] .gate{position:relative;z-index:1}
html[data-photo="on"] .sheet,
html[data-photo="on"] .quick,
html[data-photo="on"] .card,
html[data-photo="on"] .dayrow,
html[data-photo="on"] .mday,
html[data-photo="on"] .notice,
html[data-photo="on"] .connband,
html[data-photo="on"] .chip,
html[data-photo="on"] .nav{backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25)}
.coverrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.coverthumb{width:84px;height:56px;border-radius:10px;object-fit:cover;display:block;border:2px solid var(--line)}
.coverthumb.empty{display:flex;align-items:center;justify-content:center;background:var(--bg2);
  font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.shelfrow.hascover{flex-direction:row;align-items:center;gap:12px}
.shelfcover{width:74px;height:56px;flex:none;border-radius:9px;object-fit:cover;display:block}
.shelftext{display:flex;flex-direction:column;gap:3px;min-width:0}
.listingcover{width:100%;max-height:180px;object-fit:cover;border-radius:14px;display:block;margin-bottom:14px}
/* ---------------- chat, from v230 ---------------- */
.card.chatcard{max-width:min(96vw,900px);width:min(96vw,900px);padding:0;overflow:hidden;
  display:grid;grid-template-columns:216px minmax(0,1fr);height:min(78vh,620px);max-height:96vh}
.chatside{border-right:2px solid var(--line);display:flex;flex-direction:column;min-height:0}
.chathead{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px;border-bottom:2px solid var(--line);font-size:15.5px;font-weight:700}
#chatTitle{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{width:30px;height:30px;flex:none;border-radius:50%;background:none;color:var(--muted);font-size:15px}
.iconbtn:hover{background:var(--raise);color:var(--text)}
#chatList{flex:1;overflow:auto}
.chatrow{display:block;width:100%;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);background:none}
.chatrow:hover{background:var(--bg2)}
.chatrow.on{background:var(--bg2);box-shadow:inset 3px 0 0 var(--accent)}
.chatrow .who{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700}
.chatrow .who .n{margin-left:auto;background:#FF3B30;color:#fff;border-radius:999px;
  font-family:var(--mono);font-size:9px;font-weight:700;padding:1px 6px}
.chatrow .last{margin:4px 0 0;font-size:12px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.chatmain{display:flex;flex-direction:column;min-width:0;min-height:0}
.chatthread{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:11px}
.msg{max-width:78%;align-self:flex-start}
.msg .body{background:var(--bg2);border-radius:14px;padding:9px 13px;font-size:14.5px;line-height:1.45;
  word-wrap:break-word;white-space:pre-wrap}
.msg .when{display:block;margin:4px 0 0 5px;font-family:var(--mono);font-size:10px;color:var(--muted)}
.msg.mine{align-self:flex-end}
.msg.mine .body{background:var(--accent);color:var(--onAccent)}
.msg.mine .when{text-align:right;margin:4px 5px 0 0}
.msg.unsent .body{opacity:.6}
.msg.bad .body{border:2px solid #FF6A6A}
.msg .taskcard{border:2px solid var(--accent2);border-radius:14px;padding:10px 13px;background:var(--surface)}
.msg .taskcard .from{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.msg .taskcard .t{display:block;font-size:14.5px;font-weight:600}
.msg .taskcard .body{margin-top:7px;background:none;padding:0}
.msg .msgacts{display:flex;gap:10px;margin-top:3px;opacity:0;transition:opacity .12s}
.msg:hover .msgacts,.msg:focus-within .msgacts{opacity:1}
@media (hover:none){ .msg .msgacts{opacity:.8} }
.linkish{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.linkish:hover{color:var(--accent)}
.chatbar{flex:0 0 auto;display:flex;gap:9px;padding:11px 13px;border-top:2px solid var(--line)}
.chatbar input{flex:1;min-width:0}
.strangernote{flex:0 0 auto;margin:0;padding:10px 14px;background:var(--bg2);
  border-bottom:2px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--muted)}
.chatempty{padding:26px 20px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.5}
.blockedlist{padding:12px 14px;border-top:2px solid var(--line)}
.blockedlist > span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.grip{flex:none;width:18px;margin-left:-4px;color:var(--muted);opacity:.45;cursor:grab;
  font-size:13px;line-height:1;touch-action:none;transition:opacity .12s}
.sheet:hover .grip,.sheet:focus-within .grip{opacity:.8}
.grip:hover{opacity:1;color:var(--accent)}
@media (hover:none){ .grip{opacity:.5} }
body.reordering{cursor:grabbing;user-select:none}
.sheet.dragging{opacity:.45}
.dropline{height:4px;border-radius:99px;background:var(--accent);margin:6px 0}
.pwmeter{margin-top:9px}
.pwbar{height:7px;border-radius:99px;background:var(--bg2);overflow:hidden}
.pwbar i{display:block;height:100%;width:0;border-radius:99px;transition:width .25s ease, background .25s ease}
.pwbar.s0 i{background:#FF3B30}
.pwbar.s1 i{background:#FF9E2C}
.pwbar.s2 i{background:#FFD23F}
.pwbar.s3 i{background:var(--accent)}
.pwbar.s4 i{background:var(--accent2)}
.pwlabel{display:block;margin-top:6px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pwmeter .snote{margin:4px 0 0;font-size:12.5px}

/* ---------------- looking at a picture, from v230 ---------------- */
.card.lightbox{width:min(97vw,1700px);max-width:min(97vw,1700px);padding:14px;
  text-align:center;border-radius:20px;max-height:96vh;height:auto;overflow:hidden;
  display:flex;flex-direction:column;gap:11px}
@media (max-width:640px){
  .card.lightbox{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    border-radius:0;border-width:0;padding:10px}
}
.lbstage{flex:1 1 auto;min-height:0;width:100%;overflow:auto;border-radius:14px;
  background:var(--bg2);display:flex;align-items:center;justify-content:center}
.lbstage img{max-width:100%;max-height:80vh;display:block;object-fit:contain;cursor:zoom-in}
.lbstage.zoom{align-items:flex-start;justify-content:flex-start}
.lbstage.zoom img{max-width:none;max-height:none;cursor:zoom-out}
.lbbar{flex:0 0 auto;display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
.lbbar .btn{padding:9px 16px;font-size:13.5px}
.lbstage.failed::after{content:"This picture could not be loaded. It may have been removed \2014 close and open it again.";
  display:block;padding:34px 24px;font-size:14px;line-height:1.5;color:var(--muted);max-width:420px}
.lbstage.failed img{display:none}
.lbname{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:0 8px;word-break:break-all}
/* A list of people is a different kind of thing from the field above it, so
   it reads as its own surface rather than more of the form: its own
   background, a real border, and a shadow that lifts it off the panel. */
.noticemore{display:block;width:100%;margin-top:6px;padding:8px 12px;border-radius:10px;
  border:2px dashed var(--line);font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.noticemore:hover{border-color:var(--accent);color:var(--accent)}

/* ---------------- all your lists, from v230 ---------------- */
.card.lmcard{max-width:880px;width:100%;padding:22px 24px 20px;background:var(--surface);
  box-shadow:inset 0 0 0 9999px var(--surface), 0 30px 70px -20px rgba(0,0,0,.55)}
[data-photo="on"] .card.lmcard{
  box-shadow:inset 0 0 0 9999px var(--surface), inset 0 0 0 9999px var(--surface),
             0 30px 70px -20px rgba(0,0,0,.55)}
.lmhead{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.lmhead h3{margin:0}
.lmsub{margin:3px 0 0;font-family:var(--mono);font-size:11px;color:var(--muted)}
.lmx{margin-left:auto;width:32px;height:32px;border-radius:10px;color:var(--muted);font-size:19px;line-height:0}
.lmx:hover{background:var(--bg2);color:var(--text)}
.lmwrap{display:flex;gap:20px;align-items:flex-start}
.lmside{width:186px;flex:none;display:flex;flex-direction:column;gap:3px}
.lmsidelbl{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px 4px}
.lmtab{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 11px;
  border-radius:10px;font-size:13.5px;font-weight:500;color:var(--text);background:transparent;
  border:2px solid transparent}
.lmtab:hover{background:var(--bg2)}
.lmtab.on{background:var(--surface);border-color:var(--accent);font-weight:700}
.lmtab .c{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--muted)}
.lmtab.on .c{color:var(--accent)}
.lmnew{margin-top:10px;padding:9px 11px;border-radius:10px;border:2px dashed var(--line);
  font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.lmnew:hover{border-color:var(--accent);color:var(--accent)}
.lmmain{flex:1;min-width:0}
.lmtools{display:flex;gap:9px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.lmtools input{flex:1;min-width:150px;border:2px solid var(--line);background:var(--bg2);
  padding:9px 13px;border-radius:11px;font-size:14px}
.lmtools input:focus{outline:none;border-color:var(--accent)}
.lmsorts{display:flex;gap:4px;flex:none}
.lmsort{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:8px 11px;border-radius:9px;background:var(--bg2);color:var(--muted)}
.lmsort:hover{color:var(--accent)}
.lmsort.on{background:var(--accent);color:var(--onAccent)}
.lmdefault{margin-top:16px;padding-top:14px;border-top:2px solid var(--line)}
.lmdefname{margin:0 0 4px;font-size:14.5px;font-weight:700}
.lmdefault .snote{margin:0}
.lmdefault .lmnew{width:100%;text-align:left}
.lmpick{display:flex;align-items:center;gap:9px;background:var(--bg2);border:2px solid var(--accent);
  border-radius:11px;padding:8px 11px;margin-bottom:10px;flex-wrap:wrap}
.lmpick span{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent)}
.lmpick .btn{padding:8px 14px;font-size:13px}
.lmclr{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:6px 9px;border-radius:8px}
.lmclr:hover{color:var(--accent)}
.lmrow .whynot{font-style:italic;opacity:.75;text-transform:none;letter-spacing:0}
.lmrow .pick{flex:none;width:16px;height:16px;accent-color:var(--accent);margin:0}
.lmrow .pick.nopick{opacity:.25;border:2px solid var(--line);border-radius:4px;width:16px;height:16px}
.lmbody{height:56vh;min-height:300px;overflow:auto;padding-right:4px}
.lmgroup{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:12px 0 4px 2px}
.lmgroup:first-child{margin-top:0}
.lmnone{padding:40px 20px;text-align:center;color:var(--muted);font-size:14px}
.lmrow{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border-radius:8px;
  border-bottom:1px solid var(--line)}
.lmrow:hover{background:var(--bg2)}
.lmrow.cur{background:var(--surface);box-shadow:inset 3px 0 0 var(--accent)}
.lmrow .dot{width:9px;height:9px;flex:none}
.lmrow .nm{flex:1;min-width:0;display:flex;align-items:center;gap:7px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;text-align:left;
  color:var(--text);background:transparent;padding:0}
.lmrow:hover .nm{color:var(--accent)}
.lmrow .meta{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:right}
/* The cog was invisible until hovered, so on a phone the only route to
   renaming, archiving or deleting a list did not exist at all. */
.lmrow .cog{flex:none;width:24px;height:24px;border-radius:7px;color:var(--muted);font-size:13px;
  line-height:0;opacity:.55}
.lmrow:hover .cog{opacity:.9}
.lmrow .cog:hover{background:var(--accent);color:var(--onAccent);opacity:1}
@media (max-width:700px){
  .lmwrap{flex-direction:column}
  .lmside{width:100%;flex-direction:row;flex-wrap:wrap;gap:6px}
  .lmside .lmsidelbl{width:100%}
  .lmtab{width:auto}
  .lmbody{height:auto;max-height:52vh}
}

.suggest{display:flex;flex-direction:column;margin-top:8px;border:2px solid var(--accent);
  border-radius:14px;overflow:hidden;background:var(--surface);
  box-shadow:0 16px 34px -18px var(--shade);max-height:46vh;overflow-y:auto}
.suggesthead{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding:10px 14px 6px;background:var(--bg2)}
.suggestrow{display:flex;align-items:center;gap:2px;padding:11px 14px;text-align:left;
  font-size:15px;font-weight:600;background:none;border-bottom:1px solid var(--line)}
.suggestrow:last-child{border-bottom:0}
.suggestrow:hover,.suggestrow:focus-visible{background:var(--accent);color:var(--onAccent)}
.suggestrow .who2{display:flex;flex-direction:column;gap:1px;min-width:0}
.suggestrow .nm{font-size:15px;font-weight:700;letter-spacing:-.01em}
.suggestrow .hd{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-weight:600}
.suggestrow .hd.big{font-family:inherit;font-size:15px;color:inherit;font-weight:600}
.suggestrow:hover .hd{color:var(--onAccent);opacity:.8}
.suggestrow .at{color:var(--muted);font-weight:700}
.suggestrow:hover .at{color:var(--onAccent);opacity:.7}
/* The typed part, marked so a match in the middle of a handle is obvious. */
.suggestrow .h b{font-weight:800;color:var(--accent);
  box-shadow:inset 0 -6px 0 color-mix(in srgb,var(--accent2) 45%,transparent)}
.suggestrow:hover .h b{color:var(--onAccent);box-shadow:inset 0 -6px 0 rgba(255,255,255,.28)}
.suggestrow .tagline2{margin-left:auto;padding-left:12px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent2Ink);font-weight:700;white-space:nowrap}
.suggestrow:hover .tagline2{color:var(--onAccent);opacity:.85}
.statrow{display:flex;gap:10px;margin:12px 0}
.stat{flex:1;background:var(--bg2);border:2px solid var(--line);border-radius:13px;padding:12px 14px;text-align:center}
.stat b{display:block;font-family:var(--mono);font-size:22px;font-weight:700;color:var(--accent)}
.stat span{display:block;margin-top:4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.creatives{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:12px}
.creative{border:3px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg2);padding:0}
.creative.on{border-color:var(--accent)}
.creative img{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;object-position:top}
.creative span{display:block;padding:7px 9px;font-family:var(--mono);font-size:9.5px;color:var(--muted)}
.promonote{margin:6px 0 0}
.offerrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.offerrow:last-of-type{border-bottom:0}
.offerrow .sname{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
/* v300: the second line of a row sits under the first, as it does in the
   sharing rows. It ran on inline after the name before. */
.offerrow .skind{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.offerrow .acts{margin:0;flex:none}
.offerrow .btn{padding:8px 16px;font-size:13px}
.offerrow.quiet{opacity:.65}
/* v298: notifications. New ones carry an accent edge while the panel that
   showed them is open; a burst opens to one line per task under its row. */
.noterow.fresh{box-shadow:inset 3px 0 0 var(--accent);padding-left:12px}
/* v302: unread leads with an accent dot; read steps back to regular
   weight and the muted colour, so what still needs a look stands out. */
.noterow.unread .sname b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);margin-right:8px;vertical-align:2px}
.noterow.read .sname b{font-weight:500;color:var(--muted)}
.noterow .iconbtn{width:28px;height:28px;font-size:13px}
.noteitems{margin:0 0 6px 14px;padding:2px 0 4px 12px;border-left:2px solid var(--line)}
.noteitems.quiet{opacity:.65}
.noteitem{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13.5px}
.noteitem span{flex:1;min-width:0}
.noteitem .btn{padding:6px 12px;font-size:12px}
.notesfoot{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 2px}
.notesall{background:none;border:0;padding:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.notesall:hover{color:var(--text)}
.blocklist{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}
.blockchip{display:inline-flex;align-items:center;gap:4px;padding:5px 6px 5px 11px;border-radius:999px;
  background:var(--bg2);border:2px solid var(--line);font-size:13px;font-weight:600}
.blockchip .x{width:22px;height:22px;font-size:14px}
.memberbox{background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:13px 15px}
.memberbox .subhead{margin-top:0}
/* One pane at a time on a phone. The list is reachable only through the back
   control, because without it opening chat dropped you into whichever thread
   sorted first with no way out of it. */
.chatback{display:none}
@media (max-width:720px){
  .card.chatcard{grid-template-columns:1fr;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
    border-radius:0;border-width:0}
  .chatside{display:none}
  .card.chatcard.list .chatside{display:flex}
  .card.chatcard.list .chatmain{display:none}
  .chatback{display:inline-flex}
}
.shelfbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.shelfbar input{flex:2 1 160px;min-width:0}
.shelfbar select{flex:1 1 120px;min-width:0}
.shelflist{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.shelfrow{display:flex;flex-direction:column;gap:3px;text-align:left;padding:13px 15px;
  background:var(--bg2);border:2px solid var(--line);border-radius:13px;transition:border-color .14s}
.shelfrow:hover{border-color:var(--accent)}
.shelfrow b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.shelfrow .by{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.shelfrow .sum{font-size:13px;color:var(--muted);line-height:1.45}
.itemlist{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;max-height:34vh;overflow:auto}
.itemrow{display:flex;flex-direction:column;gap:2px;padding:8px 11px;background:var(--bg2);border-radius:10px}
.itemrow b{font-size:13.5px;font-weight:600}
.itemrow span{font-size:12px;color:var(--muted)}
.itemrow .off{font-family:var(--mono);font-size:10px;color:var(--accent2Ink)}
.handlebig{font-size:30px;font-weight:800;letter-spacing:-.03em;margin:0 0 14px;color:var(--accent)}
.handlerow{display:flex;align-items:center;gap:0}
.handlerow .at{font-size:18px;font-weight:700;color:var(--muted);padding:0 10px 0 2px}
.handlerow input{flex:1;min-width:0}
.bdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:4px 0 16px}
.bdcard{position:relative;border:3px solid var(--line);border-radius:14px;overflow:hidden;background:var(--bg2)}
.bdcard.sel{border-color:var(--accent2)}
.bdpick{display:block;width:100%;text-align:left}
.bdcard img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.bmissing{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
  font-family:var(--mono);font-size:10.5px;color:var(--muted);background:var(--raise)}
.bdcard .bn{display:block;padding:7px 10px;font-size:12.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdcard .bn i{display:block;font-family:var(--mono);font-size:9.5px;font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent2Ink)}
.bdfits{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.chipbtn{padding:8px 14px;border-radius:999px;border:2px solid var(--line);background:var(--bg2);
  font-size:13px;font-weight:600}
.chipbtn:hover{border-color:var(--accent)}
.chipbtn.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
.bdspots{display:grid;grid-template-columns:repeat(3,44px);gap:6px;margin-bottom:16px}
.spot{height:38px;border:2px solid var(--line);border-radius:10px;background:var(--bg2);font-size:13px}
.spot:hover{border-color:var(--accent)}
.spot.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}

/* ---------------- theme picker (from v230) ---------------- */
.chip .sw{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:-1px;
  background:var(--accent);box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent2)}
.themegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.theme{border:3px solid var(--line);border-radius:16px;position:relative;transition:transform .14s, border-color .14s}
.theme:hover{transform:translateY(-3px);border-color:var(--accent)}
.theme.sel{border-color:var(--accent2)}
.themepick{display:block;width:100%;padding:13px;text-align:left}
.theme .swatches{display:flex;gap:5px;margin-bottom:9px}
.theme .swatches i{width:22px;height:22px;border-radius:7px;display:block}
.theme .nm{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.theme .pro{position:absolute;top:9px;right:9px;font-family:var(--mono);font-size:8.5px;font-weight:700;pointer-events:none;
  letter-spacing:.12em;background:var(--accent2);color:var(--onAccent2);padding:3px 7px;border-radius:999px}
.delx{position:absolute;top:6px;right:8px;font-size:15px;line-height:1;color:var(--muted);
  padding:2px 5px;border-radius:6px;opacity:0;transition:opacity .12s}
.theme:hover .delx,.theme:focus-within .delx{opacity:.8}
@media (hover:none){ .theme .delx{opacity:.8} }
.cushead{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:12px;border-top:2px solid var(--line)}
.cusrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cuspick{display:flex;flex-direction:column;gap:7px}
.cuspick span{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cuspick input{width:100%;height:44px;padding:0;border:2px solid var(--line);border-radius:12px;background:none;cursor:pointer}
.cusname{display:flex;gap:9px;margin-top:14px}
.cusname input{flex:1;min-width:0}
.cusprev{margin-top:14px;border:2px solid var(--line);border-radius:14px;overflow:hidden}
.cusprev .pvtop{display:flex;align-items:center;gap:10px;padding:13px 15px}
.cusprev .pvdot{width:19px;height:19px;border-radius:6px;border:2px solid}
.cusprev .pvtitle{font-size:14.5px;font-weight:600}
.cusprev .pvtag{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;padding:5px 11px;border-radius:999px}
.cusprev .pvbar{display:flex;align-items:center;gap:9px;padding:11px 15px;font-size:12.5px}
#cusUse:disabled{opacity:.62}

/* ---------------- gate ---------------- */
.gate{min-height:100dvh;place-items:center;padding:26px;display:none}
.gate.on{display:grid}
.gate .card{max-width:440px}
.gate .lede{font-size:15px;color:var(--muted);margin:0 0 24px;line-height:1.55}
.gate .gnote{font-size:14px;font-weight:600;color:#FF6A6A;margin:0 0 16px}
.gate .alt{margin-top:16px;text-align:center}
.gate .alt button{font-family:var(--mono);font-size:12px;color:var(--muted);padding:8px}
.gate .alt button:hover{color:var(--accent)}

.buildline{margin:38px 0 10px;padding-top:14px;border-top:2px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);opacity:.65;text-align:right}

/* ---------------- the welcome list and Sort mode (v288) ----------------
   Sort mode replaces the list's own rows while it is open: the target bar
   on top, then what is already in the target beside the list being sorted.
   On a phone the target sits above the list, folded, so the list to tap
   through comes first. The warning red is the one .quicknote already uses. */
/* Full width like the bar above and the typing row below, rather than the
   78ch a plain note is held to, and larger type so it reads as the thing
   to do first. */
.listnote.welcome{max-width:none;color:var(--text);background:var(--surface);border:2px solid var(--accent2);
  border-radius:14px;padding:16px 20px;margin-top:14px;font-size:16px;line-height:1.55}
.listnote .gotit{margin-left:6px;font-weight:700;color:var(--accent2Ink);text-decoration:underline;padding:2px 4px}
.sortbar{background:var(--surface);border:3px solid var(--accent);border-radius:var(--r);padding:14px 16px 12px;margin-bottom:12px}
.sortline{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.sortlab{flex:none;width:110px;padding-top:8px;font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sortpills{display:flex;flex-wrap:wrap;gap:7px;align-items:center;min-width:0}
.sortpill{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 13px;border-radius:999px;
  font-size:13.5px;font-weight:600;background:var(--bg2);border:2px solid var(--line);
  transition:border-color .12s, background .12s, color .12s}
.sortpill:hover{border-color:var(--accent)}
.sortpill.on{background:var(--accent);border-color:var(--accent);color:var(--onAccent)}
.sortpill.off{opacity:.5;border-style:dashed}
.sortpill .dot{width:9px;height:9px;border-radius:50%;flex:none}
.sortpill .sharedmark{margin-left:0}
.sortpill.undo{font-size:12.5px;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
.sortdate{width:160px;min-height:36px;padding:5px 10px;font-family:var(--mono);font-size:13px}
.sortnone{font-size:13px;color:var(--muted);padding-top:8px}
.sortfoot{display:flex;align-items:center;gap:14px;border-top:2px solid var(--line);padding-top:10px;margin-top:4px}
.sortsay{flex:1;margin:0;font-size:14.5px;font-weight:600;line-height:1.45}
.sortsay.warn{color:#FF6A6A}
.sortdone{flex:none;padding:10px 22px}
.sortundo{margin:0 0 12px}
.sortundo .sortlab{display:block;width:auto;padding:0 0 6px 2px}
.sortgrid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;align-items:start}
.sortgrid .sortsrc{order:1}
.sortgrid .sorttarget{order:2}
.sorttask{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;text-align:left;
  background:var(--surface);border:2px solid var(--line);border-radius:14px;margin-bottom:8px;padding:8px 14px;
  font-size:15.5px;font-weight:600;transition:border-color .12s, transform .12s}
.sorttask:hover{border-color:var(--accent)}
.sorttask:active{transform:scale(.99)}
.sorttask.off{cursor:default;opacity:.55;border-style:dashed;flex-wrap:wrap}
.sorttask.off:hover{border-color:var(--line)}
.sortarrow{flex:none;color:var(--accent);font-weight:800}
.sorttitle{flex:1;min-width:0;word-wrap:break-word}
.sortwhy{font-size:12px;font-weight:500;color:var(--muted)}
.sortmore{font-size:13px;color:var(--muted);margin:8px 4px}
.sorttarget{background:var(--surface);border:2px solid var(--line);border-radius:14px;padding:0 14px 10px;position:sticky;top:12px}
.sorttarget summary{cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 0 10px;font-weight:700;font-size:14.5px}
.sortcount{margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;background:var(--raise);
  color:var(--muted);padding:3px 9px;border-radius:999px}
.sortadd{display:flex;gap:8px;margin-bottom:8px}
.sortadd input{flex:1;min-width:0;padding:9px 12px}
.sortadd .btn{padding:9px 16px;font-size:13.5px}
.sortitem{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 2px;border-top:1.5px solid var(--line);font-size:14px}
@media(max-width:760px){
  .sortgrid{grid-template-columns:minmax(0,1fr)}
  .sortgrid .sorttarget{order:0;position:static}
  .sortline{flex-direction:column;gap:6px}
  .sortlab{width:auto;padding-top:0}
  .sortfoot{flex-wrap:wrap}
  .sortdone{width:100%}
}

/* v308: sections that fold shut and move. */
.tsec{margin:0 0 18px}
.tsec.shut{margin-bottom:10px}
.tsec.shut > .sheet{display:none}
.tsec.dragging{opacity:.45}
.sechead{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:11px}
.secfold{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;padding:3px 2px;border-radius:6px}
.secfold:hover{color:var(--accent)}
.secfold:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.secarrow{display:inline-block;width:10px;font-size:11px;letter-spacing:0}
.secgrip{flex:none;color:var(--muted);opacity:.5;cursor:grab;font-size:12px;letter-spacing:0;
  touch-action:none;padding:2px;transition:opacity .12s}
.secgrip:hover{opacity:1;color:var(--accent)}
.secbar{display:flex;justify-content:flex-end;margin:-4px 0 6px}
.secall{all:unset;cursor:pointer;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);padding:3px 6px;border-radius:6px}
.secall:hover{color:var(--accent)}
.secall:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* v310: lists turned off, and tasks whose list is gone. */
.offtag{flex:none;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:1px 6px}
.orphanbtn span:first-child{color:var(--warn)}
.orphannote{margin:0 0 14px}
.orphangroup{margin:0 0 22px}
.orphanbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.orphanbar select{background:var(--raise);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font:inherit;max-width:100%}