/* Shared design tokens for cool-pilot, the-col, jyau-life and yauj-rmp. Dark only: no light theme, no theme switch.
   THE RULE: every colour has one channel at 82, one at ff, and the third at 82, ff or c8. Greys sit on a ladder of 0x0c
   steps around the pivot #828282 (22 · 52 · 82 · b2 · e2 are the 0x30 steps).
   - Red, yellow, green and cyan are ALERT colours (error, warning, success, info), never an app accent.
   - Accents work as fills, text, borders and focus rings. Text on any fill is #222222 (ink).
   - Reference build: the-col (buttons, header band, logo).
   - jyau-life is several apps in one: each section sets its own accent with <html data-section="...">; Home has none (a grey). */
:root {
  color-scheme: dark;   /* dark only: no light theme, no theme switch */
  --red: #ff8282;  --orange: #ffc882;  --yellow: #ffff82;  --lime: #c8ff82;
  --green: #82ff82;  --mint: #82ffc8;  --cyan: #82ffff;  --azure: #82c8ff;
  --blue: #8282ff;  --violet: #c882ff;  --magenta: #ff82ff;  --rose: #ff82c8;
  --accent: #e2e2e2;                   /* Home: no accent colour, the 0x30 grey step. Sections override it just below */
  --danger: var(--red);  --warning: var(--yellow);  --success: var(--green);  --info: var(--cyan);   /* alerts: never an accent */
  --bg: #222222;  --surface: #2e2e2e;  --surface-2: #3a3a3a;  --line: #525252;
  --text: #ffffff;  --text-muted: #b2b2b2;  --text-dim: #828282;  --ink: #222222;
  --focus: var(--accent);  --accent-text: var(--accent);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--bg));
  --accent-line: color-mix(in srgb, var(--accent) 45%, var(--bg));
  --radius-card: 14px;  --radius-control: 10px;  --radius-pill: 999px;  --tap: 44px;
  --font: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  /* jyau-life: recipe colour tints over --surface on the Plan page (kept low so small muted text stays 4.5:1) */
  --tint: 10%;  --tint-lo: 4%;  --tint-hi: 12%;
}
/* Section accents: html[data-section] outranks :root, and the derived --accent-* above are computed on the same element, so they follow. */
html[data-section=kitchen] { --accent: var(--orange); }
html[data-section=planner] { --accent: var(--violet); }
html[data-section=workout] { --accent: var(--azure); }
html[data-section=travel] { --accent: var(--lime); }
html[data-section=devotional] { --accent: var(--rose); }
html, body { background: var(--bg); color: var(--text); font-family: var(--font); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- base ---------- */
*{box-sizing:border-box}
/* --vw: the width the page has: the whole window, or less the chat panel while it is open on a wide screen (below) */
:root{--vw:100vw}
body{margin:0 auto;font:18px/1.4 var(--font);max-width:720px;-webkit-text-size-adjust:100%;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
h1{font-size:1.4rem;margin:.6rem 0 .4rem}
h2{font-size:1rem;color:var(--text-muted);margin:1.2rem 0 .3rem;text-transform:uppercase;letter-spacing:.04em}
h3{font-size:1rem;margin:.8rem 0 .2rem}section{margin-bottom:1rem}details{margin:1rem 0}summary{cursor:pointer}
a{color:var(--accent-text)}
::placeholder{color:var(--text-dim);opacity:1}

/* Header band: accent fill, ink text, the mark on an ink chip at the left (the-col) */
/* The band runs the full width of the screen and up to the very top; only its bottom corners are curved. Its content lines up with the page column. Sign out exists on the main page only. */
.appbar{--bodyw:720px;background:var(--accent);color:var(--ink);border-radius:0 0 24px 24px;display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.1rem;min-height:60px;box-sizing:border-box;width:var(--vw);
  margin:calc(-1 * max(12px,env(safe-area-inset-top))) 0 0 calc(50% - var(--vw) / 2);padding:calc(10px + env(safe-area-inset-top)) max(14px,calc((var(--vw) - var(--bodyw)) / 2 + 12px)) 10px}
body.wide .appbar{--bodyw:1100px}body.cal .appbar{--bodyw:1100px}

.appbar .brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;min-height:var(--tap)}
.appbar .logo{background:var(--ink);border-radius:var(--radius-control);padding:5px 6px;display:flex;flex:none}
.appbar .logo svg{width:40px;height:auto;display:block}
/* the mark: all six tiles on Home; on a section page only that section's tile is at full strength, the rest faded */
.appbar .logo rect{opacity:.22}
html[data-section=home] .logo rect,html[data-section=kitchen] .logo .t-orange,html[data-section=planner] .logo .t-violet,html[data-section=workout] .logo .t-azure,html[data-section=travel] .logo .t-lime,html[data-section=devotional] .logo .t-rose{opacity:1}
.appbar :focus-visible{outline-color:var(--ink)}
/* Sign out: top right of the band, the size of the header-row buttons (ink on the accent so it reads as part of the band) */
.appbar .signout{margin-left:auto;background:var(--ink);color:var(--text);border-color:var(--ink)}

nav{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin:8px 0 0;min-height:var(--tap)}
nav a:not(.btn){display:inline-flex;align-items:center;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-weight:600;text-decoration:none}
/* Header-row buttons (Home, All recipes, Add Other Recipes, Reset): ONE size on every page, the size of Home on Techniques. Types differ, size never. */
nav a[aria-current=page]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
nav a:not(.btn),nav a.btn,nav button{min-height:40px;padding:8px 16px;font-size:.9375rem;line-height:1.25}
.navbtns{margin-left:auto;display:inline-flex;gap:6px;flex-wrap:wrap}

/* status pill (wake lock, offline, syncing): bottom right, never in the way of a tap */
.pill{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:calc(8px + env(safe-area-inset-bottom));background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:var(--radius-pill);padding:4px 12px;font-size:.8rem;z-index:9;pointer-events:none}
body:has(.bar) .pill{bottom:calc(80px + env(safe-area-inset-bottom))}

/* ---------- controls ---------- */
/* Text boxes keep 10px corners (not pills) */
input,select,textarea{font:inherit;font-size:.9375rem;color:var(--text);padding:8px 12px;border-radius:var(--radius-control);border:1px solid var(--line);background:var(--surface-2);min-height:40px}
/* Dropdowns: a pill like the buttons, a chevron of our own, the native list underneath. Multi-choice filters (.msel) wear the same look. */
select,.msel>summary{appearance:none;-webkit-appearance:none;border-radius:var(--radius-pill);padding:8px 36px 8px 16px;font-weight:600;cursor:pointer;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23b2b2b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 14px no-repeat}
select:focus-visible,.msel>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
select:hover,.msel>summary:hover{border-color:var(--text-dim)}
select[multiple]{border-radius:var(--radius-control);padding:6px;background-image:none}
select option,select optgroup{background:var(--surface);color:var(--text);font-family:var(--font);font-weight:400}
.msel{position:relative;display:inline-block;margin:0}
.msel>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;border:1px solid var(--line);font-size:.9375rem;white-space:nowrap}
.msel>summary::-webkit-details-marker{display:none}
.msel[open]>summary,.msel.on>summary{border-color:var(--accent)}
.msel .n{background:var(--accent);color:var(--ink);border-radius:var(--radius-pill);padding:0 7px;font-size:.75rem}
.msel .menu{position:absolute;z-index:12;top:calc(100% + 4px);left:0;min-width:200px;max-height:55vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-control);padding:6px;box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 70%,transparent)}
.msel .menu label{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:8px;cursor:pointer;font-weight:500}
.msel .menu label:hover{background:var(--surface-2)}
.msel .menu .clear{width:100%;margin-top:4px}
textarea{width:100%}
/* Buttons: one shape (pill), four types. Plain <button> is secondary; .primary, .ghost, .danger. */
button,a.btn{font:inherit;font-weight:600;font-size:.9375rem;min-height:40px;padding:8px 16px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--surface-2);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
button.primary,a.btn.primary{background:var(--accent);color:var(--ink);border-color:transparent}
button.ghost,a.btn.ghost{background:transparent;color:var(--accent-text);border-color:var(--accent-text)}
button.danger,a.btn.danger{background:var(--danger);color:var(--ink);border-color:transparent}
button:disabled{background:var(--surface-2);border-color:var(--line);color:var(--text-dim);cursor:not-allowed}
.small{padding:8px 16px;font-size:.9375rem} /* kept as a class name only: there is ONE control size (40px) */
.bar button,form.add button,dialog button{width:100%}
/* Compact button: the ONE smaller control, for a tool that sits inside a small label row (Go's elevation "nearby"). Never for a main action. */
button.compact,a.btn.compact{min-height:28px;padding:2px 10px;font-size:.75rem;line-height:1.3;width:auto}
form.add label{display:flex;gap:8px;align-items:center}

