/* Kit Refined: the shared production design for web, desktop and mobile panes. */
/* The heading face (KT-60242): OFL, self-hosted, latin, variable 400–700; the system font shows until it loads. */
@font-face { font-family:'Familjen Grotesk'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/board/fonts/familjen-grotesk-latin-wght-normal.woff2') format('woff2'); }
html[data-kit-brand="refined"] {
  /* The palette (packages/chat-ui/src/theme.ts palettes.light; theme.test.ts keeps the two equal).
     Overdue (KT-60311) is stronger than ink, never terracotta, provisional; the marketing site's
     sage grounds and olive structure (PK-51744) leave terracotta (--d-brand) the one call to act. */
  --d-paper:#f5f3ed; --d-paper2:#edeae2; --d-surface:#fffefa; --d-ink:#282d2b;
  --d-muted:#525950; --d-soft:#73786e; --d-line:#dedfd6; --d-brand:#9d4829;
  --d-hover:#823b23; --d-wash:#eee7da; --d-side:#eeeee6; --d-side-ink:#353c34;
  --d-sage:#e5e8dc; --d-sage-edge:#cdd1c3; --d-olive:#6b7a4f; --d-olive-ink:#4f6428;
  --d-cream:#fbf3e6; --d-ring:#a9b096; --d-fox-wash:#f8eee9; --d-fox-edge:#e2c6b8;
  --d-overdue:#6a3f0c; --d-on-brand:#ffffff; --d-danger:#b3341f; --d-ok:#3e7c4f;
  --d-snooze:#b07e22; --d-drop:#a2958a; --d-accent:#2e62c4; --d-accent-hover:#2451a8;
  --d-info:#3e6c7c; --d-shade:#282d2b; --d-scrim:#18201d66; --d-on-olive:#fbf3e6;
  --d-ink-rgb:40,45,43; --d-side-rgb:53,60,52; --d-brand-rgb:157,72,41; --d-olive-rgb:107,122,79;
  --d-surface-rgb:255,254,250; --d-ok-rgb:62,124,79; --d-snooze-rgb:176,126,34; --d-danger-rgb:179,52,31;
  --d-accent-rgb:46,98,196; --d-info-rgb:62,108,124; --d-shade-rgb:40,45,43;
  color-scheme:light;
  --d-radius:12px;
  /* Familjen Grotesk on headings only (KT-60242); everything else is --d-body, the system font. */
  --d-heading:'Familjen Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --d-body:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --d-shadow:0 2px 6px #26312505; --d-shadow-lg:0 14px 50px -20px #182c3955; --d-row:12px; --d-content:1060px;
  /* Today's page (KT-60285, theme.ts layout.todayMaxWidth): its two columns use a wide window. */
  --d-today-w:1360px;
}
/* Dark (2026-10-21): brand.js sets data-kit-scheme from the reader's Appearance choice (Match device,
   Light or Dark) before the page paints. theme.ts palettes.dark, PROVISIONAL until Michelle picks by eye;
   theme.test.ts keeps this block equal to it. */
html[data-kit-brand="refined"][data-kit-scheme="dark"] {
  --d-paper:#1b1e1c; --d-paper2:#222623; --d-surface:#262a27; --d-ink:#ebe8df;
  --d-muted:#b3b7ac; --d-soft:#8f9489; --d-line:#3a3f3a; --d-brand:#e0805a;
  --d-hover:#ea9473; --d-wash:#33302a; --d-side:#202421; --d-side-ink:#d9dcd2;
  --d-sage:#2a2f27; --d-sage-edge:#3c4336; --d-olive:#93a273; --d-olive-ink:#a9bb84;
  --d-cream:#fbf3e6; --d-ring:#6d7560; --d-fox-wash:#2f2622; --d-fox-edge:#5a3f33;
  --d-overdue:#e3a867; --d-on-brand:#1b1e1c; --d-danger:#ef8069; --d-ok:#7fbf8e;
  --d-snooze:#d9a94f; --d-drop:#8f9489; --d-accent:#7fa7ec; --d-accent-hover:#9bbaf0;
  --d-info:#86b7c9; --d-shade:#000000; --d-scrim:#0000008c; --d-on-olive:#1b1e1c;
  --d-ink-rgb:235,232,223; --d-side-rgb:217,220,210; --d-brand-rgb:224,128,90; --d-olive-rgb:147,162,115;
  --d-surface-rgb:38,42,39; --d-ok-rgb:127,191,142; --d-snooze-rgb:217,169,79; --d-danger-rgb:239,128,105;
  --d-accent-rgb:127,167,236; --d-info-rgb:134,183,201; --d-shade-rgb:0,0,0;
  color-scheme:dark;
  --d-shadow:0 2px 6px #0000004d; --d-shadow-lg:0 14px 50px -20px #000000b3;
}


/* One palette feeds the board and the shared shell modules, whose
   defaults read the --center-channel-* / --sidebar-* / --link-color names. */
html[data-kit-brand="refined"], html[data-kit-brand="refined"] body {
  --paper:var(--d-paper); --paper-2:var(--d-paper2); --surface:var(--d-surface);
  --ink:var(--d-ink); --ink-2:var(--d-muted); --ink-3:var(--d-soft);
  --line:var(--d-line); --brand:var(--d-brand); --brand-hi:var(--d-hover);
  --focus:rgba(var(--d-olive-rgb),.22);
  --ok:var(--d-ok); --snooze:var(--d-snooze); --drop:var(--d-drop); --danger:var(--d-danger);
  --accent:var(--d-accent); --accent-hi:var(--d-accent-hover);
  --wash:var(--d-wash); --wash-2:var(--d-paper2); --r-sm:10px; --r-md:var(--d-radius);
  --shadow:var(--d-shadow); --shadow-lg:var(--d-shadow-lg);
  --serif:var(--d-heading); --sidebar-w:210px;
  --kit-paper:var(--d-paper); --kit-paper-2:var(--d-paper2); --kit-surface:var(--d-surface);
  --kit-ink:var(--d-ink); --kit-ink-2:var(--d-muted); --kit-ink-3:var(--d-soft);
  --kit-line:var(--d-line); --kit-brand:var(--d-brand); --kit-brand-hi:var(--d-hover);
  --kit-brand-dk:var(--d-hover); --kit-wash:var(--d-wash);
  --kit-r-md:var(--d-radius); --kit-shadow:var(--d-shadow);
  --center-channel-bg:var(--d-surface) !important;
  --center-channel-color:var(--d-ink) !important;
  --center-channel-color-rgb:var(--d-ink-rgb) !important;
  --sidebar-bg:var(--d-side) !important; --sidebar-text:var(--d-side-ink) !important;
  --sidebar-text-rgb:var(--d-side-rgb) !important;
  --sidebar-header-bg:var(--d-side) !important; --sidebar-header-text-color:var(--d-side-ink) !important;
  --sidebar-header-text-color-rgb:var(--d-side-rgb) !important;
  --sidebar-unread-text:var(--d-side-ink) !important;
  --sidebar-text-hover-bg:rgba(var(--d-side-rgb),.08) !important;
  --sidebar-text-active-border:var(--d-brand) !important;
  --sidebar-text-active-color:var(--d-side-ink) !important;
  --button-bg:var(--d-brand) !important; --button-bg-rgb:var(--d-brand-rgb) !important;
  --link-color:var(--d-brand) !important; --link-color-rgb:var(--d-brand-rgb) !important;
}
html[data-kit-brand="refined"] body { background:var(--d-paper) !important; color:var(--d-ink); }
/* The desktop shell's drag strip (apps/desktop lib/titlebar) is painted the light paper by every
   shipped build; it takes the page's paper so a dark board has no light band across the top. */
html[data-kit-brand="refined"] #kit-desktop-titlebar { background:var(--d-paper) !important; }
html[data-kit-brand="refined"] .topbar {
  background:var(--d-paper) !important; border-bottom:1px solid var(--d-line) !important;
  --kit-search-bg:var(--d-surface); --kit-search-line:var(--d-line);
  --kit-search-fg:var(--d-muted); --kit-search-fg-hi:var(--d-ink);
  --kit-nav-fg:var(--d-muted); --kit-nav-fg-hi:var(--d-ink);
}
/* The search field (2026-10-08): linen at rest, a slot below the paper; a tap
   lifts it to warm white with one terracotta ring and a terracotta magnifier.
   :is(#kit-search) outranks the top bar's own .topbar #kit-search hooks. */
html[data-kit-brand="refined"] :is(#kit-search,.kit-search) {
  --kit-search-bg:var(--d-paper2); --kit-search-line:transparent; --kit-search-fg:var(--d-soft);
  --kit-search-focus-bg:var(--d-surface); --kit-search-focus-line:rgba(var(--d-olive-rgb),.55);
  --kit-search-focus-ring:0 0 0 4px rgba(var(--d-olive-rgb),.14); --kit-search-focus-fg:var(--d-olive-ink);
}
html[data-kit-brand="refined"] :is(.kit-search,.kit-search-pop,.kit-search-host) {
  --kit-pop-bg:var(--d-surface); --kit-pop-fg:var(--d-ink); --kit-pop-fg-2:var(--d-muted);
  --kit-pop-line:var(--d-line); --kit-pop-hover:var(--d-wash);
  --kit-pop-label:var(--d-olive-ink); --kit-pop-head-font:var(--d-heading);
}
html[data-kit-brand="refined"] .kit-board .sidebar { background:var(--d-paper2); padding:20px 14px; }
/* One row height for nav and conversations (KT-60285): 40px, text on one edge at x50. */
html[data-kit-brand="refined"] .kit-board .sidebar .nav-item { min-height:40px; }
/* The chat column (body.kit-chat): the board's sidebar is the one left
   column, on the --d-side ground; the page you're on lights its glyph olive. */
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar { background:var(--d-side); color:var(--d-side-ink); border-right-color:var(--d-line); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar :is(.nav-item,.section-label,.kit-nav-heading) { color:var(--d-side-ink); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar :is(.section-label,.kit-nav-heading) { color:rgba(var(--d-side-rgb),.64); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .kit-nav-heading:hover { color:var(--d-side-ink); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .nav-item:hover { background:rgba(var(--d-side-rgb),.08); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .nav-item.active { background:rgba(var(--d-side-rgb),.12); color:var(--d-side-ink); }
/* Ledger (KT-60631 item 11): the page you're on is the band's surface, a 1px inset edge, 6px corners. */
html[data-kit-brand="refined"] .kit-board:not(.kit-open) .sidebar .nav-item.active { background:var(--d-sage); box-shadow:inset 0 0 0 1px var(--d-sage-edge); border-radius:6px; }
/* The page you're on (PK-51902): its glyph lights up olive with cream detail
   (icons.ts .kg-*), no rust edge; rust stays for Kit and unread. */
html[data-kit-brand="refined"] :is(.sidebar .nav-item.active,.kit-nav a[aria-current="page"]) .kg-s { fill:var(--d-olive); stroke:var(--d-olive); }
html[data-kit-brand="refined"] :is(.sidebar .nav-item.active,.kit-nav a[aria-current="page"]) .kg-x { stroke:var(--d-olive); }
html[data-kit-brand="refined"] :is(.sidebar .nav-item.active,.kit-nav a[aria-current="page"]) .kg-d { stroke:var(--d-on-olive); }
/* The phone bar's current tab follows suit: olive label under the lit glyph, not rust. */
html[data-kit-brand="refined"] .kit-nav.kit-nav--tabs { --kit-nav-active-fg:var(--d-olive-ink); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .nav-item .count { color:rgba(var(--d-side-rgb),.6); }
html[data-kit-brand="refined"] .kit-board .sidebar .kit-nav-sub .nav-item { min-height:32px; }
html[data-kit-brand="refined"] .kit-board .sidebar .kit-nav-side .nav-item.active:has(+ .kit-nav-sub) { background:none; }
/* Kit open (KT-60606): the Kit row is the one filled row; the page's row and a conversation open on
   the page keep their weight and olive glyph, unfilled. */
html[data-kit-brand="refined"] .kit-board.kit-open .sidebar .nav-item.active:not(.kit-row-nav) { background:none; font-weight:600; }
html[data-kit-brand="refined"] .kit-board.kit-open .sidebar .chat-list-slot [aria-selected="true"] { background-color:transparent !important; }
html[data-kit-brand="refined"] .kit-board.kit-open .sidebar .chat-list-slot [aria-selected="true"] [dir="auto"] { font-weight:600 !important; }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .sidebar-foot a { color:rgba(var(--d-side-rgb),.64); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .sidebar-foot a:hover { color:var(--d-brand); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar.chat-sidebar { padding-bottom:14px; }
/* Sidebar heads in sentence case and the heading face (KT-60242): all-caps labels read as a
   generated template, and the soft grey was 3.65:1; muted is AA on both sidebar grounds. */
html[data-kit-brand="refined"] .kit-board .sidebar :is(.section-label,.kit-nav-heading) { font-family:var(--d-heading); font-size:0.875rem; font-weight:650; letter-spacing:0; text-transform:none; color:var(--d-muted); }
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar :is(.section-label,.kit-nav-heading) { color:var(--d-muted); }
html[data-kit-brand="refined"] .topbar .wordmark { font-family:var(--d-heading); font-weight:700; letter-spacing:-.01em; }
/* The phone's + is olive (KT-60242): terracotta stays the one act-now control, Done. */
html[data-kit-brand="refined"] .fab { background:var(--d-olive-ink); border-color:var(--d-olive-ink); color:var(--d-on-brand); }
html[data-kit-brand="refined"] .fab:hover { background:var(--d-ink); border-color:var(--d-ink); }
/* The Messages head (KT-60607): olive, sentence case, the heading face; its + olive with the nav's
   hover. The terracotta New message row retired with it: the Kit row's fox is the warm accent now. */
html[data-kit-brand="refined"] .kit-board .sidebar .messages-h { font-family:var(--d-heading); color:var(--d-olive-ink); }
html[data-kit-brand="refined"] .kit-board .sidebar .messages-new { color:var(--d-olive-ink); }
html[data-kit-brand="refined"] .kit-board .sidebar .messages-new:hover { background:rgba(var(--d-side-rgb),.08); }
html[data-kit-brand="refined"] .kit-board .main { background:var(--d-paper); }
html[data-kit-brand="refined"] .kit-board .view { max-width:var(--d-content); padding:32px 32px 80px; }
html[data-kit-brand="refined"] .kit-board .view-head { padding-bottom:24px; gap:14px; }
html[data-kit-brand="refined"] .kit-board .view-head h1 { font-family:var(--d-heading); font-size:2rem; font-weight:700; letter-spacing:-.01em; text-wrap:pretty; }
html[data-kit-brand="refined"] .kit-board .group-head { background:transparent; padding:10px 8px; color:var(--d-muted); }
html[data-kit-brand="refined"] .kit-board .card { box-shadow:var(--d-shadow); }
html[data-kit-brand="refined"] .kit-board .row { padding:var(--d-row) 18px; min-height:54px; gap:12px; }
html[data-kit-brand="refined"] .kit-board .row .title { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.5; font-size:0.9333rem; }
html[data-kit-brand="refined"] .kit-board .row .meta { gap:12px; }
html[data-kit-brand="refined"] .kit-board .row .ref { color:var(--d-soft); font-size:0.75rem; }
html[data-kit-brand="refined"] .kit-board .row .due { font-variant-numeric:tabular-nums; font-size:0.8rem; }
html[data-kit-brand="refined"] .kit-board .row .due.today { background:var(--d-wash); color:var(--d-brand); padding:4px 8px; border-radius:20px; }
html[data-kit-brand="refined"] .kit-board .status-btn { min-width:32px; min-height:32px; }
html[data-kit-brand="refined"] .kit-board .project-grid { gap:18px; }
html[data-kit-brand="refined"] .kit-board .project-card { padding:24px; min-height:165px; }
html[data-kit-brand="refined"] .kit-board .project-card h3 { font-size:1.4rem; letter-spacing:-.02em; }
html[data-kit-brand="refined"] :is(.btn,.chip,.project-card,.nav-item,.row,.kit-sr) { transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease; }
/* Focus is olive everywhere (KT-60305): terracotta stays on the one act-now control. */
html[data-kit-brand="refined"] :is(button,a,input,select,textarea):focus-visible { outline:2px solid var(--d-olive-ink); outline-offset:3px; }
/* The search box draws its own ring (:focus-within, ui/style.ts); a tap on the
   phone's Search tab drew this outline too, a second ring inside the box. */
html[data-kit-brand="refined"] .kit-search-box input:focus-visible { outline:none; }
html[data-kit-brand="refined"] .kit-board .panel-head { padding:18px 24px; }
html[data-kit-brand="refined"] .kit-board .panel-body { padding:24px; gap:20px; }
/* Refined: an airy, precise workspace with understated familiar structure. */
html[data-kit-brand="refined"] .kit-board .card { border-radius:10px; }
html[data-kit-brand="refined"] .kit-board .view-head h1 { font-size:1.8rem; font-weight:600; }
html[data-kit-brand="refined"] .kit-board .project-card h3 { font-family:var(--sans); font-size:1.2rem; }
/* The approved original fox, at its native 1254px resolution. Existing loading
   controllers still dismiss immediately. No animation event is intercepted. */
html[data-kit-brand="refined"] .wordmark img { content:url('/board/brand/sleeping-fox.png'); object-fit:contain; }
html[data-kit-brand="refined"] .wordmark img { width:32px; height:32px; }
html[data-kit-brand="refined"] .KitSplash__word { color:var(--d-ink); font:700 1.8667rem var(--d-heading); }
html[data-kit-brand="refined"] .boot>img { content:url('/board/brand/sleeping-fox.png'); width:88px; height:88px; animation:kit-fox-arrive 4.2s cubic-bezier(.16,1,.3,1) both; }
html[data-kit-brand="refined"] .kit-board .empty::before { content:''; display:block; width:68px; height:68px; background:url('/board/brand/sleeping-fox.png') center/contain no-repeat; margin:0 auto 20px; }
html[data-kit-brand="refined"] .kit-board .empty { border-style:solid; padding:42px 24px; background:var(--d-surface); }
/* The done moment (KT-60331, warmth floor level B): a small sleeping fox before the done line on
   Today and Your tasks. An image only: no focus, no count, no control of its own. */
html[data-kit-brand="refined"] :where(.today-receipt-btn, .tasks-fold[data-group="done"] .tasks-fold-l)::before { content:''; display:inline-block; flex:none; width:22px; height:22px; margin-right:8px; vertical-align:-5px; background:url('/board/brand/sleeping-fox.png') center/contain no-repeat; }
/* The receipt button is a flex row with a 6px gap already. */
html[data-kit-brand="refined"] .today-receipt-btn::before { margin-right:2px; }
@keyframes kit-fox-arrive { from { transform:rotate(-720deg); } to { transform:rotate(0deg); } }
@media(max-width:900px) {
  html[data-kit-brand="refined"] .kit-board .view { padding:24px 18px 84px; }
  html[data-kit-brand="refined"] .kit-board .row { padding:12px; }
  html[data-kit-brand="refined"] .kit-board .row .meta { gap:6px; }
  html[data-kit-brand="refined"] .kit-board .view-head h1 { font-size:1.8rem; }
  html[data-kit-brand="refined"] .kit-board .panel-body { padding:18px; }
}
@media(max-width:600px) {
  html[data-kit-brand="refined"] .kit-board .view { padding:20px 12px 90px; }
  html[data-kit-brand="refined"] .kit-board .view-head { padding-bottom:18px; }
  html[data-kit-brand="refined"] .kit-board .row .title { font-size:0.9333rem; -webkit-line-clamp:3; }
  html[data-kit-brand="refined"] .kit-board .status-btn { min-width:40px; min-height:40px; }
  html[data-kit-brand="refined"] .kit-board .project-card { padding:20px; min-height:145px; }
  html[data-kit-brand="refined"] .kit-board .panel-head { padding:14px 16px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-kit-brand="refined"] *,html[data-kit-brand="refined"] *::before,html[data-kit-brand="refined"] *::after { scroll-behavior:auto !important; transition:none !important; }
  html[data-kit-brand="refined"] .boot>img,html[data-kit-brand="refined"] .msg-typing::before { animation:none !important; transform:none !important; }
  html[data-kit-brand="refined"] :is(.panel,.toast,.overlay) { animation:none !important; }
}
/* Calendars, schedules and tools deliberately ask for a wider working
   surface than a task list. Preserve that current-app layout contract. */
html[data-kit-brand="refined"] .kit-board .view.wide { max-width:1440px; }
/* Today (KT-60285): its own width and one inset (the view's), not the view's plus the page's. */
html[data-kit-brand="refined"] .kit-board .view.today-view { max-width:var(--d-today-w); padding-left:40px; padding-right:40px; }
@media(max-width:899px) { html[data-kit-brand="refined"] .kit-board .view.today-view { padding-left:16px; padding-right:16px; } }


/* Approved splash motion: body-centered, three turns with a gentle swell.
   Loaded in the document head so refreshes use this before app JavaScript. */
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art { position: relative; --kitsune-splash-duration: 3200ms; --kitsune-moon-duration: var(--kitsune-splash-duration); }
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__fox { display: block; position: relative; top: -5.28px; transform-origin: 50% 54%; width: 132px; height: 132px; object-fit: contain; animation: kit-splash-body-spin var(--kitsune-splash-duration) cubic-bezier(.3,0,.7,1) both, kit-splash-body-swell var(--kitsune-splash-duration) ease-in-out both; }
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon { position: absolute; top: -14px; right: -32px; width: 26px; height: 26px; border-radius: 50%; box-shadow: -7px 3px 0 #c7b984; transform: rotate(-24deg); animation: kit-splash-moon-glow var(--kitsune-moon-duration) ease-in-out both; }
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon::before { content: ''; position: absolute; inset: -24px; border-radius: 50%; background: radial-gradient(circle, #e3ca8b55 0%, #e9d6a32b 32%, #eddfba10 52%, transparent 72%); opacity: .2; transform: scale(.9); animation: kit-splash-moon-halo var(--kitsune-moon-duration) ease-in-out both; }
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon::after { content: ''; position: absolute; top: -8px; right: -10px; width: 9px; height: 9px; background: radial-gradient(circle, #e0ca91 0%, #bdab78 55%, #bdab7800 100%); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: kit-splash-moon-twinkle var(--kitsune-moon-duration) ease-in-out both; }
@keyframes kit-splash-body-spin { from { transform: rotate(-1080deg); } to { transform: rotate(0deg); } }
@keyframes kit-splash-body-swell {
    0%, 100% { scale: 1; }
    50% { scale: 1.08; }
}
@keyframes kit-splash-moon-glow {
    0%, 100% { filter: drop-shadow(0 0 2px #d5bd7e22); transform: rotate(-24deg) scale(1); }
    45%, 55% { filter: drop-shadow(0 0 8px #d5bd7e66); transform: rotate(-24deg) scale(1.035); }
}
@keyframes kit-splash-moon-halo {
    0%, 100% { opacity: .2; transform: scale(.9); }
    45%, 55% { opacity: .7; transform: scale(1.08); }
}
@keyframes kit-splash-moon-twinkle {
    0%, 100% { opacity: 0; transform: scale(.9); }
    45%, 55% { opacity: .65; transform: scale(1.05); }
}
/* brand.js reveals the decoded image, preventing partially downloaded ears
   from spinning on slow connections. Keep the layout and moon visible. */
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art:not([data-kit-splash-ready]) .KitSplash__fox { visibility: hidden; }
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art:not([data-kit-splash-ready]) .KitSplash__fox,
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art:not([data-kit-splash-ready]) .KitSplash__moon,
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art:not([data-kit-splash-ready]) .KitSplash__moon::before,
html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__art:not([data-kit-splash-ready]) .KitSplash__moon::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
    html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__fox,
    html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon,
    html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon::before,
    html[data-kit-brand="refined"] #initialPageLoadingAnimation .KitSplash__moon::after { animation: none; }
}

/* ---------- Task page, B3 (PK-51744) ----------
   A sage band (orbit check, title, chips) whose foot holds Where it stands and
   Next step; Links & files; folded notes; the thread; Came from. No coloured
   card edges: sage and olive carry structure, terracotta marks what is due. */
html[data-kit-brand="refined"] .kit-board .view.task-page { max-width:var(--d-content); }
.kit-board .task-page .tp-wrap { max-width:800px; margin:0 auto; }
.kit-board .task-page .view-head { max-width:800px; margin:0 auto; width:100%; }
.kit-board .task-page .tp-back-row { max-width:800px; margin:0 auto; width:100%; }
.tp-title-row { display:flex; flex-wrap:wrap; align-items:flex-start; gap:4px 12px; }
.tp-title-row .tp-title { flex:1 1 260px; width:auto; min-width:0; }
.tp-title-row .head-actions { margin-top:6px; }
/* With Pin to den (KT-60629) a phone's row holds three: each keeps its words on one line, and the row wraps instead. */
.tp-title-row .head-actions { flex-wrap:wrap; }
.tp-title-row .head-actions .btn { white-space:nowrap; }
.tp-band { background:var(--d-sage); border:1px solid var(--d-sage-edge); border-radius:18px; padding:22px 26px 0; overflow:hidden; }
.tp-head { display:grid; grid-template-columns:52px minmax(0,1fr); gap:18px; align-items:start; padding-bottom:20px; }
.tp-eyebrow { font-size:0.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--d-olive-ink); margin:2px 0 4px; }
.tp-eyebrow a { color:inherit; }
.tp-eyebrow a:hover { text-decoration:underline; text-underline-offset:3px; }
.tp-title { display:block; width:calc(100% + 12px); margin:0 -6px; padding:2px 6px; font:650 2.2667rem/1.12 var(--d-heading); letter-spacing:-.015em; text-wrap:pretty; color:var(--d-ink); background:none; border:1px solid transparent; border-radius:10px; resize:none; overflow:hidden; }
.tp-title:hover:not(:disabled) { border-color:var(--d-sage-edge); background:rgba(var(--d-surface-rgb),.5); }
.tp-title:focus { border-color:var(--d-olive); background:var(--d-surface); outline:none; }
.tp-title:disabled { opacity:1; -webkit-text-fill-color:var(--d-ink); }
.tp-title.closed { color:var(--d-muted); -webkit-text-fill-color:var(--d-muted); text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:rgba(var(--d-olive-rgb),.45); }

/* The orbit check: tap = done. Its arc is the checklist's progress. */
.tp-orbit-col { display:flex; flex-direction:column; align-items:center; }
.tp-orbit { width:52px; height:52px; position:relative; margin-top:2px; padding:0; border:0; background:none; border-radius:50%; cursor:pointer; }
span.tp-orbit { cursor:default; }
.tp-orbit svg { position:absolute; inset:0; width:52px; height:52px; fill:none; }
.tp-orbit .track { stroke:rgba(var(--d-olive-rgb),.22); stroke-width:1.5; }
.tp-orbit .arc { stroke:var(--d-olive); stroke-width:2.5; stroke-linecap:round; transition:stroke-dasharray 300ms cubic-bezier(.2,.8,.2,1); }
.tp-orbit .core { position:absolute; inset:9px; border-radius:50%; border:1.5px solid var(--d-ring); background:var(--d-surface); transition:background-color 160ms ease,border-color 160ms ease; }
button.tp-orbit:hover .core { border-color:var(--d-olive); background:rgba(var(--d-olive-rgb),.08); }
.tp-orbit.done .core { background:var(--d-olive); border-color:var(--d-olive); }
.tp-orbit.done .core::after { content:''; position:absolute; left:12px; top:7px; width:7px; height:14px; border:solid var(--d-surface); border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.tp-orbit-label { font-size:0.75rem; color:var(--d-olive-ink); margin-top:3px; font-variant-numeric:tabular-nums; }

/* Chips: tap to change. Label in soft ink, value in ink. */
.tp-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; align-items:center; }
.tp-chip { display:inline-flex; align-items:center; gap:6px; min-height:30px; background:var(--d-surface); border:1px solid rgba(var(--d-ink-rgb),.14); border-radius:999px; padding:4px 11px; font:0.8667rem/1.2 var(--d-body); color:var(--d-ink); }
button.tp-chip { cursor:pointer; }
button.tp-chip:hover, button.tp-chip[aria-expanded="true"] { border-color:rgba(var(--d-olive-rgb),.55); }
.tp-chip .k { color:var(--d-soft); }
.tp-chip.unset .v { color:var(--d-soft); }
.tp-chip .avatar { width:18px; height:18px; font-size:8.5px; }
/* KT-60160: terracotta is the one act-now control; a near due date, the note's links and the
   desktop Comment read olive, as the phone's Comment already does (KT-60170). */
.tp-chip.soon { background:var(--d-surface); border-color:rgba(var(--d-olive-rgb),.55); color:var(--d-olive-ink); font-weight:600; }
.tp-chip.soon small { font-weight:400; color:var(--d-olive-ink); font-size:0.8rem; }
.tp-notepad .md a { color:var(--d-olive-ink); text-decoration-color:rgba(var(--d-olive-rgb),.45); }
.tp-activity .composer > .btn.primary { background:var(--d-sage); color:var(--d-olive-ink); border-color:var(--d-sage-edge); }
.tp-activity .composer > .btn.primary:hover { background:var(--d-sage); border-color:rgba(var(--d-olive-rgb),.55); }
.tp-chip.status.quiet { background:transparent; border-color:transparent; color:var(--d-olive-ink); padding:4px 8px; }
.tp-chip.status.quiet:hover { background:rgba(var(--d-surface-rgb),.6); }
.tp-chip.tag { background:transparent; border-style:dashed; color:var(--d-muted); }
.tp-chip.tag:has(.tag-x) { padding-right:4px; gap:2px; }
.tp-chip .tag-x { display:inline-grid; place-items:center; width:22px; height:22px; border:0; border-radius:999px; background:transparent; color:var(--d-soft); font:1rem/1 var(--d-body); cursor:pointer; }
.tp-chip .tag-x:hover, .tp-chip .tag-x:focus-visible { background:rgba(var(--d-ink-rgb),.08); color:var(--d-ink); }
/* KT-60407 S4 · H1, the iOS web view only: the due line and the owner as plain text, the rest behind a quiet
   "Details". The same chips (tappable, same pickers); only the outline goes on the first two. */
body.embed-mobile .tp-chips.tp-h1 { gap:0 16px; margin-top:8px; }
body.embed-mobile .tp-h1 > .tp-chip.due, body.embed-mobile .tp-h1 > .tp-chip.who { background:transparent; border-color:transparent; padding:0; min-height:44px; font-weight:400; color:var(--d-ink); }
body.embed-mobile .tp-h1 > .tp-chip.due svg { color:var(--d-olive-ink); flex:none; }
body.embed-mobile .tp-h1 > .tp-chip.due.soon, body.embed-mobile .tp-h1 > .tp-chip.due.soon small { color:var(--d-olive-ink); font-weight:400; }
body.embed-mobile .tp-h1 > button.tp-chip.due:hover, body.embed-mobile .tp-h1 > button.tp-chip.who:hover { border-color:transparent; }
body.embed-mobile .tp-h1 > .tp-chip.who .avatar { width:22px; height:22px; font-size:9px; }
.tp-details-toggle { flex-basis:100%; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0; border:0; background:none; font:0.8667rem var(--d-body); color:var(--d-muted); cursor:pointer; justify-content:flex-start; }
.tp-details-toggle svg { transition:transform .15s ease; }
.tp-details-toggle[aria-expanded="true"] svg { transform:rotate(90deg); }
.tp-details { flex-basis:100%; display:flex; flex-wrap:wrap; gap:6px; padding-bottom:4px; }
.tp-details[hidden] { display:none; }
@media (prefers-reduced-motion: reduce) { .tp-details-toggle svg { transition:none; } }

/* The band's foot: the latest word beside the next step. */
.tp-now { margin:0 -26px; background:var(--d-surface); border-top:1px solid var(--d-sage-edge); display:grid; grid-template-columns:1.35fr 1fr; }
.tp-now[hidden] { display:none; }
.tp-now.one { grid-template-columns:1fr; }
.tp-now > div { padding:16px 22px 18px 26px; min-width:0; }
.tp-now > div + div { border-left:1px solid rgba(var(--d-ink-rgb),.09); padding-left:22px; }
.tp-now h3 { margin:0 0 7px; font-size:0.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--d-olive-ink); }
.tp-latest { border-left:2px solid var(--d-olive); padding-left:11px; }
.tp-latest p { margin:0; font-size:0.9333rem; line-height:1.55; white-space:pre-line; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.tp-latest .by { display:block; font-size:0.8rem; color:var(--d-soft); margin-top:5px; }
.tp-latest .by a { color:var(--d-olive-ink); text-decoration:underline; text-underline-offset:3px; }
/* KT-60407 S4: the folded session's link sits under its outcome line, for the session's owner alone. */
.tp-latest .tp-conv-link { display:inline-block; margin-top:2px; font-size:0.8rem; color:var(--d-olive-ink); text-decoration:underline; text-underline-offset:3px; }
.tp-step { display:flex; gap:10px; align-items:flex-start; font-size:0.9667rem; line-height:1.45; cursor:pointer; }
.tp-next-more { font-size:0.8rem; color:var(--d-soft); margin:8px 0 0 28px; }

/* Sections under the band */
.tp-section { margin-top:28px; }
.tp-sec-h { display:flex; align-items:center; gap:10px; margin:0 0 10px; font-size:0.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--d-muted); }
.tp-aside { margin-left:auto; padding:2px 4px; border:0; background:none; letter-spacing:0; text-transform:none; font:500 0.8333rem var(--d-body); color:var(--d-olive-ink); cursor:pointer; }
.tp-aside:hover { text-decoration:underline; text-underline-offset:3px; }

/* Links & files: one row of resources. The attachments module draws its own
   box; here it joins the row, and its heading gives way to the section's. */
.tp-links { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tp-links > .tp-sec-h { flex-basis:100%; }
.tp-link-row { display:contents; }
.tp-res, .tp-links .file-attachment a { display:inline-flex; align-items:center; gap:9px; max-width:100%; border:1px solid rgba(var(--d-ink-rgb),.14); background:var(--d-surface); border-radius:10px; padding:7px 12px 7px 8px; font-size:0.9rem; color:var(--d-ink); text-decoration:none; }
.tp-res:hover, .tp-links .file-attachment a:hover { border-color:rgba(var(--d-olive-rgb),.55); }
.tp-res .ic { width:24px; height:24px; border-radius:6px; background:rgba(var(--d-olive-rgb),.13); color:var(--d-olive-ink); display:grid; place-items:center; font-size:11px; font-weight:700; flex-shrink:0; }
.tp-res .t { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.tp-res small { color:var(--d-soft); font-size:0.8rem; }
.tp-links .files-related { display:contents; }
.tp-links .files-related > h3 { display:none; }
.tp-links .files-related > p { margin:0; }
.tp-links .file-attachment a::before { content:'FILE'; width:24px; height:24px; border-radius:6px; background:var(--d-wash); color:var(--d-brand); display:grid; place-items:center; font-size:7.5px; font-weight:700; letter-spacing:.02em; flex-shrink:0; }
.tp-links .files-related > .btn { border:1px dashed rgba(var(--d-ink-rgb),.22); background:none; border-radius:10px; padding:7px 12px; font-size:0.8667rem; color:var(--d-muted); box-shadow:none; }
.tp-links .files-related > .btn:hover { color:var(--d-ink); border-color:rgba(var(--d-olive-rgb),.55); }
.tp-links .file-folder { margin:0; max-width:100%; }
.tp-links .file-folder > summary { display:inline-flex; max-width:100%; border:1px solid rgba(var(--d-ink-rgb),.14); background:var(--d-surface); border-radius:10px; padding:7px 12px 7px 8px; font-size:0.9rem; gap:9px; }
.tp-links .file-folder > summary:hover { border-color:rgba(var(--d-olive-rgb),.55); }
.tp-links .file-folder[open] { flex-basis:100%; }
.tp-links .file-folder[open] > summary { border-color:var(--d-sage-edge); background:var(--d-sage); }
.tp-links .file-folder-name { max-width:260px; }

/* Connected tasks (PK-51748): the tasks the notes cite, each with its live status. */
.tp-linked { border:1px solid rgba(var(--d-ink-rgb),.14); background:var(--d-surface); border-radius:12px; }
.tp-linked .lt { display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:0.9rem; border-bottom:1px solid rgba(var(--d-ink-rgb),.09); }
.tp-linked .lt:last-child { border-bottom:0; }
.tp-linked .rel { font-size:0.7667rem; color:var(--d-soft); width:76px; flex-shrink:0; }
.tp-linked .t { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--d-ink); text-decoration:none; }
.tp-linked .t:hover { text-decoration:underline; text-underline-offset:3px; }
.tp-linked .st { font-size:0.8rem; color:var(--d-muted); white-space:nowrap; }
.tp-linked .st.ok { color:var(--d-olive-ink); }
.tp-linked .st.late { color:var(--d-brand); }
@media(max-width:640px) { .tp-linked .rel { width:auto; } .tp-linked .lt { flex-wrap:wrap; row-gap:2px; } .tp-linked .t { flex-basis:100%; order:2; } }

/* Notes: a document, folded past a screenful. The rich field's own label and
   Edit give way to the section's; its reading view is the notepad. */
.tp-notepad .rich-head { display:none; }
.tp-notepad .rich-view { background:var(--d-surface); border:1px solid rgba(var(--d-ink-rgb),.14); border-radius:14px; padding:16px 24px; position:relative; }
.tp-notepad .rich-view:hover { border-color:rgba(var(--d-olive-rgb),.55); }
.tp-notepad .rich-view.ro { background:var(--d-surface); }
.tp-notepad.folded .rich-view { max-height:250px; overflow:hidden; }
.tp-notepad.folded .rich-view::after { content:''; position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(transparent,var(--d-surface)); pointer-events:none; }
/* Note boxes are the orbit's small round checks, as on the Next step. */
.tp-notepad .md li.task > input, .tp-step input { appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:1px 0 0; border-radius:50%; border:1.5px solid var(--d-ring); background:var(--d-surface); flex-shrink:0; position:relative; cursor:pointer; }
.tp-notepad .md li.task > input { margin-top:.12em; }
.tp-notepad .md li.task > input:hover:not(:disabled), .tp-step input:hover:not(:disabled) { border-color:var(--d-olive); }
.tp-notepad .md li.task > input:checked, .tp-step input:checked { background:var(--d-olive); border-color:var(--d-olive); }
.tp-notepad .md li.task > input:checked::after, .tp-step input:checked::after { content:''; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid var(--d-surface); border-width:0 2px 2px 0; transform:rotate(45deg); }
.tp-notepad .md li.task > input:disabled, .tp-step input:disabled { cursor:default; }
.tp-unfold { display:block; margin:8px auto 0; border:0; background:none; font:0.8667rem var(--d-body); color:var(--d-olive-ink); cursor:pointer; }
.tp-unfold[hidden] { display:none; }
.tp-unfold:hover { text-decoration:underline; text-underline-offset:3px; }
.tp-notes .savebar { margin-top:10px; }

/* Activity: the thread, newest last; Kit's own words get the olive rule. */
.tp-activity .comments { border-top:0; padding-top:0; }
.tp-activity .comments-head { display:none; }
.avatar.kit { background:radial-gradient(circle at 40% 40%,#c8653b,var(--d-brand)); color:var(--d-on-brand); }
.tp-activity .comment.by-kit .who { color:var(--d-olive-ink); }
.comment-earlier { align-self:flex-start; border:0; background:none; padding:2px 0; font:0.8333rem var(--d-body); color:var(--d-olive-ink); cursor:pointer; }
.comment-earlier:hover { text-decoration:underline; text-underline-offset:3px; }

/* Working with Kit (PK-51692, direction B): a sage block off the thread's
   spine, the island inside it; olive receipts and chips for what Kit changed;
   the outcome comment folds the conversation; Wrap up is a sheet. Terracotta
   stays the one call to act (Post). */
.tp-kit-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 40% 40%,#c8653b,var(--d-brand)); flex-shrink:0; }
.tp-kit-link { display:inline-flex; align-items:center; gap:7px; margin:10px 0 0 28px; padding:0 0 1px; border:0; border-bottom:1px solid rgba(var(--d-olive-rgb),.4); background:none; font:0.8667rem var(--d-body); color:var(--d-olive-ink); cursor:pointer; }
.tp-kit-link:hover { border-bottom-color:var(--d-olive); color:var(--d-ink); }
.tp-kit-start { display:inline-flex; align-items:center; gap:7px; }
.tp-session { margin:14px 0 4px; background:var(--d-sage); border:1px solid var(--d-sage-edge); border-radius:16px; padding:12px 12px 10px; }
.tp-session[hidden] { display:none; }
.tp-session-head { display:flex; align-items:center; gap:8px; padding:0 4px 10px; font-size:0.8667rem; color:var(--d-ink); }
.tp-session-note { margin-left:auto; font-size:0.8rem; color:var(--d-olive-ink); }
.tp-session-chat { background:var(--d-surface); border:1px solid rgba(var(--d-ink-rgb),.1); border-radius:12px; height:min(520px,62vh); overflow:hidden; display:flex; flex-direction:column; }
.tp-session-chat > * { flex:1; min-height:0; }
.tp-session-foot { display:flex; justify-content:flex-end; padding:8px 2px 0; }
.tp-change { display:inline-flex; align-items:center; gap:6px; background:var(--d-surface); border:1px solid var(--d-sage-edge); border-radius:999px; padding:3px 10px; font-size:0.8rem; color:var(--d-olive-ink); }
.tp-changes { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tp-foldbar { display:block; margin-top:6px; padding:0; border:0; background:none; font:0.8333rem var(--d-body); color:var(--d-olive-ink); cursor:pointer; }
.tp-foldbar::before { content:'\2022'; margin-right:7px; color:var(--d-ring); }
.tp-foldbar:hover { text-decoration:underline; text-underline-offset:3px; }
.tp-folded { margin-top:8px; border-left:2px solid var(--d-sage-edge); padding:2px 0 2px 12px; display:flex; flex-direction:column; gap:8px; font-size:0.9rem; line-height:1.5; }
.tp-folded-line { display:flex; flex-direction:column; }
.tp-folded-line b { font-size:0.8rem; font-weight:600; color:var(--d-muted); }
.tp-folded-line.kit b { color:var(--d-olive-ink); }
.tp-folded-line .md > :first-child { margin-top:0; }
.tp-folded-line .md > :last-child { margin-bottom:0; }
.tp-folded-photos { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.tp-folded-photo { width:64px; height:64px; padding:0; border:1px solid var(--d-sage-edge); border-radius:8px; overflow:hidden; background:var(--d-sage); cursor:zoom-in; }
.tp-folded-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.tp-activity .comment.glow { animation:tp-glow 1.6s ease-out 1; border-radius:10px; }
@keyframes tp-glow { from { background:rgba(var(--d-olive-rgb),.18); } to { background:transparent; } }
.tp-sheet-backdrop { position:fixed; inset:0; z-index:60; background:rgba(var(--d-shade-rgb),.28); display:grid; place-items:center; padding:16px; }
.tp-sheet { width:min(520px,100%); background:var(--d-surface); border:1px solid var(--d-line); border-radius:18px; padding:20px 22px 18px; box-shadow:0 18px 50px -20px rgba(var(--d-shade-rgb),.5); }
.tp-sheet h3 { margin:0 0 4px; font:600 1.1333rem var(--d-heading); color:var(--d-ink); }
/* Short enough for one line at 390 (KT-60173); it wraps rather than widen the sheet at larger text. */
.tp-sheet-sub { margin:0 0 12px; font-size:0.8333rem; color:var(--d-soft); }
/* The draft as it will post (PK-51839), in one card with Edit in its header
   (KT-60173); a draft taller than the card fades at the foot until scrolled. */
.tp-sheet-card { border:1px solid rgba(var(--d-ink-rgb),.12); border-radius:12px; background:var(--d-surface); overflow:hidden; }
.tp-sheet-card:focus-within { border-color:var(--d-olive); }
.tp-sheet-card-head { display:flex; align-items:center; justify-content:space-between; padding:7px 12px 6px; border-bottom:1px solid rgba(var(--d-ink-rgb),.08); font:600 0.8rem var(--d-body); color:var(--d-olive-ink); }
.tp-sheet-draft { display:block; width:100%; box-sizing:border-box; min-height:110px; resize:vertical; border:0; border-radius:0; padding:10px 12px; font:0.9333rem/1.5 var(--d-body); color:var(--d-ink); background:var(--d-surface); }
.tp-sheet-draft:focus { outline:none; box-shadow:none; }
.tp-sheet-draft[hidden], .tp-sheet-preview[hidden] { display:none; }
.tp-sheet-edit { position:relative; padding:2px 0; border:0; background:none; font:600 0.8333rem var(--d-body); color:var(--d-olive-ink); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
/* A 44pt tap target around the small link. */
.tp-sheet-edit::after { content:''; position:absolute; inset:-12px -12px; }
.tp-sheet-preview { max-height:min(40vh,320px); overflow:auto; padding:10px 12px; font:0.9333rem/1.5 var(--d-body); color:var(--d-ink); overflow-wrap:anywhere; }
.tp-sheet-preview.more { -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent); }
.tp-sheet-preview .md > :first-child { margin-top:0; }
.tp-sheet-preview .md > :last-child { margin-bottom:0; }
.tp-sheet-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.tp-sheet-chips[hidden] { display:none; }
.tp-sheet-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
@media (prefers-reduced-motion: reduce) { .tp-activity .comment.glow { animation:none; background:rgba(var(--d-olive-rgb),.12); } }
/* Phone (PK-51692 S8; c-phone.html): a bar fixed to the bottom of the task page,
   the session full screen with the task pinned in a strip, Wrap up as a bottom sheet. */
.tp-session-strip, .tp-phonebar { display:none; }
.tp-session.full { position:fixed; inset:0; z-index:55; margin:0; border:0; border-radius:0; display:flex; flex-direction:column; padding:0 0 env(safe-area-inset-bottom); }
.tp-session.full[hidden] { display:none; }
.tp-session.full .tp-session-strip { display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 14px 10px 6px; background:var(--d-surface); border-bottom:1px solid var(--d-sage-edge); }
.tp-session.full .tp-session-head { padding:10px 14px 8px; }
.tp-session.full .tp-session-note { display:none; }
.tp-session.full .tp-session-chat { flex:1; height:auto; margin:0 10px; }
.tp-session.full .tp-session-foot { padding:8px 12px 10px; }
.tp-session-back { border:0; background:none; font:28px/1 var(--d-body); color:var(--d-olive-ink); padding:0 8px; cursor:pointer; }
.tp-session-strip-text { flex:1; min-width:0; display:flex; flex-direction:column; }
.tp-session-back-label { display:none; }
body.embed-mobile .tp-session-strip-text { display:none; }
body.embed-mobile .tp-session-back { flex:1; display:flex; align-items:center; gap:6px; text-align:left; }
body.embed-mobile .tp-session-back-label { display:inline; font:500 15px var(--d-body); color:var(--d-ink); }
.tp-session-strip-text b { font:600 12px var(--d-body); color:var(--d-olive-ink); }
.tp-session-strip-text span { font-size:14px; color:var(--d-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp-session-ring { --p:0; flex-shrink:0; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font:600 11px var(--d-body); color:var(--d-olive-ink);
  background:radial-gradient(closest-side,var(--d-surface) 76%,transparent 78% 100%),conic-gradient(var(--d-olive) calc(var(--p)*100%),rgba(var(--d-ink-rgb),.1) 0); transition:--p .4s; }
.tp-session-ring[hidden] { display:none; }
.tp-session-strip.flash { animation:tp-strip-flash 1.2s ease-out 1; }
@keyframes tp-strip-flash { 0% { background:rgba(var(--d-olive-rgb),.28); } 100% { background:var(--d-surface); } }
body.tp-session-open { overflow:hidden; }
/* A task Kit names opens its preview over the session, and a toast shows above both. */
body.tp-session-open .overlay { z-index:58; }
body.tp-session-open .toast { z-index:75; }
body.tp-session-open .tp-phonebar { display:none !important; }
@media (max-width: 719px) {
  .tp-phonebar { display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--d-surface); border-top:1px solid var(--d-line); }
  .tp-phonebar .btn { flex:0 0 auto; justify-content:center; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
  .tp-phonebar .tp-phonebar-kit { flex:1; }
  body:has(.has-phonebar) .fab { display:none; }
  .tp-phonebar-kit.resume { background:var(--d-sage); color:var(--d-olive-ink); border-color:var(--d-sage-edge); }
  .has-phonebar { padding-bottom:84px; }
  .tp-kit-start, .tp-kit-link { display:none; }
  .has-phonebar .composer > .btn.primary { background:var(--d-sage); color:var(--d-olive-ink); border-color:var(--d-sage-edge); }
}
body.embed-mobile .tp-phonebar { display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:40; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--d-surface); border-top:1px solid var(--d-line); }
body.embed-mobile .tp-phonebar .btn { flex:0 0 auto; justify-content:center; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
body.embed-mobile .tp-phonebar .tp-phonebar-kit { flex:1; }
/* KT-60718: at large text "Working with Kit · Resume" ends in … instead of running off the screen. */
.tp-phonebar .tp-phonebar-kit { min-width:0; }
.tp-phonebar .tp-phonebar-kit > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
body.embed-mobile:has(.has-phonebar) .fab { display:none; }
/* KT-60407 S4: the iOS web view's task page has no bar; its + stays away as it did under the bar. */
body.embed-mobile:has(.no-fab) .fab { display:none; }
body.embed-mobile .has-phonebar { padding-bottom:84px; }
body.embed-mobile .tp-kit-start, body.embed-mobile .tp-kit-link { display:none; }
/* KT-60170: the bar keeps the one terracotta; the comment box's own Comment is sage. */
body.embed-mobile .has-phonebar .composer > .btn.primary { background:var(--d-sage); color:var(--d-olive-ink); border-color:var(--d-sage-edge); }
.tp-sheet-backdrop.bottom { place-items:end stretch; padding:0; z-index:70; }
.tp-sheet-backdrop.bottom .tp-sheet { width:100%; box-sizing:border-box; border-radius:18px 18px 0 0; border-bottom:0; padding:18px 18px calc(16px + env(safe-area-inset-bottom)); animation:tp-sheet-up .22s ease-out 1; }
@keyframes tp-sheet-up { from { transform:translateY(40px); opacity:.4; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .tp-session-strip.flash, .tp-sheet-backdrop.bottom .tp-sheet { animation:none; } }
/* iOS zooms the page into any text field under 16px and leaves it zoomed (the
   15px chat composer and the 14px outcome draft did, live on the phone,
   2026-10-08): on a touch screen the session's fields are 16px. */
@media (pointer: coarse) {
  .tp-session-chat textarea, .tp-session-chat input, .tp-sheet-draft { font-size:16px !important; }
}
body.embed-mobile .tp-session-chat textarea, body.embed-mobile .tp-session-chat input, body.embed-mobile .tp-sheet-draft { font-size:16px !important; }

.tp-origin { margin-top:28px; padding-top:12px; border-top:1px solid rgba(var(--d-ink-rgb),.09); font-size:0.8rem; color:var(--d-soft); }
.tp-origin b { font-weight:600; color:var(--d-muted); }

/* The chip pickers reuse the menu card; the chosen row is olive. */
.tp-menu { min-width:220px; max-height:min(420px,70vh); overflow:auto; }
.tp-menu .me-menu-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; }
.tp-menu .me-menu-item small { margin-left:auto; color:var(--d-soft); font-size:0.8rem; }
.tp-menu .me-menu-item.on { color:var(--d-olive-ink); font-weight:600; background:rgba(var(--d-olive-rgb),.11); }
.tp-menu-head { padding:8px 10px 4px; font-size:0.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--d-soft); }
.tp-menu-rule { height:1px; background:var(--d-line); margin:4px 0; }
.tp-menu-date input { margin-left:auto; font-size:0.8333rem; padding:2px 4px; border:1px solid var(--d-line); border-radius:6px; background:var(--d-surface); }
/* "Someone else…" (KT-60505): 16px so the phone does not zoom in on focus; an olive ring, never terracotta. */
.tp-menu-text { padding:4px 8px; }
.tp-menu-text input { width:100%; box-sizing:border-box; font:inherit; font-size:1rem; padding:6px 8px; border:1px solid var(--d-line); border-radius:6px; background:var(--d-surface); color:inherit; }
.tp-menu-text input:focus { outline:2px solid rgba(var(--d-olive-rgb),.45); outline-offset:1px; border-color:transparent; }

@media(max-width:640px) {
  .tp-band { padding:18px 16px 0; border-radius:14px; }
  .tp-head { grid-template-columns:44px minmax(0,1fr); gap:12px; }
  .tp-orbit, .tp-orbit svg { width:44px; height:44px; }
  .tp-orbit .core { inset:7px; }
  .tp-orbit.done .core::after { left:10px; top:5px; }
  .tp-title { font-size:1.7333rem; }
  .tp-now { margin:0 -16px; grid-template-columns:1fr; }
  .tp-now > div { padding:14px 16px; }
  .tp-now > div + div { border-left:0; border-top:1px solid rgba(var(--d-ink-rgb),.09); padding-left:16px; }
  .tp-notepad .rich-view { padding:14px 16px; }
  .tp-res .t { max-width:180px; }
}
@media(prefers-reduced-motion:reduce) { .tp-orbit .arc { transition:none; } }

/* The side panel (PK-51749): the same pieces in one column — the phone's band, Where it stands
   over Next step, a smaller title. The panel's head carries the ref, sharing and Copy link. */
.panel.issue .tp-wrap { min-width:0; }
.panel.issue .tp-band { padding:18px 18px 0; border-radius:14px; }
.panel.issue .tp-head { grid-template-columns:44px minmax(0,1fr); gap:14px; padding-bottom:16px; }
.panel.issue .tp-orbit, .panel.issue .tp-orbit svg { width:44px; height:44px; }
.panel.issue .tp-orbit .core { inset:7px; }
.panel.issue .tp-orbit.done .core::after { left:10px; top:5px; }
.panel.issue .tp-title { font-size:1.7333rem; }
.panel.issue .tp-now { margin:0 -18px; grid-template-columns:1fr; }
.panel.issue .tp-now > div { padding:14px 18px; }
.panel.issue .tp-now > div + div { border-left:0; border-top:1px solid rgba(var(--d-ink-rgb),.09); padding-left:18px; }
.panel.issue .tp-section { margin-top:22px; }
.panel.issue .tp-notepad .rich-view { padding:14px 18px; }
.panel.issue .tp-res .t { max-width:200px; }
.panel.issue .tp-origin { margin-top:22px; }
/* KT-60718: at the phone's large text the title stops at 1.25x, as Today's headings do (KT-60721).
   Beside the 44px ring it had ~250px, so 2x read one word per line. */
html[data-kit-text] { --tp-title-k:calc(min(var(--kit-text-scale, 1), 1.25) / var(--kit-text-scale, 1)); }
html[data-kit-text] .tp-title { font-size:calc(2.2667rem * var(--tp-title-k)); }
@media(max-width:640px) { html[data-kit-text] .tp-title { font-size:calc(1.7333rem * var(--tp-title-k)); } }
html[data-kit-text] .panel.issue .tp-title { font-size:calc(1.7333rem * var(--tp-title-k)); }
/* A chip too wide for its row wraps its pieces under each other ("· 3 days late" on a line of its
   own), not into side-by-side columns a word wide. */
.tp-chip { flex-wrap:wrap; row-gap:0; }

/* ---------- Tasks list, R2b "Today first" (KT-60500) ----------
   "Your tasks" under a sentence-case date line, Find and person chips (Mine /
   Everyone for a lone adult or a kid, KT-60698); count chips instead of a lede. Today is the one white
   card; Late and This week sit on the paper; Waiting on others is a sage box.
   Wide, Waiting and the folds stand in a right column. Plain circles, no ring, no
   terracotta. Hover reveals only under (hover: hover), so a phone's first tap is
   never swallowed. */
.kit-board .tasks-view .view-head, .kit-board .tasks-view .tasks-body { max-width:1000px; margin-left:auto; margin-right:auto; width:100%; }
.kit-board .tasks-view .tasks-head { align-items:flex-end; padding-bottom:0; flex-wrap:wrap; }
.tasks-date { font-size:0.8667rem; font-weight:500; text-transform:none; letter-spacing:0; color:var(--d-olive-ink); margin-bottom:4px; }
html[data-kit-brand="refined"] .kit-board .tasks-view .view-head h1 { font-size:2.5333rem; font-weight:500; line-height:1.05; letter-spacing:-.03em; margin:0; }
.tasks-find { font:inherit; font-size:0.8667rem; color:var(--d-ink); width:170px; padding:4px 2px; border:0; border-bottom:1px solid rgba(var(--d-ink-rgb),.13); background:none; border-radius:0; }
.tasks-find::placeholder { color:var(--d-soft); }
.tasks-find:focus { outline:none; border-bottom-color:var(--d-olive); }
.tasks-head .seg { background:rgba(var(--d-olive-rgb),.10); border-radius:10px; padding:3px; gap:2px; }
.tasks-head .seg button { color:var(--d-olive-ink); padding:5px 13px; }
.tasks-head .seg button[aria-pressed="true"] { background:var(--d-surface); color:var(--d-ink); font-weight:500; }
.tasks-people { display:flex; gap:6px; flex-wrap:wrap; }
.tasks-person { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:0.9rem; cursor:pointer; border:1px solid var(--d-line); background:var(--d-surface); color:var(--d-muted); border-radius:999px; padding:3px 12px 3px 3px; }
.tasks-person:last-child { padding-left:12px; }
.tasks-person .avatar { width:20px; height:20px; font-size:9px; }
.tasks-person[aria-pressed="true"] { border-color:var(--d-olive); color:var(--d-ink); font-weight:500; background:rgba(var(--d-olive-rgb),.10); }

.tasks-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.tasks-chip { font:inherit; font-size:0.9rem; cursor:pointer; border:1px solid rgba(var(--d-olive-rgb),.22); background:transparent; color:var(--d-olive-ink); border-radius:999px; padding:4px 12px; }
.tasks-chip b { font-weight:600; color:var(--d-ink); }
.tasks-chip:focus-visible { outline:2px solid var(--d-olive); outline-offset:2px; }

.tasks-grid { display:flex; flex-direction:column; margin-top:26px; }
.tasks-main, .tasks-rail { display:contents; }
.tasks-today { order:1; } .tasks-late { order:2; } .tasks-wait { order:3; } .tasks-week { order:4; } .tasks-folds { order:5; }
.tasks-group { scroll-margin-top:16px; }
.tasks-late, .tasks-wait, .tasks-week, .tasks-folds { margin-top:28px; }
.tasks-h { font-family:var(--d-heading); font-size:1.0333rem; font-weight:500; letter-spacing:-.01em; color:var(--d-muted); margin:0 0 4px; }
.tasks-today { background:var(--d-surface); border-radius:16px; padding:16px 20px 6px; box-shadow:0 1px 0 rgba(var(--d-ink-rgb),.13),0 12px 28px -22px rgba(var(--d-shade-rgb),.4); --tray-bg:var(--d-surface); }
.tasks-today .tasks-h { font-size:1.2rem; color:var(--d-ink); padding-bottom:8px; border-bottom:1px solid rgba(var(--d-ink-rgb),.08); margin-bottom:0; }
.tasks-none { margin:0; padding:12px 0 10px; font-size:0.9333rem; color:var(--d-soft); }
.tasks-wait { background:var(--d-sage); border:1px solid var(--d-sage-edge); border-radius:14px; padding:14px 16px 4px; --tray-bg:var(--d-sage); }
.tasks-wait .srow { border-top-color:rgba(var(--d-olive-rgb),.18); }
.tasks-late .srow .s-title, .tasks-week .srow .s-title { font-size:1rem; color:var(--d-muted); }
.tasks-more { display:none; font:inherit; font-size:0.9rem; cursor:pointer; border:0; border-top:1px solid rgba(var(--d-ink-rgb),.08); background:none; color:var(--d-olive-ink); padding:10px 0 12px 34px; width:100%; text-align:left; }

.tasks-fold { border-top:1px solid rgba(var(--d-ink-rgb),.08); padding:10px 0; }
.tasks-fold:first-child { border-top:0; }
.tasks-fold-top { display:flex; align-items:baseline; gap:8px; }
.tasks-fold-l { font:500 0.9333rem var(--d-body); color:var(--d-olive-ink); margin:0; }
.tasks-fold-n { font-size:0.9rem; color:var(--d-soft); }
.tasks-show { margin-left:auto; font:inherit; font-size:0.9rem; color:var(--d-olive-ink); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(var(--d-olive-rgb),.4); }
.tasks-fold-names { font-size:0.8667rem; color:var(--d-soft); margin-top:4px; line-height:1.45; }
.tasks-fold .tasks-rows { margin-top:4px; }

/* A row: a plain circle, the title, one second line, quiet meta; Move at the right. */
.srow { position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:14px; align-items:start; padding:11px 0; border-top:1px solid rgba(var(--d-ink-rgb),.08); cursor:pointer; }
.srow.can-move { grid-template-columns:22px minmax(0,1fr) auto auto; }
.tasks-group > .srow:first-of-type, .tasks-rows > .srow:first-child { border-top:0; }
.srow:focus-visible { outline:2px solid var(--d-olive); outline-offset:2px; border-radius:6px; }
.srow .s-title { font-size:1.0333rem; line-height:1.35; color:var(--d-ink); overflow-wrap:anywhere; }
.srow .s-line { font-size:0.8667rem; margin-top:2px; line-height:1.4; color:var(--d-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srow .s-line.next { color:var(--d-olive-ink); }
.srow .s-line b { font-weight:600; color:var(--d-olive-ink); }
.srow .s-meta { display:flex; align-items:center; gap:10px; font-size:0.8333rem; padding-top:2px; white-space:nowrap; color:var(--d-soft); }
/* A long project name gives way before the title does: one line, cut at about 14rem, the whole name on hover. */
.srow .s-proj { max-width:min(14rem,100%); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srow .s-owner, .srow .s-private { display:inline-flex; align-items:center; gap:5px; color:var(--d-muted); }
.srow .s-private svg { flex:none; }
.srow .s-meta .avatar { width:18px; height:18px; font-size:8.5px; }
.srow.done .s-title, .srow.dropped .s-title { color:var(--d-muted); text-decoration:line-through; text-decoration-color:rgba(var(--d-olive-rgb),.45); }
.s-orbit { position:relative; width:22px; height:22px; padding:0; border:0; background:none; border-radius:50%; cursor:pointer; margin-top:-1px; }
span.s-orbit { cursor:default; }
.s-orbit .core { position:absolute; inset:1px; border-radius:50%; border:1.5px solid var(--d-ring); background:var(--d-surface); transition:background-color 160ms ease,border-color 160ms ease; }
.s-orbit.wait .core { border-style:dashed; background:transparent; }
.s-orbit.done .core { background:var(--d-olive); border-color:var(--d-olive); }
.s-orbit.done .core::after { content:''; position:absolute; left:6px; top:2.5px; width:4px; height:8px; border:solid var(--d-surface); border-width:0 1.6px 1.6px 0; transform:rotate(45deg); }
.s-move { font:inherit; font-size:0.8333rem; cursor:pointer; border:0; border-radius:7px; background:rgba(var(--d-olive-rgb),.10); color:var(--d-olive-ink); padding:3px 10px; white-space:nowrap; }
.s-move[aria-expanded="true"] { background:rgba(var(--d-olive-rgb),.18); }
.s-move:focus-visible { outline:2px solid var(--d-olive); outline-offset:2px; }
.s-tray { display:none; }
/* Swipe left to dismiss (ui/swipe-dismiss.ts): sideways moves reach the card, the page keeps its vertical scroll. */
.swipe-dismiss { touch-action:pan-y; }
.tasks-found { margin-top:26px; }
.tasks-found-n { font-size:0.8333rem; color:var(--d-soft); margin-bottom:4px; }

/* Hover only where there is a pointer that hovers: on a computer the Move control stands over
   the meta while the row is hovered or focused. */
@media (hover:hover) {
  .tasks-chip:hover { background:rgba(var(--d-olive-rgb),.08); }
  .srow:hover .s-title { color:var(--d-ink); }
  button.s-orbit:hover .core { border-color:var(--d-olive); background:rgba(var(--d-olive-rgb),.08); }
  .s-move:hover { background:rgba(var(--d-olive-rgb),.18); }
  @container main (min-width:621px) {
    .srow.can-move { grid-template-columns:22px minmax(0,1fr) auto; }
    .srow .s-move { position:absolute; right:0; top:9px; opacity:0; pointer-events:none; }
    .srow:hover .s-move, .srow:focus-within .s-move { opacity:1; pointer-events:auto; }
    .srow.can-move:hover .s-meta, .srow.can-move:focus-within .s-meta { visibility:hidden; }
  }
}

/* Wide enough for two columns: Waiting and the folds stand at the right. */
@container main (min-width:900px) {
  .tasks-grid { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:44px; align-items:start; }
  .tasks-main { display:block; grid-column:1; }
  .tasks-rail { display:flex; flex-direction:column; gap:22px; grid-column:2; }
  .tasks-rail > * { margin-top:0; }
  .tasks-wait .srow, .tasks-wait .srow.can-move { grid-template-columns:22px minmax(0,1fr); column-gap:12px; row-gap:3px; }
  .tasks-wait .srow .s-meta { grid-column:2; padding-top:0; flex-wrap:wrap; white-space:normal; }
}

@media(max-width:640px) {
  html[data-kit-brand="refined"] .kit-board .tasks-view .view-head h1 { font-size:2rem; }
  .kit-board .tasks-view .tasks-head { gap:10px; }
  .tasks-head .grow { flex-basis:100%; height:0; }
  .tasks-find { flex:1; width:auto; min-width:0; }
}
/* A narrow list column — a phone, or the desktop list beside the issue peek (styles.css: .main
   is the `main` container): the meta tucks under the title so the title keeps the row's width,
   Move stays visible at the right, Late keeps two rows behind "+N more", and a swipe right
   stands the Move choices in the row's place. */
@container main (max-width:620px) {
  .tasks-chips { margin-top:12px; }
  .tasks-grid { margin-top:18px; }
  .tasks-today { padding:14px 14px 4px; }
  .srow, .srow.can-move { grid-template-columns:22px minmax(0,1fr) auto; column-gap:12px; row-gap:3px; touch-action:pan-y; }
  .srow:not(.can-move) { grid-template-columns:22px minmax(0,1fr); }
  .srow .s-orbit, .srow .s-text { grid-row:1; }
  .srow .s-move { grid-column:3; grid-row:1; }
  .srow .s-meta { grid-column:2; grid-row:2; padding-top:0; flex-wrap:wrap; white-space:normal; }
  .srow .s-meta:empty { display:none; }
  .srow .s-line { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; }
  .tasks-late:not(.open) .srow.late-more { display:none; }
  .tasks-late:not(.open) .tasks-more { display:block; }
  .srow.swiped { overflow:hidden; }
  .srow.swiped .s-tray { display:flex; gap:4px; position:absolute; inset:6px 0; background:var(--tray-bg, var(--d-paper)); animation:tasks-tray 180ms ease; }
  .s-tray button { flex:1; font:inherit; font-size:0.8rem; font-weight:500; line-height:1.15; cursor:pointer; border:0; border-radius:9px; background:rgba(var(--d-olive-rgb),.12); color:var(--d-olive-ink); padding:0 4px; }
}
@keyframes tasks-tray { from { transform:translateX(-24px); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .srow.swiped .s-tray { animation:none; } }
/* The iOS app's + New task floats at the foot: the list scrolls clear of it. */
body.embed-mobile .tasks-view .tasks-body { padding-bottom:76px; }

/* ---- Kit on My Health (KT-60221): the health thread beside the dashboard,
   and the unread count on My Health in the navigation. The panel is the task
   session's sage block (.tp-session) standing at the right; narrower it is a
   bar at the foot that opens the thread over the page (ui/health-thread.ts). */
.kit-nav-count { display:inline-block; min-width:18px; padding:2px 6px; border-radius:999px; background:var(--d-side-ink); color:var(--d-side); font:700 11px/14px var(--d-body); text-align:center; font-variant-numeric:tabular-nums; }
html[data-kit-brand="refined"] .kit-board .sidebar .nav-item .count.kit-nav-count,
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .nav-item .count.kit-nav-count { color:var(--d-side); font-weight:700; font-size:11px; }
.kit-nav.kit-nav--tabs > a > .kit-nav-count { position:absolute; top:0; left:calc(50% + 4px); padding:1px 5px; min-width:16px; font-size:10px; line-height:13px; }
.kit-nav.kit-nav--tabs .kit-nav-sheet a > .kit-nav-count { position:static; display:inline-block; margin-left:auto; }
.kit-nav-unread { display:inline-block; min-width:18px; padding:2px 6px; border-radius:999px; background:var(--d-brand); color:var(--d-on-brand); font:700 11px/14px var(--d-body); text-align:center; font-variant-numeric:tabular-nums; }
html[data-kit-brand="refined"] .kit-board .sidebar .nav-item .count.kit-nav-unread,
html[data-kit-brand="refined"] .kit-board.kit-chat .sidebar .nav-item .count.kit-nav-unread { color:var(--d-on-brand); font-weight:700; font-size:11px; }
.kit-nav.kit-nav--tabs > a { position:relative; }
.kit-nav.kit-nav--tabs > a > .kit-nav-unread { position:absolute; top:0; left:calc(50% + 4px); padding:1px 5px; min-width:16px; font-size:10px; line-height:13px; }
.kit-nav.kit-nav--tabs .kit-nav-sheet a > .kit-nav-unread { position:static; display:inline-block; margin-left:auto; }
.kit-nav.kit-nav--tabs .kit-nav-sheet a > span.kit-nav-unread { width:auto; max-width:none; }
.kit-nav.kit-nav--tabs .kit-nav-more { position:relative; }
.kit-nav-dot { position:absolute; top:2px; left:calc(50% + 8px); width:8px; height:8px; border-radius:50%; background:var(--d-brand); }
.kit-nav-dot.kit-nav-dot--quiet { background:var(--d-side-ink); }

.health-kit[hidden] { display:none !important; }
.health-kit-panel { display:flex; flex-direction:column; min-height:0; background:var(--d-sage); border:1px solid var(--d-sage-edge); border-radius:16px; padding:10px 10px 10px; }
.health-kit-head { display:flex; align-items:center; gap:8px; padding:2px 4px 10px; font-size:0.8667rem; color:var(--d-ink); }
.health-kit-title { font:600 0.9333rem var(--d-body); }
.health-kit-private { margin-left:auto; display:inline-flex; align-items:center; gap:4px; font-size:0.8rem; color:var(--d-olive-ink); }
.health-kit-private svg { flex:none; }
/* 44px targets (the phone dialog's × above all); the head's padding gives way so it stays one line. */
.health-kit-hide, .health-kit-close { flex:none; display:grid; place-items:center; min-width:44px; min-height:44px; margin:-6px -6px -6px 0; border:0; border-radius:10px; background:none; color:var(--d-olive-ink); cursor:pointer; }
.health-kit-panel:focus { outline:none; }
.health-kit-retry { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:14px; background:var(--d-surface); border:1px solid rgba(var(--d-ink-rgb),.1); border-radius:12px; }
.health-kit-hide:hover, .health-kit-close:hover { background:rgba(var(--d-olive-rgb),.12); }
.health-kit-hide[hidden], .health-kit-close[hidden] { display:none; }
.health-kit-body { flex:1; min-height:0; display:flex; flex-direction:column; }
.health-kit-chat { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; background:var(--d-surface); border:1px solid rgba(var(--d-ink-rgb),.1); border-radius:12px; }
.health-kit-chat > * { flex:1; min-height:0; }
.health-kit-start { display:flex; flex-direction:column; gap:10px; padding:14px; background:var(--d-surface); border:1px solid rgba(var(--d-ink-rgb),.1); border-radius:12px; }
.health-kit-intro { margin:0; font-size:0.9333rem; line-height:1.45; color:var(--d-ink); }
.health-kit-input { width:100%; box-sizing:border-box; resize:vertical; min-height:72px; padding:9px 11px; border:1px solid var(--d-line); border-radius:10px; background:var(--d-surface); color:var(--d-ink); font:inherit; font-size:0.9333rem; line-height:1.4; }
.health-kit-input:focus { outline:none; border-color:var(--d-brand); box-shadow:0 0 0 3px rgba(var(--d-brand-rgb),.14); }
.health-kit-start-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.health-kit-error { margin:0 auto 0 0; font-size:0.8667rem; color:var(--danger); }
.health-kit-error[hidden] { display:none; }
.health-kit-opener { display:none; align-items:center; gap:10px; cursor:pointer; color:var(--d-ink); font:500 0.9333rem var(--d-body); text-align:left; }
.health-kit-opener-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.health-kit-count { flex:none; min-width:18px; padding:2px 6px; border-radius:999px; background:var(--d-brand); color:var(--d-on-brand); font:700 11px/14px var(--d-body); text-align:center; font-variant-numeric:tabular-nums; }

/* Wide: the dashboard and the panel side by side; the panel stays in view as the page scrolls. */
@media (min-width: 1100px) {
  .main > .view.health-view.health-with-kit { max-width:1260px; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; }
  .main > .view.health-view:has(.health-kit.collapsed) { max-width:1260px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:start; }
  .health-view > .kit-health-island { min-width:0; }
  /* Held under the top bar as the page scrolls, to the foot of the page: no padding below it to stop short of. */
  .main:has(> .view.health-with-kit) { padding-bottom:0; }
  .main > .view.health-view.health-with-kit { padding-bottom:12px; }
  .health-kit.wide { position:sticky; top:calc(var(--kit-topbar-h, 48px) + 12px); }
  .health-kit.wide:not(.collapsed) .health-kit-panel { height:calc(100dvh - var(--kit-topbar-h, 48px) - 24px); max-height:900px; box-sizing:border-box; }
  .health-kit.wide.collapsed .health-kit-panel { display:none; }
  .health-kit.wide.collapsed .health-kit-opener { display:inline-flex; padding:8px 12px; border-radius:999px; background:var(--d-sage); border:1px solid var(--d-sage-edge); font-weight:600; font-size:0.8667rem; }
  .health-kit.wide.collapsed .health-kit-opener:hover { border-color:var(--d-olive); }
}
/* Narrow: a bar at the foot ("Ask Kit about your health…"); open, the thread over the page. */
.health-kit.narrow .health-kit-panel { display:none; }
.health-kit.narrow .health-kit-opener {
  display:flex; position:fixed; z-index:30; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); max-width:560px; margin:0 auto;
  padding:12px 16px; border-radius:999px; background:var(--d-surface); border:1px solid var(--d-sage-edge); box-shadow:0 8px 24px rgba(var(--d-shade-rgb),.14); color:var(--d-muted);
}
.health-kit.narrow .health-kit-opener:hover { border-color:var(--d-olive); }
.health-kit.narrow.open .health-kit-opener { display:none; }
.health-kit.narrow.open .health-kit-panel {
  display:flex; position:fixed; z-index:56; right:16px; bottom:16px; width:min(440px, calc(100vw - 32px)); height:min(680px, calc(100dvh - 96px));
  box-shadow:0 18px 48px rgba(var(--d-shade-rgb),.22);
}
.main > .view.health-view:has(.health-kit.narrow:not([hidden])) { padding-bottom:96px; }
@media (max-width: 719px) {
  .health-kit.narrow .health-kit-opener { bottom:calc(76px + env(safe-area-inset-bottom)); }
  .health-kit.narrow.open .health-kit-panel { inset:0; width:auto; height:auto; border:0; border-radius:0; padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom)); }
  body.health-kit-open { overflow:hidden; }
  /* The page's + (New message) would sit on the bar; the bar is this page's way to Kit. */
  body:has(.health-kit.narrow:not([hidden])) .fab { display:none; }
}
body.embed-mobile .health-kit.narrow .health-kit-opener { bottom:calc(16px + env(safe-area-inset-bottom)); }

/* The coach overlay (KT-60661; v4 hi-fi "Coach overlay"), kept light: a quick paper veil at 66% with a
   hole where her real thing is (so her tap reaches it and nothing under the veil does), a soft lit
   target (2px olive ring, 7px olive at 14%) and a hairline callout: surface, 1px line, radius 12, no
   shadow, the fox, the step label, one line, one "do" line and an optional link. Anything floating on
   the page (the FAB) stays dimmed under the veil. */
.coach-veil { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--d-paper) 66%, transparent); }
.coach-ring { position: fixed; z-index: 81; pointer-events: none; box-shadow: 0 0 0 2px var(--d-olive), 0 0 0 7px rgba(var(--d-olive-rgb), .14); }
.coach-ring.moving { transition: left .48s ease-in-out, top .48s ease-in-out, width .48s ease-in-out, height .48s ease-in-out; }
.coach-callout { position: fixed; z-index: 82; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px 10px 10px; border: 1px solid var(--d-line); border-radius: 12px; background: var(--d-surface); box-shadow: none; color: var(--d-ink); font-size: 0.9375rem; line-height: 1.45; }
.coach-callout[hidden], .coach-veil[hidden], .coach-ring[hidden] { display: none; }
.coach-fox { flex: none; margin-top: 1px; border-radius: 50%; }
.coach-body { min-width: 0; display: flex; flex-direction: column; }
.coach-step { color: var(--d-olive-ink); font-size: 0.8125rem; font-weight: 600; }
.coach-line, .coach-do { margin: 0; }
.coach-line b { font-weight: 650; }
.coach-do { color: var(--d-olive-ink); font-weight: 650; margin-top: 2px; }
.coach-link { align-self: flex-start; min-height: 44px; margin: 0 0 -10px -8px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--d-olive-ink); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.coach-link:hover { background: var(--d-paper2); }
.coach-chev { font-size: 1rem; line-height: 1; }
/* The lit target's ring is its focus mark while the lesson runs: no second outline inside it (the prefix
   outranks Today's own :focus-visible rule). */
html[data-kit-brand] body.coach-on .coach-focus:focus-visible { outline: none; }
/* What a screen reader hears of the tour (a beat, a callout): off screen, never hidden from it. */
.tour-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A lesson's last step, the offer (KT-60662; HANDOFF "Offer"): no lit target, the whole veil, and the callout
   is the phone's bottom sheet or the desktop's floating card, Yes / Not now. */
.coach-callout.coach-offer { padding: 16px 16px 14px; }
.coach-offer-title { margin: 2px 0 2px; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; }
.coach-offer-acts { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
@media (max-width: 719px) {
  .coach-callout.coach-offer { border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* Help (KT-60695, #/help; ui/help.ts): the help library as a page. One reading column; each entry
   a section under a hairline: the Familjen title in olive ink, "Updated Oct 22" in muted ink
   (KT-60702: the day its copy last changed), the lead, the steps numbered in sage discs, the
   closing line, then a 44px link to each page it explains. Green only, no terracotta. */
.kit-board .help-page { max-width:680px; padding-bottom:48px; color:var(--d-ink); }
.kit-board .help-page .view-head { padding-bottom:6px; }
.help-sub { margin:0 0 12px; color:var(--d-muted); font-size:1rem; }
.help-entry { padding:28px 0 26px; border-top:1px solid var(--d-line); }
.help-entry:first-of-type { border-top:0; }
.help-title { margin:0 0 2px; font:650 1.25rem/1.3 var(--d-heading); color:var(--d-olive-ink); letter-spacing:-.005em; }
.help-updated { margin:0 0 10px; color:var(--d-muted); font-size:0.8125rem; line-height:1.4; font-variant-numeric:tabular-nums; }
.help-lead { margin:0; font-size:1.0625rem; line-height:1.5; font-weight:500; text-wrap:pretty; }
.help-points { list-style:none; counter-reset:help; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.help-points li { counter-increment:help; display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:start; font-size:1rem; line-height:1.5; text-wrap:pretty; }
.help-points li::before { content:counter(help); width:26px; height:26px; margin-top:-1px; border-radius:50%; display:grid; place-items:center;
  background:var(--d-sage); color:var(--d-olive-ink); font:650 0.8125rem/1 var(--d-heading); font-variant-numeric:tabular-nums; }
.help-note { margin:14px 0 0; color:var(--d-muted); font-size:0.9375rem; line-height:1.5; }
.help-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.help-link { min-height:44px; display:inline-flex; align-items:center; gap:8px; padding:0 16px; border:1px solid var(--d-sage-edge); border-radius:999px;
  color:var(--d-olive-ink); font-size:0.9375rem; font-weight:600; text-decoration:none; transition:background-color .12s ease; }
.help-link:hover, .help-link:focus-visible { background:var(--d-wash); text-decoration:none; }
.help-link:focus-visible { outline:2px solid var(--d-olive-ink); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .help-link { transition:none; } }
@media (max-width:719px) { .help-entry { padding:22px 0 20px; } .help-lead { font-size:1rem; } }