:root {
  --bg: #f3f5f8; --surface: #ffffff; --surface-2: #f8fafc; --ink: #172033; --muted: #64748b; --line: #e2e8f0; --line-2: #cbd5e1;
  --user-accent: #1f4e79; --on-accent: #ffffff; --accent-ink: var(--user-accent); --accent: var(--accent-ink); --accent-2: color-mix(in srgb, var(--user-accent) 78%, #3b82f6); --accent-soft: color-mix(in srgb, var(--user-accent) 12%, var(--surface)); --focus: #93c5fd;
  --role-WF: #1f4e79; --role-OI: #0f766e; --role-OD: #7c3aed; --role-GEN: #64748b;
  --red: #a8433a; --red-bg: #f9ecea; --amber: #7a6000; --amber-bg: #fff3bf;   /* U-04 (audit 2026-10-23): measured 5.4:1 on the amber tint, 6.0 on white; the old #9a7a00 was 3.65 */ --blue: #175cd3; --blue-bg: #e0ecff;
  --grey: #475467; --grey-bg: #eef0f3; --green: #067647; --green-bg: #d1fadf;
  --radius: 10px; --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1); --shadow-lg: 0 12px 32px rgba(16,24,40,.18);
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --toast-bg: #111827; --toast-ink: #fff; --scrim: rgba(15, 23, 42, .35);
  --series-1: #2563eb; --series-2: #c07d0a; --series-3: #6b7d9a; --series-done: #15803d; --series-recv: #6b7d9a; --grid: #e2e8f0;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0f141b; --surface: #171e28; --surface-2: #1d2632; --ink: #e6ebf2; --muted: #97a3b4; --line: #2a3441; --line-2: #3a4656;
  --accent: color-mix(in srgb, var(--user-accent) 55%, #ffffff); --accent-2: color-mix(in srgb, var(--user-accent) 45%, #ffffff); --accent-soft: color-mix(in srgb, var(--user-accent) 28%, var(--surface)); --focus: #3b82f6;
  --red: #ec8e83; --red-bg: #35221f; --amber: #f7cf2e; --amber-bg: #3d3300; --blue: #7ab0ff; --blue-bg: #17284a;
  --grey: #b0bac7; --grey-bg: #263040; --green: #5fd39a; --green-bg: #123424;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
  --toast-bg: #e6ebf2; --toast-ink: #0f141b; --scrim: rgba(0, 0, 0, .55);
  --series-1: #4d8fe8; --series-2: #cf9418; --series-3: #7f90ab; --series-done: #3fbf6c; --series-recv: #7f90ab; --grid: #2a3441;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #0f141b; --surface: #171e28; --surface-2: #1d2632; --ink: #e6ebf2; --muted: #97a3b4; --line: #2a3441; --line-2: #3a4656;
  --accent: color-mix(in srgb, var(--user-accent) 55%, #ffffff); --accent-2: color-mix(in srgb, var(--user-accent) 45%, #ffffff); --accent-soft: color-mix(in srgb, var(--user-accent) 28%, var(--surface)); --focus: #3b82f6;
  --red: #ec8e83; --red-bg: #35221f; --amber: #f7cf2e; --amber-bg: #3d3300; --blue: #7ab0ff; --blue-bg: #17284a;
  --grey: #b0bac7; --grey-bg: #263040; --green: #5fd39a; --green-bg: #123424;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5); --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
  --toast-bg: #e6ebf2; --toast-ink: #0f141b; --scrim: rgba(0, 0, 0, .55);
  --series-1: #4d8fe8; --series-2: #cf9418; --series-3: #7f90ab; --series-done: #3fbf6c; --series-recv: #7f90ab; --grid: #2a3441;
  color-scheme: dark;
}
}
:root[data-theme="dark"] .btn.primary { background: color-mix(in srgb, var(--user-accent) 55%, #fff); border-color: transparent; color: #0f141b; }
:root[data-theme="dark"] .tab .count { color: #0f141b; }
:root[data-theme="dark"] .tab .count.soon { color: var(--amber); }
:root[data-theme="dark"] .storage-pill.ok, :root[data-theme="dark"] .storage-pill.warn, :root[data-theme="dark"] .storage-pill.bad, :root[data-theme="dark"] .banner, :root[data-theme="dark"] .waiting-box, :root[data-theme="dark"] .btn.danger { border-color: transparent; }
:root[data-theme="dark"] .steps li::before { color: #0f141b; }
:root[data-theme="dark"] .btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.45 var(--font); color: var(--ink); background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-2); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.grow { flex: 1; }
.ic { width: 18px; height: 18px; flex: none; }
.ic.sm { width: 15px; height: 15px; }

/* ---------- top bar ---------- */
.topbar { display: flex; align-items: center; gap: 18px; padding: 0 20px; height: 54px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; transition: background-color .2s ease; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; color: var(--accent); }
.tabs { display: flex; gap: 2px; margin-left: 8px; }
.tab { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; background: transparent; border-radius: 8px; color: var(--muted); font-weight: 600; }
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab.active { background: var(--accent-soft); color: var(--accent); }
.tab .count { background: var(--red); color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; line-height: 18px; }
.tab .count.soon { background: var(--amber-bg); color: var(--amber); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.storage-pill { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--muted); font-size: 13px; max-width: 320px; }
.storage-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.storage-pill.ok { border-color: #a6f4c5; background: var(--green-bg); color: var(--green); }
.storage-pill.warn { border-color: #f1dc7a; background: var(--amber-bg); color: var(--amber); }
.storage-pill.bad { border-color: #fecdca; background: var(--red-bg); color: var(--red); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-weight: 600; white-space: nowrap; }
.btn:hover { background: var(--surface-2); border-color: #94a3b8; }
.btn.primary { background: var(--user-accent); border-color: var(--user-accent); color: var(--on-accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--user-accent) 85%, #000); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { color: var(--red); border-color: #fecdca; }
.btn.danger:hover { background: var(--red-bg); }
.btn.sm { padding: 4px 9px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--muted); }
.iconbtn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.iconbtn.ok:hover { color: var(--green); background: var(--green-bg); }
.imark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); padding: 0; vertical-align: middle; }
.imark:hover { color: var(--accent-2); background: var(--accent-soft); }
button:focus-visible, [tabindex]:focus-visible, a:focus-visible, .chip:focus-visible, .cchip:focus-visible { outline: 2px solid var(--focus, var(--accent-2)); outline-offset: 2px; }   /* U-09 */
.topbar button:focus-visible, .tabs button:focus-visible { outline-color: #ffffff; outline-offset: -3px; }
.imark .ic { width: 16px; height: 16px; }

/* ---------- quick add ---------- */
.quickadd { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.quickadd input, .quickadd textarea { flex: 1; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); }
.quickadd input:focus, .quickadd textarea:focus, .field input:focus, .field select:focus, .field textarea:focus, .toolbar input:focus, .toolbar select:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent-2); }
.quickadd select { padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); }

/* ---------- banner ---------- */
.banner { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--amber-bg); color: var(--amber); border-bottom: 1px solid #f1dc7a; }
.banner.bad { background: var(--red-bg); color: var(--red); border-color: #fecdca; }
.banner.info { background: var(--blue-bg); color: var(--blue); border-color: #b2ccff; }
.banner .btn { margin-left: auto; }

/* ---------- main ---------- */
main { flex: 1; padding: 20px; max-width: 1480px; width: 100%; margin: 0 auto; }
.page-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.page-head .sub { white-space: nowrap; }
.page-head h1 { font-size: 20px; margin: 0; }
.page-head .sub { color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card + .card { margin-top: 14px; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.card-head h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card-head .count { font-size: 13px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--grey-bg); color: var(--grey); }
.card-body { padding: 14px 16px; }
.sec-overdue .card-head { border-left: 4px solid var(--red); background: color-mix(in srgb, var(--red) 9%, var(--surface)); }
.sec-overdue .card-head h2 { color: var(--red); }
.sec-overdue .count { background: var(--red-bg); color: var(--red); }
.sec-followup .card-head { border-left: 4px solid var(--blue); background: color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.sec-followup .card-head h2 { color: var(--blue); }
.sec-followup .count { background: var(--blue-bg); color: var(--blue); }
.sec-duesoon .card-head { border-left: 4px solid var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); }
.sec-duesoon .card-head h2 { color: var(--amber); }
.sec-duesoon .count { background: var(--amber-bg); color: var(--amber); }
.sec-stale .card-head { border-left: 4px solid var(--grey); }
.empty { padding: 14px 16px; color: var(--muted); }
.today-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
.today-main { min-width: 0; }
@media (max-width: 1000px) { .today-grid { grid-template-columns: 1fr; } }
.summary-line { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); margin: 0 0 14px; }
.summary-line b { color: var(--ink); }
.summary-line span.warn, .summary-line span.warn b { color: var(--amber); }
.summary-line button.linkish { border: 0; background: none; color: var(--accent-2); padding: 0; text-decoration: underline; cursor: pointer; }

/* ---------- task rows ---------- */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 16px; border-top: 1px solid var(--line); align-items: center; }
.row:first-child { border-top: 0; }
.row:hover { background: var(--surface-2); }
.row .title { grid-column: 1; grid-row: 1; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; min-width: 0; }
.row .title span.t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .title:hover span.t { color: var(--accent-2); text-decoration: underline; }
.row .meta { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 13px; align-items: center; }
.row .actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 2px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--grey-bg); color: var(--grey); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.row .meta .chip { max-width: 420px; }
.chip.role { background: color-mix(in srgb, var(--rc, var(--accent)) 14%, var(--surface)); color: color-mix(in srgb, var(--rc, var(--accent)) 85%, var(--ink)); border: 1px solid color-mix(in srgb, var(--rc, var(--accent)) 30%, transparent); }
:root[data-theme="dark"] .chip.role { color: color-mix(in srgb, var(--rc, var(--accent)) 55%, #fff); background: color-mix(in srgb, var(--rc, var(--accent)) 28%, var(--surface)); }
.chip.role-WF { --rc: var(--role-WF); } .chip.role-OI { --rc: var(--role-OI); } .chip.role-OD { --rc: var(--role-OD); } .chip.role-GEN { --rc: var(--role-GEN); }
.chip.prio-High { background: var(--red-bg); color: var(--red); }
.chip.prio-Low { background: var(--grey-bg); color: var(--muted); }
.chip.st-Waiting { background: var(--blue-bg); color: var(--blue); }
.chip.st-InProgress { background: var(--accent-soft); color: var(--accent); }   /* U-17: In progress has its own hue; amber means time pressure only */
.chip.hint { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--line-2); }
.chip.on { background: var(--green-bg); color: var(--green); }
.chip.st-Done { background: var(--green-bg); color: var(--green); }
.chip.st-Cancelled { background: var(--grey-bg); color: var(--muted); text-decoration: line-through; }
.due { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.due.over { color: var(--red); background: var(--red-bg); padding: 1px 8px; border-radius: 999px; }
.due.soon { color: var(--amber); background: var(--amber-bg); padding: 1px 8px; border-radius: 999px; }
.due.today { color: var(--red); background: var(--red-bg); padding: 1px 8px; border-radius: 999px; font-weight: 700; }
.due.later { color: var(--muted); font-weight: 500; }

/* ---------- notes ---------- */
.notes-box textarea { width: 100%; min-height: 64px; padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 8px; resize: vertical; background: var(--surface-2); }
.note { display: flex; gap: 8px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--line); }
.note .txt { flex: 1; white-space: pre-wrap; word-break: break-word; }
.note .when { color: var(--muted); font-size: 12px; }

/* ---------- toolbar + table ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.toolbar input[type=search], .toolbar input[type=text] { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; min-width: 240px; background: var(--surface-2); }
.toolbar select { padding: 7px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); max-width: 200px; }
.toolbar label.chk { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); padding: 0 4px; }
.table-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.grid th { text-align: left; font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2); }
table.grid th.sortable { cursor: pointer; }
table.grid th.sortable:hover { color: var(--ink); }
table.grid th .arrow { font-size: 10px; margin-left: 3px; }
table.grid td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tr:hover td { background: var(--surface-2); }
table.grid td.title { font-weight: 600; cursor: pointer; min-width: 180px; max-width: 420px; }
table.grid td.clip { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1260px) { table.grid .col-opt { display: none; } }
table.grid td.title:hover { color: var(--accent-2); text-decoration: underline; }
table.grid td.nowrap { white-space: nowrap; }
table.grid td.actions { white-space: nowrap; text-align: right; }
table.grid tr.closed td { color: var(--muted); }
table.grid tr.closed td.title { text-decoration: line-through; font-weight: 500; }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 30; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(760px, 100vw); max-width: 100vw; background: var(--surface); z-index: 40; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.drawer-foot { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: 4px; }
.field input, .field select, .field textarea { padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); width: 100%; }
.field textarea { min-height: 160px; resize: vertical; font-family: ui-monospace, Consolas, 'Cascadia Mono', monospace; font-size: 13.5px; line-height: 1.55; tab-size: 2; }
.field .with-btn { display: flex; gap: 6px; }
.field .with-btn input { flex: 1; }
.waiting-box { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 12px; border-radius: 8px; background: var(--blue-bg); border: 1px solid #b2ccff; }
.waiting-box .field label { color: var(--blue); }
.history { margin-top: 18px; }
.history h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.history ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.history li { padding: 4px 0 4px 12px; font-size: 13px; }
.history li .when { color: var(--muted); font-size: 12px; margin-right: 8px; white-space: nowrap; }
.history .add { display: flex; gap: 6px; margin-top: 8px; }
.history .add input { flex: 1; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; }
.saved-note { font-size: 12px; color: var(--muted); }

/* ---------- modal ---------- */
.modal-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: var(--scrim); padding: 20px; }
.modal { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-lg); width: 640px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.modal.wide { width: 860px; }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 16px; flex: 1; }
.modal-body { padding: 16px 18px; overflow-y: auto; }
.modal-foot { display: flex; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); justify-content: flex-end; }
.modal-body textarea.big { width: 100%; min-height: 220px; padding: 10px; border: 1px solid var(--line-2); border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.help h3 { font-size: 14px; margin: 16px 0 6px; }
.help h3:first-child { margin-top: 0; }
.help p, .help li { color: var(--ink); opacity: .9; }
.help code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 12.5px; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 12px; align-items: center; }
.kv .k { color: var(--muted); font-weight: 600; }
@media (max-width: 720px) { .kv { grid-template-columns: 1fr; gap: 4px 0; } .kv .k { margin-top: 10px; } .kv > div:not(.k) { min-width: 0; } }   /* the Settings page was cut on the right at 375 (measured 2026-10-23: a 180 px key column plus the value column) */
.welcome { max-width: 720px; margin: 40px auto; }
.welcome h1 { font-size: 22px; margin: 0 0 8px; }
.welcome p { color: var(--ink); opacity: .9; }
.welcome .choices { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.steps { counter-reset: s; padding: 0; margin: 12px 0 0; list-style: none; }
.steps li { counter-increment: s; position: relative; padding: 4px 0 4px 34px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ---------- popover ---------- */
.popover { position: fixed; z-index: 60; width: 340px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: 13px; }
.popover h4 { margin: 0 0 6px; font-size: 13px; }
.popover p { margin: 0; }
.popover p + p { margin-top: 6px; }
.popover { width: 380px; max-height: min(70vh, 560px); overflow: auto; }
.popover h5 { margin: 10px 0 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-2); }
.popover ol, .popover ul { margin: 0; padding-left: 18px; }
.popover li { margin: 3px 0; }
.popover li + li { margin-top: 4px; }
.popover kbd { font: inherit; font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }
.popover code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 12px; }
.popover .needs { margin-top: 8px; padding: 6px 8px; background: var(--accent-soft); border-radius: 6px; }
.popover .pop-foot { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.popover .pop-foot a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; text-decoration: none; }
.popover .pop-foot a .ic { width: 14px; height: 14px; }
.help .help-here { background: var(--accent-soft); border-radius: 6px; padding: 4px 8px; }
@media (max-width: 720px) { .popover { width: calc(100vw - 24px); left: 12px !important; max-height: 60vh; } }

/* ---------- toasts ---------- */
.toasts { position: fixed; top: 64px; right: 16px; z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { background: var(--toast-bg); color: var(--toast-ink); padding: 9px 14px; border-radius: 8px; box-shadow: var(--shadow-lg); font-size: 13px; max-width: 460px; pointer-events: auto; display: flex; gap: 10px; align-items: center; }
.toast.bad { background: var(--red); }
.toast .btn { padding: 3px 9px; font-size: 12px; background: rgba(128,128,128,.25); border-color: transparent; color: inherit; }

/* ---------- reports ---------- */
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .report-grid { grid-template-columns: 1fr; } }
table.mini { border-collapse: collapse; width: 100%; font-size: 13px; }
table.mini th, table.mini td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: right; }
table.mini th:first-child, table.mini td:first-child { text-align: left; }
table.mini th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
table.mini tr.total td { font-weight: 700; border-top: 2px solid var(--line-2); }
.stat { display: flex; flex-direction: column; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.stat b { font-size: 22px; }
.stat span { color: var(--muted); font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }

/* ---------- recurring ---------- */
.tpl-inactive td { color: var(--muted); }

/* ---------- footer ---------- */
.foot { display: flex; gap: 12px; padding: 8px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; background: var(--surface); }
kbd { font-family: inherit; font-size: 11px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--surface-2); }