/* Checkboxes: 24px circles; ticked = accent fill with an ink check */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:24px;height:24px;min-height:0;padding:0;margin:0;flex:none;cursor:pointer;border:2px solid var(--text-dim);border-radius:50%;background:var(--surface-2)}
input[type=checkbox]:checked{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23222222' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat}

.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0}.chips button{white-space:nowrap}
.chips button[aria-pressed=true],.seg button[aria-pressed=true]{background:var(--accent);border-color:transparent;color:var(--ink)}
.seg{display:flex;gap:6px}

/* Alerts: pill-like, soft tint, white text, straight 4px bar of the alert colour along the bottom. overflow: hidden clips the
   bar where the rounded ends begin. Corners are 26px (a pill on one line) so a long, wrapped message is not cut off. */
.alert,.warnbox,.okbox,.update,body.login #e:not(:empty){--alert:var(--info);position:relative;overflow:hidden;background:color-mix(in srgb,var(--alert) 18%,var(--bg));color:var(--text);border:1px solid color-mix(in srgb,var(--alert) 55%,var(--bg));border-radius:26px;padding:12px 20px 14px;overflow-wrap:anywhere}
:is(.alert,.warnbox,.okbox,.update,body.login #e:not(:empty))::before{content:"";position:absolute;bottom:0;left:0;right:0;height:4px;background:var(--alert);pointer-events:none}
.warnbox,body.login #e:not(:empty){--alert:var(--danger)}.okbox{--alert:var(--success)}

/* ---------- lists and cards ---------- */
.row{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:12px;margin:6px 0;min-height:56px;overflow-wrap:anywhere;color:var(--text)}
.row input[type=checkbox]{margin-top:2px}
.row.done .what{text-decoration:line-through;color:var(--text-muted)}
a.row{text-decoration:none;justify-content:space-between}
.qty{color:var(--text-muted);font-size:.9rem}
.bar{position:fixed;bottom:0;left:0;right:0;background:var(--bg);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px;max-width:720px;margin:auto}
.bar>*{flex:1}
form.add{display:grid;gap:8px;margin:10px 0}
dialog{border:1px solid var(--line);border-radius:var(--radius-card);max-width:90vw;width:420px;max-height:85vh;overflow:auto;background:var(--surface);color:var(--text)}
dialog::backdrop{background:color-mix(in srgb,#222222 60%,transparent)}
dialog label{display:grid;gap:4px;margin:8px 0}
.servings{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:sticky;top:0;background:var(--bg);padding:8px 0;z-index:5}.servings input{width:5.5em;text-align:center}.servings button{min-width:var(--tap);padding:10px 14px}
blockquote{margin:6px 0 0;padding:8px 12px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:var(--radius-control);color:var(--text)}
.update{position:fixed;left:8px;right:8px;top:max(8px,env(safe-area-inset-top));z-index:20;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:704px;margin:auto;background:color-mix(in srgb,var(--info) 18%,var(--surface))}
.update button{padding:8px 16px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:12px 0}
.tile{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:14px;color:var(--text);text-decoration:none;height:112px;overflow:hidden;font-weight:600}
a.tile:hover{border-color:var(--accent-line)}
.tile .ico{font-size:1.6rem;line-height:1.2}.tile small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tile{line-height:1.25}.tile.off{color:var(--text-muted);font-weight:400}.tile small{font-size:.75rem}
/* Home: a block per section in that section's colour (a fill/line only; the section name is always written out) */
.sec{--sec:var(--accent);margin:18px 0 6px}
.sec.s-rmp{--sec:var(--mint)}.sec.s-kitchen{--sec:var(--orange)}.sec.s-planner{--sec:var(--violet)}.sec.s-workout{--sec:var(--azure)}.sec.s-travel{--sec:var(--lime)}.sec.s-devotional{--sec:var(--rose)}
.sec h2{margin:0;display:flex;align-items:center;gap:8px;color:var(--sec)}.sec h2 a{color:inherit;text-decoration:none}.sec h2::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--sec);flex:none}
.sec .tile{border-top:4px solid var(--sec)}.sec a.tile:hover{border-color:var(--sec)}

/* tags: pills, soft tint of a colour with that colour as text (accent by default); alerts swap in their colour, with a word */
.tag{--tagc:var(--accent);display:inline-flex;align-items:center;font-size:.75rem;font-weight:600;border-radius:var(--radius-pill);padding:1px 8px;margin-left:6px;white-space:nowrap;
  background:color-mix(in srgb,var(--tagc) 16%,var(--bg));color:var(--tagc);border:1px solid color-mix(in srgb,var(--tagc) 45%,var(--bg))}
.tag.solid{background:var(--tagc);color:var(--ink);border-color:transparent}
.tag.warn{--tagc:var(--danger)}.tag.est{--tagc:var(--warning)}
.row.clash{border-color:var(--danger)}
.t{font-variant-numeric:tabular-nums;min-width:4.2em;font-weight:600}

/* ---------- Plan page: recipe colours (fills, never alerts; the recipe name is always written out too) ---------- */
.c0{--rc:var(--orange)}.c1{--rc:var(--azure)}.c2{--rc:var(--rose)}.c3{--rc:var(--lime)}.c4{--rc:var(--mint)}.c5{--rc:var(--violet)}.c6{--rc:var(--blue)}.c7{--rc:var(--magenta)}
body.wide{max-width:1100px}
.controls{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:center;margin:8px 0}.controls .chk{display:flex;gap:8px;align-items:flex-start;font-size:.9rem;color:var(--text-muted)}
.tgrid{display:grid;column-gap:6px;row-gap:0;position:relative}
.lhead{position:sticky;top:0;z-index:3;background:var(--rc);color:var(--ink);font-weight:700;font-size:.85rem;padding:6px 8px;border-radius:var(--radius-control) var(--radius-control) 0 0;overflow-wrap:anywhere}
.lbg{background:color-mix(in srgb,var(--rc) var(--tint-lo),var(--bg));z-index:0}
.tl{font-variant-numeric:tabular-nums;font-weight:600;font-size:.8rem;padding:4px 0}
.step{z-index:1;margin:2px 3px;padding:6px 8px;border-radius:var(--radius-control);border:1px solid color-mix(in srgb,var(--rc) 60%,var(--bg));border-left:4px solid var(--rc);background:color-mix(in srgb,var(--rc) var(--tint),var(--surface));color:var(--text);font-size:.8rem;line-height:1.3;overflow-wrap:anywhere;min-width:0}
/* hands-off: diagonal stripes of two tints (text is checked against the darker one) */
.step.off{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--rc) var(--tint-lo),var(--surface)) 0 6px,color-mix(in srgb,var(--rc) var(--tint-hi),var(--surface)) 6px 12px)}
.step.hold{border-style:dashed;border-left-style:solid;background:color-mix(in srgb,var(--rc) var(--tint-lo),var(--surface))}
.step .qty,.step .sd{font-size:.75rem}.sd{margin-top:2px}
.step.clash{border-top-color:var(--danger);border-right-color:var(--danger);border-bottom-color:var(--danger);box-shadow:0 0 0 2px var(--danger)}
.ingbox{border-left:5px solid var(--rc);background:color-mix(in srgb,var(--rc) var(--tint-lo),var(--surface));border-radius:var(--radius-control);padding:6px 12px;margin:8px 0}
.ingbox h3{margin:.4rem 0}
.ingbox .row{background:var(--surface)}
.ing{padding:2px 0}.sec{margin-top:.4rem;font-weight:600}
/* ticked steps: no fading (it would drop below 4.5:1); plain surface, muted text, struck-through title */
.step.done{background:var(--surface);color:var(--text-muted)}
.step.done b{text-decoration:line-through}

