/* apk-ink.css — [FEATURE-INKPAPER-01] ApunkAI's own look: "Ink & Paper". Our tokens, our shapes, no third-party fonts or marks.
 * Three kinds of screen, three feels (one idea each):
 *   ACT      doing something now      -> plain, large, one obvious button            (Focus card)
 *   PLAN     deciding what comes next -> human touch: pen underline, pen-stroke done, sticky note (Planner, Reminders)
 *   INSIGHT  understanding the group  -> clean cards, steady numbers, filter chips   (Insights)
 * Pen colour is the brand family (--brand-text), so the brand stays one thing; backgrounds and surfaces are never changed. Everything here is cosmetic and removable:
 * delete this file and the app still works. Text never goes below 11px; motion is off for people who ask for less. */
:root {
  --apk-pen: var(--brand-text, #60a5fa); --apk-sticky: #f2d675; --apk-sticky-ink: #3a3000;
}
[data-theme="light"] { --apk-pen: var(--navy, #16213e); --apk-sticky: #f6dd8a; }

/* ── SYSTEM: the shared pieces every screen should reuse (found by the 2026-10-09 audit, see UX_AUDIT_2026-10-09.md) ──────────────
 * 1. Names the code already uses but nothing defined, so they fell back to off-theme colours (white text in light theme, black cards).
 *    They now point at the real ApunkAI tokens. */
:root {
  --surface: var(--bg-secondary); --surface-2: var(--bg-tertiary);
  --t1: var(--text-primary); --text-main: var(--text-primary);
  --border-subtle: var(--border); --border-color: var(--border);
  --primary-light: rgba(var(--primary-rgb, 37, 99, 235), .16); --primary-subtle: rgba(var(--primary-rgb, 37, 99, 235), .1);
  --err: var(--error); --border-strong: var(--border-light); --font-sans: var(--font-ui);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* 2. Quiet button: the third step of primary / secondary / quiet. Used for "Not now", "Skip", "Later". */
.btn-ghost { background: transparent; color: var(--text-secondary); border: 1px solid transparent; padding: 10px 14px; min-height: 44px; border-radius: var(--radius-md, 12px);
  font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-tertiary); }
/* 3. One count badge for everything that counts things (same red as the side navigation). */
.apk-count { min-width: 16px; padding: 2px 5px; border-radius: 10px; box-sizing: border-box; background: var(--error); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; }
/* 4. One empty state: say what is missing, then give the one action that moves the group forward. */
.apk-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 20px; text-align: center; color: var(--text-secondary); }
.apk-empty .material-symbols-outlined { font-size: 40px; color: var(--text-tertiary); opacity: .6; }
.apk-empty p { margin: 0; font-size: 14px; line-height: 1.5; max-width: 320px; }

/* ACT — nothing decorative; the next step is the biggest thing on screen. Same card, same buttons, same colours as the rest of the app. */
#apk-focus-host .apk-focus-card, #apk-focus-host .apk-focus-bar { background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-sm, none); }
#apk-focus-host .apk-focus-card { padding: 16px 18px; }
#apk-focus-host .apk-focus-sub { font-size: 13px; line-height: 1.4; color: var(--text-secondary); margin: -6px 0 12px; }
#apk-focus-host .apk-focus-why { font-size: 16px; line-height: 1.4; font-weight: 600; color: var(--text-primary); margin-bottom: 12px; }
#apk-focus-host .apk-focus-actions { gap: 6px; }
#apk-focus-host .apk-focus-actions .btn-primary { padding: 10px 20px; }
.apk-topbar-count { position: absolute; top: -5px; right: -5px; pointer-events: none; }
.apk-topbar-count[hidden] { display: none; }

/* PLAN — same ApunkAI theme and colours. The human touch is a few hand-made details on screens where people think ahead
 * (Calendar, Planner). Only classes that exist today are targeted; surfaces and backgrounds are never changed. */
/* [FIX-NOSQUIGGLE-01] No hand-drawn underline under any title: it read as a rendering glitch. A guard test keeps decorative marks out of headings. */
/* done = crossed off with a pen stroke */
#reminders-tbody .reminder-row.is-completed-row .cell-title { text-decoration: line-through; text-decoration-color: var(--apk-pen); text-decoration-thickness: 2px; }
/* overdue reads as a sticky note on the page, not an alarm */
#reminders-tbody .reminder-row.is-overdue-row { border-left-color: var(--apk-sticky); background: color-mix(in srgb, var(--apk-sticky) 14%, transparent); }

/* INSIGHT — calm, steady numbers, one clear way to narrow things down. */
#view-insights { font-variant-numeric: tabular-nums; }
.apk-lens { display: flex; gap: 8px; overflow-x: auto; padding: 10px 14px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.apk-lens::-webkit-scrollbar { display: none; }
.apk-lens-chip { flex: 0 0 auto; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-secondary);
  color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.apk-lens-chip[aria-pressed="true"] { background: var(--apk-pen); border-color: var(--apk-pen); color: var(--bg-primary, #fff); }

@media (prefers-reduced-motion: no-preference) {
  .apk-lens-chip { transition: background-color .15s ease, color .15s ease; }
}

/* HOME — breathe. One card at a time; the conversation owns the rest. */
body.apk-focus-asking #apk-daily-host { display: none; }
/* header pills carry the shared .apk-count badge instead of a dot, so what is going on reads at a glance */

/* Rules: vetted pills wrap instead of scrolling */
.apk-rule-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }

/* [FIX-THEMEBASE-01, 25 Oct 2026] The safety net under every button. A button with no class of its own, or one whose class lost its rule, gets the ApunkAI
   look instead of the browser's grey. :where() has no specificity, so any real rule (class, id, inline style) always wins. tests/theme-guard.test.mjs
   proves in a real browser, dark and light, that no button in the app still shows the browser grey. */
:where(button) {
  -webkit-appearance: none; appearance: none;
  background: var(--bg-secondary, #1e293b); color: var(--text-primary, #f1f5f9);
  border: 1px solid var(--border, #334155); border-radius: 12px; padding: 0 14px;
  font: inherit; cursor: pointer;
}
:where(button:disabled) { opacity: .55; cursor: default; }

/* [FIX-THEMECHIPS-01, 25 Oct 2026, founder: "remove the bad looking grey background, use the ApunkAI theme"]
   Chips, fold bars and ghost buttons must never fall back to the browser's grey button. This block is loaded last, carries its own
   fallback colours, and drops the native look, so one missing variable or one stale rule can not bring the grey back. */
.apk-pg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.apk-pg-chip, .apk-capture-ok, .apk-today-more {
  -webkit-appearance: none; appearance: none; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--border, #334155); background: var(--bg-secondary, #1e293b); color: var(--text-primary, #f1f5f9);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.apk-pg-chip[aria-pressed="true"] { border-color: var(--primary, #6366f1); color: var(--primary-text, var(--primary, #6366f1)); background: var(--bg-card, #0f172a); }
.apk-fold-line, .apk-fold-toggle, .apk-daily-toggle { -webkit-appearance: none; appearance: none; background: transparent; border: 0; color: var(--text-primary, #f1f5f9); }
.apk-fold-head { border: 1px solid var(--border, #334155); border-radius: 12px; padding: 0 8px 0 14px; background: var(--bg-secondary, #1e293b); }

/* [FIX-HDRACTIONS-01, founder: "make the add icon match the theme, all action pills and icons similar"] Every control in a page's top-right
   (import, add, search, filter, Proof rules, and the like) is one shape: 44px tall, 12px corners, same fill and border. Only the add icon carries the accent colour. */
.view-header-right > .apk-hdr-icon-btn,
#notes-header-right > .apk-hdr-icon-btn,
#reminders-header-right > .apk-hdr-icon-btn,
#staff-header-right > .apk-hdr-icon-btn,
.view-header-right > #apk-proof-rules.btn-ghost,
#notes-header-right > #apk-proof-rules.btn-ghost,
#reminders-header-right > #apk-proof-rules.btn-ghost,
#staff-header-right > #apk-proof-rules.btn-ghost {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; height: 44px; min-height: 44px; border-radius: 12px;
  background: var(--bg-secondary, #1e293b) !important; border: 1px solid var(--border, #334155) !important; color: var(--text-secondary, #94a3b8) !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.view-header-right > .apk-hdr-icon-btn,
#notes-header-right > .apk-hdr-icon-btn,
#reminders-header-right > .apk-hdr-icon-btn,
#staff-header-right > .apk-hdr-icon-btn { width: 44px; padding: 0; }
.view-header-right > #apk-proof-rules.btn-ghost,
#notes-header-right > #apk-proof-rules.btn-ghost,
#reminders-header-right > #apk-proof-rules.btn-ghost,
#staff-header-right > #apk-proof-rules.btn-ghost { padding: 0 14px; }
.view-header-right > .apk-hdr-icon-btn[data-action^="open-add"],
#notes-header-right > .apk-hdr-icon-btn[data-action^="open-add"],
#reminders-header-right > .apk-hdr-icon-btn[data-action^="open-add"],
#staff-header-right > .apk-hdr-icon-btn[data-action^="open-add"],
.view-header-right > .apk-hdr-icon-btn.apk-hdr-icon-btn-primary,
#notes-header-right > .apk-hdr-icon-btn.apk-hdr-icon-btn-primary,
#reminders-header-right > .apk-hdr-icon-btn.apk-hdr-icon-btn-primary,
#staff-header-right > .apk-hdr-icon-btn.apk-hdr-icon-btn-primary,
.view-header-right > .apk-hdr-icon-btn[data-action="ledger-new-book"],
#notes-header-right > .apk-hdr-icon-btn[data-action="ledger-new-book"],
#reminders-header-right > .apk-hdr-icon-btn[data-action="ledger-new-book"],
#staff-header-right > .apk-hdr-icon-btn[data-action="ledger-new-book"] { color: var(--primary-text, var(--primary, #2563eb)) !important; }
/* [FIX-ADDVISIBLE-01, founder: "add icons can be more visible in dark mode"] The add button for a new entry gets a soft accent fill, an accent border and a brighter, heavier plus,
   so it reads as the primary action on every page. Light mode keeps the plain accent icon. */
:root:not([data-theme="light"]) .view-header-right > .apk-hdr-icon-btn[data-action^="open-add"],
:root:not([data-theme="light"]) .view-header-right > .apk-hdr-icon-btn.apk-hdr-icon-btn-primary,
:root:not([data-theme="light"]) #notes-header-right .apk-hdr-icon-btn.apk-hdr-icon-btn-primary,
:root:not([data-theme="light"]) #reminders-header-right > .apk-hdr-icon-btn[data-action^="open-add"],
:root:not([data-theme="light"]) #reminders-header-right > .apk-hdr-icon-btn.apk-hdr-icon-btn-primary,
:root:not([data-theme="light"]) #staff-header-right > .apk-hdr-icon-btn[data-action^="open-add"],
:root:not([data-theme="light"]) #staff-header-right > .apk-hdr-icon-btn.apk-hdr-icon-btn-primary,
:root:not([data-theme="light"]) .view-header-right > .apk-hdr-icon-btn[data-action="ledger-new-book"] {
  background: rgba(96,165,250,.16) !important; border-color: #60a5fa !important; color: #93c5fd !important;
}
:root:not([data-theme="light"]) .view-header-right > .apk-hdr-icon-btn.apk-hdr-icon-btn-primary .material-symbols-outlined,
:root:not([data-theme="light"]) .view-header-right > .apk-hdr-icon-btn[data-action^="open-add"] .material-symbols-outlined,
:root:not([data-theme="light"]) #notes-header-right .apk-hdr-icon-btn.apk-hdr-icon-btn-primary .material-symbols-outlined,
:root:not([data-theme="light"]) #reminders-header-right .apk-hdr-icon-btn-primary .material-symbols-outlined,
:root:not([data-theme="light"]) #staff-header-right .apk-hdr-icon-btn-primary .material-symbols-outlined { font-size: 22px !important; font-variation-settings: 'wght' 600; }
.view-header-right > .apk-hdr-icon-btn:hover,
#notes-header-right > .apk-hdr-icon-btn:hover,
#reminders-header-right > .apk-hdr-icon-btn:hover,
#staff-header-right > .apk-hdr-icon-btn:hover,
.view-header-right > #apk-proof-rules.btn-ghost:hover,
#notes-header-right > #apk-proof-rules.btn-ghost:hover,
#reminders-header-right > #apk-proof-rules.btn-ghost:hover,
#staff-header-right > #apk-proof-rules.btn-ghost:hover { background: var(--bg-tertiary, #334155) !important; border-color: var(--border, #334155) !important; }

/* [FEATURE-GRIDOFF-01] Tasks grid (filter row + column header) is off until the person asks for it. */
#chores-filter-bar.apk-grid-off,#chores-thead.apk-grid-off{display:none!important}