/* ---------- markdown views ---------- */
.md-view, .md-inline, .history li, .note .txt { overflow-wrap: anywhere; word-break: break-word; }
.md-view { padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 8px; min-height: 60px; cursor: text; background: var(--surface-2); line-height: 1.55; }
.md-view:hover { border-color: var(--accent-2); }
.md-view.empty { color: var(--muted); font-style: italic; }
.md-view > :first-child, .md-inline > :first-child { margin-top: 0; }
.md-view > :last-child, .md-inline > :last-child { margin-bottom: 0; }
.md-view p, .md-inline p { margin: 0 0 8px; }
.md-view h3, .md-view h4, .md-view h5, .md-view h6 { margin: 12px 0 6px; font-size: 14px; }
.md-view h3 { font-size: 16px; } .md-view h4 { font-size: 15px; }
.md-view ul, .md-view ol, .md-inline ul, .md-inline ol { margin: 4px 0 8px; padding-left: 22px; }
.md-view li { margin: 2px 0; }
.md-view blockquote, .md-inline blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid var(--line-2); color: var(--muted); }
.md-inline h3, .md-inline h4, .md-inline h5, .md-inline h6 { margin: 8px 0 4px; font-size: 14px; display: block; }
.md-inline pre { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px; overflow-x: auto; }
.md-inline hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.md-view code, .md-inline code { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 12.5px; }
.md-view pre { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow-x: auto; }
.md-view pre code { border: 0; padding: 0; }
.md-view hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.field .md-view input[type=checkbox], .md-view input[type=checkbox] { width: auto; display: inline-block; vertical-align: middle; margin: 0 6px 0 0; padding: 0; }
.md-view li:has(> input[type=checkbox]) { list-style: none; margin-left: -18px; }
.md-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.note .txt.md-inline { white-space: normal; }
.md-inline { display: inline-block; max-width: 100%; vertical-align: top; }
.md-inline > p:only-child { display: inline; margin: 0; }
.md-inline p { margin: 0 0 6px; }
.field textarea.grow { overflow: hidden; }
.field.full.notes-field { grid-column: 1 / -1; }

/* ---------- inline editing in the table ---------- */
table.grid td.editable { cursor: text; }
table.grid td.editable:hover { box-shadow: inset 0 0 0 1px var(--line-2); border-radius: 6px; }
table.grid td.editing { padding: 3px 4px; }
table.grid td.editing input, table.grid td.editing select { width: 100%; min-width: 90px; padding: 5px 7px; border: 1px solid var(--accent-2); border-radius: 6px; background: var(--surface); outline: 2px solid var(--focus); outline-offset: 0; font: inherit; }
table.grid td.title.editing input { min-width: 240px; }

/* ---------- charts ---------- */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 1100px) { .charts { grid-template-columns: 1fr; } }
.chart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.chart h3 { margin: 0 0 4px; font-size: 14px; }
.chart .sub { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; }
.chart .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.chart text { font-family: var(--font); font-size: 12px; fill: var(--ink); }
.chart text.muted { fill: var(--muted); }
.chart line.grid { stroke: var(--grid); stroke-width: 1; }
.chart rect.bar { rx: 3; }
.chart rect.bar:hover { opacity: .85; }
.chart .empty-note { color: var(--muted); font-size: 13px; padding: 20px 0; }
.link-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- in-place editing on Today rows and recurring table ---------- */
.row .fld { cursor: text; border-radius: 6px; padding: 0 2px; display: inline-flex; align-items: center; }
.row .fld:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.row .fld.editing { box-shadow: none; padding: 0; }
.row .title .fld[data-f=title] { min-width: 0; flex: 1; }
.row .title .fld[data-f=title].editing { flex: 1; }
.inline-editor { font: inherit; padding: 4px 7px; border: 1px solid var(--accent-2); border-radius: 6px; background: var(--surface); color: var(--ink); outline: 2px solid var(--focus); outline-offset: 0; min-width: 120px; }
.row .title .inline-editor { width: 100%; }
.iconbtn.danger:hover { color: var(--red); background: var(--red-bg); }
.chip.prio-Medium { background: transparent; border: 1px dashed var(--line-2); font-weight: 500; }

/* ---------- notes band ---------- */
.note-editor { display: flex; gap: 10px; align-items: flex-start; }
.note-editor textarea { flex: 1; min-height: 72px; font-family: ui-monospace, Consolas, 'Cascadia Mono', monospace; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 24px; margin-top: 6px; }
.md-view.plain { background: transparent; border: 0; padding: 2px 0 0; min-height: 0; cursor: default; display: inline-block; vertical-align: top; max-width: 100%; }
.history .add textarea { flex: 1; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 8px; resize: none; min-height: 36px; font: inherit; line-height: 1.45; background: var(--surface); color: var(--ink); }

/* ---------- appearance settings ---------- */
.appearance { display: flex; flex-direction: column; gap: 10px; }
.ap-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ap-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; width: 90px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--line-2); }
.swatch.on { border-color: var(--surface); box-shadow: 0 0 0 2px var(--ink); }
.swatch-custom input, .role-pick input { width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 6px; padding: 0; background: none; cursor: pointer; }
.role-pick { display: inline-flex; align-items: center; gap: 6px; min-width: 215px; }

/* ---------- density ---------- */
:root[data-density="compact"] .row { padding: 6px 12px; gap: 2px 10px; }
:root[data-density="compact"] table.grid td { padding: 5px 8px; }
:root[data-density="compact"] .card-head { padding: 8px 12px; }
:root[data-density="compact"] .card-body { padding: 10px 12px; }
:root[data-density="compact"] body { font-size: 13.5px; }
:root[data-density="compact"] .chip { padding: 0 6px; }