/* recipe page: compact header actions, no footer bar */
body.compact{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.h3row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:.8rem 0 .2rem}.h3row h3{margin:0}
.groups{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}.gchip{display:inline-flex}.gchip .small:first-child{border-radius:var(--radius-pill) 0 0 var(--radius-pill)}.gchip .x{border-radius:0 var(--radius-pill) var(--radius-pill) 0;margin-left:-1px;padding:6px 12px;color:var(--text-muted)}
.row.mini{min-height:var(--tap);padding:6px 10px;margin:3px 0;align-items:center}
.ingall{margin:10px 0}.ingall>summary{font-weight:600;min-height:var(--tap);display:flex;align-items:center;gap:6px}
.stepchk{display:flex;gap:8px;align-items:flex-start}
dialog.sheet h4{margin:.8rem 0 .2rem;font-size:.9rem;color:var(--text-muted)}

/* sign-in page */
body.login{padding-bottom:24px}
body.login form{display:grid;gap:12px;width:min(100%,320px);margin:15vh auto 0}
body.login #e{min-height:1.4em}

/* groups: sections of cards; order panel; "changed from" bar */
.groupsbox,.orderbox{margin:8px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:4px 12px 12px}
.groupsbox>summary,.orderbox>summary{min-height:var(--tap);display:flex;align-items:center;gap:6px;font-weight:600;cursor:pointer}
.gsec{margin:10px 0 4px;font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.gcard{position:relative;display:flex;align-items:stretch;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-control);min-width:0}
.gcard.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.gmain{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;background:transparent;border:0;border-radius:var(--radius-control);color:var(--text);font-weight:400;text-decoration:none;min-height:var(--tap);cursor:pointer}
.gname{font-weight:600}.gnames{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmenu{flex:none;position:relative;align-self:flex-start}.gmenu summary{list-style:none;cursor:pointer;min-width:var(--tap);min-height:var(--tap);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:1.2rem}
.gmenu summary::-webkit-details-marker{display:none}
.gmenubody{position:absolute;right:4px;top:calc(100% - 4px);z-index:6;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:11rem}
.gbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius-card);padding:8px 12px;margin:8px 0}
.gsearch{width:100%;margin:6px 0}
.orow .what{flex:1;min-width:0}.swatch{width:14px;height:14px;border-radius:5px;background:var(--rc);flex:none}
.orow button{min-width:var(--tap);padding:6px 10px}

.hrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}

/* ---------- Tasks: category colours (palette tokens; a dot and soft tint, never an alert) ---------- */
.cat-red{--rc:var(--red)}.cat-orange{--rc:var(--orange)}.cat-yellow{--rc:var(--yellow)}.cat-green{--rc:var(--green)}.cat-blue{--rc:var(--blue)}.cat-violet{--rc:var(--violet)}
.tag.cat{--tagc:var(--rc);margin-left:0}
.task .meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.task .meta .tag{margin-left:0}.task .note{margin-top:4px;white-space:pre-wrap}
.task{cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid2+.grid2,.grid2+textarea,form.add details.more>*+*{margin-top:8px}
.fld{display:grid;gap:4px;margin:8px 0;color:var(--text-muted);font-size:.9rem}.fld input,.fld select{width:100%}
form.add details.more{margin:0}
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.board .lane{flex:0 0 min(82vw,320px);scroll-snap-align:start;margin:0}
.matrix{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){.matrix{grid-template-columns:1fr 1fr}}
.matrix .quad{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:4px 12px 8px;margin:0}
.grid2>*{min-width:0}.grid2 label{display:grid!important;gap:2px;font-size:.8rem;color:var(--text-muted)}.grid2 input[type=date]{width:100%;min-width:0}

/* ---------- Calendar: events in their category colour (a bar and soft tint, never an alert); holidays and uncategorised grey ---------- */
.ev.nocat,.ev.holiday{--rc:var(--text-dim)}
.calnav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0}.calnav button{min-width:40px;min-height:40px;padding:8px 14px;font-size:.9375rem}
.cal h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0}
.dot{width:10px;height:10px;border-radius:50%;background:var(--rc);flex:none;margin-top:8px}
.ev.row{border-left:4px solid var(--rc);background:color-mix(in srgb,var(--rc) 8%,var(--surface));cursor:pointer}
.ev.row .what{flex:1;min-width:0}.ev.row b{font-weight:600}
.ev.done b,.ev.done.chip2{color:var(--text-muted);text-decoration:line-through}
.ev.holiday.row{cursor:default;background:var(--surface)}.ev.holiday b{color:var(--text-muted)}
.aday h3{display:flex;gap:8px;align-items:center}.aday.today h3{color:var(--accent-text)}.aday .empty{margin:2px 0 6px}
.chip2{display:block;width:100%;min-height:0;min-width:0;padding:1px 5px;margin:1px 0;border:0;border-left:3px solid var(--rc);border-radius:6px;background:color-mix(in srgb,var(--rc) 16%,var(--surface));color:var(--text);font-size:.68rem;font-weight:500;line-height:1.35;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;justify-content:flex-start}
.chip2.holiday{color:var(--text-muted)}
.mhead{text-align:center;font-size:.75rem;color:var(--text-muted);padding:2px 0}
.mnum{min-height:24px;padding:0 6px;font-size:.75rem;border:0;background:transparent;color:var(--text);width:auto}
body.cal{max-width:1100px}
.calnav .jump{display:inline-flex;gap:6px;align-items:center;font-size:.85rem;color:var(--text-muted)}.calnav .jump input{min-height:40px;padding:8px 12px}