/* ---------- updates timeline ---------- */
table.timeline { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 10px; }
table.timeline th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); }
table.timeline td { padding: 6px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.timeline td.when { white-space: nowrap; color: var(--muted); width: 92px; }
table.timeline td.who { white-space: nowrap; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
table.timeline td.what { width: 100%; }
table.timeline td.act { width: 30px; padding: 2px; }
table.timeline td.empty { color: var(--muted); padding: 10px 6px; }
.add-update { display: grid; grid-template-columns: 180px 150px 1fr auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.add-update .field label { font-size: 11px; }
.add-update .field.what textarea { min-height: 36px; resize: none; font-family: var(--font); font-size: 13.5px; line-height: 1.45; }
.add-update .btn { height: 34px; }
@media (max-width: 900px) { .add-update { grid-template-columns: 1fr 1fr; } .add-update .field.what { grid-column: 1 / -1; } }
details.changelog { margin-top: 6px; }
details.changelog summary { cursor: pointer; font-size: 12px; color: var(--muted); }
details.changelog ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--line); }
details.changelog li { font-size: 12px; padding: 2px 0 2px 10px; color: var(--muted); }
details.changelog li .when { margin-right: 8px; }

/* ---------- Notes pad (Apple Notes look) ---------- */
:root { --paper: #fffbe8; --paper-2: #fff7d1; --paper-line: #efe3ad; --paper-ink: #2b2a22; --paper-muted: #8a8468; --paper-accent: #e5a800; }
:root[data-theme="dark"] { --paper: #26241a; --paper-2: #2e2b1e; --paper-line: #44402a; --paper-ink: #efe9d2; --paper-muted: #a49d7c; --paper-accent: #f2c53d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #26241a; --paper-2: #2e2b1e; --paper-line: #44402a; --paper-ink: #efe9d2; --paper-muted: #a49d7c; --paper-accent: #f2c53d; } }
.notes-pad { position: sticky; top: 118px; background: var(--paper); border: 1px solid var(--paper-line); border-radius: 14px; box-shadow: var(--shadow); color: var(--paper-ink); max-height: calc(100vh - 140px); display: flex; flex-direction: column; overflow: hidden; }
.notes-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; }
.notes-head h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; color: var(--paper-ink); }
.notes-head .ic { color: var(--paper-accent); }
.notes-head .count { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--paper-accent); color: #2b2a22; }
.notes-head .imark { color: var(--paper-muted); }
.note-editor { display: block; margin: 0 12px 10px; background: var(--surface); border: 1px solid var(--paper-line); border-radius: 12px; padding: 10px 12px 8px; }
.note-editor textarea { width: 100%; min-height: 96px; border: 0; outline: none; background: transparent; color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.5; resize: none; padding: 0; }
.note-editor textarea:focus { outline: none; }
.note-editor-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--paper-line); }
.note-editor-foot .btn.primary { background: var(--paper-accent); border-color: var(--paper-accent); color: #2b2a22; }
.anotes { overflow-y: auto; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.anote { background: var(--surface); border: 1px solid var(--paper-line); border-left: 4px solid var(--paper-accent); border-radius: 10px; padding: 10px 12px; position: relative; }
.anote-title { font-weight: 700; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.anote-date { font-size: 12px; color: var(--paper-muted); margin: 2px 0 4px; }
.anote-body { font-size: 13px; color: var(--muted); max-height: 120px; overflow: hidden; display: block; cursor: pointer; }
.anote.open .anote-body { max-height: none; }   /* U-18: a tap on the card shows the whole note */
.anote-body.capped::after { content: "… more"; display: block; color: var(--accent-2); font-size: 12px; margin-top: 2px; }
.anote.open .anote-body.capped::after { content: "less"; }
.anote-edit { width: 100%; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); resize: none; margin-top: 4px; }
.anote-acts { display: flex; gap: 4px; justify-content: flex-end; margin-top: 6px; opacity: .55; }
.anote:hover .anote-acts { opacity: 1; }
.anote-empty { color: var(--paper-muted); font-size: 13px; padding: 8px 4px 4px; }
@media (max-width: 1100px) { .today-grid { grid-template-columns: 1fr; } .notes-pad { position: static; max-height: none; } }

/* ---------- calendar ---------- */
.cal-nav { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.cal-title { font-weight: 700; font-size: 16px; margin-left: 8px; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); padding: 6px 14px; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--accent-soft); color: var(--accent); }
.cal-grid-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.cal-legend .sep { width: 1px; height: 16px; background: var(--line-2); }
.cal-legend .cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.cal-legend .cchip.demo { display: inline-flex; padding: 1px 8px; cursor: default; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cal-head div { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cday { min-height: 118px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 6px 6px 8px; position: relative; transition: background .12s; min-width: 0; }
.cday:nth-child(7n) { border-right: 0; }
.cday.out { background: color-mix(in srgb, var(--bg) 70%, var(--surface)); }
.cday.out .cnum { opacity: .45; }
.cday.weekend { background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.cday.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cday.today .cnum > span:first-child { background: var(--user-accent); color: var(--on-accent); border-radius: 999px; padding: 0 7px; }
.cday.over-drop { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-2); }
.cday.big { min-height: 420px; }
.cnum { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.cnum .ccount { margin-left: auto; font-size: 11px; background: var(--grey-bg); color: var(--grey); border-radius: 999px; padding: 0 6px; }
.cadd { border: 0; background: transparent; color: var(--muted); width: 20px; height: 20px; border-radius: 6px; padding: 0; display: inline-flex; align-items: center; justify-content: center; opacity: 0; cursor: pointer; }
.cday:hover .cadd, .cadd:focus-visible { opacity: 1; }
.cadd:hover { background: var(--accent-soft); color: var(--accent); }
.citems { display: flex; flex-direction: column; gap: 3px; }
.cchip { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.3; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); cursor: grab; min-width: 0; --rc: var(--accent); }
.cchip:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.cchip.dragging { opacity: .45; }
.cchip .ct { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; cursor: text; }
.cchip .ct.editing { white-space: normal; }
.cchip .inline-editor { width: 100%; min-width: 0; padding: 2px 5px; font-size: 12px; }
.cchip .cmeta { color: var(--muted); font-size: 11px; white-space: nowrap; }
.cchip .cdot, .cal-legend .cdot { width: 8px; height: 8px; border-radius: 50%; background: var(--rc); flex: none; }
.cchip.role-WF, .cal-legend .role-WF { --rc: var(--role-WF); } .cchip.role-OI, .cal-legend .role-OI { --rc: var(--role-OI); } .cchip.role-OD, .cal-legend .role-OD { --rc: var(--role-OD); } .cchip.role-GEN, .cal-legend .role-GEN { --rc: var(--role-GEN); }
.cchip.over { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 40%, transparent); color: var(--red); font-weight: 600; }
.cchip.soon { background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 40%, transparent); color: var(--amber); font-weight: 600; }
.cchip.kind-follow { background: var(--blue-bg); border-style: dashed; border-color: color-mix(in srgb, var(--blue) 45%, transparent); color: var(--blue); }
.cchip.kind-done { opacity: .55; text-decoration: line-through; cursor: default; }
.cmore { border: 0; background: transparent; color: var(--accent-2); font-size: 12px; text-align: left; padding: 2px 6px; cursor: pointer; }
.cquick input { width: 100%; font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--accent-2); border-radius: 6px; background: var(--surface); color: var(--ink); outline: 2px solid var(--focus); }
.cal-trays { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 1000px) { .cal-trays { grid-template-columns: 1fr; } }
.tray .card-head h2 { font-size: 14px; }
.tray-body { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; min-height: 52px; }
.tray-body .cchip { max-width: 100%; }
.tray-body.over-drop { background: var(--accent-soft); }
.tray-body .empty { padding: 4px; }
.cal-grid.week .cchip { padding: 5px 8px; flex-wrap: wrap; }
.cal-grid.week .cchip .ct { white-space: normal; }

/* =====================================================================
   v1.3.1 — depth, motion and larger type (overrides of the rules above)
   ===================================================================== */
:root { --shadow-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08); --shadow-2: 0 4px 12px rgba(16,24,40,.10), 0 2px 4px rgba(16,24,40,.06); --shadow-3: 0 12px 28px rgba(16,24,40,.16), 0 4px 8px rgba(16,24,40,.08); --ease: cubic-bezier(.2,.7,.2,1); }
:root[data-theme="dark"] { --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); --shadow-2: 0 4px 14px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.35); --shadow-3: 0 14px 32px rgba(0,0,0,.65), 0 4px 10px rgba(0,0,0,.4); }
body { font-size: 15px; }
:root[data-density="compact"] body { font-size: 14px; }
table.grid { font-size: 14.5px; }
.row .meta { font-size: 14px; }
.chip { font-size: 13px; padding: 2px 9px; }
table.grid th { font-size: 12.5px; }
.field label { font-size: 12.5px; }
.summary-line { font-size: 15px; }
.toolbar select, .toolbar input[type=search] { font-size: 14.5px; }

/* surfaces float */
.card, .cal-grid-wrap, .chart, .notes-pad { box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--line) 70%, transparent); }
.topbar { box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(16,24,40,.06); }
:root[data-theme="dark"] .topbar { box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(0,0,0,.4); }
.quickadd { box-shadow: inset 0 -1px 0 var(--line); }
.quickadd input, .quickadd textarea { transition: box-shadow .2s var(--ease), border-color .2s, background .2s; }
.quickadd input:focus, .quickadd textarea:focus, .field input:focus, .field select:focus, .field textarea:focus, .toolbar input:focus, .toolbar select:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 22%, transparent); }

/* things you can press move */
.btn, .iconbtn, .tab, .imark, .swatch, .seg button, .storage-pill, .cadd, .anote, .cchip, .chip.role, .stat { transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .15s, color .15s, border-color .15s; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-1); }
.btn.primary:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--user-accent) 40%, transparent); }
.btn.ghost:hover { transform: none; box-shadow: none; }
.iconbtn:hover { transform: translateY(-1px) scale(1.06); box-shadow: var(--shadow-1); background: var(--surface); }
.iconbtn:active { transform: scale(.94); }
.tab:hover { transform: translateY(-1px); }
.tab.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); }
.storage-pill:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.swatch:hover { transform: scale(1.15); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* rows and cards react to hover */
.row { transition: background .15s, box-shadow .2s var(--ease), transform .15s var(--ease); }
.row:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent-2), var(--shadow-1); transform: translateX(2px); }
.row .actions .iconbtn { opacity: .55; }
.row:hover .actions .iconbtn, .row:focus-within .actions .iconbtn { opacity: 1; }
table.grid tr { transition: background .12s; }
table.grid tr:hover td { background: var(--surface-2); }
table.grid tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent-2); }
.anote { transition: transform .18s var(--ease), box-shadow .2s var(--ease); }
.anote:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.chart:hover { box-shadow: var(--shadow-3); }
.chart rect.bar { transition: opacity .15s, filter .15s; }
.chart rect.bar:hover { opacity: 1; filter: brightness(1.12); }