.calnav button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.calnav [hidden]{display:none}
.rangeline{margin:0 0 4px;min-height:1.3em;font-size:.85rem}
/* Time: hours down, days across; the scroller holds both axes, the hours stay at the left and the day names at the top */
.tv{overflow:auto;position:relative;border:1px solid var(--line);border-radius:8px;background:var(--surface);scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter,40px);overscroll-behavior:contain;touch-action:pan-x pan-y}
.tvin{position:relative}
.tvrow{display:grid}
.tvtop{position:sticky;top:0;z-index:4;background:var(--bg);border-bottom:1px solid var(--line)}
.tvg{position:sticky;left:0;z-index:3;background:var(--bg)}
.tvday{padding:6px 2px;text-align:center;font-size:.8rem;font-weight:600;scroll-snap-align:start;border-left:1px solid var(--surface-2)}
.tvday.today{background:var(--accent);color:var(--ink)}
.gall{border-top:1px solid var(--line);max-height:30vh;overflow-y:auto}.gall>.tvg{font-size:.6rem;line-height:1.1;align-self:center;text-align:center;color:var(--text-muted);padding:2px}.gallday{min-width:0;min-height:36px;padding:2px;border-left:1px solid var(--surface-2);background:var(--surface)}
.tvbody{position:relative}
.ghours{height:calc(var(--ppm) * 1440px)}
.ghour{height:calc(var(--ppm) * 60px);font-size:.65rem;color:var(--text-dim);text-align:right;padding-right:4px;border-top:1px solid var(--surface-2);box-sizing:border-box}
.gcol{position:relative;min-width:0;height:calc(var(--ppm) * 1440px);border-left:1px solid var(--surface-2);background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--ppm) * 60px - 1px),var(--surface-2) calc(var(--ppm) * 60px - 1px) calc(var(--ppm) * 60px));scroll-snap-align:start}
.gcol.today{background-color:color-mix(in srgb,var(--accent) 5%,transparent)}
.gev{position:absolute;margin:0;white-space:normal;overflow:hidden;font-size:.65rem;line-height:1.2;border-radius:4px;padding:1px 3px;z-index:1}
.gev span{color:var(--text-muted)}
.nowline{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--danger,#ff6b6b);z-index:2;pointer-events:none}
.nowline::before{content:"";position:absolute;left:-5px;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--danger,#ff6b6b)}
.nowline span{position:absolute;right:2px;top:-16px;font-size:.62rem;color:var(--danger,#ff6b6b);background:var(--bg);padding:0 3px;border-radius:4px}
/* Grid: months one after another, weeks as rows of seven day boxes, events listed under their day */
.gv{overflow-y:auto;overflow-x:hidden;position:relative;border-radius:8px;overscroll-behavior:contain}
.gvdow{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;background:var(--bg);padding:2px 0}
.gvmh{margin:14px 0 4px;font-size:1.05rem}
.gvweeks{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.gcell{min-height:72px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:2px;overflow:hidden;cursor:pointer}
.gcell.blank{background:transparent;border-color:transparent;cursor:default}
.gcell.wkend{background:color-mix(in srgb,var(--surface) 70%,var(--bg))}
.gcell.today{border-color:var(--accent)}.gcell.today .mnum{background:var(--accent);color:var(--ink)}
.gcell.jumped{box-shadow:0 0 0 2px var(--accent)}
.gcell .chip2{white-space:normal;overflow-wrap:anywhere;font-size:.62rem;padding:1px 3px}
.chkrow{display:flex;gap:8px;align-items:center;margin:8px 0}
.cal .seg button{flex:1;min-width:0}
/* task tray: a strip pinned to the bottom of the screen, so a task can be dragged up onto the calendar */
.tray{position:sticky;bottom:0;z-index:8;margin:12px -12px 0;padding:6px 12px calc(6px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
.tray>summary{min-height:var(--tap);display:flex;align-items:center;gap:6px;font-weight:600}
.tray .hint{margin:0 0 4px;font-size:.8rem}
.syncdetails{white-space:pre-wrap;margin:0;overflow-wrap:anywhere}
.trayitems{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.tcard{flex:0 0 200px;display:flex;gap:8px;align-items:flex-start;background:color-mix(in srgb,var(--rc) 8%,var(--surface));border:1px solid var(--line);border-left:4px solid var(--rc);border-radius:var(--radius-control);padding:8px;min-width:0}
.tcard .what{flex:1;min-width:0;font-size:.85rem;overflow-wrap:anywhere}.tcard .qty{font-size:.75rem}.tcard .sched{padding:4px 10px;min-height:32px;font-size:.75rem}
.drag{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.drag.lifted{opacity:.45}
body.dragging{-webkit-user-select:none;user-select:none}
.dragghost{position:fixed;left:0;top:0;z-index:30;pointer-events:none;background:var(--surface-2);color:var(--text);border:1px solid var(--rc);border-left:4px solid var(--rc);border-radius:var(--radius-control);padding:6px 10px;font-size:.8rem;font-weight:600;max-width:220px;box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 70%,transparent)}
.dragghost.nocat{--rc:var(--text-dim)}
.dragghost[data-when]:not([data-when=""])::after{content:" · " attr(data-when);color:var(--accent-text)}
.droptarget{outline:2px solid var(--accent);outline-offset:-2px}
.tray.droptarget{background:var(--accent-soft)}
.gcol{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.selmark{position:absolute;left:2px;right:2px;z-index:2;pointer-events:none;border-radius:6px;background:color-mix(in srgb,var(--accent) 28%,transparent);border:2px solid var(--accent);font-size:.7rem;color:var(--accent-text);padding:1px 6px;overflow:hidden}.selmark::before{content:attr(data-when)}
body.selecting{cursor:ns-resize}
.slotmark{position:absolute;left:0;right:0;height:2px;background:var(--accent);z-index:2;pointer-events:none;font-size:.6rem;color:var(--accent-text)}

.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}.filterbar label{display:inline-flex;gap:8px;align-items:center}.filters{display:contents}
.grid2 select{align-self:end}

/* ---------- Tasks: drag handle (List view) ---------- */
.grip{flex:none;align-self:stretch;display:flex;align-items:center;padding:0 4px;margin:-4px 0 -4px -6px;color:var(--text-dim);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;letter-spacing:-2px;font-weight:700}
.task.dragging{border-color:var(--accent);background:var(--surface-2)}

/* Plan: recipes as columns on one shared time axis (kitchen/plan). One scroll box like the calendar's Time view: names pinned at the top, time labels pinned at the left, snap sideways. */
.plancols{overflow:auto;position:relative;margin-top:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);overscroll-behavior:contain;scroll-snap-type:x mandatory;scroll-padding-left:56px}
.plancols .tgrid{column-gap:0}
.plancols .lhead{scroll-snap-align:start;border-radius:0}
.plancols .lcorner{position:sticky;top:0;left:0;z-index:5;background:var(--bg)}
.plancols .tl{position:sticky;left:0;z-index:2;background:var(--bg)}
.plancols .tl.tserve,.plancols .servebar{border-top:1px solid var(--line)}
.plancols .servebar{padding:8px 6px}

/* ---------- Tasks: sort rules panel (a .msel dropdown holding the ordered sort rules) ---------- */
.msel .menu.sortmenu{min-width:min(360px,calc(100vw - 32px));padding:8px}
.sortrules{display:grid;gap:6px}
.sortrule{display:flex;gap:8px;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-control);padding:4px 8px}
.sortrule.dragging{border-color:var(--accent)}
.sortrule .grip{margin:0;align-self:center;padding:8px 6px}
.sortrule select{flex:1;min-width:0}
.sortrule button{min-width:36px;padding:6px 10px}
.sortactions{display:flex;gap:8px;margin-top:8px}

/* ---------- Tasks: sub-task tree (List view, Group by None) ---------- */
.node{display:block}
.node.dragging>.task{border-color:var(--accent);background:var(--surface-2)}
.subtasks{margin:0 0 0 16px;padding-left:8px;border-left:2px solid var(--line)}   /* 16px per level, a subtle line down the left */
.task .toggle{flex:none;min-width:28px;min-height:28px;padding:0;margin:-2px 0 0 -4px;border:0;background:transparent;color:var(--text-muted)}
.row.ctx{opacity:.55}                                                                /* a parent shown only because a sub-task matches */
.tag.count{font-variant-numeric:tabular-nums}
.tag.parent{color:var(--text-muted)}
.task .meta .addsub{min-height:0;height:22px;padding:0 9px;font-size:.7rem;line-height:1;font-weight:600;width:auto;margin:0;border-radius:var(--radius-pill);background:none;color:var(--text-muted);border:1px dashed var(--line)}.task .meta .addsub:hover{color:var(--text);border-color:var(--text-dim)}

/* ---- Fare watch dashboard (Travel): cards in a responsive grid, a price-history chart, folded Bought / Archived lists ---- */
.watchgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:12px;align-items:start}
.watchgrid>.empty{grid-column:1/-1}
.wcard{margin:0!important}.wcard .whead{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.wcard .wchips{display:flex;gap:6px;flex-wrap:wrap}.wcard .wsug,.wcard .wres{margin-top:10px;font-size:.9rem}
.wcard .wres>div+div{margin-top:8px}.wcard .wmissing{font-style:italic}.wcard .wchart{position:relative;height:150px;margin-top:12px}
.wcard .wact{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.wcard .wact>*{flex:0 0 auto}
.wcard .wact .btn,.wcard .wact button{min-height:40px;padding:8px 16px;font-size:.9375rem;width:auto;margin:0}
.wfold{margin:16px 0}.wfold>summary{margin-bottom:10px}

/* ---- Fares dashboard (Travel, read-only): overview panels, the price block and sparkline on a card, research health (cards themselves reuse .watchgrid / .wcard) ---- */
.faregrid{display:grid;gap:12px;grid-template-columns:1fr;margin-bottom:6px}
@media (min-width:720px){.faregrid{grid-template-columns:1fr 1fr}}
.fpanel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);padding:14px 16px}
.fpanel h2{margin:0 0 6px;font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.fpanel>.empty{padding:10px 0}.fhealth{margin:16px 0}
.fline{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:baseline;min-height:44px;padding:8px 0;border-top:1px solid var(--line);color:var(--text);text-decoration:none}
.fline:first-child{border-top:0}.fline .row-meta{grid-column:1/-1}.fline .fname{font-weight:600;min-width:0;overflow-wrap:anywhere}.fline .fdelta{font-weight:600;white-space:nowrap}
.fby{grid-template-columns:1fr auto}.fby.passed .fdelta{color:var(--danger)}.fby.today .fdelta,.fby.soon .fdelta{color:var(--warning)}
.fmove.down .farrow,.fmove.down .fdelta,.fchange.down{color:var(--success)}.fmove.up .farrow,.fmove.up .fdelta,.fchange.up{color:var(--danger)}.fchange.flat{color:var(--text-muted)}
.fprice{margin-top:10px}.fnow{font-size:1.6rem;font-weight:700;line-height:1.2}.fsrc{font-size:.75rem;font-weight:500;color:var(--text-muted);margin-left:8px}.fchange{font-size:.9rem;font-weight:600}
.fmarket .fdelta,.fmove.fmarket.down .fdelta,.fmove.fmarket.up .fdelta{color:var(--text)}.fmarket .fname{font-variant-numeric:tabular-nums}.fspark{position:relative;height:56px;margin-top:10px}
.fstatus{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}.fproblems{margin:8px 0 0;padding-left:18px;font-size:.9rem}.fproblems li+li{margin-top:4px}
.fquotas{margin-top:10px}.fquota{display:grid;grid-template-columns:7rem auto 1fr;gap:4px 10px;align-items:center;margin-top:6px}
.fbar{height:8px;border-radius:var(--radius-pill);background:var(--surface-2);overflow:hidden}.fbar i{display:block;height:100%;background:var(--success)}.fbar.warn i{background:var(--warning)}.fbar.bad i{background:var(--danger)}

/* Travel: a watch is a trip in planning. Trips home add row, the planning page, the trip page's "From watch" card. */
.addrow{display:flex;gap:8px;flex-wrap:wrap}.addrow>.btn{flex:1 1 220px;width:auto}
.planpage .plchips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.planpage .plgap{margin-top:10px}
.planpage .plchart{position:relative;height:240px;margin-top:12px}
.planpage .plhist{margin:12px 0 0}.planpage .plhist-table{width:100%;border-collapse:collapse;font-size:.9rem}.planpage .plhist-table td{padding:6px 4px;border-top:1px solid var(--line)}.planpage .plhist-table td+td{text-align:right}
.planpage .plact{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.planpage .plact>*{flex:1 1 160px;width:auto}
.planpage .card .section-label{margin-top:0}
.plfrom a{font-weight:600}

/* ---- Local chatbot (only on a local run): a pill at the bottom right opens a side panel (full screen on a phone) ---- */
.chatfab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;width:40px;min-width:40px;padding:0;font-size:1.2rem;line-height:1;border-radius:50%}
body:has(#tray) .chatfab{bottom:calc(74px + env(safe-area-inset-bottom))}
.chatpanel{position:fixed;top:0;right:0;bottom:0;z-index:70;width:min(440px,100vw);display:flex;flex-direction:column;gap:10px;padding:14px 14px calc(14px + env(safe-area-inset-bottom));background:var(--surface);border-left:1px solid var(--line)}
.chatpanel[hidden]{display:none}
.chathead{display:flex;align-items:center;justify-content:space-between;gap:8px}.chatbtns{display:flex;gap:6px}
.chatlog{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.chatmsg{max-width:92%;padding:8px 12px;border-radius:var(--radius-card);white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9375rem}
.chatmsg.me{align-self:flex-end;background:color-mix(in srgb,var(--accent) 22%,var(--surface-2))}.chatmsg.bot{align-self:flex-start;background:var(--surface-2)}.chatmsg.err{align-self:stretch;max-width:none;color:var(--danger);border:1px solid var(--danger)}
.chatacts{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:2px;font-size:.75rem;color:var(--text-muted)}.chataction.ok.write{color:var(--success)}.chataction.bad{color:var(--danger)}
.chatform{display:flex;gap:8px;align-items:flex-end}.chatform textarea{flex:1;min-width:0;resize:none}
body.chatopen .chatfab{display:none}
@media (min-width:900px){.chatpanel{box-shadow:-8px 0 24px rgb(0 0 0/.35)}}
/* wide enough: the page makes room for the open chat panel (its content shifts left, so nothing it shows is hidden); on a phone the panel covers the page */
@media (min-width:760px){html.chatopen{--vw:calc(100vw - 440px);margin-right:440px}body.chatopen .bar{right:440px}body.chatopen .update,body.chatopen .pill{right:448px}}
.syncline{margin:10px 0 calc(16px + env(safe-area-inset-bottom))}
.linkedtask+.linkedtask{margin-top:6px}.subline{padding-left:14px;font-size:.85rem}.subform{margin-top:8px}.subbtns{display:flex;gap:8px}

/* ---- Task tags: urgency is a heat scale (red, orange, yellow, grey), importance a weight scale (magenta, violet, azure, grey) ---- */
.tag.urg-immediate{--tagc:var(--red)}.tag.urg-pressing{--tagc:var(--orange)}.tag.urg-planned{--tagc:var(--yellow)}.tag.urg-backlog{--tagc:var(--text-muted)}
.tag.imp-critical{--tagc:var(--magenta)}.tag.imp-high{--tagc:var(--violet)}.tag.imp-medium{--tagc:var(--azure)}.tag.imp-low{--tagc:var(--text-muted)}
.filterbar button[aria-pressed=true]{background:var(--accent);border-color:transparent;color:var(--ink)}

/* Tasks: the small status dropdown at the end of a card's tag row (replaces the done checkbox), before + Comment and + Sub-task; margin-left:auto pushes the three to the right together */
.task .meta .statussel{min-height:0;height:22px;padding:0 22px 0 9px;font-size:.7rem;line-height:1;font-weight:600;width:auto;margin:0 0 0 auto;background-position:right 6px center;background-size:10px}
/* small buttons inside a comment box (Edit, Delete, Save, Cancel) */
.comment .mini{width:auto;min-height:0;height:24px;padding:0 10px;font-size:.75rem;line-height:1;margin-right:6px}
.comment .ctext,.comment .qty{overflow-wrap:anywhere;min-width:0}.comment textarea{box-sizing:border-box}
.task .what{min-width:0;overflow-wrap:anywhere}
/* Task comments: one bordered box per comment (date in grey, text in white, links in the link colour, small buttons) */
.comments{display:grid;gap:8px;margin:6px 0}
.comment{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-card);padding:8px 12px;display:grid;gap:6px}
.comment .ctext{white-space:pre-wrap;color:var(--text)}.comment .qty{color:var(--text-muted)}
.comment textarea{width:100%}
/* the task sheet's Save, Cancel and Delete in one line at the bottom */
.sheetbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.sheetbtns button{width:auto;flex:1}
/* Status colours: the dropdown on a card (tinted like a tag) and the heading and top bar of a board lane / status group */
.st-backlog{--stc:var(--text-muted)}.st-in-progress{--stc:var(--azure)}.st-blocked{--stc:var(--red)}.st-done{--stc:var(--green)}
select.statussel[class*=st-]{background-color:color-mix(in srgb,var(--stc) 16%,var(--bg));color:var(--stc);border-color:color-mix(in srgb,var(--stc) 45%,var(--bg))}
section.grp[class*=st-]{border-top:3px solid var(--stc);padding-top:4px}section.grp[class*=st-]>h3{color:var(--stc)}
.board .lane[class*=st-]{background:color-mix(in srgb,var(--stc) 6%,var(--surface));border-radius:var(--radius-card);padding:4px 10px 8px}
.chatmsg.live{display:flex;flex-direction:column;gap:4px}.chataside{color:var(--text)}.chatmsg.live .chataction{font-size:.75rem;color:var(--text-muted)}.chatmsg.live .chataction.ok.write{color:var(--success)}.chatmsg.live .chataction.bad{color:var(--danger)}.chatthinking{color:var(--text-muted)}