/* overlays animate in */
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes popIn { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer { animation: slideIn .28s var(--ease); box-shadow: var(--shadow-3), -1px 0 0 var(--line); }
.scrim, .modal-wrap { animation: fadeIn .2s var(--ease); backdrop-filter: blur(2px); }
.modal { animation: popIn .22s var(--ease); box-shadow: var(--shadow-3); }
.toast { animation: toastIn .22s var(--ease); box-shadow: var(--shadow-3); }
.popover { animation: popIn .16s var(--ease); box-shadow: var(--shadow-3); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- calendar, Apple style ---------- */
.cal-toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 0 0 14px; }
.cal-titlebox { display: flex; align-items: baseline; gap: 10px; }
.cal-titlebox h1 { font-size: 28px; margin: 0; letter-spacing: -.01em; }
.cal-titlebox .sub { color: var(--muted); font-size: 14px; }
.cal-nav { justify-self: end; display: inline-flex; gap: 0; box-shadow: var(--shadow-1); border-radius: 10px; margin: 0; }
.cal-nav .btn { border-radius: 0; margin: 0; }
.cal-nav .btn:first-child { border-radius: 10px 0 0 10px; }
.cal-nav .btn:last-child { border-radius: 0 10px 10px 0; }
.cal-nav .btn + .btn { border-left: 0; }
.cal-nav .btn:hover { transform: none; box-shadow: none; background: var(--surface-2); }
.seg.big { justify-self: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 3px; box-shadow: inset 0 1px 2px rgba(16,24,40,.06); }
.seg.big button { border-radius: 9px; padding: 8px 26px; font-size: 15px; background: transparent; }
.seg.big button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.cal-grid-wrap { border-radius: 14px; }
.cal-legend { font-size: 13px; padding: 10px 16px; background: var(--surface-2); }
.cal-head { font-size: 13px; }
.cal-head div { padding: 10px 12px; text-align: center; }
.cal-head div:nth-child(6), .cal-head div:nth-child(7) { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.cday { min-height: 132px; padding: 8px 8px 10px; transition: background .15s; }
.cday:hover { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.cday.weekend { background: color-mix(in srgb, var(--surface-2) 70%, var(--surface)); }
.cday.weekend:hover { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface)); }
.cday.out { background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }
.cday.today { box-shadow: none; background: color-mix(in srgb, var(--red) 4%, var(--surface)); }
.cnum { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.cnum > span:first-child { min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; padding: 0 6px; }
.cday.out .cnum > span:first-child { color: var(--muted); }
.cday.today .cnum > span:first-child { background: var(--red); color: #fff; font-weight: 700; }
.cday.big .cnum > span:first-child { border-radius: 999px; }
.cnum .ccount { font-size: 12px; }
.cadd { width: 24px; height: 24px; }
.citems { gap: 4px; }
.cchip { font-size: 13.5px; line-height: 1.35; padding: 4px 8px; border-radius: 7px; border: 0; cursor: grab; user-select: none; background: color-mix(in srgb, var(--rc) 16%, var(--surface)); color: color-mix(in srgb, var(--rc) 80%, var(--ink)); box-shadow: inset 3px 0 0 var(--rc); font-weight: 600; }
.cchip:hover { transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--rc), var(--shadow-2); filter: saturate(1.15); }
.cchip:active { cursor: grabbing; }
.cchip .cdot { display: none; }
.cchip .ct { font-weight: 600; }
.cchip .cmeta { font-weight: 500; }
.cchip.over { --rc: var(--red); background: var(--red); color: #fff; box-shadow: none; }
.cchip.over .cmeta { color: rgba(255,255,255,.85); }
.cchip.soon { --rc: var(--amber); background: var(--amber-bg); color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.cchip.kind-follow { --rc: var(--blue); background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); border: 0; font-weight: 500; }
.cchip.kind-done { background: var(--grey-bg); color: var(--muted); box-shadow: none; opacity: .7; text-decoration: line-through; cursor: default; }
.cchip.dragging { opacity: .35; }
.cghost { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; transform: translate(-1000px, -1000px); box-shadow: var(--shadow-3) !important; opacity: .95; rotate: 1.5deg; }
body.cal-dragging { cursor: grabbing; user-select: none; }
body.cal-dragging .cday, body.cal-dragging .tray-body { transition: background .1s, box-shadow .1s; }
.cday.over-drop, .tray-body.over-drop { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-2), inset 0 0 24px color-mix(in srgb, var(--accent-2) 12%, transparent); }
.cal-legend .cchip.demo { padding: 2px 9px; font-size: 12.5px; box-shadow: none; }
.cal-legend .cchip.demo.over { background: var(--red); color: #fff; }
.cmore { font-size: 13px; }
.cal-grid.week .cday { min-height: 460px; }
.cal-grid.week .cchip { padding: 7px 10px; }
.cal-trays { margin-top: 18px; }
.tray-body .cchip { cursor: grab; }

/* ---------- v1.3.2: trays on the left, deeper shading, bigger day numbers, shortcut strip ---------- */
.cal-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1150px) { .cal-layout { grid-template-columns: 1fr; } }
/* once the trays stack above the grid, the legend lies in a row instead of a centred column (seen on the iPad, 2026-10-18) */
@media (max-width: 1150px) { .cal-trays .cal-legend.v { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 14px; padding: 4px 2px; } .cal-legend.v .muted { flex-basis: 100%; margin-top: 2px; } }
.cal-trays { display: flex; flex-direction: column; gap: 14px; margin-top: 0; position: sticky; top: 118px; }
.tray-hint { font-size: 12.5px; color: var(--muted); padding: 8px 14px 0; }
.tray-body { flex-direction: column; flex-wrap: nowrap; gap: 6px; padding: 10px 12px 12px; }
.tray-body .cchip { padding: 6px 10px; }
.tray-body .cchip .cmeta { white-space: normal; }
.cal-legend.v { display: flex; flex-direction: column; gap: 8px; border: 0; background: transparent; padding: 4px 6px; box-shadow: none; }
.cal-legend.v > div { display: flex; align-items: center; gap: 6px; }
.cal-legend.v .muted { font-size: 12.5px; line-height: 1.4; margin-top: 4px; }
.cday.out { background: color-mix(in srgb, var(--muted) 12%, var(--surface)); }
.cday.out .cnum > span:first-child { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.cday.out .cchip { opacity: .7; }
.cday.weekend { background: color-mix(in srgb, var(--muted) 9%, var(--surface)); }
.cday.weekend.out { background: color-mix(in srgb, var(--muted) 16%, var(--surface)); }
.cal-head div:nth-child(6), .cal-head div:nth-child(7) { background: color-mix(in srgb, var(--muted) 9%, var(--surface)); }
.cday:hover, .cday.weekend:hover { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
.cnum { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.cnum > span:first-child { min-width: 32px; height: 32px; font-size: 17px; }
.cal-grid.week .cnum { font-size: 16px; }
.quick-cheats { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 6px 20px 8px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.qc-label { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.qc-group { display: inline-flex; align-items: center; gap: 4px; }
.qc-name { margin-right: 2px; }
.quick-cheats button { font: inherit; font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface-2); color: var(--ink); cursor: pointer; transition: transform .12s var(--ease), background .12s, box-shadow .12s; }
.quick-cheats button:hover { background: var(--accent-soft); color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-1); }


/* =====================================================================
   v1.3.3 — the task title leads, red calmed down, reports that explain themselves
   ===================================================================== */
/* 1. the title is the thing you read first: bigger, heavier, darker; the meta line steps back */
.row { gap: 5px 12px; padding: 12px 16px; }
.row .title { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.3; letter-spacing: -.005em; }
.row .title span.t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row .meta { font-size: 13.5px; color: var(--muted); margin-top: 1px; }
.row .meta .chip { font-size: 12.5px; padding: 1px 8px; }
table.grid td.title { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; }
table.grid tr.closed td.title { font-weight: 500; }
table.grid td { color: var(--muted); }
table.grid td.title, table.grid td.title * { color: var(--ink); }
table.grid tr.closed td.title { color: var(--muted); }
:root[data-density="compact"] .row .title { font-size: 16px; }
:root[data-density="compact"] table.grid td.title { font-size: 15px; }
/* 2. red only where it means "late": High priority is an outline, "today" is the accent, overdue keeps a soft tint */
.chip.prio-High { background: transparent; color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); }
.due.over { background: var(--red-bg); color: var(--red); font-weight: 600; }
.due.today { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.sec-overdue .card-head { background: color-mix(in srgb, var(--red) 5%, var(--surface)); }
.tab .count { background: color-mix(in srgb, var(--red) 88%, #000); }
.cchip.over { background: var(--red-bg); color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.cchip.over .cmeta { color: color-mix(in srgb, var(--red) 75%, var(--muted)); }
.cal-legend .cchip.demo.over { background: var(--red-bg); color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
/* 3. reports */
.rp-summary { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; margin: 0 0 16px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); font-size: 15.5px; line-height: 1.6; }
.rp-summary .ic { color: var(--accent); margin-top: 3px; }
.rp-summary b { color: var(--ink); font-weight: 700; }
.rp-summary b.bad { color: var(--red); }
.stats { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat { padding: 14px 16px 12px; background: var(--surface); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--line) 70%, transparent); border-left: 4px solid var(--sc, var(--accent)); gap: 2px; }
.stat b { font-size: 30px; line-height: 1.1; color: var(--sc, var(--ink)); font-weight: 700; }
.stat span { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.stat small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.stat.open { --sc: var(--accent); } .stat.overdue { --sc: var(--red); } .stat.waiting { --sc: var(--blue); } .stat.done { --sc: var(--green); }
.rp-sec { margin: 22px 0 10px; display: flex; align-items: baseline; gap: 10px; }
.rp-sec h2 { margin: 0; font-size: 17px; }
.rp-sec .muted { font-size: 13.5px; }
.charts { gap: 16px; margin-bottom: 4px; }
.chart { padding: 16px 18px 14px; }
.chart h3 { font-size: 15px; margin-bottom: 2px; }
.chart .sub { font-size: 13px; margin-bottom: 12px; line-height: 1.45; }
.chart .legend { font-size: 13px; gap: 16px; margin-top: 10px; color: var(--ink); }
.chart .legend i { width: 12px; height: 12px; border-radius: 3px; }
.chart text { font-size: 13px; }
.chart text.val { font-weight: 700; }
.chart .how { font-size: 12.5px; color: var(--muted); margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); line-height: 1.45; }
.chart .empty-note { font-size: 14px; }
.rp-meter { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.rp-meter .bar { flex: 1; height: 12px; border-radius: 6px; background: var(--grid); overflow: hidden; }
.rp-meter .bar i { display: block; height: 100%; border-radius: 6px; background: var(--red); }
.rp-meter span { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
table.mini { font-size: 14px; }
table.mini th, table.mini td { padding: 8px 10px; }
table.mini th { font-size: 12px; letter-spacing: .03em; }
table.mini td.bad { color: var(--red); font-weight: 700; }
.rp-exports { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .rp-exports { grid-template-columns: 1fr; } }
.rp-export { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.rp-export .btn { align-self: flex-start; }
.rp-export small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* =====================================================================
   v1.4.0 — periods, key contributions, effort, objectives, print
   ===================================================================== */
.iconbtn.star.on { color: #d19a00; }
.iconbtn.star.on:hover { background: color-mix(in srgb, #d19a00 14%, var(--surface)); }
.iconbtn.star.on .ic { fill: #d19a00; }
.starmark { display: inline-flex; color: #d19a00; flex: none; }
.starmark .ic { fill: #d19a00; }
.star-field label.chk { display: flex; align-items: center; justify-content: flex-start; gap: 8px; cursor: pointer; letter-spacing: 0; color: var(--ink); }
.star-field label.chk input { margin: 0; width: auto; flex: none; }
.star-field label.chk .ic { color: #d19a00; fill: #d19a00; }
.toast.effort { gap: 6px; flex-wrap: wrap; }
.toast.effort .btn { min-width: 30px; justify-content: center; font-weight: 700; }
.toast.effort .btn.skip { font-weight: 500; opacity: .8; }
.rp-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.rp-picker input, .rp-picker select { padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 14px; }
.rp-picker label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.rp-picker .rp-range { font-size: 13px; margin-left: auto; }
.stat.effort { --sc: #b07a00; }
:root[data-theme="dark"] .stat.effort { --sc: #f0b429; }
.rp-sec h2 { display: flex; align-items: center; gap: 6px; }
.rp-sec h2 .ic { color: var(--accent); }
.hl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 1000px) { .hl-list { grid-template-columns: 1fr; } }
.hl-card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-left: 4px solid #d19a00; border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; }
.hl-card.open { border-left-color: var(--amber); }
.hl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hl-title { font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; flex: 1; min-width: 200px; }
.hl-title:hover { color: var(--accent-2); text-decoration: underline; }
.hl-meta { font-size: 12.5px; color: var(--muted); }
.hl-outcome { font-size: 14.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.segpick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.segpick .pk { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.segpick .pk:hover { border-color: var(--accent-2); color: var(--accent); }
.segpick .pk.on { border-color: transparent; color: var(--ink); background: var(--grey-bg); box-shadow: 0 0 0 2px var(--accent-2); }
.segpick .pk.on.st-Waiting { background: var(--blue-bg); color: var(--blue); }
.segpick .pk.on.st-InProgress { background: var(--amber-bg); color: var(--amber); }
.segpick .pk.on.st-Done { background: var(--green-bg); color: var(--green); }
.segpick .pk.on.st-Cancelled { background: var(--grey-bg); color: var(--muted); text-decoration: line-through; }
.segpick .pk.on.prio-High { background: var(--red-bg); color: var(--red); }
.segpick .pk.on.prio-Low { background: var(--grey-bg); color: var(--muted); }
.quick-cheats.collapsed { display: none; }
.rp-quick { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rp-quick .btn.sm.ghost { padding: 4px 9px; font-size: 12.5px; }
.row.sel, table.grid tbody tr.sel td { background: var(--accent-soft) !important; }
.row.sel { box-shadow: inset 3px 0 0 var(--accent), var(--shadow-1); }
table.grid tbody tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.changelog-help p { margin: 6px 0; font-size: 13.5px; line-height: 1.5; }
#printTask { display: none; }
@media print {
  body.print-task > *:not(#printTask) { display: none !important; }
  body.print-task #printTask { display: block; color: #000; font-size: 12px; }
  #printTask .pt-head { border-bottom: 2px solid #1f4e79; padding-bottom: 6px; margin-bottom: 12px; }
  #printTask .pt-title { font-size: 20px; font-weight: 700; color: #1f4e79; }
  #printTask .pt-sub { color: #555; font-size: 11px; }
  #printTask table { border-collapse: collapse; width: 100%; margin-bottom: 12px; }
  #printTask th, #printTask td { text-align: left; vertical-align: top; padding: 4px 8px; border-bottom: 1px solid #ddd; }
  #printTask .pt-fields th { width: 130px; color: #555; font-weight: 600; }
  #printTask .pt-hist th { background: #f1f5f9; }
  #printTask h3 { font-size: 14px; margin: 14px 0 6px; color: #1f4e79; }
}
.today-sum { margin-bottom: 14px; }
.today-sum .ic { color: var(--amber); }
.banner.health { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.banner.health .btn { margin-left: 4px; }
.card.focus { border-left: 4px solid var(--accent); margin-bottom: 16px; }
.card.focus .card-head { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.card.focus .card-head h2 { color: var(--accent); }
.fnum { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; flex: none; }
:root[data-theme="dark"] .fnum { color: #0f141b; }
.frow .actions .btn.sm { padding: 5px 12px; }
.fnote { display: flex; gap: 8px; align-items: flex-start; padding: 10px 16px; background: var(--paper-bg, var(--amber-bg)); color: var(--ink); font-size: 14px; border-bottom: 1px solid var(--line); }
.fnote .ic { color: var(--amber); margin-top: 2px; }
.row .meta .next { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 500; cursor: pointer; }
.row .meta .next .ic { color: var(--accent); }
.chip.needs { background: var(--amber-bg); color: var(--amber); cursor: pointer; font-weight: 600; }
.row:not(.frow) .chip.needs { background: transparent; border: 1px dashed color-mix(in srgb, var(--amber) 55%, transparent); color: var(--amber); font-weight: 500; }
.eod-list { margin: 4px 0 0; padding-left: 18px; line-height: 1.6; }
.eod-list li { list-style: disc; }
.eod-pick { display: flex; flex-direction: column; gap: 6px; }
.eod-opt { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.eod-opt:hover { background: var(--surface-2); }
.eod-opt input { width: auto; margin: 0; }
.eod-opt span { flex: 1; font-weight: 600; }
.rv-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--line); }
.rv-row:first-child { border-top: 0; }
.rv-title { flex: 1; min-width: 220px; font-weight: 600; cursor: pointer; }
.rv-title:hover { color: var(--accent-2); text-decoration: underline; }
.rv-why { flex-basis: 100%; font-size: 12.5px; padding-left: 2px; }
.rv-acts { display: flex; gap: 4px; margin-left: auto; }
.rv-empty { padding: 6px 0; }
.discipline { font-size: 12.5px; margin-top: 6px; }
.co-task { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 4px; }
.co-sec { margin-top: 16px; }
.co-sec h4 { margin: 0 0 6px; font-size: 14.5px; }
.co-hint { font-size: 12.5px; margin-bottom: 6px; }
.co-sec textarea { width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; font: inherit; font-size: 13.5px; background: var(--surface-2); color: var(--ink); resize: vertical; }
.co-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.co-star { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.co-star input { width: auto; margin: 0; }
.co-star .ic { color: #d19a00; fill: #d19a00; }
.co-obj { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13.5px; }
.co-obj select { padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.modal .effpick .eff { min-width: 118px; padding: 9px 12px; }
.modal .effpick .eff b { font-size: 20px; }
.modal .tagpick .tag { padding: 7px 13px; font-size: 14px; }
.effpick { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.effpick .eff { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 96px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.effpick .eff b { font-size: 17px; line-height: 1.1; color: var(--ink); }
.effpick .eff span { font-size: 11.5px; white-space: nowrap; }
.effpick .eff:hover { border-color: var(--accent-2); color: var(--accent); }
.effpick .eff.on { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent); }
.effpick .eff.on b { color: var(--accent); }
.effpick .eff.clear { min-width: 0; justify-content: center; font-size: 12.5px; padding: 6px 12px; }
.tagpick { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.tagpick .tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.tagpick .tag:hover { border-color: var(--accent-2); color: var(--accent); }
.tagpick .tag.on { background: var(--green-bg); color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); font-weight: 600; }
.hl-outcome .chip { margin: 0 4px 4px 0; font-size: 12.5px; }
.hl-detail { margin-top: 4px; }
.hl-outcome.missing { color: var(--amber); font-size: 13.5px; cursor: pointer; background: var(--amber-bg); padding: 6px 10px; border-radius: 6px; }
.hl-link { font-size: 12.5px; color: var(--accent-2); display: flex; align-items: center; gap: 5px; cursor: pointer; }
.hl-link span:hover { text-decoration: underline; }
table.mini.obj td:first-child { max-width: 360px; }
table.mini .small { font-size: 12px; font-weight: 400; line-height: 1.35; margin-top: 2px; }
.row.ev .ev-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-2); cursor: pointer; }
.rp-exports { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1200px) { .rp-exports { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .rp-exports { grid-template-columns: 1fr; } }
.print-head { display: none; }
@media print {
  @page { margin: 14mm 12mm; }
  .topbar, .quickadd, .quick-cheats, .foot, .banner, .rp-picker, .rp-exports, .rp-sec-export, .toasts, .drawer, .scrim, .modal-wrap, .popover, .imark, .row .actions, td.actions, .page-head, .hl-outcome.missing { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11.5px; height: auto; }
  main { padding: 0 !important; max-width: none !important; }
  .print-head { display: block; margin: 0 0 12px; border-bottom: 2px solid #1f4e79; padding-bottom: 6px; }
  .print-head .ph-title { font-size: 20px; font-weight: 700; color: #1f4e79; }
  .print-head .ph-sub { color: #555; font-size: 11px; }
  .rp-summary { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #000 !important; }
  .card, .chart, .stat, .hl-card { box-shadow: none !important; border: 1px solid #cbd5e1 !important; break-inside: avoid; page-break-inside: avoid; }
  .charts, .hl-list, .report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .rp-sec { break-after: avoid; page-break-after: avoid; margin-top: 14px; }
  .chart svg { max-height: 190px; }
  .chip { border: 1px solid #cbd5e1; }
  a, .hl-title, .row .title { color: #000 !important; text-decoration: none !important; }
}

/* ---------- v1.5.1: crash course inside Help ---------- */
.help-tabs { display: flex; gap: 6px; margin: -4px 0 14px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.help-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-weight: 600; cursor: pointer; }
.help-tabs button.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.help.course { font-family: "Segoe UI", "Noto Naskh Arabic", "Geeza Pro", Tahoma, system-ui, sans-serif; font-size: 15.5px; line-height: 1.85; text-align: right; }
.help.course h1 { font-size: 22px; margin: 0 0 6px; color: var(--accent); }
.help.course h2 { font-size: 18px; margin: 26px 0 8px; color: var(--accent); border-top: 1px solid var(--line); padding-top: 16px; }
.help.course h3 { font-size: 16px; margin: 18px 0 6px; }
.help.course p { margin: 0 0 10px; }
.help.course ol, .help.course ul { padding-right: 24px; padding-left: 0; margin: 0 0 10px; }
.help.course li { margin: 3px 0; }
.help.course table { border-collapse: collapse; width: 100%; margin: 8px 0 14px; font-size: 14px; }
.help.course th, .help.course td { border: 1px solid var(--line); padding: 7px 10px; text-align: right; vertical-align: top; }
.help.course th { background: var(--surface-2); font-weight: 700; }
.help.course code { direction: ltr; unicode-bidi: embed; display: inline-block; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 13px; }
.help.course hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.help.course strong { color: var(--ink); }
.help.course kbd { direction: ltr; }
@media print {
  body.print-task #printTask.course-print { font-family: "Segoe UI", Tahoma, sans-serif; font-size: 12px; line-height: 1.7; text-align: right; direction: rtl; }
  body.print-task #printTask.course-print h2 { color: #1f4e79; margin-top: 18px; border-top: 1px solid #ccc; padding-top: 10px; }
  body.print-task #printTask.course-print table { font-size: 11px; }
  body.print-task #printTask.course-print th, body.print-task #printTask.course-print td { border: 1px solid #ccc; text-align: right; }
  body.print-task #printTask.course-print code { direction: ltr; unicode-bidi: embed; }
}

/* ===== v2: sign-in page, devices table ===== */
body.signed-out { display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: var(--bg); color: var(--ink); }
.login { width: 100%; max-width: 440px; padding: 24px 16px; }
.login-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 28px 24px; box-shadow: 0 10px 30px rgba(15, 20, 27, 0.18); }
.login-card .brand.big { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--ink); }
.login-card .brand.big .ic { width: 28px; height: 28px; color: var(--user-accent, #1f4e79); }
.login-card p { margin: 8px 0 14px; line-height: 1.5; color: var(--ink); }
.login-card form { display: flex; gap: 8px; }
.login-card input { flex: 1; font: inherit; font-size: 22px; letter-spacing: 0.12em; text-align: center; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); color: var(--ink); min-width: 0; }
.login-card input[type=password] { font-size: 14px; letter-spacing: normal; text-align: start; }
.login-err { color: #b4232c; background: rgba(180, 35, 44, 0.12); padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.login-alt { margin-top: 16px; font-size: 13px; color: var(--muted); }
.login-alt summary { cursor: pointer; }
.login-alt form { margin-top: 8px; }
.small { font-size: 12px; }
table.devices { border-collapse: collapse; font-size: 13px; width: 100%; }
table.devices td { padding: 4px 10px 4px 0; vertical-align: middle; }
body.in-app .login-card > p:first-of-type { display: none; }
body.in-app .login-card::before { content: "Signing in…"; display: block; color: var(--muted); margin-bottom: 10px; }

/* =====================================================================================
   QAPCO theme (2026-10-13, Amr: «غير ثيم الأداة إلى ثيم qapco.com وخليك مبدع»)
   Measured on qapco.com: deep blue #00577d, blue #0066a0, light blue #077fc3, orange #f68b28,
   pale blue #b5d8ec, body ink #212529, white surfaces on an angled black hero; typeface Gotham
   (proprietary) → Montserrat, its usual free stand-in, for the display text only.
   ===================================================================================== */
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/montserrat-700.woff2") format("woff2"); }
:root {
  --qapco-deep: #00577d; --qapco-blue: #0066a0; --qapco-sky: #077fc3; --qapco-pale: #b5d8ec; --qapco-orange: #f68b28; --qapco-ink: #212529;
  --marker: var(--qapco-orange); --marker-ink: #1b2a36; --marker-hover: color-mix(in srgb, var(--marker) 85%, #ffffff); --marker-glow: rgba(246, 139, 40, .35);   /* the accent that is not the accent: Ask, the active tab's line, stars, the brief's edge; each space sets its own (F-16a) */
  --bg: #eef3f7; --surface: #ffffff; --surface-2: #f4f8fb; --ink: #1b2a36; --muted: #5b6b7a; --line: #d9e3ec; --line-2: #bfcfdc;
  --accent-2: var(--qapco-blue); --focus: #1f6fa8;   /* U-09: 5.4:1 on white (was #8ec6ea, 1.8) */
  --role-WF: #00577d; --role-OI: #0e7c86; --role-OD: #6b4fbb; --role-GEN: #5b6b7a;
  --series-1: #0066a0; --series-2: #f68b28; --series-3: #7a8fa3; --series-done: #1f8f5a; --series-recv: #7a8fa3; --grid: #d9e3ec;
  --font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bar-solid: #00577d; --bar-bg: linear-gradient(100deg, #00476a 0%, #00577d 45%, #0066a0 100%); --bar-ink: #ffffff; --bar-soft: rgba(255, 255, 255, 0.14); --bar-line: rgba(255, 255, 255, 0.22);
  --toast-bg: #0a1b26;
}
:root[data-theme="dark"] {
  --bg: #0a161f; --surface: #102330; --surface-2: #16303f; --ink: #e8f0f5; --muted: #93a7b7; --line: #21394a; --line-2: #2f4a5d;
  --accent-2: #4fa8df; --focus: #2f8fd0;
  --series-1: #4fa8df; --series-2: #f9a35a; --series-3: #8aa0b4; --series-done: #4ec98a; --series-recv: #8aa0b4; --grid: #21394a;
  --bar-solid: #08334a; --bar-bg: linear-gradient(100deg, #061c28 0%, #08334a 50%, #0b4463 100%); --bar-soft: rgba(255, 255, 255, 0.10); --bar-line: rgba(255, 255, 255, 0.16);
  --toast-bg: #e8f0f5; --toast-ink: #0a161f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a161f; --surface: #102330; --surface-2: #16303f; --ink: #e8f0f5; --muted: #93a7b7; --line: #21394a; --line-2: #2f4a5d;
    --accent-2: #4fa8df; --focus: #2f8fd0;
    --series-1: #4fa8df; --series-2: #f9a35a; --series-3: #8aa0b4; --series-done: #4ec98a; --series-recv: #8aa0b4; --grid: #21394a;
    --bar-solid: #08334a; --bar-bg: linear-gradient(100deg, #061c28 0%, #08334a 50%, #0b4463 100%); --bar-soft: rgba(255, 255, 255, 0.10); --bar-line: rgba(255, 255, 255, 0.16);
    --toast-bg: #e8f0f5; --toast-ink: #0a161f;
  }
}

/* the top bar is the site's header: deep blue, white type, an orange marker under the open tab */
/* background-COLOR is not decoration: iOS 26 lays a glass blur over the top edge of an installed web app and skips it only
   when the pinned box there has a plain background-color (a gradient alone does not count: Amr's iPad, 2026-10-18, three screenshots) */
.topbar { background-color: var(--bar-solid); background-image: var(--bar-bg); border-bottom: 0; color: var(--bar-ink); height: 58px; gap: 14px; box-shadow: 0 2px 0 var(--marker), 0 8px 24px rgba(0, 40, 60, .18); }
.topbar .brand { color: #fff; font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; }
.topbar .brand .ic { color: var(--marker); }
.tabs { margin-left: 4px; gap: 4px; height: 100%; align-items: stretch; }
.tab { font-family: var(--font-display); font-weight: 500; font-size: 13.5px; color: rgba(255, 255, 255, .82); border-radius: 0; padding: 0 12px; position: relative; }
.tab:hover { background: var(--bar-soft); color: #fff; transform: none; }
.tab.active { background: var(--bar-soft); color: #fff; box-shadow: none; }
.tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; background: var(--marker); border-radius: 3px 3px 0 0; }
.tab .count { background: var(--marker); color: var(--marker-ink); font-weight: 700; }
.tab .count.soon { background: rgba(255, 255, 255, .22); color: #fff; }
:root[data-theme="dark"] .tab .count { color: #1b2a36; }
.topbar-right .btn.ghost { color: rgba(255, 255, 255, .88); }
.topbar-right .btn.ghost:hover { background: var(--bar-soft); color: #fff; }
.topbar-right .iconbtn { color: rgba(255, 255, 255, .88); }
.topbar-right .iconbtn:hover { background: var(--bar-soft); color: #fff; border-color: transparent; }
.storage-pill, .storage-pill.ok, .storage-pill.warn, .storage-pill.bad { background: var(--bar-soft); border-color: var(--bar-line); color: #fff; }
.storage-pill.ok .ic { color: #8fe3b6; }
.storage-pill.warn { border-color: var(--marker); }
.storage-pill.warn .ic { color: var(--marker); }
.storage-pill.bad { background: rgba(214, 69, 69, .35); border-color: #ff9c9c; }
.storage-pill:hover { transform: none; box-shadow: none; background: rgba(255, 255, 255, .22); }

/* display type where the site uses Gotham: headings, big numbers, primary actions */
h1, h2, h3, .card-head h2, .card-head h3, .stat b, .kpi b, .big, .modal-head h2, .pt-title { font-family: var(--font-display); }
h1 { font-weight: 700; letter-spacing: -.01em; }
.btn.primary { font-family: var(--font-display); font-weight: 700; }
.quickadd .btn.primary { background: var(--marker); border-color: var(--marker); color: var(--marker-ink); }
.quickadd .btn.primary:hover { background: var(--marker-hover); box-shadow: 0 6px 16px var(--marker-glow); }
:root[data-theme="dark"] .quickadd .btn.primary { background: var(--marker); color: var(--marker-ink); }
.iconbtn.star.on { color: var(--marker); }
.iconbtn.star.on:hover { background: color-mix(in srgb, var(--marker) 16%, var(--surface)); }
.starmark { color: var(--marker); }
.quickadd { background: var(--surface); border-bottom: 1px solid var(--line); }
.quickadd input, .quickadd textarea { border-radius: 10px; }
.foot { font-family: var(--font-display); font-size: 11.5px; letter-spacing: .02em; }
.course, .course * { letter-spacing: 0; }   /* Arabic shaping: never letter-space the crash course (lesson C5) */
.course h1, .course h2, .course h3 { font-family: var(--font); }

/* the sign-in page: the site's angled black-and-blue hero */
body.signed-out { background: linear-gradient(112deg, #061218 0 52%, #00577d 52% 100%); }
body.signed-out::before { content: "POWERING YOUR WORKDAY"; position: fixed; left: 32px; bottom: 28px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .22em; color: rgba(255, 255, 255, .55); }
body.signed-out::after { content: ""; position: fixed; left: 32px; bottom: 54px; width: 44px; height: 4px; background: var(--marker); border-radius: 2px; }
.login-card { background: #ffffff; color: #1b2a36; border: 0; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.login-card .brand.big { color: #00577d; }
.login-card .brand.big .ic { color: var(--marker); }
.login-card p { color: #3b4a56; }
.login-card input { background: #f4f8fb; color: #1b2a36; border-color: #bfcfdc; }
.login-card .btn.primary { background: var(--marker); border-color: var(--marker); color: var(--marker-ink); }
.login-card .btn:not(.primary) { background: #fff; color: #1b2a36; border-color: #bfcfdc; }
.login-alt { color: #5b6b7a; }
.login-tag { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .2em; color: #0066a0; text-transform: uppercase; }

/* ---------- phone (Amr 2026-10-13: it opens on the phone like Qayd) ---------- */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .topbar { height: auto; flex-wrap: wrap; padding: 6px 10px; gap: 6px; row-gap: 2px; }
  .topbar .brand span { display: none; }
  .tabs { order: 3; flex-basis: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -10px; padding: 0 6px; height: 44px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; padding: 0 10px; font-size: 13px; }
  .topbar-right { gap: 2px; }
  .topbar-right .btn.ghost { padding: 6px 7px; font-size: 0; gap: 0; }
  .topbar-right .btn.ghost .ic { width: 20px; height: 20px; }
  .storage-pill { max-width: 150px; font-size: 12px; padding: 5px 9px; }
  .quickadd { flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .quickadd > .ic { display: none; }
  .quickadd input, .quickadd textarea { flex-basis: 100%; font-size: 16px; }   /* 16px: iOS does not zoom into the field */
  .quickadd select { flex: 1; }
  .quickadd .imark { order: 5; }
  .page-head h1 { white-space: nowrap; }
  .quick-cheats { display: none; }
  main { padding: 12px; }
  .foot { padding: 8px 12px; flex-wrap: wrap; }
  .drawer { width: 100vw; max-width: 100vw; }
  .modal { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .toasts { left: 8px; right: 8px; bottom: 8px; }
}
@media (max-width: 720px) {
  /* a task title wraps to two lines on the phone instead of «Ethyl… Instr…». Measured 2026-10-22 (night) at 375: with the actions in
     the text column they were drawn over the title and the date, and the title's visible overflow ran onto the date line. So: the
     actions keep a column of their own (two 44 px icons: done, details; the rest live in the details drawer), the duplicate
     «in progress» pill leaves that column, and the title clips at its second line. */
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px; padding: 10px 12px; }
  .row .title span.t { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
  .row .actions, .row .frow-actions { grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: start; }
  .row .actions [data-act="copy"], .row .actions [data-act="link"], .row .actions [data-act="delete"], .row .actions [data-act="star"], .row .actions [data-act="remind"], .row .actions [data-act="snooze"] { display: none; }
  .frow .actions .chip { display: none; }
  .row .title .chip, .row .title .fnum, .row .title .starmark { flex: none; }   /* the role chip was squeezed to «EG» beside a long title (measured 2026-10-22) */
  .cal-legend.v { display: none; }   /* the dots carry the role colours and the day panel names the role; the stacked legend cost half a screen */
  .frow .actions .btn.sm { font-size: 0; gap: 0; padding: 0; width: 44px; min-height: 44px; justify-content: center; }
  .frow .actions .btn.sm .ic { width: 20px; height: 20px; }
}

/* ---------- Claude (phase 3) ---------- */
.ai-brief { border-left: 4px solid var(--marker); margin-bottom: 16px; }
.ai-brief .card-head h2 { color: var(--accent); }
.ai-text { line-height: 1.55; }
.ai-text p { margin: 0 0 8px; }
.ai-text h2, .ai-text h3 { font-size: 15px; margin: 12px 0 4px; }
.ai-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ai-cost { white-space: nowrap; }
.ai-busy { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 10px 0; }
.ai-busy .spin { width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--marker); border-radius: 50%; animation: aispin .8s linear infinite; }
@keyframes aispin { to { transform: rotate(360deg); } }
.ai-err { margin: 6px 0; border-radius: 8px; }
.ai-sec { background: color-mix(in srgb, var(--marker) 7%, var(--surface)); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.ask-row { display: flex; gap: 8px; }
.ask-row input, .ask-row textarea { flex: 1; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface-2); font-size: 15px; }
table.ax input, table.ax select { font-size: 13px; padding: 3px 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface-2); width: 100%; min-width: 0; }
.ax-wrap { overflow-x: auto; }
table.ax { table-layout: fixed; min-width: 820px; }
table.ax th, table.ax td { text-align: left; vertical-align: top; }
table.ax th { white-space: nowrap; }
table.ax .ax-c { width: 28px; padding-left: 4px; padding-right: 4px; }
table.ax .ax-who { width: 120px; }
table.ax .ax-due { width: 150px; }
table.ax .ax-pri { width: 96px; }
table.ax .ax-role { width: 84px; }
table.ax textarea.ax-t { font: inherit; font-size: 13px; line-height: 1.35; padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface-2); width: 100%; min-width: 0; resize: none; overflow: hidden; display: block; }
table.ax .small { text-align: left; }
@media (max-width: 720px) { table.ax .ax-who { width: 90px; } table.ax .ax-due { width: 120px; } table.ax .ax-pri, table.ax .ax-role { width: 70px; } }
table.ax td { vertical-align: top; }

/* ---------- voice (F-11): the microphone in every field ---------- */
.mic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--muted); padding: 0; cursor: pointer; vertical-align: middle; margin-left: 6px; flex: 0 0 auto; }
.mic .ic { width: 15px; height: 15px; }
.mic:hover { color: var(--accent); border-color: var(--accent); }
.mic.rec { color: #fff; background: #d1434b; border-color: #d1434b; animation: micPulse 1s infinite; }
.mic.busy { opacity: .55; pointer-events: none; }
@keyframes micPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(209, 67, 75, .45); } 50% { box-shadow: 0 0 0 8px rgba(209, 67, 75, 0); } }
.quickadd .mic { width: 36px; height: 36px; margin-left: 0; }
.field label .mic, .card-head h2 .mic, h4 .mic { margin-left: 8px; }
.mic-row { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.note-editor-foot .mic { margin-right: auto; }
/* the morning brief as labelled rows */
.brief-rows { display: grid; gap: 0; }
.brief-row { display: grid; grid-template-columns: 124px 1fr; gap: 12px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line); }
.brief-row:first-child { border-top: 0; padding-top: 0; }
.brief-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-2); padding-top: 2px; }
.b-overdue .brief-label { color: #d1434b; }
.b-start-with .brief-label { color: var(--marker); }
.b-lately .brief-label { color: var(--muted); }
.brief-text { line-height: 1.5; }
@media (max-width: 720px) { .brief-row { grid-template-columns: 1fr; gap: 2px; } .mic-row { justify-content: flex-start; } }

/* Sentence fields (data-oneline, R-2026-10-17b): they replaced one-line inputs, so they look like one, but wrap and grow
   with their text. The (0,2,1) selector beats `.field textarea` (160px, monospace), which is for Markdown editors. */
/* A textarea inside a COLUMN flexbox (every .field) must not flex: `flex: 1` there sets its height from a 0 basis and
   throws away the height fitText gave it (measured: dUpdate held 155px inline and rendered 38px). Row layouts keep flex. */
.field > textarea, .history .add .field > textarea { flex: 0 0 auto; }
textarea[data-oneline], .field textarea[data-oneline] { display: block; min-height: 0; resize: none; overflow: hidden; font-family: inherit; font-size: inherit; line-height: 1.4; }

/* All Tasks (Amr, 2026-10-17): one task = one <tbody>, the title on a full-width line, its fields on the line under it */
table.grid.all td.title { max-width: none; padding-bottom: 2px; border-bottom: 0; }
table.grid.all tr.t-meta td { padding-top: 4px; }
table.grid.all tr.th-title th { border-bottom: 0; padding-bottom: 0; }
table.grid.all tbody.task:hover td { background: var(--surface-2); }
table.grid.all tbody.task tr:hover td:first-child { box-shadow: none; }
table.grid.all tbody.task:hover tr.t-title td:first-child, table.grid.all tbody.task:hover tr.t-meta td:first-child { box-shadow: inset 3px 0 0 var(--accent-2); }
table.grid.all tbody.closed td { color: var(--muted); }
table.grid.all tbody.closed td.title, table.grid.all tbody.closed td.title * { text-decoration: line-through; font-weight: 500; color: var(--muted); }
table.grid.all tbody.task.sel td { background: var(--accent-soft) !important; }
table.grid.all tbody.task.sel tr td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Ask stands out from Settings and Help (Amr, 2026-10-17), with its shortcut written on it */
.topbar-right .btn.ask { margin-right: 6px; font-weight: 700; }
/* Orange like + Add, in both themes: the primary blue disappeared on the navy bar (measured 2026-10-17: rgb(31,78,121) on navy) */
.topbar-right .btn.primary.ask, :root[data-theme="dark"] .topbar-right .btn.primary.ask { background: var(--marker, #f68b28); border-color: var(--marker, #f68b28); color: var(--marker-ink, #1b2a36); }
.topbar-right .btn.primary.ask:hover { background: var(--marker-hover); box-shadow: 0 6px 16px var(--marker-glow); }
.topbar-right .btn.ask .kbd-hint { background: rgba(27, 42, 54, .14); color: #1b2a36; }
.btn .kbd-hint { font: 600 11px/1 var(--font); padding: 3px 5px; border-radius: 4px; background: rgba(255, 255, 255, .22); margin-left: 6px; }
@media (max-width: 720px) { .topbar-right .btn.ask { padding: 6px 10px; } .btn .kbd-hint { display: none; } }

/* Recording bar: shows while dictating, switches the mode for this recording, stops it */
.voice-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3, 0 8px 24px rgba(0,0,0,.2)); border: 1px solid var(--line); font-size: 13.5px; }
.voice-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #d64545; animation: voicePulse 1.2s infinite; }
.voice-bar label { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.voice-bar select { padding: 4px 6px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface-2); color: var(--ink); }
.voice-bar kbd { font: 600 11px/1 var(--font); padding: 2px 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); margin-left: 4px; }
@keyframes voicePulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .voice-bar .dot { animation: none; } }

/* Inline title editor is a growing textarea (R-2026-10-17b): same look as the inputs it replaced */
table.grid td.editing textarea { width: 100%; min-width: 240px; padding: 5px 7px; border: 1px solid var(--accent-2); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; outline: 2px solid var(--focus); outline-offset: 0; }

/* Phone: the table scrolls sideways, so the full-width title line would run off the screen. The title text is held
   to the visible width and pinned to the left edge while the fields scroll under it (measured 2026-10-17 at 375 px). */
@media (max-width: 720px) {
  table.grid.all td.title .t-text { display: block; position: sticky; left: 12px; max-width: calc(100vw - 56px); white-space: normal; }
}

/* ==========================================================================
   Phone and iPad (2026-10-18, Amr: «البرنامج محتاج تحسين على شاشة الآيفون والآيباد»).
   Measured before the change at 375 / 820 / 1180 px: the page scrolled sideways on four of the five tabs,
   the top bar had no rule between 720 and 1280 px (the whole iPad range), every row icon was 30 px, the
   quick-add field had slipped to 15 px (iOS zooms into anything under 16), and the (+) on a calendar day
   only appeared under a mouse. Three blocks: tablet, touch, phone. The checker that measured all of this
   lives in tests/browser/layout-check.js; run it at every size before calling a layout change done.
   ========================================================================== */

/* Nothing may ever scroll the whole page sideways: a sideways-scrolled page moves the fixed drawer and
   modals off the screen with it. `clip` keeps `position: sticky` working (hidden would not). The checker
   still measures scrollWidth, so a regression is reported, never hidden. */
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }

/* ---------- tablet, 721–1280 px (iPad upright is 744–834, on its side 1024–1210): the top bar on ONE row ---------- */
/* up to 1540 (was 1280): measured 2026-10-22 night at 1440, the bar with the brand text, full tab labels and full space names needed 1521 px
   and pushed Help off the screen; with the brand text hidden and short space names it needs ~1330 */
@media (max-width: 1540px) and (min-width: 721px) {
  .topbar { gap: 10px; padding: 0 14px; }
  .tabs { margin-left: 0; }
  .tab { padding: 8px 10px; }
  .topbar-right .btn.ghost { padding: 6px 8px; font-size: 0; gap: 0; }   /* icon only; the title and aria-label keep the name */
  .topbar-right .btn.ghost .ic { width: 20px; height: 20px; }
  .btn .kbd-hint { display: none; }
  .storage-pill { max-width: 170px; }
  /* the space switch (F-16a) needs the room the brand text and the long space names took: measured 2026-10-22, the right
     group overflowed by 138 px at 1165 with both shown */
  .topbar .brand span { display: none; }
  .space-btn { padding: 4px 9px; }
  /* `.spaces` added 2026-10-22 night: the base `.space-btn .sp-short { display: none }` sits LATER in the file and won the cascade, so from 721 to
     1280 px both names were hidden and the switch was three empty 22 px pills (measured at 820; lessons C-css-utility-order, second instance) */
  .spaces .space-btn .sp-long { display: none; }
  .spaces .space-btn .sp-short { display: inline; }
}
/* up to 1100 px (an older iPad on its side is 1024; measured 2026-10-18: the bar was 20 px too wide there) */
@media (max-width: 1100px) and (min-width: 721px) {
  .topbar .brand span { display: none; }
  .topbar { gap: 8px; padding: 0 10px; }
  .tabs { gap: 2px; }
  .tab { padding: 8px 7px; font-size: 13px; white-space: nowrap; gap: 5px; }
  .topbar-right { gap: 4px; }
  .topbar-right .btn.ask { padding: 6px 10px; margin-right: 2px; }
  .storage-pill { max-width: 44px; padding: 7px; justify-content: center; }   /* icon + colour; the title says the rest */
  .storage-pill #storageText { display: none; }
}
/* 721–960 px, AFTER the 1100 rule so it wins at equal specificity (lesson C-css-utility-order). on a mouse device (the tabs are still in the top bar): the tabs show their icon only, the title keeps the name.
   Measured 2026-10-22: with the switch, the right group overflowed by 227 px at 805. */
@media (max-width: 960px) and (min-width: 721px) {
  .tab { font-size: 0; gap: 0; padding: 8px 9px; }
  .tab .ic { width: 20px; height: 20px; }
  .tab .count { font-size: 12px; margin-left: 4px; }
}

/* ---------- touch screens (and every phone): targets of 44 px, nothing hover-only ---------- */
@media (hover: none) and (pointer: coarse), (max-width: 720px) {
  .iconbtn { width: 44px; height: 44px; }
  .row .actions, table.grid td.actions { gap: 0; }
  .mic, .quickadd .mic { width: 44px; height: 44px; }   /* `.quickadd .mic` is 36 px above and more specific than `.mic`; named here so a finger gets 44 (measured 2026-10-22) */
  .topbar-right .btn.ghost { min-width: 44px; min-height: 44px; justify-content: center; }
  #lnkNoDue { display: inline-block; padding: 11px 6px; margin: -11px 0; }
  .seg button, .btn.sm, .cmore, .swatch-custom input, .role-pick input { min-height: 40px; }
  .swatch { width: 36px; height: 36px; }
  /* the (i) keeps its 16 px glyph and 22 px look; the area that answers a finger grows to 36 px around it
     (chosen, not derived: 44 would overlap the control beside it; 36 is above WCAG 2.5.8's 24 and the mark is
     information, not an action) */
  .imark { width: 36px; height: 36px; margin: -7px; flex: none; }
  /* the (+) on a calendar day: always visible, big enough to hit; under a mouse it still fades in on hover */
  .cadd { opacity: 1; width: 44px; height: 44px; margin: -10px -8px -10px 0; }
  .cday .cnum { align-items: center; }
  .row .actions .iconbtn { opacity: 1; }   /* U-01: no hover on a touch screen; the two icons Amr taps most were drawn at 2.2:1 */
  .qa-space, .sheet-foot .seg button, .space-btn, .space-cycle { min-height: 44px; }   /* U-19: the iPad is a touch screen too */
  .swatch { width: 44px; height: 44px; }
  .quick-cheats { display: none; }
  .cal-grid.week .cchip, .tray-body .cchip, .cal-day .cchip { min-height: 44px; display: inline-flex; align-items: center; }
  .cal-grid:not(.week) .cchip { min-height: 32px; display: inline-flex; align-items: center; }   /* a month cell cannot hold 44 px chips; 32 is above WCAG 2.5.8's 24 and a tap opens the task (U-03) */
  button, .chip, .cchip, .cday, .row, .tab, .fld { touch-action: manipulation; }   /* U-21: no double-tap zoom on the things Amr taps twice */
  .drawer-body, .modal-body, .sheet, .anotes, .mv-list, .popover { overscroll-behavior: contain; }
}

/* ---------- handheld: every phone, and every touch screen whatever its width (Amr, 2026-10-18, from his iPad:
   «خليه زي الآيفون أفضل»). The tabs sit at the bottom within thumb reach and the top bar steps down under the
   status bar. A Mac or a PC (a mouse, hover) keeps the tabs in the top bar. ---------- */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  /* installed on the Home Screen: the status bar is opaque (index.php), so the top inset is 0; the side and bottom insets still matter on a phone on its side. Height from the content, never a fixed 58 px. */
  .topbar { height: auto; min-height: 58px; padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left)); flex-wrap: nowrap; }
  .topbar-right { margin-left: auto; }
  /* the tabs leave the top bar and sit at the bottom of the screen, within thumb reach (Amr's standing phone rule) */
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; order: 0; flex-basis: auto; height: auto; margin: 0; padding: 4px max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); background-color: var(--bar-solid, var(--surface)); background-image: var(--bar-bg, none); color: var(--bar-ink, var(--ink)); border-top: 0; overflow: visible; display: flex; justify-content: space-around; gap: 0; box-shadow: 0 -4px 16px rgba(0, 0, 0, .12); }
  .tab { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px; min-height: 52px; font-size: 11px; font-weight: 600; border-radius: 10px; position: relative; letter-spacing: 0; }
  .tab .ic { width: 22px; height: 22px; }
  .tab .count { position: absolute; top: 2px; left: calc(50% + 6px); font-size: 11px; line-height: 16px; padding: 0 5px; }
  .tab .count.soon { left: calc(50% + 24px); }
  .tab .count:not(.soon) ~ .count.soon { display: none; }   /* one badge over a 22 px icon: the overdue one when there is one (measured 2026-10-22: two badges overlapped at 375) */
  .tab.active::after { top: 0; bottom: auto; border-radius: 0 0 3px 3px; }   /* the orange marker sits on the bar's top edge */
  /* the app frame (Amr, 2026-10-23, second phone round): the PAGE never scrolls, only <main> does, so Safari never collapses its toolbars
     and the fixed tab bar no longer rides that animation (the nav lives inside the header in the DOM, so it stays `fixed`). The footer
     is off here (its version line lives in Settings); the room for the bar and the floating button is padding inside the scroller (U-22). */
  html, body { height: 100%; overflow: hidden; }
  body { padding-bottom: 0; min-height: 0; }
  body > :not(main) { flex-shrink: 0; }   /* measured 2026-10-23 at 375 (third phone round): with the page as a fixed-height flex column the bar shrank to 71 px under
                                             its 64 px standalone padding and its controls spilled 19 px onto the page; only the scroller gives way */
  main { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: calc(84px + env(safe-area-inset-bottom) + var(--fab-pad, 0px)); }
  .foot { display: none; }
  .toasts { bottom: calc(72px + env(safe-area-inset-bottom)); top: auto; }
  .voice-bar { bottom: calc(76px + env(safe-area-inset-bottom)); max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center; }
  .storage-pill { min-height: 44px; }
  .foot a { display: inline-block; padding: 11px 4px; margin: -11px 0; }   /* the footer's check-page links: 33 px tall on a touch screen (measured 2026-10-22 at 767) */
}
/* Installed on the Home Screen of a touch device, the OS lays a frosted strip over the top of the viewport whatever is under it
   (Amr's iPad, 2026-10-18, measured with assets/bar-check.html: the frost reached the 40 px line of a ruler; a bar whose content
   started at the 32 px the OS reports as safe-area-inset-top was still half frosted; content 64 px down was clear). So the bar's
   content starts 64 px down and the strip above it is bar colour only. Chosen from that measurement, not derived: 48 was not tried. */
@media (display-mode: standalone) and (hover: none) and (pointer: coarse) {
  .topbar { padding-top: max(64px, env(safe-area-inset-top)); }
}
/* a touch tablet: with the tabs gone from the top bar there is room again for the name and the sync text */
@media (hover: none) and (pointer: coarse) and (min-width: 721px) {
  .topbar .brand span { display: inline; }
  .storage-pill { max-width: 200px; padding: 7px 12px; }
  .storage-pill #storageText { display: inline; }
}

/* ---------- phone, up to 720 px ---------- */
@media (max-width: 720px) {
  .storage-pill { max-width: 120px; }
  .modal-wrap { padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .modal, .modal.wide { width: 100%; max-width: 100%; max-height: calc(100dvh - 16px - env(safe-area-inset-bottom)); }
  .modal-body { overflow-x: auto; }
  .drawer { width: 100vw; max-width: 100vw; height: 100dvh; }
  .drawer-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .popover { max-height: 50dvh; overflow-y: auto; }

  /* every field 16 px: anything smaller makes iOS Safari zoom into the field on focus. !important on purpose: a later,
     more specific rule did exactly that to the quick-add field (15 px, measured 2026-10-18). The sign-in page keeps
     its big code field. */
  body:not(.signed-out) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), select, textarea) { font-size: 16px !important; }

  /* page heads: the title keeps its line, the buttons take the next one, full width, side by side */
  .page-head { gap: 8px 10px; }
  .page-head .grow { flex-basis: 100%; height: 0; }   /* the spacer becomes a line break: the buttons share the next line */
  .page-head .btn { flex: 1 1 auto; justify-content: center; }
  .page-head h1 { font-size: 19px; }
  .page-head .btn.primary { flex-basis: 100%; }

  /* calendar: title, then the Month/Week switch beside the arrows; the week is a list of seven days; the month
     scrolls sideways INSIDE its card (never the page) */
  .cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .cal-titlebox { flex-basis: 100%; }
  .cal-titlebox { flex-wrap: wrap; row-gap: 2px; }
  .cal-titlebox h1 { font-size: 22px; white-space: nowrap; }
  .seg.big { justify-self: auto; }
  .seg.big button { padding: 8px 14px; font-size: 14px; }
  .cal-nav { margin-left: auto; }
  .cal-layout { display: block; }
  .cal-trays { position: static; margin-bottom: 14px; }
  .cal-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-grid.month, .cal-grid.month + .cal-head, .cal-head { min-width: 560px; }
  .cal-grid.month.dots, .cal-head.dots { min-width: 0; }
  .cal-grid.week { grid-template-columns: 1fr; min-width: 0; }
  .cal-grid.week .cday { min-height: 0; border-right: 0; }
  .cal-grid.week .cday.big { min-height: 64px; }
  .cday { min-height: 92px; }

  /* report tables scroll inside their card; the four stat tiles become two by two */
  .card-body:has(table.mini), .chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* a grid item grows to its content unless told min-width: 0; without this the CARD widened with the table and the scroll never kicked in */
  .report-grid, .charts, .hl-list, .rp-exports { grid-template-columns: minmax(0, 1fr); }
  .report-grid > *, .charts > *, .hl-list > *, .rp-exports > * { min-width: 0; }
  table.mini { min-width: 520px; }
  table.mini.obj { min-width: 560px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .rp-picker .rp-range { margin-left: 0; flex-basis: 100%; }

  /* the devices list in Settings wraps instead of pushing the dialog wider */
  table.devices td { white-space: normal; padding: 6px 8px 6px 0; }

  /* the details drawer: labels with a long hint wrap under the field name instead of squeezing beside it */
  .field label { flex-wrap: wrap; }
  .fields { grid-template-columns: 1fr; }
  .drawer-body { padding: 12px 12px; }
}

/* ===================================================================================
   Spaces (SPEC F-16a, 2026-10-22). QAPCO is the :root default above, untouched. Each other space overrides the bar, the
   surfaces and the series colours; the accent itself is set by applyAppearance() from the space profile. The Eudaimind
   values were measured on eudaimind.com (its :root --ink, --gold, --gold-text, --lav, --border, --divider, --bg) on
   2026-10-22; the Amr values are candidate C (copper on slate, chosen 2026-10-22 night after Amr found the forest green «غريب»); A and B stay on assets/space-check.html.
   ===================================================================================== */
:root[data-space="eudaimind"] {
  --marker: #c89b3e; --marker-ink: #1f1a37; --marker-hover: #dab774; --marker-glow: rgba(200, 155, 62, .35);
  --bg: #f7f4fb; --surface: #ffffff; --surface-2: #f3effa; --ink: #1f1a37; --muted: #696587; --line: #d4d2e9; --line-2: #bbb8d6;
  --accent-2: #8c6100; --focus: #6f6a9a;   /* U-12 / U-09: links 5.5:1 on white (was #c89b3e, 2.6); the gold stays on the marker */
  --series-1: #8e8ab0; --series-2: #c89b3e; --series-3: #b05a48; --series-done: #2f8f6a; --series-recv: #8e8ab0; --grid: #d4d2e9;
  --bar-solid: #1f1a37; --bar-bg: linear-gradient(100deg, #14121f 0%, #1f1a37 50%, #2d2850 100%); --bar-ink: #ffffff; --bar-soft: rgba(255, 255, 255, 0.14); --bar-line: rgba(255, 255, 255, 0.22);
  --toast-bg: #14121f; --toast-ink: #f1eef8;
}
:root[data-space="eudaimind"][data-theme="dark"] {
  --bg: #14121f; --surface: #221f33; --surface-2: #2a2640; --ink: #f1eef8; --muted: #a9a6c4; --line: #393550; --line-2: #4a4666;
  --accent-2: #dab774; --focus: #8e8ab0;
  --series-1: #a9a6c4; --series-2: #dab774; --series-3: #c97b69; --series-done: #4ec98a; --series-recv: #a9a6c4; --grid: #393550;
  --bar-solid: #0f0d19; --bar-bg: linear-gradient(100deg, #0a0912 0%, #14121f 50%, #1f1a37 100%); --bar-soft: rgba(255, 255, 255, 0.10); --bar-line: rgba(255, 255, 255, 0.16);
  --toast-bg: #f1eef8; --toast-ink: #14121f;
}
:root[data-space="amr"] {
  --marker: #2a9d8f; --marker-ink: #0f141b; --marker-hover: #3db5a6; --marker-glow: rgba(42, 157, 143, .35);   /* teal marker beside a copper accent: dark ink on teal measured 5.6:1 (white was 3.3, audit 2026-10-23) */
  --bg: #f5f4f1; --surface: #ffffff; --surface-2: #efede8; --ink: #23282e; --muted: #68707a; --line: #dedbd4; --line-2: #c6c2b9;
  --accent-2: #9e5522; --focus: #1f7d72;   /* U-12 / U-09: links 5.6:1 on white (was #c9733a, 3.5) */
  --series-1: #b5561c; --series-2: #2a9d8f; --series-3: #7d8794; --series-done: #2a9d8f; --series-recv: #7d8794; --grid: #dedbd4;
  --bar-solid: #2b3440; --bar-bg: linear-gradient(100deg, #1f262f 0%, #2b3440 50%, #384352 100%); --bar-ink: #ffffff; --bar-soft: rgba(255, 255, 255, 0.14); --bar-line: rgba(255, 255, 255, 0.22);
  --toast-bg: #1f262f; --toast-ink: #eef0f2;
}
:root[data-space="amr"][data-theme="dark"] {
  --bg: #171b20; --surface: #1f252c; --surface-2: #27303a; --ink: #eef0f2; --muted: #9aa5b1; --line: #2f3842; --line-2: #3d4854;
  --accent-2: #d98c57; --focus: #3db5a6;
  --series-1: #d98c57; --series-2: #3db5a6; --series-3: #9aa5b1; --series-done: #3db5a6; --series-recv: #9aa5b1; --grid: #2f3842;
  --bar-solid: #151a20; --bar-bg: linear-gradient(100deg, #10141a 0%, #151a20 50%, #1f262f 100%); --bar-soft: rgba(255, 255, 255, 0.10); --bar-line: rgba(255, 255, 255, 0.16);
  --toast-bg: #eef0f2; --toast-ink: #171b20;
}
@media (prefers-color-scheme: dark) {
  :root[data-space="eudaimind"]:not([data-theme="light"]) {
    --bg: #14121f; --surface: #221f33; --surface-2: #2a2640; --ink: #f1eef8; --muted: #a9a6c4; --line: #393550; --line-2: #4a4666;
    --accent-2: #dab774; --focus: #8e8ab0;
    --series-1: #a9a6c4; --series-2: #dab774; --series-3: #c97b69; --series-done: #4ec98a; --series-recv: #a9a6c4; --grid: #393550;
    --bar-solid: #0f0d19; --bar-bg: linear-gradient(100deg, #0a0912 0%, #14121f 50%, #1f1a37 100%); --bar-soft: rgba(255, 255, 255, 0.10); --bar-line: rgba(255, 255, 255, 0.16);
    --toast-bg: #f1eef8; --toast-ink: #14121f;
  }
  :root[data-space="amr"]:not([data-theme="light"]) {
    --bg: #171b20; --surface: #1f252c; --surface-2: #27303a; --ink: #eef0f2; --muted: #9aa5b1; --line: #2f3842; --line-2: #3d4854;
    --accent-2: #d98c57; --focus: #3db5a6;
    --series-1: #d98c57; --series-2: #3db5a6; --series-3: #9aa5b1; --series-done: #3db5a6; --series-recv: #9aa5b1; --grid: #2f3842;
    --bar-solid: #151a20; --bar-bg: linear-gradient(100deg, #10141a 0%, #151a20 50%, #1f262f 100%); --bar-soft: rgba(255, 255, 255, 0.10); --bar-line: rgba(255, 255, 255, 0.16);
    --toast-bg: #eef0f2; --toast-ink: #171b20;
  }
}

/* the switch: a pill row in the bar; the active space is a white pill in its own colour so it reads on every bar colour */
.spaces { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bar-soft); margin-left: 4px; flex: 0 0 auto; }
.space-btn { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--bar-ink, var(--ink)); opacity: .85; font-weight: 600; font-size: 13px; line-height: 1; cursor: pointer; transition: background .15s, color .15s, opacity .15s; }
.space-btn:hover { opacity: 1; background: var(--bar-soft); }
.space-btn.on { background: #ffffff; color: var(--sp); opacity: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.space-btn .sp-short { display: none; }
.spaces .imark { color: var(--bar-ink, var(--muted)); opacity: .8; }
.chip.space { background: color-mix(in srgb, var(--space-c) 14%, var(--surface)); color: var(--space-c); border: 1px solid color-mix(in srgb, var(--space-c) 40%, transparent); font-weight: 700; letter-spacing: .01em; }
:root[data-theme="dark"] .chip.space { background: color-mix(in srgb, var(--space-c) 26%, var(--surface)); color: color-mix(in srgb, var(--space-c) 55%, #ffffff); }
.mv-list { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow: auto; padding-right: 4px; }
.mv-row { padding: 5px 8px; border-radius: 8px; align-items: center; gap: 8px; }
.mv-row:hover { background: var(--surface-2); }
.space-sel { display: none; min-height: 40px; padding: 4px 28px 4px 12px; border: 0; border-radius: 999px; background: #ffffff; color: var(--sp); font-weight: 700; font-size: 14px; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m6 9 6 6 6-6' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
@media (hover: none) and (pointer: coarse) {
  .space-btn { min-height: 40px; min-width: 48px; padding: 6px 12px; }   /* a finger needs the 44 px rule's spirit inside a 58 px bar */
}
@media (max-width: 720px) {
  .spaces .space-btn { display: none; }
  .space-sel { display: inline-block; padding: 4px 22px 4px 9px; font-size: 13px; background-position: right 5px center; background-size: 14px; }
  .spaces { padding: 2px; margin-left: 0; gap: 0; }
  .topbar .brand { gap: 0; }
  .storage-pill { max-width: 44px; padding: 7px; justify-content: center; }
  .storage-pill #storageText { display: none; }
}
/* phones only (an iPad is never under 431): the theme toggle moves to Settings → Appearance; measured 2026-10-22, the bar was 35 px short at 375 with it */
@media (max-width: 430px) {
  #btnTheme { display: none; }
}

/* ===================================================================================
   Phone and iPad round, 2026-10-22 (night), from Amr's first pass on the phone (the plan: _Plans/خطة الموبايل والـ iPad بعد جولة عمرو.md).
   ===================================================================================== */
/* the space switch on a phone: ONE pill in the active space's colour; a tap cycles to the next space (Amr: «كل ما ألمسه يغير المساحة») */
.space-cycle { display: none; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px 4px 10px; border: 0; border-radius: 999px; background: #ffffff; color: var(--sp); font-weight: 700; font-size: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.space-cycle .ic { width: 16px; height: 16px; opacity: .7; }
.space-cycle:active { transform: scale(.96); }
@media (max-width: 720px) { .space-cycle { display: inline-flex; } }
/* the quick-add bar says where the task goes: a chip in the destination space's colour; a tap moves the destination to the next space without touching the switch */
.qa-space { display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 4px 10px; border: 1px solid color-mix(in srgb, var(--qs) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--qs) 12%, var(--surface)); color: var(--qs); font-weight: 700; font-size: 13px; letter-spacing: .02em; white-space: nowrap; }
.qa-space .ic { width: 14px; height: 14px; opacity: .7; }
:root[data-theme="dark"] .qa-space { background: color-mix(in srgb, var(--qs) 24%, var(--surface)); color: color-mix(in srgb, var(--qs) 55%, #ffffff); }
@media (max-width: 720px) { .qa-space { min-height: 44px; order: 2; } .quickadd select { order: 3; } .quickadd .mic { order: 4; } .quickadd .btn.primary { order: 4; } }

/* Today in one space names what waits in the others (decision 1 of the round): small chips under the head; a tap switches */
.other-spaces { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 12px; color: var(--muted); font-size: 13px; }
.other-spaces .chip.space { cursor: pointer; min-height: 32px; }
.other-spaces .chip.space b { font-weight: 800; }

/* the floating add button: fixed, in the space's marker colour, placed by viewport fractions (--fx, --fy) and sized by --fs; a long press
   picks it up (the swell says so, since iOS has no vibration API), a tap opens the sheet */
.fab { position: fixed; left: calc(var(--fx, .9) * 100vw); top: calc(var(--fy, .78) * 100vh); width: var(--fs, 60px); height: var(--fs, 60px); margin: calc(var(--fs, 60px) / -2) 0 0 calc(var(--fs, 60px) / -2); z-index: 36; border: 0; border-radius: 50%; background: var(--marker); color: var(--marker-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .28), 0 0 0 0 var(--marker-glow); display: none; align-items: center; justify-content: center; padding: 0; touch-action: none; -webkit-user-select: none; user-select: none; transition: transform .15s var(--ease), box-shadow .2s var(--ease); }
.fab .ic { width: calc(var(--fs, 60px) * .46); height: calc(var(--fs, 60px) * .46); }
.fab { opacity: var(--fo, 1); transition: transform .15s var(--ease), box-shadow .2s var(--ease), opacity .15s var(--ease); }   /* --fo: Amr's chosen opacity (per device, from the add sheet): the button must not hide the text under it */
.fab.lifted, .fab:active { opacity: 1; }
.fab.lifted { transform: scale(1.18); box-shadow: 0 12px 28px rgba(0, 0, 0, .35), 0 0 0 10px var(--marker-glow); }
.fab:active:not(.lifted) { transform: scale(.94); }
@media (max-width: 720px), (hover: none) and (pointer: coarse) { .fab { display: inline-flex; } }
body.signed-out .fab, body.sheet-open .fab { display: none; }
/* the add sheet: slides up from the bottom; the space row first, so the destination is a decision, not a surprise */
.sheet-wrap { position: fixed; inset: 0; z-index: 60; display: none; touch-action: manipulation; align-items: flex-end; justify-content: center; background: rgba(15, 20, 27, .45); }
.sheet-wrap.open { display: flex; }
.sheet { width: 100%; max-width: 640px; max-height: calc(100dvh - 24px); overflow: auto; background: var(--surface); border-radius: 18px 18px 0 0; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .3); animation: sheetUp .22s var(--ease); }
@keyframes sheetUp { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 0 auto 10px; }
.sheet h2 { font-size: 17px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.sheet-spaces { display: flex; gap: 6px; margin-bottom: 10px; }
.sheet-spaces button { flex: 1; min-height: 44px; border: 2px solid color-mix(in srgb, var(--qs) 40%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--qs) 8%, var(--surface)); color: var(--qs); font-weight: 800; letter-spacing: .02em; }
.sheet-spaces button.on { background: var(--qs); color: #ffffff; border-color: var(--qs); }
.sheet textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface-2); font-size: 16px; resize: none; }
.sheet-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.sheet-row select { flex: 1; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font-size: 16px; }
.sheet-row .btn.primary { min-height: 44px; }
.sheet-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
.sheet-foot .seg button { min-height: 36px; padding: 4px 12px; }
.sheet-foot .fab-opacity { display: inline-flex; align-items: center; gap: 8px; }
.sheet-foot .fab-opacity input[type=range] { width: 110px; accent-color: var(--marker); min-height: 44px; }
@media (hover: none) and (pointer: coarse), (max-width: 720px) { .sheet .sheet-foot .seg button { min-height: 44px; min-width: 44px; } .modal-head .iconbtn { min-width: 44px; min-height: 44px; } .modal-foot .btn { min-height: 44px; } .swatch-custom input { width: 44px; height: 44px; } }   /* measured inside the overlays 2026-10-23: S/M/L 32×36, Close 43, the colour input 28 wide */
.sheet-foot .grow { flex: 1; }
@media (min-width: 721px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 18px; } }

/* the month on a phone: a dot grid (7 columns in 375 px: each day its number, up to three dots in role colours, a count past three) and,
   under it, the selected day's own panel with its chips and the (+). The week keeps its seven-row list. */
.cal-grid.month.dots .cday { min-height: 56px; padding: 4px 2px 6px; border-right: 0; cursor: pointer; }
.cal-grid.month.dots .cday .cnum { justify-content: center; margin: 0 0 3px; font-size: 13px; }
.cal-grid.month.dots .cday .cnum > span:first-child { min-width: 24px; text-align: center; }
.cal-grid.month.dots .cday.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.cal-grid.month.dots .cday .cadd, .cal-grid.month.dots .cday .ccount { display: none; }
.cal-grid.month.dots .ddots { display: flex; justify-content: center; align-items: center; gap: 3px; min-height: 10px; }
.cal-grid.month.dots .ddots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rc, var(--muted)); }
.cal-grid.month.dots .ddots i.over { background: var(--red); }
.cal-grid.month.dots .ddots i.follow { background: var(--blue); }
.cal-grid.month.dots .ddots i.done { background: var(--line-2); }
.cal-grid.month.dots .ddots .dmore { font-size: 10px; color: var(--muted); font-weight: 700; }
.cal-head.dots div { padding: 6px 2px; text-align: center; font-size: 11px; }
.cal-day { margin-top: 12px; }
.cal-day .card-head { gap: 8px; }
.cal-day .cadd { opacity: 1; width: 44px; height: 44px; margin: -10px 0; }
.cal-day .cchip { font-size: 14px; padding: 8px 10px; margin: 6px 0; min-height: 44px; }
.cal-day .cchip .cmeta { white-space: normal; }