/* Kit Board — the family's projects & issues.
   Same face as the rest of Kit: warm paper, ink, terracotta. Tokens match
   the chat app's theme (packages/chat-ui/src/theme.ts) so the two read as
   one product. Committed to the single warm-light look Kit ships with. */

:root {
  --paper:    #F7F2EA;
  --paper-2:  #F5EEE5;
  --surface:  #FFFFFF;
  --ink:      #1F1A16;
  --ink-2:    #6B5F55;
  --ink-3:    #A2958A;
  --line:     #E9DFD3;
  --brand:    #A63E1B;
  --brand-hi: #C9552E;
  --wash:     #EFE8DA;
  --wash-2:   #E6DCCB;
  --focus:    rgba(var(--d-brand-rgb),0.20);

  --ok:       #3E7C4F;
  --snooze:   #B07E22;
  --drop:     #A2958A;
  --danger:   #B3341F;
  --accent:    #2E62C4;   /* the one cool colour: "Only" / "Show all" in the calendar list */
  --accent-hi: #2451A8;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 24px;
  --shadow:    0 1px 2px rgba(var(--d-shade-rgb),.05), 0 14px 34px -10px rgba(var(--d-shade-rgb),.12);
  --shadow-lg: 0 2px 4px rgba(var(--d-shade-rgb),.05), 0 34px 68px -18px rgba(var(--d-shade-rgb),.18);

  --sidebar-w: 232px;
  /* The issue peek: how much of the window the panel takes when it pushes
     the list aside (desktop). About three fifths, capped so the list never
     drops below ~360px — at 300 a 1280px window left the spine's titles
     ~150px wide. */
  --peek-w: min(clamp(640px, 60vw, 1040px), calc(100vw - var(--sidebar-w) - 360px));
  /* What lies over the window's top edge before the top bar: nothing in a browser. */
  --kit-inset: 0px;
}
/* The Mac app (apps/desktop lib/titlebar.ts, KT-60820): its paper drag strip covers the window's
   top --kit-titlebar-inset px and the shell pads <body> by as much. Everything pinned to the
   window's top sits that much lower, or a scrolled page slid the top bar under the strip and left
   the sidebar the top thing on screen. */
html.kit-desktop { --kit-inset: var(--kit-titlebar-inset, 0px); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Text size (PK-51820): every font size is in rem, 1rem being the old 15px body, so the root
   sets the whole scale. 100% keeps the browser's own default (16px unless the reader raised
   it); a phone reads at 17px, iOS's body size. Nothing is under .75rem but glyphs drawn in a
   fixed box (avatar initials, the 24px FILE and resource tiles), which stay in px. */
html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 719px) {
  .view-head .head-new { display: none; } html { font-size: 106.25%; } }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand); text-decoration: none; }

.boot {
  min-height: 70vh; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; color: var(--ink-2);
}
/* The boot splash: the fox gliding in with the moon over paper, "Kitsune",
   "More room to be human.", covering the page until the board has
   rendered. The art's motion and the moon's glow are the shared
   #initialPageLoadingAnimation rules in refined.css (the id the splash
   carries here too), revealed by brand.js once the fox has decoded;
   reduced motion turns them off there. */
.boot.KitSplash {
  position: fixed; inset: 0; z-index: 50; min-height: 0; gap: 16px;
  background: var(--paper); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.boot.KitSplash .KitSplash__art { position: relative; }
.boot.KitSplash .KitSplash__word { margin: 0; font-size: 1.8667rem; font-weight: 650; letter-spacing: -.035em; }
.boot.KitSplash .KitSplash__tagline { margin: 0; color: var(--d-muted); font-size: 1.0667rem; }
/* Hosted (the iOS web view): the host has its own splash, so the boot
   stays a small thing in the flow rather than a page. */
body.embed-mobile .boot.KitSplash { position: static; min-height: 60vh; }

/* ---------- top bar ----------
   Wordmark, the one global search, the signed-in member. Navigation between
   Kit's core views lives in the sidebar (the Navigation section the shared
   shell UI draws — the same section the chat app's sidebar carries), and as
   a bottom tab bar on phones. */

.topbar {
  position: sticky; top: var(--kit-inset); z-index: 15; height: 48px;
  display: flex; align-items: center; gap: 12px; padding: 0 14px 0 10px;
  background: var(--paper); border-bottom: 1px solid var(--line);
  --kit-nav-fg: var(--ink-2);
  --kit-nav-fg-hi: var(--ink);
  --kit-nav-hover-bg: var(--wash);
  --kit-nav-active-bg: var(--wash-2);
  --kit-nav-active-fg: var(--ink);
  --kit-nav-focus: var(--d-olive-ink);
}
.topbar .wordmark {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px;
  border-radius: var(--r-sm); color: var(--ink);
  font-family: var(--serif); font-size: 1.2667rem; letter-spacing: .01em;
}
.topbar .wordmark:hover { background: var(--wash); }
.topbar .topbar-end {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  color: var(--ink-2); font-size: 0.8667rem;
}
.topbar .me { display: flex; align-items: center; gap: 8px; }
/* The phone's search button (KT-60285): hidden at desktop widths, where the field shows. */
.topbar .topbar-search-btn {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0;
  padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--d-olive-ink); cursor: pointer;
}
.topbar .topbar-search-btn:hover { background: var(--wash); }
.topbar .topbar-search-btn[aria-current="page"] { background: var(--d-sage); }
.topbar .topbar-search-btn:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 1px; }
/* The household switcher (KT-60123): a member of two or more households always sees which one
   this is. Sage and olive, the structure colours; never the act-now terracotta. */
.household-switch { display: flex; min-width: 0; }
.household-switch select {
  max-width: 240px; min-height: 32px; padding: 4px 28px 4px 12px; margin: 0;
  border: 1px solid var(--d-sage-edge); border-radius: 999px; background-color: var(--d-sage); color: var(--d-olive-ink);
  font: inherit; font-weight: 600; text-overflow: ellipsis; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%234f6428' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.household-switch select:hover { background-color: color-mix(in srgb, var(--d-sage) 70%, var(--d-sage-edge)); }
.household-switch select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* Choose a household: the welcome panel's frame, one quiet button per household. */
.KitHouseholds__list { display: flex; flex-direction: column; gap: 10px; }
.KitHouseholds__choice {
  width: 100%; min-height: 48px; padding: 10px 18px; border: 1px solid var(--d-sage-edge); border-radius: 9px;
  background: var(--d-sage); color: var(--d-olive-ink); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer;
}
.KitHouseholds__choice:hover { background: color-mix(in srgb, var(--d-sage) 70%, var(--d-sage-edge)); }
a.KitHouseholds__choice { display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; }
/* The avatar menu: the account matters, under the signed-in member's name. */
.topbar .me { position: relative; }
.me-menu-btn {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; margin: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; cursor: pointer;
}
.me-menu-btn:hover, .me-menu-btn[aria-expanded="true"] { background: var(--wash); color: var(--ink); }
.me-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 232px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); color: var(--ink); font-size: 0.9333rem; text-align: left;
  /* The bar is sticky, so page scroll never reaches rows below the window: the menu scrolls itself. */
  max-height: calc(100vh - 66px); max-height: calc(100dvh - 66px); overflow-y: auto; overscroll-behavior: contain;
}
.me-menu[hidden] { display: none; }
.me-menu-head { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.me-menu-name { font-weight: 600; }
.me-menu-role { font-size: 0.8rem; color: var(--ink-3); }
.me-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; margin: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.me-menu-item:hover, .me-menu-item:focus-visible { background: var(--wash); color: var(--ink); }
.me-menu-push[hidden] { display: none; }
/* Appearance (dark mode): the label, then Device / Light / Dark on one line. */
.me-menu-appearance { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: default; }
.me-menu-appearance[hidden] { display: none; }
.me-menu-appearance:hover { background: none; }
/* Every setting lives in this menu (Michelle 2026-10-07): the member's own, then the household's. */
.me-menu-section { font-size: 0.75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 10px 10px 4px; }
.me-menu-views:empty { display: none; }
.me-menu-rule { border-top: 1px solid var(--line); margin: 6px 0 4px; }
.me-menu-push { padding: 0; }
.me-menu-push .kit-push-toggle { width: 100%; justify-content: flex-start; padding: 8px 10px; font-size: 0.9333rem; color: var(--ink); }
.me-menu-push .kit-push-toggle:hover { background: var(--wash); }
/* "Show Needs you in the sidebar" (KT-60438): a checkbox item, the box where the other items' icons sit. */
.me-menu-check { font-size: 0.9333rem; align-items: flex-start; }
.me-menu-check-box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-top: 2px; border: 1.5px solid var(--d-olive-ink); border-radius: 4px; font-size: 11px; line-height: 1; font-weight: 700; color: var(--d-on-brand); }
.me-menu-check[aria-checked="true"] .me-menu-check-box { background: var(--d-olive-ink); }
/* Email help@ (KT-60068): when it is for, under the address. */
.me-menu-help { flex-direction: column; align-items: flex-start; gap: 0; }
.me-menu-help small { font-size: 0.8rem; color: var(--ink-3); }
.me-menu-version { padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; font-size: 0.7667rem; color: var(--ink-3); }
/* The global search (the shell UI draws it into #kit-search on both hosts;
   here between the wordmark and the signed-in member). Board palette
   through the --kit-search-* / --kit-pop-* hooks the module exposes. */
.topbar #kit-search {
  flex: 0 1 420px; min-width: 0; margin-left: 6px;
  --kit-search-bg: var(--surface); --kit-search-line: var(--line);
  --kit-search-fg: var(--ink-2); --kit-search-fg-hi: var(--ink);
  --kit-pop-bg: var(--surface); --kit-pop-fg: var(--ink); --kit-pop-fg-2: var(--ink-2);
  --kit-pop-line: var(--line); --kit-pop-hover: var(--paper-2); --kit-pop-shadow: var(--shadow-lg);
  --kit-pop-mark: rgba(217, 98, 43, .22);
}
/* Desktop: the box sits centred over the content column, not after the wordmark (KT-60285); the
   page's column is centred in .main, so the box centres on the sidebar's edge to the right edge.
   Centred with auto margins, never a transform: a transform would become the containing block of
   the fixed results popover and push it off the screen. */
@media (min-width: 900px) {
  .topbar #kit-search { position: absolute; left: 0; right: 0; margin: 0 auto; width: min(520px, calc(100% - 480px)); }
  body:has(.shell > .sidebar) .topbar #kit-search { left: var(--sidebar-w); width: min(520px, calc(100% - var(--sidebar-w) - 300px)); }
  /* The household switcher makes the right-hand cluster ~250px wider; the box keeps clear of it. */
  body:has(.household-switch) .topbar #kit-search { width: min(520px, max(260px, calc(100% - 800px))); }
  body:has(.shell > .sidebar):has(.household-switch) .topbar #kit-search { width: min(520px, max(260px, calc(100% - var(--sidebar-w) - 800px))); }
}

/* ---------- shell ---------- */

.shell { display: flex; min-height: calc(100vh - 48px - var(--kit-inset)); }

.sidebar {
  width: var(--sidebar-w); flex: none; padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: calc(48px + var(--kit-inset)); height: calc(100vh - 48px - var(--kit-inset));
}
/* The chat column: one left column — Navigation, then the chat's
   conversation list in this slot (the island renders it here when the
   window is wide). The slot is the scroller, edge to edge; the sidebar
   itself never scrolls, so it never loads scrolled either. */
.sidebar.chat-sidebar { overflow: hidden; }
.sidebar .chat-list-slot {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  margin: 0 -14px; overflow: hidden;
}
/* Pages first (2026-10-06): Navigation on top, the conversation list
   filling the middle behind a hairline, Settings pinned at the foot. */
.sidebar.chat-sidebar .kit-nav-side { flex: none; }
/* The Messages head over the conversations (KT-60607): sentence case, its + at the right edge. */
.sidebar .messages-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 4px 10px; }
.sidebar .messages-h { margin: 0; font-size: 0.875rem; line-height: 20px; font-weight: 650; color: var(--ink-2); }
.sidebar .messages-new { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer; }
.sidebar .messages-new:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 1px; }
/* The divider between them (2026-10-07): the same hairline, with a hit area
   to drag. Up grows the rooms and DMs and Navigation's lower rows scroll out
   of sight inside it; a double-click gives Navigation its full height back.
   The two halves scroll independently: each keeps its own thin scrollbar,
   neither hands its scroll on to the other or the page, and Navigation
   fades on the edge that has rows past it. */
.sidebar.chat-sidebar .kit-nav-side { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sidebar.chat-sidebar .kit-nav-side.more-below { -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); }
.sidebar.chat-sidebar .kit-nav-side.more-above { -webkit-mask-image: linear-gradient(transparent, #000 22px); mask-image: linear-gradient(transparent, #000 22px); }
.sidebar.chat-sidebar .kit-nav-side.more-above.more-below { -webkit-mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(transparent, #000 22px, #000 calc(100% - 22px), transparent); }
.sidebar .chat-list-slot > * { overscroll-behavior: contain; }
/* Scrolled, the heading stays put on the column's own ground (the side
   tone from refined.css, else paper) so the rows slide under it. */
.sidebar.chat-sidebar .kit-nav-side > .kit-nav-heading { position: sticky; top: 0; z-index: 1; background: var(--d-side); }
.sidebar .sidebar-splitter {
  flex: none; position: relative; height: 10px; margin: 5px -14px -4px;
  cursor: row-resize; touch-action: none;
}
/* The hairline, with a small grabber on it (Michelle picked it from three, 2026-10-07): drawn only
   on hover or focus since KT-60285 (it still resizes at rest), brand while dragging. Ground and ink
   fall back to the board's own without refined.css. */
.sidebar .sidebar-splitter::before {
  content: ''; position: absolute; left: 0; right: 0; top: 5px; border-top: 1px solid var(--d-line);
}
.sidebar .sidebar-splitter::after {
  content: ''; position: absolute; left: 50%; top: 3px; width: 32px; height: 5px; margin-left: -16px;
  border-radius: 3px; background: var(--d-side);
  box-shadow: inset 0 0 0 1.5px rgba(var(--d-side-rgb, 31,26,22), .28);
  opacity: 0; transition: opacity .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.sidebar .sidebar-splitter:hover::after, .sidebar .sidebar-splitter:focus-visible::after {
  opacity: 1; background: rgba(var(--d-side-rgb, 31,26,22), .45); box-shadow: none;
}
body.resizing-rows .sidebar .sidebar-splitter::after { opacity: 1; background: var(--d-brand); box-shadow: none; }
.sidebar .sidebar-splitter:focus-visible { outline: none; }
.sidebar .messages-head + .chat-list-slot { padding-top: 2px; }
body.resizing-rows { cursor: row-resize; user-select: none; -webkit-user-select: none; }
/* New task and New project in their page heads (KT-60607): the built secondary button, beside the
   title; where the phone's + shows instead, it steps aside. */
.view-head .head-new { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font: inherit; font-weight: 600; }
body.embed-mobile .view-head .head-new { display: none; }
/* A page's own pages under its row: text only, smaller, lined up with the
   parent's label; the parent stays plain so only the page you're on is lit. */
.sidebar .kit-nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 4px; }
.sidebar .kit-nav-sub .nav-item { margin-left: 26px; width: calc(100% - 26px); padding: 5px 10px; font-size: 0.8667rem; }
.sidebar .kit-nav-sub .nav-item svg { display: none; }
.sidebar .kit-nav-side .nav-item.active:has(+ .kit-nav-sub) { background: none; font-weight: 600; }
.sidebar .kit-nav-foot { flex: none; padding-top: 4px; border-top: 1px solid var(--line); }
.sidebar .kit-nav-foot .kit-nav-settings { margin-top: 0; }
.sidebar .kit-nav-foot .nav-item svg { width: 16px; height: 16px; }
.sidebar .kit-nav-settings { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sidebar .kit-nav-settings .kit-nav-heading { padding-top: 8px; }
.sidebar .kit-nav-settings.kit-nav-collapsed .kit-nav-chevron { transform: rotate(-90deg); }
.sidebar .kit-nav-settings .nav-item { color: var(--ink-3); }
.sidebar .kit-nav-settings .nav-item.active { color: var(--ink); }
.sidebar .kit-nav-settings .kit-nav-link .label::after { content: ' ↗'; opacity: .6; }
.sidebar .chat-list-slot > * { flex: 1; min-height: 0; }
/* The household's settings at the foot of the column. */
.sidebar .sidebar-foot { flex: none; padding: 10px 10px 0; font-size: 0.8rem; }
.sidebar .sidebar-foot a { color: var(--ink-3); }
.sidebar .sidebar-foot a:hover { color: var(--brand); text-decoration: underline; }
.sidebar .section-label {
  padding: 4px 10px 8px; font-size: 0.75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm); border: 0; background: none;
  text-align: left; cursor: pointer; color: var(--ink-2); width: 100%;
}
.nav-item svg { flex: none; }
.nav-item .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; margin: 0 4px; background: var(--ink-3); }
.nav-item .dot.started { background: var(--brand); }
.nav-item .dot.paused { background: var(--snooze); }
.nav-item:hover { background: var(--wash); }
.nav-item.active { background: var(--wash); color: var(--ink); font-weight: 600; }
.nav-item .count { margin-left: auto; font-size: 0.8rem; color: var(--ink-3); font-weight: 400; }
.sidebar .spacer { flex: 1; }
/* The Navigation section (shell UI, mode 'sidebar'): the core views, drawn
   in the sidebar's own item look; a hairline separates it from the
   section's sub-navigation below. */
.sidebar .kit-nav-side { display: flex; flex-direction: column; gap: 4px; }
.sidebar .kit-nav-side + .section-label { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.sidebar .kit-nav-side .nav-item svg { width: 16px; height: 16px; }
.sidebar .kit-nav-side .kit-nav-heading {
  display: flex; align-items: center; gap: 4px; width: 100%; margin: 0;
  border: 0; background: none; text-align: left; font: inherit;
  font-size: 0.75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
/* Navigation's heading is a plain label (2026-10-12); only Settings' folds. */
.sidebar .kit-nav-side button.kit-nav-heading { cursor: pointer; }
.sidebar .kit-nav-side button.kit-nav-heading:hover { color: var(--ink-2); }
.sidebar .kit-nav-side button.kit-nav-heading:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: -2px; border-radius: var(--r-sm); }
.sidebar .kit-nav-side .kit-nav-chevron { flex: none; transition: transform .15s ease; }
/* Phones: the same views as a bottom tab bar (mode 'tabs'); hidden here. */
/* Two classes on purpose: the shell UI injects its base .kit-nav{display:flex}
   after this sheet, and a one-class rule lost to it — the bar then sat as a
   28px strip under the fold on desktop (found by measurement, 2026-09-16). */
.kit-nav.kit-nav--tabs { display: none; }

/* Phone-only sub-navigation (the sidebar's items as chips) and the
   new-issue/new-project action; both hidden on desktop. */
.subnav { display: none; }
.fab { display: none; }

/* The main column is a size container so the list rows can pick their
   layout from the room they actually have — a phone, or a desktop list
   squeezed beside the issue peek — and it takes the peek's width as
   right padding, which is what slides the centred view over to the left. */
.main {
  flex: 1; min-width: 0; padding: 0 0 90px;
  container: main / inline-size;
  transition: padding-right .22s ease-out;
}
.view { max-width: 860px; margin: 0 auto; padding: 20px 20px 40px; }

.view-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 0 14px;
}
.view-head h1 {
  font-family: var(--serif); font-size: 1.7333rem; font-weight: 600; margin: 0;
  letter-spacing: .005em;
}
.view-head .sub { color: var(--ink-2); font-size: 0.8667rem; }
.view-head .grow { flex: 1; }

/* ---------- buttons & inputs ---------- */

.btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--r-sm); padding: 7px 14px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(var(--d-shade-rgb),.05);
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary {
  background: var(--brand); border-color: var(--brand); color: var(--d-on-brand); font-weight: 600;
}
.btn.primary:hover { background: var(--brand-hi); border-color: var(--brand-hi); }
.btn.quiet { border-color: transparent; background: none; box-shadow: none; color: var(--ink-2); }
.btn.quiet:hover { background: var(--wash); color: var(--ink); }
.btn:disabled { opacity: .5; cursor: default; }

input[type="text"], input[type="search"], input[type="date"], select, textarea {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  padding: 7px 10px; outline: none; min-width: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--d-olive-ink); box-shadow: 0 0 0 3px var(--focus); }
/* Selects (PK-51667): one quiet control everywhere — hairline, a chevron
   drawn in the ink token, hover like the chips. Where the browser can
   (appearance: base-select), the open menu is a Kit popover too: paper,
   rounded, the chosen option in the brand colour. Elsewhere the system
   menu opens from the same polished control. */
select {
  appearance: none; -webkit-appearance: none; height: 34px; padding: 0 30px 0 10px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat;
  text-overflow: ellipsis; white-space: nowrap;
}
select:hover:not(:disabled) { border-color: var(--ink-3); }
select:disabled { cursor: default; color: var(--ink-3); background-color: var(--paper-2); }
input[type="date"] { height: 34px; padding-top: 0; padding-bottom: 0; font-variant-numeric: tabular-nums; }
input[type="date"]:hover:not(:disabled) { border-color: var(--ink-3); }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .8; }
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: inline-flex; align-items: center; background-image: none; padding-right: 10px; gap: 8px; }
  select::picker-icon { content: ''; width: 6px; height: 6px; margin-left: auto; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0;
    transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
  select:open::picker-icon { transform: translateY(1px) rotate(-135deg); }
  select selectedcontent { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  ::picker(select) {
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
    box-shadow: 0 12px 32px -12px rgba(var(--d-shade-rgb),.28), 0 2px 6px rgba(var(--d-shade-rgb),.06); padding: 4px; margin-block: 4px;
    max-height: min(360px, 60vh); min-width: anchor-size(width);
    opacity: 0; transform: translateY(-4px); transition: opacity .12s ease, transform .12s ease, overlay .12s allow-discrete, display .12s allow-discrete;
  }
  select:open::picker(select) { opacity: 1; transform: none; }
  @starting-style { select:open::picker(select) { opacity: 0; transform: translateY(-4px); } }
  select option { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; font-size: 0.8667rem; cursor: pointer; white-space: nowrap; }
  select option:hover, select option:focus-visible { background: var(--wash); outline: none; }
  select option:checked { color: var(--brand); font-weight: 600; background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
  select option::checkmark { order: 1; margin-left: auto; content: '✓'; font-size: 0.8rem; }
  select option:disabled { color: var(--ink-3); cursor: default; }
}
/* The chat island's composer (packages/chat-ui) draws its own focus — the hairline darkens, Slack's way
   (2026-09-21) — so the board's field glow must not reach its textarea. Spencer, 2026-09-22.
   The hairline is olive, not the brand rust: terracotta is Send's alone (KT-60048). */
.kit-chat-island textarea:focus, .kit-chat-island input:focus { box-shadow: none; }
.kit-chat-island textarea:focus { border-color: var(--d-olive-ink); }

/* ---------- filter bar ---------- */

.filters {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 0 14px;
}
.filters select { max-width: 180px; }
.filters .search { flex: 1 1 160px; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 4px 12px; font-size: 0.8667rem; cursor: pointer;
}
.chip.on { background: rgba(var(--d-brand-rgb),.10); border-color: rgba(var(--d-brand-rgb),.28); color: var(--brand); font-weight: 600; }

/* ---------- issue list ---------- */

.group { margin: 0 0 18px; }
.group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 0 0 2px;
  font-size: 0.8667rem; font-weight: 600; color: var(--ink-2);
  border-radius: var(--r-sm); background: var(--paper-2);
  position: sticky; top: 0; z-index: 2;
}
.group-head .n { color: var(--ink-3); font-weight: 400; }
.group-head .toggle { margin-left: auto; border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 0 4px; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden;
}
.row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; background: none; border: 0;
  padding: 10px 14px; cursor: pointer; border-top: 1px solid var(--line);
}
.card .row:first-child { border-top: 0; }
.row:hover { background: var(--paper-2); }
.row.selected, .row.selected:hover { background: var(--wash); box-shadow: inset 3px 0 0 var(--brand); }
.row .title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row.done .title, .row.dropped .title { color: var(--ink-3); }
.row .meta { display: flex; align-items: center; gap: 8px; flex: none; }
.row .due { font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; }
.row .due.overdue { color: var(--danger); font-weight: 600; }
.row .due.today { color: var(--snooze); font-weight: 600; }
.row .ref { font-size: 0.75rem; color: var(--ink-3); letter-spacing: .02em; white-space: nowrap; }

.badge {
  font-size: 0.75rem; padding: 2px 8px; border-radius: 999px;
  background: var(--wash); color: var(--ink-2); white-space: nowrap;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}

.status-btn {
  flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer; border-radius: 50%; padding: 0;
}
.status-btn:hover { background: var(--wash); }

.avatar {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--d-surface); background: var(--ink-3);
  text-transform: uppercase;
}
.avatar.unassigned { background: transparent; border: 1px dashed var(--ink-3); color: var(--ink-3); }
/* A joint task's owners (KT-60655): circles overlap, each ringed in the page so the edge reads. */
.avatar-stack { display: inline-flex; flex: none; }
.avatar-stack .avatar { box-shadow: 0 0 0 2px var(--surface); }
.avatar-stack .avatar + .avatar { margin-left: -7px; }
/* An emoji in place of the letters (PK-51713): sized off the circle's own font-size, which each context already scales. */
.avatar-emoji { font-size: 150%; line-height: 1; font-weight: 400; text-transform: none; }

/* Your avatar (PK-51713): preview, Letters/Emoji, emoji picks, colour swatches. */
/* Whose avatar (slice 3): you, then each kid, for an admin. */
.avatar-whose { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.avatar-who { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: 0.9333rem; }
.avatar-who[aria-selected="true"] { border-color: var(--brand); color: var(--ink); }
.avatar-page { display: flex; flex-direction: column; gap: 16px; max-width: 460px; padding: 22px; }
.avatar-preview { display: flex; justify-content: center; }
.avatar-preview .avatar { width: 72px; height: 72px; font-size: 28px; }
.avatar-tabs { display: inline-flex; align-self: center; gap: 2px; padding: 3px; border-radius: 9px; background: var(--wash); }
.avatar-tab { border: 0; background: transparent; padding: 7px 18px; border-radius: 7px; font: inherit; color: var(--ink-2); cursor: pointer; }
.avatar-tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.avatar-emoji-pane { display: flex; flex-direction: column; gap: 10px; }
.avatar-emoji-pane[hidden] { display: none; }
/* A photo (slice 2): it fills the circle; the face underneath shows only if it will not load. */
.avatar.has-photo { overflow: hidden; }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-photo-pane { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.avatar-photo-pane[hidden], .avatar-crop-wrap[hidden], .avatar-label[hidden], .avatar-swatches[hidden] { display: none; }
.avatar-crop-wrap { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.avatar-crop { width: 240px; height: 240px; border-radius: 50%; background: var(--wash); cursor: grab; touch-action: none; box-shadow: 0 0 0 1px var(--line); }
.avatar-crop:active { cursor: grabbing; }
.avatar-zoom { width: 200px; accent-color: var(--brand); }
.avatar-photo-buttons { display: flex; gap: 10px; }
.avatar-hint { font-size: 0.8rem; color: var(--ink-3); text-align: center; margin: 0; }
.avatar-preview-note { font-size: 0.8667rem; color: var(--ink-3); height: 72px; display: flex; align-items: center; }
.avatar-picks { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.avatar-pick { border: 1px solid transparent; background: var(--wash); border-radius: 9px; font-size: 22px; line-height: 1; padding: 8px 0; cursor: pointer; }
.avatar-pick[aria-pressed="true"] { border-color: var(--brand); background: var(--surface); }
.avatar-emoji-input { font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); }
.avatar-emoji-input.invalid { border-color: var(--danger); }
.avatar-label { font-size: 0.8rem; color: var(--ink-3); letter-spacing: .04em; text-transform: uppercase; margin-bottom: -8px; }
.avatar-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; outline: 2px solid transparent; outline-offset: 2px; cursor: pointer; padding: 0; }
/* Automatic: the hashed colour, inset inside a dashed ring, so it never reads as the swatch it happens to equal. */
.avatar-swatch.auto { border: 1.5px dashed var(--ink-3); box-shadow: inset 0 0 0 4px var(--surface); }
.avatar-swatch[aria-checked="true"] { outline-color: var(--ink); }
.avatar-actions { display: flex; gap: 10px; align-items: center; }
@media (max-width: 719px) { .avatar-picks { grid-template-columns: repeat(6, 1fr); } }
/* The dotted circle as a picker (project lead): a bare button the size of the avatar. */
.lead-pick { flex: none; display: inline-flex; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.lead-pick:hover .avatar.unassigned, .lead-pick[aria-expanded="true"] .avatar.unassigned { border-style: solid; border-color: var(--brand); color: var(--brand); }
.lead-pick:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; }
.lead-menu { min-width: 200px; }
.lead-menu-head { padding: 6px 10px 6px; font-size: 0.8rem; color: var(--ink-3); }

.empty {
  padding: 34px 20px; text-align: center; color: var(--ink-2);
  border: 1px dashed var(--line); border-radius: var(--r-md);
}
.empty p { margin: 0 0 6px; }
.empty p:last-child { margin: 0; }
.load-more { display: block; margin: 14px auto 0; }

/* ---------- projects ---------- */

.project-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px;
}
.project-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 14px 16px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 8px;
}
.project-card:hover { box-shadow: var(--shadow-lg); }
.project-card h3 {
  font-family: var(--serif); font-size: 1.1333rem; font-weight: 600; margin: 0;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.project-card .line2 { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--ink-2); }
.project-card .grow { flex: 1; }
.pill {
  font-size: 0.75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--wash); color: var(--ink-2); white-space: nowrap;
}
.pill.started { background: rgba(var(--d-brand-rgb),.12); color: var(--brand); }
.pill.completed { background: rgba(var(--d-ok-rgb),.14); color: var(--ok); }
.pill.paused { background: rgba(var(--d-snooze-rgb),.14); color: var(--snooze); }
.pill.canceled { background: var(--wash); color: var(--ink-3); }
.progress { height: 5px; border-radius: 3px; background: var(--wash); overflow: hidden; }
.progress > div { height: 100%; background: var(--ok); border-radius: 3px; }

/* ---------- panel (issue / project editor) ---------- */

.overlay {
  position: fixed; inset: 0; background: rgba(var(--d-shade-rgb),.32); z-index: 20;
  display: flex; justify-content: flex-end;
}
.panel {
  width: min(480px, 100%); height: 100%; background: var(--paper);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  animation: slide-in .18s ease-out;
  container: panel / inline-size;
}
/* The issue peek. Selecting an issue opens it in a panel that takes most
   of the window; on desktop the list slides left to sit beside it, stays
   live (another row swaps the issue in), and nothing is dimmed — the
   overlay is only there to host the panel. Mid-size windows keep the dimmed
   overlay, just wider; phones keep the sheet. */
.overlay.peek .panel { width: min(760px, 100%); }
/* The peek opens below the top bar, the way the Kit panel does, so search and the member stay
   in reach; a phone keeps the full-height sheet, and the hosted app has no top bar. */
@media (min-width: 720px) {
  body:not(.embed-mobile) .overlay.peek { top: calc(48px + var(--kit-inset)); }
}
@media (min-width: 1100px) {
  body.peek .main { padding-right: var(--peek-w); }
  .overlay.peek { background: transparent; pointer-events: none; }
  .overlay.peek .panel { pointer-events: auto; width: var(--peek-w); }
}
/* The event peek is a glance, not a page: narrower than the issue peek, so the calendar beside it keeps its grid. */
body.peek-ev { --peek-w: 420px; }
.overlay.peek .panel.ev-panel { width: min(420px, 100%); }
@media (min-width: 1100px) { .overlay.peek .panel.ev-panel { width: var(--peek-w); } }
@keyframes slide-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Hosted (the Kit Shell): the board as content inside the iOS app's web
   view (embed=mobile). The host draws the chrome — no top bar, no
   Navigation section, no bottom tabs; the section's own sub-navigation
   stays. */
body.embed-mobile .topbar { display: none; }
body.embed-mobile .kit-nav--tabs { display: none !important; }
body.embed-mobile .kit-nav-side,
body.embed-mobile .kit-nav-side + .section-label { display: none; }
body.embed-mobile .shell { min-height: 100vh; min-height: 100dvh; }
/* Mobile: full-width pages; the host's header is the way back, so no
   crumbs, no project back button, no sign-in door (the app re-signs). */
body.embed-mobile .sidebar { display: none; }
body.embed-mobile .main { padding-bottom: env(safe-area-inset-bottom); }
body.embed-mobile .fab { bottom: calc(16px + env(safe-area-inset-bottom)); }
body.embed-mobile .crumbs { display: none; }
body.embed-mobile .view-head .btn.quiet.back { display: none; }
body.embed-mobile .pp-back, body.embed-mobile .tp-back-row { display: none; }
/* The search page's own heading repeats the native header's title. */
body.embed-mobile .view.search-view .view-head { display: none; }
body.embed-mobile .view { padding: 14px 12px 30px; }
body.embed-mobile .subnav { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 0; scrollbar-width: none; }
body.embed-mobile .subnav::-webkit-scrollbar { display: none; }
body.embed-mobile .subnav .chip { flex: none; }
body.embed-mobile .fab { display: flex; align-items: center; justify-content: center; gap: 8px; position: fixed; right: 16px; z-index: 12;
  height: 48px; padding: 0 20px 0 16px; border-radius: 999px; border: 0; cursor: pointer; background: var(--brand); color: var(--d-on-brand); box-shadow: var(--shadow-lg);
  font: inherit; font-size: 1rem; font-weight: 600; }
/* Text size (PK-51820 slice 2): the iOS app's scale (ui/text-scale.ts), iOS Text Size or the
   app's own Text size row, at most 2×. Only the app sets it, so the web and the Mac never see
   it. The root is 17px × the scale; every size below follows from it. */
html[data-kit-text] { font-size: calc(17px * var(--kit-text-scale, 1)); }
/* Tab labels stop at 1.15×, as iOS's own tab bars do, and each tab takes its word's width plus
   an even share of the rest: six equal tabs leave "Calendar" 56px of the 62 it needs on a 375pt
   phone, while "Chat" and "Files" use half of theirs. */
html[data-kit-text] .kit-nav.kit-nav--tabs > a, html[data-kit-text] .kit-nav.kit-nav--tabs .kit-nav-more {
  flex: 1 1 auto; font-size: calc(0.75rem * min(var(--kit-text-scale, 1), 1.15) / var(--kit-text-scale, 1)); }
/* The + button grows with its label instead of clipping it, and the last card scrolls clear of it. */
html[data-kit-text] .fab { height: auto; min-height: 48px; padding-block: .4em; }
html[data-kit-text] body.embed-mobile .main:not(.chat-main) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* New message is a 56px round + at every size (PK-51872, Michelle 2026-10-09): it shows on every page
   but Tasks and Projects, where the label took real estate. Named by its aria-label. */
body .fab.fab-round { width: 56px; height: 56px; min-height: 0; padding: 0; gap: 0; border-radius: 50%; }
body .fab.fab-round svg { width: 24px; height: 24px; }
body .fab.fab-round .fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* At the largest sizes the pill would cover half a card: a 60px round +, named by its aria-label. */
html[data-kit-text="largest"] .fab { width: 60px; height: 60px; min-height: 0; padding: 0; gap: 0; border-radius: 50%; }
html[data-kit-text="largest"] .fab svg { width: 28px; height: 28px; }
html[data-kit-text="largest"] .fab .fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 34px-tall selects and date fields clip their own text past about 1.2×: they grow with it. */
html[data-kit-text] :is(select, input[type="date"]) { height: auto; min-height: 34px; padding-block: .25em; }
/* iOS draws a date field at its own width, which passes width:100% as the text grows (New task's
   Due date ran off the phone at 1.35×): held to its column. */
body.embed-mobile input[type="date"] { -webkit-appearance: none; appearance: none; display: block; max-width: 100%; }
/* At the largest sizes the task search takes its own line, not a 95px sliver beside the person chips. */
@media (max-width: 719px) { html[data-kit-text="largest"] .tasks-find { flex-basis: 100%; } }
/* A list page's chips name it already ("My tasks"): no second title under them. */
body.embed-mobile .subnav + .shell .list-head { display: none; }
.panel-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.panel-head .ref { color: var(--ink-3); font-size: 0.8rem; letter-spacing: .02em; white-space: nowrap; }
.panel-head .head-actions { flex: none; }
.panel-head .head-actions .btn { white-space: nowrap; }
/* A narrow peek (beside a wide Kit): Sharing and Copy link keep their icon and, for a screen reader,
   their words; the head stays on one line instead of wrapping Ask Kit into a ball. */
@container panel (max-width: 560px) {
  .panel-head .head-actions .btn:not(.kit-ask) > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
@container panel (max-width: 500px) {
  .panel-head .head-actions .btn.kit-ask > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.panel-head .grow { flex: 1; }
.panel-body { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.panel-body .title-input {
  font-family: var(--serif); font-size: 1.3333rem; font-weight: 600;
  border: 1px solid transparent; background: none; padding: 6px 8px; margin: -6px -8px 0;
  border-radius: var(--r-sm); width: 100%;
}
.panel-body .title-input:hover { border-color: var(--line); background: var(--surface); }
.panel-body .title-input:focus { border-color: var(--d-olive-ink); background: var(--surface); }
/* min-width: 0 on the field and minmax(0, 1fr) on the tracks: a bare 1fr
   track's minimum is its content's minimum width, so a date input or a long
   project name pushed the properties grid out past its card (seen live
   2026-09-03 in the issue peek and the issue page alike). */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.field > input, .field > select, .field > textarea { width: 100%; max-width: 100%; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.panel-props, .panel-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* A wide new-task panel: title across the top, notes down the left, the
   properties in a card on the right. Narrow panels keep one column. A task's
   own panel is the page's B3 in one column (refined.css, PK-51749). */
@container panel (min-width: 680px) {
  .panel.issue .panel-new {
    display: grid; grid-template-columns: minmax(0, 1fr) 250px;
    column-gap: 26px; row-gap: 16px; grid-template-areas: "title title" "main props";
    align-content: start; padding: 20px 26px 26px;
  }
  .panel.issue .panel-new .title-input { grid-area: title; width: calc(100% + 16px); font-size: 1.6rem; }
  .panel.issue .panel-new .panel-main { grid-area: main; gap: 18px; }
  .panel.issue .panel-new .panel-props {
    grid-area: props; align-self: start; position: sticky; top: 0; gap: 10px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow); padding: 14px 16px 16px;
  }
  .panel.issue .panel-new .panel-props .field-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .panel.issue .panel-new .rich-input, .panel.issue .panel-new .rich-preview { min-height: 170px; }
}
.panel-foot {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.panel-foot .stamp { font-size: 0.75rem; color: var(--ink-3); flex: 1; }
/* The project panel (PK-51667): the name is the heading; the facts sit as
   quiet label/value rows — status and lead as chips, dates as Kit writes
   them — so editing reads like the project page, not a form. */
.panel.project-panel .panel-body { gap: 22px; }
.panel.project-panel .title-input { font-size: 1.6rem; letter-spacing: -.02em; line-height: 1.2; }
.pp-props { display: flex; flex-direction: column; gap: 14px; }
.pp-prop { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; }
.pp-prop-l { font-size: 0.8667rem; color: var(--ink-3); padding-top: 6px; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); font: inherit; font-size: 0.8667rem; cursor: pointer; }
.pp-chip .avatar { width: 20px; height: 20px; font-size: 9px; margin-left: -6px; }
.pp-chip:hover { border-color: var(--ink-3); color: var(--ink); }
.pp-chip[aria-checked="true"] { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); font-weight: 600; }
.pp-chip:focus-visible, .pp-date-btn:focus-visible, .pp-date-x:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; }
.pp-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pp-dates-to { font-size: 0.8667rem; color: var(--ink-3); }
.pp-date { position: relative; display: inline-flex; align-items: center; }
.pp-date > input { position: absolute; left: 0; bottom: 0; width: 100%; height: 0; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.pp-date-btn { height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  color: var(--ink); font: inherit; font-size: 0.8667rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.pp-date-btn:hover { border-color: var(--ink-3); }
.pp-date-btn.empty { color: var(--ink-3); border-style: dashed; }
.pp-date-x { border: 0; background: none; color: var(--ink-3); font-size: 1.0667rem; line-height: 1; padding: 4px 6px; cursor: pointer; }
.pp-date-x:hover { color: var(--brand); }
.pp-date-x[hidden] { display: none; }
.panel.project-panel .rich-hint { display: none; }
.panel.project-panel .rich-input { min-height: 120px; }

/* ---------- rich text: the Markdown reader and editor ----------
   Issue notes, project summaries and comments are Markdown
   (web/src/markdown.ts reads it, app.ts builds the elements). .md is a
   rendered document; .rich is the field — the document by default, the
   editor (formatting bar, textarea, Write/Preview) on click. */

.md { line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.md > :first-child { margin-top: 0 !important; }
.md > :last-child { margin-bottom: 0 !important; }
.md p { margin: 0 0 .7em; }
.md h1, .md h2, .md h3, .md h4 { margin: 1.15em 0 .4em; line-height: 1.3; font-weight: 600; }
.md h1 { font-family: var(--serif); font-size: 1.5em; letter-spacing: -.01em; }
.md h2 { font-family: var(--serif); font-size: 1.3em; letter-spacing: -.005em; }
.md h3 { font-size: 1.1em; }
.md h4 { font-size: .82em; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.md ul, .md ol { margin: 0 0 .7em; padding-left: 1.5em; }
.md li { margin: .15em 0; }
.md li > ul, .md li > ol { margin: .15em 0 0; }
.md li > p { margin: 0 0 .4em; }
.md li::marker { color: var(--ink-3); }
.md ol > li::marker { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.md li.task { list-style: none; margin-left: -1.5em; display: flex; align-items: flex-start; gap: 8px; }
.md li.task > input {
  flex: none; margin: .32em 0 0 .15em; width: 15px; height: 15px;
  accent-color: var(--brand); cursor: pointer;
}
.md li.task > input:disabled { cursor: default; }
.md li.task > .task-body { flex: 1; min-width: 0; }
.md li.task > input:checked + .task-body { color: var(--ink-3); }
.md blockquote {
  margin: 0 0 .7em; padding: 2px 0 2px 14px;
  border-left: 3px solid var(--wash-2); color: var(--ink-2);
}
.md blockquote > :last-child { margin-bottom: 0; }
.md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  background: var(--wash); border-radius: 5px; padding: 1px 5px;
}
.md pre {
  margin: 0 0 .7em; padding: 10px 12px;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 0.8333rem; line-height: 1.5;
}
/* Wrapped, not scrolled: a long command in a note wants reading, not a hidden tail. */
.md pre code { background: none; padding: 0; font-size: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
.md a { color: var(--brand); text-decoration: underline; text-decoration-color: rgba(var(--d-brand-rgb),.35); text-underline-offset: 2px; }
.md a:hover { text-decoration-color: currentColor; }
.md a.md-ref { font-weight: 600; text-decoration: none; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.md a.md-ref:hover { text-decoration: underline; }
.md strong { font-weight: 600; }
.md del { color: var(--ink-3); }
.md-table { overflow-x: auto; margin: 0 0 .7em; }
.md table { border-collapse: collapse; font-size: .93em; }
.md th, .md td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; vertical-align: top; }
.md th { background: var(--wash); font-weight: 600; }
.md.boxed {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 12px; font-size: 0.9333rem;
}

/* A Markdown file as a document (KT-60624, ui/md-doc.ts): a readable measure, Familjen heads,
   sections split by hairlines, olive for labels and links, sage for the table head and quotes.
   Terracotta stays off: the page's one act-now control is Download. */
.md-docview { position: relative; min-width: 0; }
.md-flip {
  position: absolute; top: 12px; right: 14px; z-index: 1;
  padding: 4px 10px; border: 1px solid var(--d-line); border-radius: 999px; background: var(--d-surface);
  font: inherit; font-size: 0.8125rem; color: var(--d-olive-ink); cursor: pointer;
}
.md-flip:hover { border-color: var(--d-sage-edge); background: var(--d-sage); }
.md-flip:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; }
.md-source { margin: 0; padding: 48px 32px 28px; white-space: pre-wrap; overflow-wrap: anywhere; font: 0.8667rem/1.6 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--d-ink); }
.md.md-doc { max-width: 68ch; margin: 0 auto; padding: 44px 36px 36px; font-size: 1rem; line-height: 1.65; color: var(--d-ink); }
.md.md-doc p, .md.md-doc ul, .md.md-doc ol, .md.md-doc .md-table, .md.md-doc pre, .md.md-doc blockquote { margin-bottom: 1em; }
.md.md-doc h1, .md.md-doc h2, .md.md-doc h3, .md.md-doc h4 { font-family: var(--d-heading); color: var(--d-ink); text-wrap: pretty; letter-spacing: -.005em; }
.md.md-doc h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0 0 .6em; }
.md.md-doc h2 { font-size: 1.25rem; font-weight: 650; margin: 1.8em 0 .6em; padding-top: 1.1em; border-top: 1px solid var(--d-line); }
.md.md-doc h1 + h2, .md.md-doc > h2:first-child { border-top: 0; padding-top: 0; }
.md.md-doc h3 { font-size: 1.0625rem; font-weight: 650; margin: 1.5em 0 .4em; color: var(--d-olive-ink); }
.md.md-doc h4 { font-size: 1rem; font-weight: 600; margin: 1.3em 0 .3em; text-transform: none; letter-spacing: 0; color: var(--d-muted); }
.md.md-doc li { margin: .3em 0; }
.md.md-doc li::marker { color: var(--d-olive); }
.md.md-doc li.task > input { accent-color: var(--d-olive); }
.md.md-doc a { color: var(--d-olive-ink); text-decoration-color: rgba(var(--d-olive-rgb), .45); }
.md.md-doc a:hover { text-decoration-color: currentColor; }
.md.md-doc strong { font-weight: 650; }
.md.md-doc blockquote { padding: 12px 16px; border: 0; border-radius: 10px; background: var(--d-sage); color: var(--d-ink); }
.md.md-doc blockquote > :last-child, .md.md-doc li ul, .md.md-doc li ol { margin-bottom: 0; }
.md.md-doc a.md-ref { white-space: nowrap; }
.md.md-doc code { background: var(--d-paper2); font-size: .875em; }
.md.md-doc pre { padding: 14px 16px; background: var(--d-paper2); border-color: var(--d-line); overflow-x: auto; }
/* A diagram or a long command keeps its shape in a document: it scrolls rather than wraps. */
.md.md-doc pre code { white-space: pre; overflow-wrap: normal; }
.md.md-doc hr { margin: 2em 0; border-top-color: var(--d-line); }
.md.md-doc .md-table { border: 1px solid var(--d-line); border-radius: 10px; }
.md.md-doc table { width: 100%; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.md.md-doc th, .md.md-doc td { border: 0; border-bottom: 1px solid var(--d-line); padding: 9px 14px; }
.md.md-doc tr:last-child > td { border-bottom: 0; }
.md.md-doc th { background: var(--d-sage); color: var(--d-olive-ink); font-weight: 650; border-bottom-color: var(--d-sage-edge); }
.files-sheet.files-doc { max-height: none; }
.kit-lightbox-body .md-docview { align-self: stretch; width: min(820px, 100%); }
.kit-lightbox-body .md-docview .md-source { padding-top: 48px; max-width: none; }
.kit-lightbox-body .md.md-doc { padding: 40px 20px 20px; }
@media (max-width: 650px) {
  .md.md-doc { padding: 48px 18px 24px; }
  .md.md-doc h1 { font-size: 1.5rem; }
  .md-source { padding: 48px 18px 18px; }
}

/* the field */
.rich { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rich-head { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.rich-label { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.rich-editbtn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; color: var(--ink-3); font-size: 0.8rem; font-weight: 600;
  padding: 2px 7px; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .12s ease;
}
.rich:hover .rich-editbtn, .rich-editbtn:focus-visible { opacity: 1; }
.rich-editbtn:hover { background: var(--wash); color: var(--ink); }
.rich-editbtn[hidden] { display: none; }
@media (hover: none) { .rich-editbtn { opacity: 1; } }
.rich-view {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; min-height: 56px; cursor: text; transition: border-color .12s ease;
}
.rich-view:hover { border-color: var(--ink-3); }
.rich-view.ro { background: var(--paper-2); cursor: default; }
.rich-view.ro:hover { border-color: var(--line); }
.rich-empty { color: var(--ink-3); }
.rich[data-mode="edit"] .rich-view { display: none; }
.rich[data-mode="view"] .rich-edit { display: none; }
.rich-edit {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column;
}
.rich-edit:focus-within { border-color: var(--d-olive-ink); box-shadow: 0 0 0 3px var(--focus); }
.rich-tools {
  display: flex; align-items: center; gap: 1px; flex-wrap: wrap;
  padding: 5px 8px; background: var(--paper-2); border-bottom: 1px solid var(--line);
}
.tool {
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: none;
  color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.tool:hover { background: var(--wash-2); color: var(--ink); }
.tool:disabled { opacity: .4; cursor: default; background: none; }
.tool-sep { width: 1px; height: 18px; background: var(--line); margin: 0 5px; }
.rich-tabs { margin-left: auto; display: inline-flex; background: var(--wash); border-radius: 8px; padding: 2px; }
.rich-tabs button {
  border: 0; background: none; font-size: 0.8rem; font-weight: 600; padding: 3px 10px;
  border-radius: 6px; color: var(--ink-2); cursor: pointer;
}
.rich-tabs button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(var(--d-shade-rgb),.08); }
.rich-input {
  display: block; width: 100%; min-height: 150px; resize: none; overflow: hidden;
  border: 0; border-radius: 0; background: none; padding: 12px 14px; line-height: 1.55;
}
.rich-input:focus { border: 0; box-shadow: none; }
.rich-preview { padding: 12px 14px; min-height: 150px; }
.rich-edit[data-tab="write"] .rich-preview { display: none; }
.rich-edit[data-tab="preview"] .rich-input { display: none; }
.rich-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 12px; border-top: 1px solid var(--line); font-size: 0.7667rem; color: var(--ink-3);
}
.rich-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; }
.rich-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rich-count.over { color: var(--danger); font-weight: 600; }
@media (max-width: 479px) { .rich-hint { display: none; } }

/* ---------- comments ---------- */

.comments { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.comments-head { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.comment-list { display: flex; flex-direction: column; gap: 10px; }
.comment {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.comment-head { display: flex; align-items: center; gap: 8px; }
.comment-head .who { font-weight: 600; font-size: 0.8667rem; }
.comment-head .when { font-size: 0.75rem; color: var(--ink-3); margin-left: auto; }
.comment-body { font-size: 0.9333rem; line-height: 1.5; }
.comment-empty { color: var(--ink-3); font-size: 0.8667rem; padding: 2px 0; }
/* Project updates (PK-51639): one card like Files beside it (files.css .files-related) —
   heading, composer, then rows split by hairlines. Health keeps one colour per word
   everywhere: the pill on a row and the selected chip in the picker. */
.project-updates { margin: 20px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.update-heading { margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; }
.update-count { font-size: 0.8667rem; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.update-composer { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
.update-composer .composer-box { background: var(--paper); }
.update-composer .composer-box:focus-within { background: var(--surface); }
.update-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.update-acts .health-picker { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.update-acts .health-picker::-webkit-scrollbar { display: none; }
.update-acts .chip { flex: none; padding: 3px 10px; font-size: 0.8rem; }
.update-row { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.update-row:last-child { padding-bottom: 0; }
.update-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.update-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 2px; font-size: 0.8rem; color: var(--ink-3); }
.update-meta .who { font-size: 0.8667rem; font-weight: 600; color: var(--ink); }
.update-meta .via { white-space: nowrap; }
.update-meta .when { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.update-empty { color: var(--ink-3); font-size: 0.8667rem; padding: 12px 0 0; border-top: 1px solid var(--line); }
/* Project activity (PK-51640): quieter than an update — one line, small grey type, a dot
   instead of an avatar; the task title is the only thing that reads as a link. */
.activity-row { border-top: 1px solid var(--line); }
.activity-line { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-size: 0.8667rem; color: var(--ink-3); line-height: 1.4; }
.activity-dot { flex: none; width: 6px; height: 6px; margin: 0 9px; border-radius: 50%; background: var(--line); transform: translateY(-1px); }
.activity-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.activity-text .who { color: var(--ink-2); font-weight: 600; }
.activity-task { padding: 0; border: 0; background: none; font: inherit; color: var(--ink-2); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.activity-task:hover { color: var(--ink); text-decoration-color: currentColor; }
.activity-line .when { flex: none; white-space: nowrap; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
details.activity-row > summary { list-style: none; cursor: pointer; }
details.activity-row > summary::-webkit-details-marker { display: none; }
details.activity-row > .activity-row { border-top: 0; padding-left: 24px; }
details.activity-row[open] > summary .activity-dot { background: var(--ink-3); }
.pill.health.on_track, .pill.health.done, .health-chip.on.on_track, .health-chip.on.done { background: rgba(var(--d-ok-rgb),.14); border-color: rgba(var(--d-ok-rgb),.30); color: var(--ok); }
.pill.health.at_risk, .health-chip.on.at_risk { background: rgba(var(--d-snooze-rgb),.14); border-color: rgba(var(--d-snooze-rgb),.32); color: var(--snooze); }
.pill.health.off_track, .health-chip.on.off_track { background: rgba(var(--d-brand-rgb),.12); border-color: rgba(var(--d-brand-rgb),.28); color: var(--brand); }
.pill.health.paused, .health-chip.on.paused { background: var(--wash); border-color: var(--line); color: var(--ink-2); }
@media (max-width: 599px) {
  .update-acts .health-picker { flex-basis: 100%; }
}
.mention {
  color: var(--brand); font-weight: 600; background: rgba(var(--d-brand-rgb),.08);
  border-radius: 4px; padding: 0 3px;
}
.composer { display: flex; gap: 8px; align-items: flex-end; }
/* The comment box: the formatting bar rides inside the frame and shows
   while the box is in use, so an empty thread carries no chrome. */
.composer-box {
  flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.composer-box:focus-within { border-color: var(--d-olive-ink); box-shadow: 0 0 0 3px var(--focus); }
.composer-box .rich-tools { display: none; padding: 3px 6px; }
.composer-box:focus-within .rich-tools, .composer-box.has-text .rich-tools { display: flex; }
.composer-box .tool { width: 26px; height: 26px; }
/* Three lines to start, then it grows with the text (app.ts autosize) up
   to half the viewport and scrolls past that — no drag handle, the size is
   the content's. */
.composer-box textarea {
  display: block; width: 100%; min-height: 84px; max-height: min(50vh, 480px);
  resize: none; overflow-y: auto; padding: 9px 12px; line-height: 1.5;
  border: 0; border-radius: 0; background: none;
}
.composer-box textarea:focus { border: 0; box-shadow: none; }
/* The count shows only near the limit (KT-60170), inside the frame. */
.composer-box .long-text-count { display: none; margin: 0; padding: 0 12px 8px; font-size: 0.75rem; color: var(--ink-3); }
.composer-box .long-text-count.near, .composer-box .long-text-count.error { display: block; }
/* A phone (≤ 720px): the box takes the width, Comment sits under it on the
   right; where the fixed bar offers Comment (below 720px, and in the app) the
   box's own shows once there is text. */
@media (max-width: 720px) {
  .composer { flex-direction: column; align-items: stretch; }
  .composer > .btn { align-self: flex-end; }
}
@media (max-width: 719px) {
  .has-phonebar .composer:has(> .composer-box:not(.has-text)) > .btn.primary { display: none; }
}
body.embed-mobile .composer { flex-direction: column; align-items: stretch; }
body.embed-mobile .composer > .btn { align-self: flex-end; }
body.embed-mobile .has-phonebar .composer:has(> .composer-box:not(.has-text)) > .btn.primary { display: none; }

.comment-count {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.75rem; color: var(--ink-3); white-space: nowrap;
}

/* ---------- schedules ---------- */

.section-title {
  font-family: var(--serif); font-size: 1.3333rem; font-weight: 600; margin: 22px 0 2px;
}
.section-sub { color: var(--ink-2); font-size: 0.8667rem; margin: 0 0 12px; }
.row.sched .title {
  white-space: normal; display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.row.sched .name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.sched .what { font-size: 0.8rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.sched.off .name, .row.sched.off .what { color: var(--ink-3); }
.row .when { font-size: 0.8rem; color: var(--ink-2); white-space: nowrap; }
.kind {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wash); color: var(--ink-2);
}
.kind.agent { background: rgba(var(--d-brand-rgb),.10); color: var(--brand); }
.kind.job { background: rgba(var(--d-info-rgb),.12); color: var(--d-info); }
.kind.rec { background: transparent; color: var(--ink-3); }
.row.sched.off .kind { opacity: .6; }
.onoff {
  font-size: 0.75rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.onoff.on { background: rgba(var(--d-ok-rgb),.14); color: var(--ok); }
.onoff.off { background: var(--wash); color: var(--ink-3); }
.onoff.paused { background: rgba(var(--d-snooze-rgb),.14); color: var(--snooze); }
.badge.warn { background: rgba(var(--d-snooze-rgb),.14); color: var(--snooze); }
.hb {
  font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  border: 1px dashed var(--ink-3); color: var(--ink-3); background: transparent;
}
.hb.on { border-style: solid; color: var(--ink-2); }
.hb.both { border-color: var(--snooze); color: var(--snooze); background: rgba(var(--d-snooze-rgb),.10); }
.fact code { font-size: 0.8rem; background: var(--wash); padding: 1px 5px; border-radius: 4px; }
.run {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.8rem; color: var(--ink-2); white-space: nowrap;
}
.run::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); flex: none; }
.run.ok::before { background: var(--ok); }
.run.error::before, .run.missed::before, .run.timeout::before { background: var(--danger); }
.run.claimed::before, .run.interrupted::before { background: var(--snooze); }
.run.error, .run.missed, .run.timeout { color: var(--danger); font-weight: 600; }
.run.none { color: var(--ink-3); }

.panel-title { font-family: var(--serif); font-size: 1.3333rem; font-weight: 600; margin: 0; }
.panel-sub { color: var(--ink-2); margin: -6px 0 0; }
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fact .k { font-size: 0.75rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.fact .v { font-size: 0.9333rem; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; }
.callout {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 12px; font-size: 0.8667rem; color: var(--ink-2);
}
.callout.warn { border-color: rgba(var(--d-snooze-rgb),.4); background: rgba(var(--d-snooze-rgb),.08); color: var(--ink); }
/* The read-only panels (schedule, recurring task) are wider than the editor
   panel: a template body and a run history want the room. */
.panel.wide { width: min(720px, 100%); }
/* flex: none — .panel-body is a flex column, and a scrollable child would
   otherwise shrink to a sliver while its siblings keep their height (the
   template showed one clipped line). No max-height: the panel body is the
   scroller, so the whole template reads top to bottom. */
.pre {
  flex: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px 12px; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8333rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.runs { display: flex; flex-direction: column; gap: 6px; }
.run-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 0.8667rem;
}
.run-line { display: flex; align-items: center; gap: 10px; }
.run-line .date { font-weight: 600; min-width: 84px; }
.run-line .sub { color: var(--ink-3); font-size: 0.8rem; }
.run-item .err { color: var(--danger); font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- tools ---------- */

/* Access kinds on the tool rows: reads are calm, writes carry the brand,
   posts (cards into the chat) the same teal as jobs. */
.kind.read { background: rgba(var(--d-ok-rgb),.12); color: var(--ok); }
.kind.write { background: rgba(var(--d-brand-rgb),.10); color: var(--brand); }
.kind.post { background: rgba(var(--d-info-rgb),.12); color: var(--d-info); }
.group-blurb { margin: 4px 2px 8px; color: var(--ink-2); font-size: 0.8667rem; }
.row.tool-row .ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tool-prose { margin: 0; font-size: 0.9333rem; line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 719px) { .row.tool-row .ref, .row.tool-row .badge { display: none; } }

/* ---------- issue page ---------- */

.view.wide { max-width: 1000px; }
.crumbs {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0;
  font-size: 0.8667rem; color: var(--ink-2);
}
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { color: var(--ink-3); }
.crumbs .current { color: var(--ink); font-weight: 600; letter-spacing: .02em; }
.head-actions { display: flex; align-items: center; gap: 4px; }
.head-actions .btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8667rem; padding: 6px 10px; }
/* The way back sits on the same line, at the same size, as the actions across from it. */
.view-head .btn.back { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8667rem; padding: 6px 10px 6px 6px; }

.issue-page {
  display: grid; grid-template-columns: minmax(0, 1fr) 270px; column-gap: 26px; row-gap: 22px;
  grid-template-areas: "main aside" "thread aside"; align-items: start;
}
.issue-main { grid-area: main; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.issue-thread { grid-area: thread; min-width: 0; }
.issue-aside {
  grid-area: aside; position: sticky; top: 20px;
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 14px 16px 16px;
}
.issue-aside > .btn { width: 100%; margin-bottom: 4px; }
.issue-aside .divider { height: 1px; background: var(--line); margin: 4px 0 2px; }

.issue-title {
  display: block; width: calc(100% + 16px); margin: 0 -8px; padding: 6px 8px;
  font-family: var(--serif); font-size: 1.8667rem; font-weight: 600; line-height: 1.25;
  border: 1px solid transparent; background: none; border-radius: var(--r-sm);
  resize: none; overflow: hidden;
}
.issue-title:hover:not(:disabled) { border-color: var(--line); background: var(--surface); }
.issue-title:focus { border-color: var(--d-olive-ink); background: var(--surface); }
.issue-title:disabled { opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--ink); }
.issue-title.closed { color: var(--ink-3); -webkit-text-fill-color: var(--ink-3); }

.issue-section { display: flex; flex-direction: column; gap: 8px; }
.savebar { display: flex; justify-content: flex-end; gap: 8px; }
.savebar[hidden] { display: none; }
.issue-thread .comments { border-top: 0; padding-top: 0; }

.prop { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; }
.prop > label { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.prop select, .prop input { width: 100%; font-size: 0.8667rem; }
.prop input { padding: 5px 8px; }
.prop select { height: 30px; padding-left: 8px; }
.prop .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.stamps { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: var(--ink-3); }
.stamps b { color: var(--ink-2); font-weight: 600; margin-right: 5px; }

.panel-head a.ref:hover, .row a.ref:hover { color: var(--brand); text-decoration: underline; }
.panel-head .expand { display: inline-flex; padding: 4px 6px; margin-left: -4px; }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 40;
  /* Its text's width, at most the screen less 16px a side: left: 50% alone shrank it to half a phone (KT-60409). */
  width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: var(--ink); color: var(--paper); padding: 10px 18px;
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); font-size: 0.9333rem;
  display: flex; gap: 14px; align-items: center;
  animation: toast-in .15s ease-out;
}
@keyframes toast-in { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.toast.error { background: var(--danger); color: var(--d-on-brand); }
.toast button { flex: none; border: 0; background: none; color: inherit; font-weight: 700; cursor: pointer; padding: 0; }
/* On a phone it sits above the tab bar and the round + (72px up, 56px tall); in the app, above the + alone. */
@media (max-width: 719px) { .toast { bottom: calc(140px + env(safe-area-inset-bottom)); } }
body.embed-mobile .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ---------- signed-out ---------- */

.signin {
  min-height: 80vh; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; text-align: center; padding: 20px;
}
.signin h1 { font-family: var(--serif); font-weight: 600; margin: 0; }
.signin p { color: var(--ink-2); max-width: 340px; margin: 0; }

/* The welcome panel (signed out or expired): fox and moon, "Kitsune", the
   tagline, one button, the switch link, the foot — over the whole page, top
   bar included. */
.KitWelcome {
  position: fixed; inset: 0; z-index: 40; display: flex; overflow: auto; flex-direction: column;
  align-items: center; justify-content: safe center; padding: 40px 24px;
  background: var(--paper); color: var(--ink); text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.KitWelcome__panel {
  width: min(100%, 440px); padding: 38px 38px 34px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); box-shadow: 0 16px 45px -30px rgba(var(--d-shade-rgb),.21);
}
.KitWelcome__art { position: relative; width: 168px; margin: 0 auto 23px; }
.KitWelcome__art img { position: relative; display: block; margin: auto; }
.KitWelcome__moon {
  position: absolute; top: 0; right: 0; width: 26px; height: 26px; border-radius: 50%;
  box-shadow: -7px 4px 0 0 var(--d-ring); transform: rotate(-25deg);
}
.KitWelcome h1 { margin: 0; font-family: inherit; font-size: 2.2667rem; font-weight: 600; letter-spacing: -.04em; }
.KitWelcome h2 { margin: 13px 0 0; font-family: inherit; font-size: 1.2rem; font-weight: 400; letter-spacing: -.01em; }
.KitWelcome__panel > p { margin: 17px 0 26px; color: var(--ink-2); font-size: 0.9333rem; line-height: 1.7; }
/* The one line an expiry adds, and the desktop shell's line in place of the button. */
.KitWelcome__panel > p.KitWelcome__note { margin: -10px 0 22px; color: var(--brand); font-weight: 600; }
.KitWelcome__panel > p.KitWelcome__desktop { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 600; }
.KitWelcome__continue {
  display: flex; width: 100%; min-height: 50px; align-items: center; justify-content: center; gap: 18px;
  padding: 12px 20px; border: 0; border-radius: 9px; background: var(--brand); color: var(--d-on-brand);
  cursor: pointer; font-size: 1rem; font-weight: 600; transition: background 160ms ease;
}
.KitWelcome__continue:hover { background: var(--d-hover); color: var(--d-on-brand); }
.KitWelcome__switch {
  display: inline-block; margin-top: 23px; color: var(--ink-2); font-size: 0.8667rem;
  text-decoration: underline; text-underline-offset: 4px;
}
.KitWelcome__switch:hover { color: var(--brand); }
.KitWelcome :is(button, a):focus-visible { outline: 3px solid var(--d-olive-ink); outline-offset: 5px; }
.KitWelcome__foot { margin: 24px 0 0; font-size: 0.8rem; color: var(--ink); }
@media (max-width: 480px) {
  .KitWelcome { padding: 24px 20px; }
  .KitWelcome__panel { padding: 30px 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .KitWelcome__continue { transition: none; }
}

/* ---------- narrow list column ----------
   Two-line rows: the title gets the full width, the metadata tucks under it.
   Keyed to the main column's own width, not the window's, so it covers a
   phone and a desktop list squeezed beside the issue peek alike. */

@container main (max-width: 620px) {
  .row {
    padding: 10px 12px;
    display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; row-gap: 3px;
    align-items: center;
  }
  .row .title {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .row .meta { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .row .meta .avatar { order: -1; width: 18px; height: 18px; font-size: 9px; }
  .row .badge { max-width: 140px; }
  .row.sched .name, .row.sched .what { white-space: normal; }
}

/* ---------- mobile ---------- */

@media (max-width: 719px) {
  .sidebar { display: none; }
  .topbar { padding: 0 10px; }
  .topbar .topbar-end .name { display: none; }
  .household-switch select { max-width: 32vw; padding-left: 10px; }
  /* The field gives way to a magnifying glass at the top right (KT-60285). */
  .topbar #kit-search { display: none; }
  .topbar .topbar-search-btn { display: inline-flex; }
  /* The Navigation section becomes the bottom tab bar (the shell UI's
     'tabs' mount) — same views, the native phone position. */
  .kit-nav.kit-nav--tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    gap: 0; justify-content: space-around;
    --kit-nav-fg: var(--ink-3); --kit-nav-active-fg: var(--brand); --kit-nav-active-bg: transparent; --kit-nav-hover-bg: transparent;
  }
  /* Five tabs and "More" (2026-10-06): each label fits a 375px phone whole. */
  /* (.kit-nav.kit-nav--tabs: the shell UI injects its base .kit-nav rules
     after this sheet, so ties on padding and size would go to it.) */
  .kit-nav.kit-nav--tabs > a, .kit-nav.kit-nav--tabs .kit-nav-more {
    flex: 1 1 0; min-width: 0; max-width: none; display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    margin: 0; padding: 4px 2px; border: 0; border-radius: 0; background: none; cursor: pointer;
    font: inherit; font-size: 0.75rem; font-weight: 500; line-height: 1; color: var(--kit-nav-fg); text-decoration: none;
  }
  .kit-nav.kit-nav--tabs span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kit-nav.kit-nav--tabs :is(a, .kit-nav-more)[aria-current="page"] { font-weight: 600; color: var(--kit-nav-active-fg); }
  .kit-nav.kit-nav--tabs svg { width: 22px; height: 22px; }
  .kit-nav.kit-nav--tabs .kit-nav-more:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: -2px; }
  /* "More": a sheet above the bar's right end — Mail, the settings views,
     the household's settings. */
  .kit-nav.kit-nav--tabs:has(.kit-nav-sheet) { z-index: 40; } /* over the + button */
  .kit-nav.kit-nav--tabs .kit-nav-sheet {
    position: absolute; right: 8px; bottom: calc(100% + 6px); min-width: 210px;
    display: flex; flex-direction: column; padding: 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  }
  .kit-nav.kit-nav--tabs .kit-nav-sheet a {
    display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 11px 12px;
    border-radius: var(--r-sm); font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: none;
  }
  .kit-nav.kit-nav--tabs .kit-nav-sheet a svg { width: 18px; height: 18px; color: var(--ink-3); }
  .kit-nav.kit-nav--tabs .kit-nav-sheet a[aria-current="page"] { background: var(--wash); color: var(--ink); }
  .kit-nav.kit-nav--tabs .kit-nav-sheet .kit-nav-link { border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 14px; color: var(--ink-2); }

  .subnav { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 0; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav .chip { flex: none; }
  .fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; right: 16px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 12;
    gap: 8px; height: 48px; padding: 0 20px 0 16px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--brand); color: var(--d-on-brand); box-shadow: var(--shadow-lg);
    font: inherit; font-size: 1rem; font-weight: 600;
  }
  /* The page's one action, labelled (2026-10-06): New task / New project / New message. */
  .subnav + .shell .list-head { display: none; }
  .subnav { padding-top: 14px; }
  .fab:hover { background: var(--brand-hi); }

  .main { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .view { padding: 14px 12px 30px; }
  .view-head h1 { font-size: 1.4667rem; }

  .overlay { justify-content: stretch; }
  .panel { width: 100%; animation: sheet-in .2s ease-out; }
  @keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .facts-grid { grid-template-columns: 1fr; }

  .view.wide { max-width: none; }
  .issue-page { grid-template-columns: 1fr; grid-template-areas: "main" "aside" "thread"; row-gap: 18px; }
  .issue-aside { position: static; }
  .issue-title { font-size: 1.5333rem; }
}

/* ---------- search (the #/search page: the iOS Search tab, and anyone who
   lands on it) ---------- */
.view.search-view { max-width: 760px; }
.view.search-view .kit-search--page { margin-top: 4px; }
.view.search-view .kit-search { --kit-search-bg: var(--surface); --kit-search-line: var(--line); --kit-search-fg: var(--ink-2); }
.view.search-view .kit-search-box input { color: var(--ink); }
.view.search-view .kit-search-pop {
  --kit-pop-bg: transparent; --kit-pop-fg: var(--ink); --kit-pop-fg-2: var(--ink-2);
  --kit-pop-line: var(--line); --kit-pop-hover: var(--wash); --kit-pop-mark: rgba(217, 98, 43, .22);
  color: var(--ink);
}
.view.search-view .kit-sr-ic { background: var(--wash); color: var(--ink-2); }

/* ---------- calendar ---------- */
/* KT-60539 (Mail + Calendar S3): the Kit design system, S1 option 2 (docs/design/mail-calendar-s1/README.md).
   Tokens only; sage and olive for structure, olive-ink for labels; Familjen Grotesk on headings; sentence case.
   One terracotta: the peek's Join video call. An event is filled with its person's avatar colour (`--who`,
   member data set by app.ts paintEvent) and Google's colour is a 7 px dot (`--ev`); the house's events are
   paper. Michelle adopted the fill provisionally (2026-10-15), so it lives in the few rules marked "fill". */

.view.wide { max-width: 1240px; }
.view.wide :focus-visible, .ev-panel :focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; box-shadow: none; }
.cal-nav { display: flex; align-items: center; gap: 2px; }
.cal-nav .btn { min-height: 40px; }
.cal-nav .btn.quiet { padding: 6px 8px; min-width: 40px; }
.cal-range {
  font-family: var(--d-heading); font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; text-wrap: pretty;
  color: var(--d-ink); margin: 0 0 0 8px; white-space: nowrap;
}
/* The 390 person picker (KT-60542): a chip per person and one for Shared, olive while their lane shows. */
.cal-people { display: none; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 0 10px; padding: 1px; }
.cal-person {
  display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 12px 0 6px;
  font: inherit; font-size: 0.8667rem; font-weight: 600; color: var(--d-muted); cursor: pointer;
  background: var(--d-paper2); border: 1px solid var(--d-line); border-radius: 999px;
}
.cal-person .avatar { width: 24px; height: 24px; font-size: 11px; opacity: .45; }
.cal-person > svg { margin-left: 4px; }
.cal-person[aria-pressed="true"] { background: var(--d-surface); border-color: var(--d-sage-edge); color: var(--d-olive-ink); }
.cal-person[aria-pressed="true"] .avatar { opacity: 1; }
.cal-person:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; }
/* The span switch: one segmented control in olive, not four terracotta chips. */
.view.wide .view-head .chip-row { gap: 2px; padding: 2px; border: 1px solid var(--d-line); border-radius: 999px; background: var(--d-paper2); flex-wrap: nowrap; }
.view.wide .view-head .chip { border: 1px solid transparent; background: none; color: var(--d-muted); min-height: 40px; padding: 0 14px; border-radius: 999px; }
.view.wide .view-head .chip.on { background: var(--d-surface); border-color: var(--d-sage-edge); color: var(--d-olive-ink); font-weight: 650; }

.cal { display: flex; gap: 16px; align-items: flex-start; }
.cal-side {
  width: 232px; flex: none; position: sticky; top: 12px;
  /* ~25 connected calendars: the list scrolls inside the window instead of running off it. */
  max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; padding-right: 2px;
}
/* The hour's height (app.ts hours()): 72 px in Week so a 30-minute title gets two lines, 68 px for Day and
   3 days on a phone, 48 px otherwise. */
.cal-main {
  --cal-hour: 48px;
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--d-line);
  border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column;
}
.cal-main.span-7 { --cal-hour: 72px; }
.cal-main > .empty, .cal-main > .cal-issues { margin: 12px; }

/* Calendar list (PK-51707): a key, like the legend inside a paper planner's
   cover — a person per section, the calendar's own colour as its tick. */
.cal-list { display: flex; flex-direction: column; gap: 6px; }
.cal-list-head {
  display: flex; align-items: baseline; gap: 8px; padding: 4px 8px 0;
  position: sticky; top: 0; z-index: 1; background: var(--d-paper);
}
.cal-list-head h2 { font: 650 1rem var(--d-heading); color: var(--d-olive-ink); margin: 0; }
.cal-count { display: none; }
.cal-show-all, .cal-only, .ev-cal-hide {
  font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 18px;
  border: 0; cursor: pointer; border-radius: 6px; white-space: nowrap; background: none;
}
.cal-show-all { color: var(--d-olive-ink); padding: 0 4px; }
.cal-show-all:hover { color: var(--d-ink); text-decoration: underline; }
.cal-filter { width: 100%; font-size: 0.8667rem; min-height: 40px; background: var(--d-surface); border-color: var(--d-line); }
.cal-filter:focus { border-color: var(--d-olive-ink); box-shadow: 0 0 0 3px rgba(var(--d-olive-rgb), .2); }
.cal-list-empty { font-size: 0.8667rem; color: var(--d-muted); padding: 6px 8px; }
.cal-groups { display: flex; flex-direction: column; gap: 4px; }
.cal-group + .cal-group { border-top: 1px solid var(--d-line); padding-top: 4px; }
.cal-group-head { display: flex; align-items: center; gap: 2px; padding-left: 4px; min-height: 40px; border-radius: var(--r-sm); }
.cal-group-head:hover { background: var(--d-paper2); }
.cal-disclose {
  flex: 1; min-width: 0; min-height: 40px; display: flex; align-items: center; gap: 7px; padding: 7px 6px;
  border: 0; background: none; font: inherit; font-size: 0.8667rem; font-weight: 600; color: var(--d-ink); cursor: pointer; text-align: left;
  border-radius: var(--r-sm);
}
.cal-disclose > svg:first-child { color: var(--d-muted); flex: none; transition: transform .15s ease; }
.cal-disclose[aria-expanded="false"] > svg:first-child { transform: rotate(-90deg); }
.cal-disclose .avatar { width: 20px; height: 20px; font-size: 10px; }
.cal-group-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: var(--d-ink); }
.cal-group-count { margin-left: auto; font-size: 0.8667rem; font-weight: 500; color: var(--d-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-rows { list-style: none; margin: 0 0 4px; padding: 0; }
.cal-row {
  display: flex; align-items: center; gap: 9px; padding: 0 6px 0 8px; min-height: 36px;
  font-size: 0.8667rem; border-radius: var(--r-sm); min-width: 0;
}
.cal-row:hover { background: var(--d-paper2); }
.cal-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; padding: 6px 0; }
.cal-row:has(.cal-tick:not(:checked)) .cal-name { color: var(--d-muted); }
.cal-badge { font-size: 0.75rem; color: var(--d-muted); flex: none; }
/* The tick: the calendar's colour filled when shown, its outline when hidden;
   the group's tick shows a dash for "some". 18px box inside a 36px row. */
.cal-tick {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer;
  width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--c); background: transparent;
  display: inline-grid; place-content: center; transition: background-color .12s ease;
}
.cal-tick::after {
  content: ''; width: 10px; height: 6px; margin-top: -3px;
  border: solid var(--on-c); border-width: 0 0 2px 2px; transform: rotate(-45deg); opacity: 0;
}
.cal-tick:checked { background: var(--c); }
.cal-tick:checked::after { opacity: 1; }
.cal-tick:indeterminate { background: var(--c); }
.cal-tick:indeterminate::after { opacity: 1; width: 8px; height: 0; margin-top: 0; border-width: 0 0 2px 0; transform: none; }
.cal-tick.group { width: 16px; height: 16px; border-radius: 4px; }
/* "Only" sits at the row's end; it shows on hover or keyboard focus, and always on touch. */
.cal-only { color: var(--d-olive-ink); padding: 1px 6px; opacity: 0; flex: none; }
.cal-only:hover { background: rgba(var(--d-olive-rgb), .12); }
.cal-only:focus-visible { opacity: 1; }
.cal-row:hover .cal-only, .cal-group-head:hover .cal-only, .cal-row:focus-within .cal-only, .cal-group-head:focus-within .cal-only { opacity: 1; }
@media (hover: none) { .cal-only { opacity: 1; } }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cal-dot.hollow { background: transparent; border: 2px solid var(--c); width: 10px; height: 10px; box-sizing: border-box; }

.cal-hidden-note {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; font-size: 0.8667rem; color: var(--d-muted);
  background: var(--d-paper2); border-bottom: 1px solid var(--d-line);
}
.cal-hidden-dots { display: inline-flex; gap: 3px; }

.cal-issues {
  border: 1px solid rgba(var(--d-danger-rgb),.3); background: rgba(var(--d-danger-rgb),.06); color: var(--danger);
  border-radius: var(--r-md); padding: 10px 14px; font-size: 0.8667rem;
  display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere;
}

/* The grid. Day names in sentence case; today is olive-ink, not terracotta. */
.cal-days { display: grid; border-bottom: 1px solid var(--d-line); }
.cal-day {
  border: 0; background: none; cursor: pointer; padding: 8px 4px 6px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--d-muted); border-left: 1px solid var(--d-line);
}
.cal-day:hover .num { background: var(--d-paper2); }
.cal-day .dow { font-size: 0.8667rem; }
.cal-day .num {
  font-family: var(--d-heading); font-weight: 600; font-size: 1.3333rem; line-height: 1; color: var(--d-ink);
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.cal-day.today .dow { color: var(--d-olive-ink); font-weight: 650; }
.cal-day.today .num, .cal-day.today:hover .num { background: var(--d-olive-ink); color: var(--d-surface); }

.cal-allday {
  display: grid; grid-auto-rows: 24px; row-gap: 2px; padding: 4px 0;
  border-bottom: 1px solid var(--d-line); background: var(--d-paper);
}
.cal-allday-label { grid-column: 1; grid-row: 1; font-size: 0.75rem; color: var(--d-muted); text-align: right; padding: 5px 6px 0 0; }

.cal-scroll { overflow-y: auto; max-height: calc(100vh - 250px); min-height: 320px; position: relative; }
.cal-body { display: grid; position: relative; }
.cal-gutter { position: relative; }
.cal-hour-label {
  position: absolute; right: 6px; transform: translateY(-50%);
  font-size: 0.75rem; color: var(--d-muted); white-space: nowrap;
}
.cal-col { position: relative; border-left: 1px solid var(--d-line); min-width: 0; }
.cal-col.today { background: rgba(var(--d-olive-rgb), .05); }
.cal-hour { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--d-line); }
.cal-hour:first-child { border-top: 0; }
.cal-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--d-olive-ink); z-index: 3; pointer-events: none; }
.cal-now::before {
  content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--d-olive-ink);
}

/* An event block: its title, then its time; a block too narrow for both shows the title alone (below). */
.cal-ev {
  --ev: var(--d-olive); --who: var(--d-line);
  position: absolute; z-index: 2; text-align: left; cursor: pointer; overflow: hidden; container-type: inline-size;
  border-radius: 7px; padding: 3px 6px; font-size: 0.8rem; line-height: 1.25; color: var(--d-ink);
  background: var(--d-surface); border: 1px solid var(--d-line);
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.cal-ev:hover { z-index: 4; }
/* Titles break between words and take the lines the block has room for (a short block, two). */
.cal-ev .s {
  font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
  overflow-wrap: break-word; line-height: 1.2; flex: none;
}
/* The title keeps its lines; the time takes what is left. */
.cal-ev .t { color: var(--d-ink); font-size: 0.75rem; min-height: 0; overflow: hidden; }
.cal-ev.short { padding: 2px 6px 0; }
.cal-ev.short .s { -webkit-line-clamp: 2; line-height: 1.05; }
/* Fill: the person's avatar colour; the house's events are paper. */
.cal-ev[data-who], .cal-wl-ev[data-who] {
  background: color-mix(in srgb, var(--who) 26%, var(--d-surface));
  border: 1px solid color-mix(in srgb, var(--who) 50%, var(--d-surface));
}
.cal-ev[data-who="house"], .cal-wl-ev[data-who="house"] { background: var(--d-paper2); border-color: var(--d-line); }
.cal-ev[data-who]:hover, .cal-wl-ev[data-who]:hover { background: color-mix(in srgb, var(--who) 36%, var(--d-surface)); }
.cal-ev[data-who="house"]:hover, .cal-wl-ev[data-who="house"]:hover { background: var(--d-sage); }
/* Google's colour: a 7 px dot before the title. */
.cal-ev .s::before, .cal-wl-ev .s::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ev);
  margin-right: 5px; vertical-align: 0.08em;
}
/* Two events side by side leave a narrow block: the title alone, smaller; the time is on hover and in the peek. */
@container (max-width: 60px) {
  .cal-ev .t, .cal-ev .s::before { display: none; }
  .cal-ev .s { font-size: 0.75rem; -webkit-line-clamp: 6; overflow-wrap: normal; hyphens: auto; }
}
.cal-ev.declined, .cal-wl-ev.declined { opacity: .55; }
.cal-ev.declined .s, .cal-wl-ev.declined .s { text-decoration: line-through; }
.cal-ev.free, .cal-wl-ev.free { background: var(--d-surface); border-style: dashed; }
.cal-ev.allday { position: static; margin: 0 3px; height: 22px; justify-content: center; }
.cal-ev.allday .s { -webkit-line-clamp: 1; }
.view.wide :is(.cal-ev, .cal-day):focus-visible { outline-offset: 1px; z-index: 5; }
.view.wide .cal-scroll:focus-visible { outline-offset: -2px; }

/* The week at 390 (app.ts weekListEl): a list of days, in place of seven columns too narrow for a title. */
.cal-week-list { display: none; background: var(--d-paper); }
.cal-wl-day { border-top: 1px solid var(--d-line); padding: 10px 2px 8px; }
.cal-wl-day:first-child { border-top: 0; }
.cal-wl-day h3 { margin: 0 0 4px; font: 650 1rem var(--d-heading); color: var(--d-ink); display: flex; gap: 8px; align-items: baseline; }
.cal-wl-day h3 span { font: 400 0.8667rem var(--d-body); color: var(--d-muted); }
.cal-wl-day.today h3 { color: var(--d-olive-ink); }
.cal-wl-ev {
  --ev: var(--d-olive); --who: var(--d-line);
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: baseline; width: 100%;
  padding: 8px 10px; margin: 4px 0; min-height: 40px; box-sizing: border-box; border-radius: 8px;
  font: inherit; text-align: left; color: var(--d-ink); cursor: pointer;
}
.cal-wl-ev .t { color: var(--d-muted); font-size: 0.8667rem; font-variant-numeric: tabular-nums; }
.cal-wl-ev .s { font-weight: 600; overflow-wrap: break-word; min-width: 0; }
.cal-wl-none { color: var(--d-muted); font-size: 0.9333rem; padding: 2px 0 4px; }

/* event panel */
.ev-title {
  font-family: var(--d-heading); font-size: 1.4667rem; font-weight: 650; letter-spacing: -.01em; text-wrap: pretty;
  margin: 0; line-height: 1.25; overflow-wrap: anywhere;
}
.ev-panel .btn { min-height: 40px; display: inline-flex; align-items: center; }
.ev-fact { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9333rem; }
.ev-fact > svg { flex: none; margin-top: 2px; color: var(--d-muted); }
.ev-fact .v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ev-cals { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ev-cal {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.8667rem; min-height: 28px;
  padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--d-paper2); color: var(--d-ink); max-width: 100%;
}
.ev-cal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev-cal .avatar { width: 18px; height: 18px; font-size: 9px; }
.ev-cal-hide { color: var(--d-olive-ink); padding: 2px 8px; border-radius: 999px; min-height: 40px; display: inline-flex; align-items: center; }
.ev-cal-hide:hover { background: var(--d-sage); color: var(--d-ink); }
.ev-copies { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ev-copy { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 0.9333rem; }
.ev-copy-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ev-copy-on { color: var(--d-muted); font-size: 0.8667rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.ev-copy-open { color: var(--d-olive-ink); text-decoration: underline; flex: none; }
.ev-panel:focus { outline: none; }
.ev-where { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 0.8667rem; color: var(--d-muted); }
.ev-where > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-more { color: var(--d-muted); font-variant-numeric: tabular-nums; }
.ev-desc {
  overflow-wrap: anywhere; font-size: 0.9333rem; line-height: 1.5;
  background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--r-md);
  padding: 10px 12px; max-height: 260px; overflow-y: auto;
}
.guests { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--d-line); padding-top: 14px; }
.guests-head { display: flex; align-items: baseline; gap: 8px; font: 650 1rem var(--d-heading); color: var(--d-olive-ink); }
.guests-head .tally { font: 400 0.8667rem var(--d-body); color: var(--d-muted); }
/* Guests as one quiet list, not a stack of cards: hairlines between rows. */
.guest-list { list-style: none; margin: 0; padding: 0; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--r-md); }
.guest { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 0.8667rem; }
.guest + .guest { border-top: 1px solid var(--d-line); }
.guest:focus { outline: none; }
.guests-more { align-self: flex-start; font-size: 0.8667rem; padding: 4px 8px; }
.guest > svg { flex: none; }
.guest .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.guest .who .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest .who .mail { font-size: 0.75rem; color: var(--d-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest .tag { font-size: 0.75rem; color: var(--d-muted); flex: none; }

@media (max-width: 719px) {
  .view.wide .view-head h1 { font-size: 1.8rem; }
  .view.wide .view-head .chip-row { width: 100%; }
  .view.wide .view-head .chip { flex: 1 1 0; padding: 0 6px; }
  /* The phone's rail is the person picker (KT-60542); the checkbox list is the desktop's. */
  .cal-side { display: none; }
  .cal-people { display: flex; }
  .cal-range { font-size: 0.9333rem; margin: 0 0 0 4px; }
  .view-head .chip-row { order: 5; }
  .cal-main:not(.span-7) { --cal-hour: 68px; }
  .cal-scroll { max-height: calc(100vh - 300px); }
  .cal-ev { padding: 2px 4px; font-size: 0.75rem; border-radius: 5px; }
  .cal-main:not(.span-1) .cal-ev .t { display: none; }
  .cal-day { padding: 6px 2px 4px; }
  .cal-day .num { font-size: 1.2rem; width: 28px; height: 28px; }
  /* Week: the list of days replaces the grid. */
  .cal-main.span-7 { background: var(--d-paper); border: 0; }
  .cal-main.span-7 > :is(.cal-days, .cal-allday, .cal-scroll) { display: none; }
  .cal-main.span-7 > .cal-week-list { display: block; }
}

/* ---------- the desktop Calendar (KT-60786) ----------
   Michelle's pick after panel round 2: Week, with its This week band, and Next 4 weeks as a list by week. No rail
   column: the person chips sit under the title and "N calendars" opens the list over the week. Warm accents: the
   fox in the band and at the foot of Next 4 weeks; no terracotta on either view (the peek keeps Join video call). */
.cal-bar { display: contents; }
.btn.olive { background: var(--d-olive-ink); border-color: var(--d-olive-ink); color: var(--d-surface); }
.btn.olive:hover { background: var(--d-ink); border-color: var(--d-ink); }
.btn.outline { background: var(--d-surface); border: 1px solid var(--d-sage-edge); color: var(--d-olive-ink); }
.cal-link, .cal-cals {
  font: inherit; font-weight: 600; color: var(--d-olive-ink); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--d-sage-edge); text-underline-offset: 3px;
}
.cal-fox { width: 22px; height: 22px; flex: none; }
@media (min-width: 720px) {
  .cal-bar { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; position: relative; flex-wrap: wrap; }
  .cal-bar .cal-people { display: flex; margin: 0; overflow: visible; }
  .cal-cals { min-height: 40px; padding: 0 10px; font-size: 0.8667rem; }
  .cal-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 340px;
    max-height: min(640px, calc(100vh - 220px)); overflow: auto; overscroll-behavior: contain; padding: 14px 14px 10px;
    background: var(--d-surface); border: 1px solid var(--d-sage-edge); border-radius: var(--d-radius, 12px);
    box-shadow: 0 18px 40px -20px rgba(var(--d-shade-rgb), .35);
  }
  .cal-pop[hidden] { display: none; }

  /* The band: sage, the fox first, each disagreement in words with its two buttons. */
  .cal-band {
    display: flex; align-items: flex-start; gap: 14px; margin: 0 0 14px; padding: 12px 16px;
    background: var(--d-sage); border: 1px solid var(--d-sage-edge); border-radius: var(--d-radius, 12px);
  }
  .cal-band .cal-fox { margin-top: 2px; }
  .cal-band-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .cal-band h2 { margin: 0; font: 650 1rem var(--d-heading); color: var(--d-olive-ink); }
  .cal-band-item { display: flex; align-items: center; gap: 14px; }
  .cal-band-item p { flex: 1; min-width: 0; margin: 0; color: var(--d-ink); line-height: 1.4; text-wrap: pretty; }
  .cal-band-item .acts, .nw-row .acts { display: flex; gap: 8px; flex: none; align-items: center; }
  .cal-band-item .btn { min-height: 40px; }

  /* Week: 7 AM to 10 PM on the page, one colour mark per tile (the person's fill), times in ink. */
  .cal-main.span-7 .cal-ev .s::before { display: none; }
  .cal-main.span-7 .cal-ev[data-who]:not([data-who="house"]) { background: color-mix(in srgb, var(--who) 34%, var(--d-surface)); }
  .cal-main.span-7 .cal-ev .t { color: var(--d-ink); }
  .cal-main.span-7 .cal-ev .s { -webkit-line-clamp: 3; }
  .cal-main.span-7 .cal-ev.short .s { -webkit-line-clamp: 1; line-height: 1.2; }
  .cal-main.span-7 .cal-ev.cascade { box-shadow: -2px 0 0 var(--d-surface), 0 1px 3px rgba(var(--d-shade-rgb), .12); }
  .cal-main.span-7 .cal-ev.allday { height: auto; min-height: 22px; padding: 3px 6px; }
  .cal-main.span-7 .cal-ev.allday .s { -webkit-line-clamp: 2; white-space: normal; }
  .cal-main.span-7 .cal-allday { grid-auto-rows: minmax(24px, auto); align-items: start; }
  .cal-main.span-7 div.cal-day { cursor: default; }
  .cal-main.span-7 div.cal-day:hover .num { background: none; }
  .cal-main.span-7 div.cal-day.today:hover .num { background: var(--d-olive-ink); }
  .cal-hour-label.first { transform: translateY(2px); }
  .cal-more {
    position: absolute; z-index: 6; font: inherit; font-size: 0.75rem; font-weight: 650; color: var(--d-olive-ink); cursor: pointer;
    background: var(--d-surface); border-radius: 999px; padding: 1px 7px; border: 1px solid var(--d-sage-edge); min-height: 22px;
  }
  .cal-more:hover { background: var(--d-sage); }

  /* Next 4 weeks: a list by week; day and time in their own columns so the eye runs down the dates. */
  .cal-main:has(.next-weeks) { background: var(--d-paper); border: 0; overflow: visible; }
  .next-weeks { display: flex; flex-direction: column; padding: 0 0 20px; }
  .nw-week { padding: 14px 0 6px; border-top: 1px solid var(--d-line); }
  .nw-week:first-child { border-top: 0; padding-top: 0; }
  .nw-week h2 { margin: 0 0 4px; font: 650 1.0667rem var(--d-heading); color: var(--d-olive-ink); display: flex; gap: 10px; align-items: baseline; }
  .nw-week h2 span { font: 400 0.9333rem var(--d-body); color: var(--d-muted); }
  .nw-week.nw-empty { padding-bottom: 10px; }
  .nw-week.nw-empty h2 { color: var(--d-muted); }
  .nw-row { display: grid; grid-template-columns: 132px 76px minmax(0, 1fr) 32px; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--d-line); }
  .nw-row:last-child { border-bottom: 0; }
  .nw-row[data-ev-uid] { cursor: pointer; }
  .nw-row[data-ev-uid]:hover .s { text-decoration: underline; text-decoration-color: var(--d-sage-edge); text-underline-offset: 3px; }
  .nw-row .d { font-weight: 650; color: var(--d-ink); }
  .nw-row .t { color: var(--d-muted); font-variant-numeric: tabular-nums; }
  .nw-row .b { display: flex; flex-direction: column; gap: 3px; min-width: 0; align-items: flex-start; }
  .nw-row .s { font: inherit; font-weight: 600; color: var(--d-ink); text-align: left; background: none; border: 0; padding: 0; overflow-wrap: anywhere; }
  .nw-row button.s { cursor: pointer; }
  .nw-row .x, .nw-row .why { color: var(--d-muted); font-size: 0.9333rem; }
  .nw-row .acts { margin-top: 6px; }
  .nw-row .ahead-people { align-self: center; justify-self: end; }
  .nw-row .ahead-people .avatar { width: 26px; height: 26px; font-size: 11px; }
  .nw-row.k-conflict { background: var(--d-sage); border-radius: var(--d-radius, 12px); padding: 12px; margin: 4px -12px; border: 0; }
  .nw-row.k-conflict .why { color: var(--d-ink); }
  .next-weeks .ahead-arc { margin: 6px 0; }
  .nw-foot p { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--d-muted); }
  .nw-folded { margin-top: 6px; }
  .nw-more { color: var(--d-muted); font-size: 0.8667rem; }

  /* The peek floats over the week instead of squeezing it: the grid and its titles don't move when it opens.
     Guests fold to their line (app.ts guestsSection), and Details is a paragraph, not a box. */
  body.peek-ev .main:has(.cal-main) { padding-right: 0; }
  body.peek-ev .overlay.peek .panel.ev-panel { box-shadow: -18px 0 40px -24px rgba(var(--d-shade-rgb), .35); border-left: 1px solid var(--d-line); }
  .ev-panel .ev-desc { background: none; border: 0; padding: 0; border-radius: 0; }
}

/* ---------- admin (PK-1004) ---------- */

.row.park .title { white-space: normal; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row.park .name { font-weight: 500; display: flex; align-items: center; gap: 8px; min-width: 0; }
.row.park .name code { font-size: 0.8rem; background: var(--wash); padding: 1px 6px; border-radius: 4px; }
.row.park .name .badge { max-width: 240px; }
.row.park .what {
  font-size: 0.8rem; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.row.park.off .name, .row.park.off .what { color: var(--ink-3); }
.row.park .meta .btn { padding: 4px 10px; font-size: 0.8rem; }
.kind.park { background: rgba(var(--d-snooze-rgb),.14); color: var(--snooze); }
.kind.park.unattended { background: rgba(var(--d-brand-rgb),.10); color: var(--brand); }
.admin-note { margin: 10px 0 0; }
/* From spend.css (PK-51797), which only loaded once Model spend drew. */
.admin-tabs { display: flex; gap: 8px; margin: 0 0 24px; }
.admin-tabs [aria-pressed="true"] { background: var(--d-olive); color: var(--d-on-brand); }
@media (max-width: 720px) {
  .row.park .what { white-space: normal; }
}

/* ---------- Chat: the React island fills the view ----------
   The view is the island's box: a
   BOUNDED height (the viewport under the 48px sticky top bar; the phone
   tab bar too), no padding, no content cap, so the transcript scrolls
   inside the island and the composer stays pinned at the bottom — the
   page itself never scrolls. The selectors carry four classes on purpose:
   refined.css sizes every `.view` at 0,3,1 (a 1060px cap and 80px of
   bottom padding, which put the composer under the fold) and `.main`
   keeps 90px for the peek; these outrank both at every breakpoint. */
:root { --kit-topbar-h: calc(48px + var(--kit-inset)); --kit-tabs-h: 0px; }
.kit-board .main.chat-main { padding: 0; }
.kit-board .main.chat-main > .view.chat-view {
  max-width: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  height: calc(100vh - var(--kit-topbar-h) - var(--kit-tabs-h));
  height: calc(100dvh - var(--kit-topbar-h) - var(--kit-tabs-h));
}
.kit-chat-island { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-placeholder { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.chat-placeholder img { margin-bottom: 8px; opacity: .9; }
.kit-push-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8667rem; }
.kit-push-toggle.on { color: var(--ok); }
.kit-push-toggle svg { flex: none; }
/* Phones: the bottom tab bar (6px + 20px icon + 3px + one text line + 6px,
   plus the safe area) is subtracted from the island's height. */
@media (max-width: 719px) {
  :root { --kit-tabs-h: calc(57px + env(safe-area-inset-bottom)); }
  /* Inside a conversation (2026-10-06): its own header and back link are the
     navigation, so the top bar, the tab bar and the + button step aside and
     the messages get the screen — four bars were leaving them ~60% of it. */
  body.kit-in-conversation { --kit-topbar-h: 0px; --kit-tabs-h: 0px; }
  body.kit-in-conversation :is(.topbar, #kit-nav-tabs, .fab) { display: none !important; }
  body.kit-in-conversation .main { padding-bottom: 0; }
  body.kit-in-conversation .kit-chat-island { padding-bottom: env(safe-area-inset-bottom); }
  /* The keyboard covers the home indicator: with the field focused the safe
     area under the composer was a grey band above the keyboard (KT-60153). */
  body.kit-in-conversation .kit-chat-island:has(textarea:focus) { padding-bottom: 0; }
  /* A guard only: nothing in a conversation is wider than the screen. */
  html:has(> body.kit-in-conversation), body.kit-in-conversation { overflow-x: clip; }
}

/* ---------- calendar: What's Ahead (2026-09-18) ---------- */
/* Trips as arcs, big things and plans as rows, work fixtures folded; every row opens the same event panel.
   KT-60539: open rows on hairlines over paper, sentence-case heads; only the exceptions (changed by email,
   found in email) are cards. Add to calendar is olive: Calendar has no terracotta of its own. */
.cal-main:has(.ahead) { background: var(--d-paper); border: 0; }
.ahead { display: flex; flex-direction: column; gap: 22px; padding: 4px 0 20px; }
.ahead-sec { display: flex; flex-direction: column; gap: 0; }
.ahead-sec-h { font: 650 1.0667rem var(--d-heading); color: var(--d-olive-ink); margin-bottom: 6px; }
.ahead-empty { font-size: 0.8667rem; color: var(--d-muted); padding: 4px 2px; }
.ahead-people { display: inline-flex; align-items: center; }
.ahead-people .avatar { width: 22px; height: 22px; font-size: 10px; border: 2px solid var(--d-surface); }
.ahead-people .avatar + .avatar { margin-left: -7px; }

.ahead-arc { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 12px; overflow: hidden; }
.ahead-arc-bar { display: none; }
.ahead-arc-head { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px 6px; flex-wrap: wrap; }
.ahead-arc-head .name {
  font-family: var(--d-heading); font-size: 1.2rem; font-weight: 650; letter-spacing: -.01em; text-wrap: pretty;
  flex: 1; min-width: 160px;
}
.ahead-arc-head .when { font-variant-numeric: tabular-nums; color: var(--d-muted); font-size: 0.9rem; white-space: nowrap; padding-top: 3px; }
.ahead-legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 4px 16px 12px; }
.ahead-leg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 8px 10px 8px 0; border: 0; border-top: 1px solid var(--d-line); background: none; color: var(--d-ink);
  font: inherit; font-size: 0.9rem; cursor: pointer; min-width: 0; min-height: 44px;
}
.ahead-leg:hover:not(:disabled) .s { text-decoration: underline; }
.ahead-leg:disabled { cursor: default; }
.ahead-leg .d { font-size: 0.8rem; color: var(--d-muted); font-variant-numeric: tabular-nums; }
.ahead-leg .s { font-weight: 600; overflow-wrap: anywhere; }
.ahead-leg .x { color: var(--d-muted); font-size: 0.8333rem; overflow-wrap: anywhere; }
.ahead-leg.mail { text-decoration: none; }
.ahead-leg .tag { font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; background: var(--d-paper2); color: var(--d-muted); margin-top: 2px; }
.ahead-leg .tag.mail, .ahead-leg .tag.warn { background: var(--d-sage); color: var(--d-olive-ink); }
.ahead-leg.changed .s { text-decoration: line-through; text-decoration-color: var(--d-olive-ink); }
.ahead-arc-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--d-line); background: var(--d-paper2); font-size: 0.8333rem; color: var(--d-muted); }
/* Trip fixes (KT-60604): Edit on the card's head; edit mode lists the events with a way out and offers "Not a trip". */
.ahead-arc-head .ahead-arc-edit { margin-left: auto; min-height: 32px; }
.ahead-arc-rename { display: flex; gap: 8px; flex: 1; min-width: 200px; }
.ahead-arc-rename input {
  flex: 1; min-width: 0; font: 650 1.0667rem var(--d-heading); color: var(--d-ink); padding: 5px 10px;
  border: 1px solid var(--d-line); border-radius: 8px; background: var(--d-surface);
}
.ahead-arc-rename input:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 1px; }
.ahead-arc.editing .ahead-legs { display: none; }
.ahead-arc-edit-legs { list-style: none; margin: 0; padding: 4px 16px 10px; display: flex; flex-direction: column; }
/* Wraps by the card's own width (a narrow card beside the Kit panel, or a phone): the title keeps whole words. */
.ahead-arc-edit-legs li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--d-line); font-size: 0.9rem; }
.ahead-arc-edit-legs .d { flex: 0 0 auto; min-width: 72px; font-size: 0.8rem; color: var(--d-muted); font-variant-numeric: tabular-nums; }
.ahead-arc-edit-legs .s { flex: 1 1 10rem; min-width: 0; font-weight: 600; overflow-wrap: break-word; }
.ahead-arc-edit-legs .x { color: var(--d-muted); font-size: 0.8333rem; }
.ahead-arc-fix { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 16px; border-top: 1px solid var(--d-line); background: var(--d-paper2); font-size: 0.8333rem; color: var(--d-muted); }
.ahead-arc.editing .ahead-arc-foot { display: none; }

.ahead-rows { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--d-line); }
.ahead-row {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left;
  padding: 12px 8px 12px 4px; min-height: 44px; background: none; border: 0; border-bottom: 1px solid var(--d-line); border-radius: 0;
  color: var(--d-ink); font: inherit; font-size: 0.9333rem; cursor: pointer; min-width: 0;
}
.ahead-row:hover:not(:disabled) { background: var(--d-paper2); }
.ahead-row:disabled { cursor: default; }
.ahead-row .d { font-size: 0.8667rem; color: var(--d-olive-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ahead-row .b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ahead-row .s { font-weight: 600; overflow-wrap: anywhere; }
.ahead-row .x { color: var(--d-muted); font-size: 0.8333rem; overflow-wrap: anywhere; }
.ahead-row .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.ahead-row .tag { font-size: 0.75rem; padding: 1px 7px; border-radius: 999px; background: var(--d-paper2); color: var(--d-muted); }
.ahead-row.folded { color: var(--d-muted); grid-template-columns: 128px minmax(0, 1fr) auto auto; }
.ahead-row.folded .s { font-weight: 500; }
.ahead-row .why { font-size: 0.75rem; color: var(--d-muted); white-space: nowrap; }
/* The exceptions are the callouts: a change is a sage card, an email find a dashed one. */
.ahead-row.mail, .ahead-row.changed { border-radius: 10px; padding: 12px 14px; margin: 4px 0; }
.ahead-row.mail { background: var(--d-surface); border: 1.5px dashed var(--d-olive-ink); cursor: default; }
.ahead-row.changed { background: var(--d-sage); border: 1px solid var(--d-olive-ink); }
.ahead-row.mail .tag.mail, .ahead-row.changed .tag.warn { background: var(--d-olive-ink); color: var(--d-surface); font-weight: 600; }
.ahead-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.ahead-acts .btn.small, .ahead-row > .btn.small {
  min-height: 40px; display: inline-flex; align-items: center; font-size: 0.8667rem; padding: 0 12px;
  border-radius: 8px; white-space: nowrap;
}
.cal-main .btn.primary { background: var(--d-olive-ink); border-color: var(--d-olive-ink); color: var(--d-surface); }
.cal-main .btn.primary:hover { background: var(--d-ink); border-color: var(--d-ink); }
.ahead .btn.quiet { color: var(--d-olive-ink); }

.ahead-fold { border-top: 1px solid var(--d-line); padding: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.ahead-fold-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.9333rem; color: var(--d-muted); }
.ahead-fold-line b { color: var(--d-ink); font-weight: 600; }
.ahead-fold-line .btn { margin-left: auto; min-height: 40px; }
.ahead-note { font-size: 0.8667rem; color: var(--d-muted); }

/* The Plan (2026-09-18): two plans that disagree, side by side, never resolved here. */
.ahead-conflict { display: flex; flex-direction: column; gap: 8px; }
.ahead-conflict-why { color: var(--d-ink); font-size: 0.9333rem; padding: 0 0 8px; }

@media (max-width: 719px) {
  .ahead { padding: 4px 0 16px; gap: 18px; }
  .ahead-row, .ahead-row.folded { grid-template-columns: 92px minmax(0, 1fr); }
  .ahead-row .ahead-people, .ahead-row .why { display: none; }
  .ahead-arc-head .name { font-size: 1.1333rem; }
  .ahead-legs { grid-template-columns: 1fr 1fr; }
}
/* Claude access (#/claude): the member's Kit personal access tokens for the board MCP. */
.claude-form { display: flex; gap: 10px; align-items: flex-end; padding: 14px; flex-wrap: wrap; }
.claude-form .field { flex: 1; min-width: 220px; }
.claude-reveal { border-top: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--wash); }
.claude-reveal h3 { margin: 0; font-size: 1rem; }
.claude-reveal .sub, .claude-foot { color: var(--ink-2); font-size: 0.8667rem; margin: 0; }
.claude-code { display: flex; gap: 8px; align-items: flex-start; }
.claude-code code {
  flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: all;
}
.claude-reveal details summary { cursor: pointer; font-size: 0.8667rem; color: var(--ink-2); }
.claude-reveal details > * + * { margin-top: 8px; }
.row.claude-token { cursor: default; }
.row.claude-token .btn { padding: 4px 10px; font-size: 0.8rem; }

/* Attachment lightbox (ui/lightbox.ts): a tapped chat attachment over the
   page — translucent backdrop, the file in a pane, × top-right; a click
   outside the pane or Escape goes back. */
.kit-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(32, 26, 20, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kit-lightbox-pane { position: relative; display: flex; flex-direction: column; gap: 10px; max-width: min(1100px, 100%); max-height: 100%; padding: 16px; border-radius: 14px; background: rgba(var(--d-surface-rgb),.94); color: var(--ink); box-shadow: 0 24px 80px rgba(0, 0, 0, .45); }
.kit-lightbox-close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--d-ink); color: var(--d-surface); font-size: 1.4667rem; line-height: 36px; text-align: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.kit-lightbox-close:hover { background: var(--d-brand); }
.kit-lightbox-close:focus-visible { outline: 2px solid var(--d-brand); outline-offset: 3px; }
.kit-lightbox-body { display: flex; align-items: center; justify-content: center; min-width: 240px; min-height: 120px; max-height: calc(100vh - 150px); overflow: auto; }
.kit-lightbox-body img, .kit-lightbox-body video { display: block; max-width: 100%; max-height: calc(100vh - 150px); border-radius: 8px; object-fit: contain; }
.kit-lightbox-body pre { margin: 0; padding: 12px; max-width: 820px; font: 0.8667rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.kit-lightbox-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kit-lightbox-pages { display: flex; align-items: center; gap: 10px; font-size: 0.8667rem; color: var(--ink-2); }
.kit-lightbox-pages button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.kit-lightbox-pages button:disabled { opacity: .4; cursor: default; }
.kit-lightbox-note { margin: 0; padding: 24px; font-size: 0.9333rem; color: var(--ink-2); text-align: center; }
.kit-lightbox-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.8667rem; color: var(--ink-2); }
.kit-lightbox-foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-lightbox-foot a { color: var(--d-brand); font-weight: 600; white-space: nowrap; }
@media (max-width: 650px) { .kit-lightbox { padding: 12px; } .kit-lightbox-pane { padding: 12px; } .kit-lightbox-close { top: -8px; right: -8px; } }

/* Needs a decision (PK-51636): the panel at the top of Projects — the
   approved mock (kit-projects-mock-2026-10-06). One card; rows split by
   hairlines; a button opens an inline step; a resolved row stays, in green. */
/* Kit's filings (PK-51641): quieter than Needs a decision — a note, not an ask. */
.filed { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin: 0 0 16px; overflow: hidden; }
.filed[hidden] { display: none; }
.filed-h { display: flex; align-items: center; gap: 12px; padding: 10px 16px; font-size: 0.8667rem; color: var(--ink-2); }
.filed-h .grow { flex: 1; }
.filed-h > .btn { font-size: 0.8rem; padding: 5px 10px; white-space: nowrap; }
.filed.done .filed-h { color: var(--ok); }
.filed-rows[hidden] { display: none; }
.f-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.f-row .t { flex: 1; min-width: 0; }
.f-row .f-name { color: var(--ink); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.f-row .f-name:hover, .f-row .f-where:hover { color: var(--brand); }
.f-row .why { font-size: 0.8rem; color: var(--ink-2); }
.f-row .f-where { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.f-row.resolved .why { color: var(--ok); }
.f-row.resolved .f-name { color: var(--ink-2); }
.filed .link { border: 0; background: none; color: var(--ink-2); font-size: 0.8rem; padding: 4px 6px; cursor: pointer; }
.filed .link:hover { color: var(--brand); }
.filed .link:disabled { opacity: .5; cursor: default; }
.decide { background: var(--surface); border: 1px solid rgba(var(--d-brand-rgb),.22); border-radius: var(--r-md); margin: 0 0 22px; overflow: hidden; }
.decide-h { display: flex; justify-content: space-between; padding: 12px 16px 6px; font-size: 0.8667rem; font-weight: 600; color: var(--brand); }
.decide-n { font-variant-numeric: tabular-nums; }
.d-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); }
.decide-rows > .d-row:first-child { border-top: 0; }
.d-row[hidden] { display: none; }
.d-row .t { flex: 1; min-width: 0; }
.d-row .d-name { color: var(--ink); text-decoration: none; font-weight: 500; }
.d-row .d-name:hover { color: var(--brand); }
.d-row .why { font-size: 0.8rem; color: var(--ink-2); }
.d-row > .btn { font-size: 0.8rem; padding: 5px 10px; }
.d-row.resolved .why { color: var(--ok); }
.d-row.resolved .d-name { color: var(--ink-2); }
.decide-more { width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; padding: 10px 16px; font-size: 0.8rem; color: var(--ink-2); cursor: pointer; }
.decide-more:hover { color: var(--brand); }
.d-panel { flex-basis: 100%; margin: 4px 0 2px; padding: 12px 14px; background: var(--paper); border-radius: var(--r-sm); display: flex; flex-direction: column; gap: 10px; }
.d-panel .q { font-size: 0.8667rem; }
.d-panel .opts { display: flex; flex-wrap: wrap; gap: 6px; }
.d-panel .opt { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 0.8667rem; color: var(--ink); cursor: pointer; }
.d-panel .opt small { color: var(--ink-3); margin-left: 6px; }
.d-panel .opt.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.d-panel .d-task { display: flex; flex-direction: column; gap: 6px; }
.d-panel .d-task-title { font-size: 0.8667rem; font-weight: 500; }
.d-panel .acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.d-panel textarea { font: 0.8667rem/1.5 var(--sans); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; resize: vertical; background: var(--surface); color: var(--ink); }
.d-panel .link { border: 0; background: none; color: var(--ink-2); font-size: 0.8rem; padding: 4px 6px; cursor: pointer; }
.d-panel .link:hover { color: var(--brand); }
/* "Write to <lead>" (KT-60430): who it goes to and from whom, read before the note. */
.d-panel .d-ask-q { font-size: 1rem; font-weight: 600; }
.d-panel .d-ask-sub { margin-top: -6px; font-size: 0.875rem; color: var(--ink-2); }
@media (max-width: 599px) {
  .d-row > .btn { margin-left: auto; }
}
/* A touch screen: iOS zooms into a field under 16px and stays zoomed (PK-51692); the step's
   buttons are thumb-sized. */
@media (pointer: coarse) {
  .d-panel textarea { font-size: 16px; }
  .d-panel .acts > .btn, .d-panel .acts > .link { min-height: 44px; }
}

/* Projects list (PK-51637): groups by when projects land, an equal-width
   pace bar per row (dark fill = done share, terracotta tick = today between
   start and due), or the same projects as a timeline. The approved mock
   kit-projects-mock-2026-10-06; Kit Refined tokens only. */
.seg { display: flex; background: var(--wash); border-radius: 9px; padding: 2px; }
.seg button { border: 0; background: none; font: inherit; font-size: 0.8667rem; padding: 5px 12px; border-radius: 7px; color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(var(--d-shade-rgb),.06); }
.seg button:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; }
.pl-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding-bottom: 6px; }
.pl-group-h { padding: 18px 18px 6px; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.pl-group-h:first-child { padding-top: 14px; }
.pl-group-h span { font-weight: 400; color: var(--ink-3); }
.pl-row { display: grid; grid-template-columns: minmax(0,1fr) 150px 92px; gap: 20px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.pl-row:hover, .g-row:hover > * { background: color-mix(in srgb, var(--brand) 3.5%, var(--surface)); }
.pl-row:focus-visible, .g-row:focus-visible, .pl-fold-row:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: -2px; }
.pl-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.pl-who .avatar { flex: none; }
.pl-nm { min-width: 0; }
.pl-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-row:hover .pl-t, .g-row:hover .pl-t, .pl-fold-row:hover .pl-t { color: var(--brand); }
.pl-meta { font-size: 0.8rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.pl-meta-due { display: none; }
.pl-chip { font-size: 0.75rem; color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--surface)); border-radius: 20px; padding: 0 7px; font-weight: 500; }
.pl-pace { position: relative; height: 8px; border-radius: 4px; background: var(--paper-2); }
.pl-pace .f { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--ink); }
.pl-pace .now { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--brand); }
.pl-pace.behind { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); }
.pl-pace.behind .f { background: var(--brand); }
.pl-pace.future { background: none; border: 1.5px dashed color-mix(in srgb, var(--ink) 25%, var(--surface)); }
.pl-cap { font-size: 0.75rem; color: var(--ink-3); margin-top: 5px; white-space: nowrap; min-height: 1em; }
.pl-cap.behind { color: var(--brand); font-weight: 600; }
.pl-when { text-align: right; font-variant-numeric: tabular-nums; }
.pl-when .d { font-size: 0.8667rem; }
.pl-when .rel { font-size: 0.75rem; color: var(--ink-3); }
.pl-when.soon .rel { color: var(--brand); font-weight: 600; }
.pl-fold { margin-top: 24px; }
/* My projects (2026-10-19): You lead, then Your tasks in other projects, then Finished.
   A Needs a decision card sits under its project's row, in the row's own card. */
.pm-sec + .pm-sec { margin-top: 30px; }
.pm-h { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px 2px; font-size: 1.0667rem; font-weight: 600; }
.pm-h .n { font-size: 0.8667rem; font-weight: 400; color: var(--ink-3); }
.pm-help-list { display: flex; flex-direction: column; gap: 14px; }
.pm-help-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px 2px; }
.pm-proj { font-weight: 600; color: var(--ink); text-decoration: none; }
.pm-proj:hover { color: var(--brand); text-decoration: underline; }
.pm-lead-by { font-size: 0.8rem; color: var(--ink-3); }
.pm-help-none { padding: 12px 18px; font-size: 0.8667rem; color: var(--ink-3); }
.pm-help .row .meta .avatar { display: none; } /* every row is yours */
.pl-decide-slot[hidden] { display: none; }
.pl-decide-slot { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.pl-decide-slot .d-row { border-top: 0; padding: 2px 18px 10px 58px; }
.pl-decide-slot .d-name { display: none; }
.pl-decide-slot .why { color: var(--brand); font-weight: 500; }
.pl-decide-slot .d-row.resolved .why { color: var(--ok); }
@media (max-width: 599px) { .pl-decide-slot .d-row { padding-left: 18px; } }
.pl-fold-h { width: 100%; display: flex; gap: 8px; align-items: baseline; border: 0; background: none; padding: 0 2px 8px; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); cursor: pointer; text-align: left; }
.pl-fold-h .n, .pl-fold-h .toggle { font-weight: 400; color: var(--ink-3); }
.pl-fold-h:hover .toggle { color: var(--brand); }
.pl-fold-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pl-fold-list[hidden] { display: none; }
.pl-fold-row { display: block; padding: 10px 16px; border-top: 1px solid var(--line); margin-top: -1px; color: var(--ink); text-decoration: none; font-size: 0.8667rem; }
/* Timeline: month columns run the full height behind the rows. Every class here is g- prefixed:
   bare .empty carries the refined empty state (fox, padding) and .today marks a calendar day. */
.gantt { --g-name: clamp(240px, 28vw, 340px); position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding-bottom: 6px; }
.g-cal { position: absolute; top: 0; bottom: 0; left: var(--g-name); right: 0; pointer-events: none; overflow: hidden; border-radius: 0 var(--r-md) var(--r-md) 0; }
.g-cal .m { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.g-cal .m:nth-child(even), .g-months .mh:nth-child(even) { background: color-mix(in srgb, var(--ink) 2.8%, transparent); }
.g-cal .g-past { position: absolute; top: 0; bottom: 0; left: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 3.5%, transparent) 0 1px, transparent 1px 7px); }
.g-cal .g-today { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--brand); }
.g-head { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: var(--g-name) minmax(0,1fr); background: var(--surface); border-bottom: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; }
.g-lbl { padding: 10px 16px; display: flex; align-items: flex-end; }
.g-legend { display: flex; gap: 12px; font-size: 0.75rem; color: var(--ink-3); align-items: center; }
.g-legend b { display: inline-block; width: 18px; height: 8px; border-radius: 4px; vertical-align: -1px; margin-right: 4px; border: 1.5px solid var(--ink); }
.g-legend b.k-done { background: linear-gradient(90deg, var(--ink) 55%, var(--surface) 55%); }
.g-legend b.k-behind { border-color: var(--brand); background: linear-gradient(90deg, var(--brand) 25%, color-mix(in srgb, var(--brand) 14%, var(--surface)) 25%); }
.g-months { position: relative; height: 58px; }
.g-months .mh { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); padding: 8px 0 0 8px; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.today-pill { position: absolute; bottom: 7px; transform: translateX(-50%); background: var(--brand); color: var(--d-on-brand); font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 20px; white-space: nowrap; z-index: 2; }
.g-group { display: grid; grid-template-columns: var(--g-name) minmax(0,1fr); position: relative; }
.g-group > .pl-group-h { grid-column: 1 / -1; padding-top: 20px; }
.g-row { display: contents; color: var(--ink); text-decoration: none; }
.g-name, .g-track { height: 54px; border-top: 1px solid var(--line); }
.g-name { padding: 8px 16px; display: flex; align-items: center; min-width: 0; position: relative; z-index: 1; background: var(--surface); }
.g-track { position: relative; }
.g-bar { position: absolute; top: 50%; height: 14px; margin-top: -7px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--surface); overflow: hidden; min-width: 12px; }
.g-bar .f { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.g-bar.behind { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--surface)); }
.g-bar.behind .f { background: var(--brand); }
.g-bar.clip { border-left-style: dashed; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.g-bar.g-none { border-style: dashed; background: transparent; }
.g-due { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 8px; font-size: 0.75rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.g-due.behind { color: var(--brand); font-weight: 600; }
@media (max-width: 900px) {
  .pl-row { grid-template-columns: minmax(0,1fr); }
  .pl-pace-cell, .pl-when, .g-cal, .g-months, .g-track, .g-legend { display: none; }
  .pl-meta-due { display: inline; }
  .pl-meta-due.soon { color: var(--brand); font-weight: 600; }
  .gantt { --g-name: 1fr; }
  .g-head, .g-group { grid-template-columns: 1fr; }
  .g-head { display: none; }
}

/* Project page (PK-51638): name, who leads it and its dates; pace said in
   words and drawn once, labelled start / Today / due; then the summary,
   updates, files, and tasks by when they are due. Kit Refined tokens only. */
.pp-head { margin: 0 0 18px; }
.pp-back { display: inline-flex; align-items: center; gap: 3px; margin: 2px 0 10px; font-size: 0.8667rem; color: var(--ink-2); }
.pp-back:hover { color: var(--ink); text-decoration: underline; }
.pp-top { display: flex; align-items: flex-start; gap: 4px 12px; flex-wrap: wrap; }
.pp-top .head-actions { margin-top: 4px; }
.pp-top h1 { flex: 1 1 260px; min-width: 0; margin: 0 0 8px; font-family: var(--serif); font-size: 2rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.pp-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 0.8667rem; color: var(--ink-2); }
/* The name renames in place, as the task page's title does; the facts below
   are the task page's chips (tp-chip), each a picker. */
.pp-name { flex: 1 1 260px; min-width: 0; display: block; margin: 0 -6px 4px; padding: 0 6px; font-family: var(--serif); font-size: 2rem; font-weight: 600;
  letter-spacing: -.025em; line-height: 1.15; color: var(--ink); background: none; border: 1px solid transparent; border-radius: var(--r-sm); resize: none; overflow: hidden; }
.pp-name:hover:not(:disabled) { border-color: var(--line); }
.pp-name:focus { border-color: var(--brand); background: var(--surface); outline: none; }
.pp-name:disabled { opacity: 1; -webkit-text-fill-color: var(--ink); }
.pp-chips-row { margin-top: 8px; }
.pp-chips-row .tp-chip.pp-status.completed .v { color: var(--ok); font-weight: 600; }
.pp-chips-row .tp-chip.pp-status.canceled .v { color: var(--ink-3); }
.pp-pace.all-done { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pp-pace.all-done .pp-say { flex: 1 1 240px; margin: 0; }
.update-hint { font-size: 0.8rem; color: var(--ink-3); margin-top: -4px; }
.update-hint[hidden] { display: none; }
.pp-meta .who { display: flex; gap: 7px; align-items: center; }
.pp-pace { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px 14px; margin: 0 0 22px; }
.pp-say { font-size: 1rem; margin: 0 0 14px; }
.pp-say:last-child { margin-bottom: 0; }
.pp-say b { font-weight: 600; }
.pp-say .behind { color: var(--brand); font-weight: 600; }
.pp-pace .pl-pace { height: 12px; border-radius: 6px; }
.pp-pace .pl-pace .f { border-radius: 6px; }
.pp-pace .pl-pace .now { top: -6px; bottom: -6px; width: 3px; }
.pp-ends { position: relative; display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--ink-3); margin-top: 8px; font-variant-numeric: tabular-nums; }
.pp-today { position: absolute; top: 0; transform: translateX(-50%); color: var(--brand); font-weight: 600; }
.pp-summary { font-size: 0.9333rem; line-height: 1.65; color: var(--ink-2); margin: 0 0 26px; max-width: 68ch; }
.pp-tasks-h { display: flex; align-items: center; gap: 12px; margin: 26px 0 4px; }
.pp-tasks-h h2 { margin: 0; font-size: 1.1333rem; font-weight: 600; }
.pp-tasks-h .grow { flex: 1; }
.pp-bucket.late > .group-head > span:first-child { color: var(--brand); }
.field-link { margin-left: 8px; font-weight: 400; color: var(--brand); text-decoration: none; }
.field-link:hover { text-decoration: underline; }

/* ---------- the desktop Kit panel (KT-60436; screens KT-60434) ----------
   The sidebar's Kit row (KT-60606, app.ts kitRow) on every page, "Ask Kit
   about this task" by a task's title (KT-60492), and the panel on the right
   with her Kit conversation. It docks the way the issue peek
   does (the page takes its width as right padding) from 1100px; narrower,
   it lies over the page. An open event and Kit sit side by side from 1366px;
   narrower, one right column holds both, the event on top (body.kit-stack,
   --kit-top measured from the event). No new colours: --d-* tokens only. */
:root { --kit-w: clamp(340px, 26vw, 400px); }
/* The Kit row: the fox, "Kit", an olive dot when Kit has news (never a number: the one number stays
   on Needs you) and the lock that says only she sees it. While the panel is open it is the one
   filled row; the page's own row keeps its weight and olive glyph but gives up its fill. */
.sidebar .nav-item.kit-row-nav { font: inherit; }
.kit-row-fox { flex: none; width: 18px; height: 18px; margin: -1px 0 -1px -1px; }
.kit-row-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--d-olive); }
.kit-row-lock { flex: none; display: grid; place-items: center; color: var(--d-muted); }
.kit-row-nav[aria-expanded="true"] { font-weight: 600; }
.kit-ask:focus-visible, .kit-panel-close:focus-visible, .kit-row-nav:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; }
/* "Ask Kit about this task/event": the one filled action by the title, in sage, never the brand orange. */
.head-actions .btn.kit-ask, .ev-ask .btn.kit-ask { background: var(--d-sage); border-color: var(--d-sage-edge); color: var(--d-olive-ink); font-weight: 600; border-radius: 999px; padding: 6px 14px; }
.head-actions .btn.kit-ask:hover, .ev-ask .btn.kit-ask:hover { border-color: var(--d-olive-ink); }
.ev-ask .btn.kit-ask { gap: 6px; }
.kit-panel {
  position: fixed; top: var(--kit-top, calc(48px + var(--kit-inset))); right: 0; bottom: 0; z-index: 25; width: var(--kit-w);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--d-surface); border-left: 1px solid var(--d-line);
  animation: kit-panel-in .18s ease-out;
}
.kit-panel[hidden] { display: none; }
@keyframes kit-panel-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kit-panel { animation: none; } }
.kit-panel-head { flex: none; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 10px 6px 18px; border-bottom: 1px solid var(--d-line); }
/* "Kit" over "Only you" (KT-60606). */
.kit-panel-names { flex: 1; min-width: 0; }
.kit-panel-title { margin: 0; font: 650 1.1333rem/1.25 var(--d-heading, inherit); color: var(--d-ink); }
.kit-panel-only { margin: 1px 0 0; font-size: 0.8667rem; line-height: 1.3; color: var(--d-muted); }
.kit-panel-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--d-muted); display: grid; place-items: center; cursor: pointer; }
.kit-panel-close:hover { background: var(--d-paper); color: var(--d-ink); }
.kit-panel-expand { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--d-muted); display: grid; place-items: center; cursor: pointer; }
.kit-panel-expand:hover { background: var(--d-paper); color: var(--d-ink); }
.kit-panel-expand:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; }
.kit-panel-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Her width (KT-60496): the left edge drags it, docked only. She asks for --kit-w-user; the page
   keeps 480px beside her, and Kit never goes under 340. With a task open the page is the task's
   (body.kit-docked --peek-w). */
body.kit-sized { --kit-w: max(340px, min(var(--kit-w-user), calc(100vw - var(--sidebar-w) - 480px))); }
.kit-panel-resize { position: absolute; top: 0; bottom: 0; left: -5px; z-index: 1; width: 10px; cursor: col-resize; touch-action: none; }
.kit-panel-resize::after {
  content: ''; position: absolute; top: 50%; left: 3px; width: 4px; height: 32px; margin-top: -16px; border-radius: 3px;
  background: var(--d-sage-edge); opacity: .7; transition: opacity .12s ease, background-color .12s ease;
}
.kit-panel-resize:hover::after, .kit-panel-resize:focus-visible::after { opacity: 1; }
.kit-panel-resize:focus-visible { outline: none; }
body.resizing-cols .kit-panel-resize::after { opacity: 1; background: var(--d-olive-ink); }
body.resizing-cols { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.resizing-cols .main { transition: none; }
body:not(.kit-docked) .kit-panel-resize, body.kit-full .kit-panel-resize { display: none; }
/* The whole window below the top bar and right of the sidebar (KT-60606: the Kit row stays in view,
   lit): over the page and any peek; the conversation centred. */
body.kit-full .kit-panel { top: calc(48px + var(--kit-inset)); left: var(--sidebar-w); width: auto; z-index: 30; box-shadow: none; animation: none; }
body.kit-full .kit-panel-chat { width: min(860px, 100%); align-self: center; }
/* In the panel a thread is a page that slides over the conversation, with its Back (KT-60496); full
   window too, and on the chat page, since KT-60586: never a pane beside the same replies. */
#kit-panel [data-testid="chat-thread-page"] { animation: kit-thread-in .2s ease-out; }
@keyframes kit-thread-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #kit-panel [data-testid="chat-thread-page"] { animation: none; } }
.kit-panel-missing { margin: 0; padding: 18px; color: var(--d-muted); font-size: 0.9333rem; }
/* Needs you on top of the panel (KT-60437): her asks, answered in place. No number here (round 6
   N2), no orange: sage and olive, the overdue umber for a date that has passed. It scrolls inside
   itself past about half the panel; past two rows "And N more" holds the rest. */
.kit-ny { flex: none; max-height: 56%; overflow-y: auto; overscroll-behavior: contain; padding: 12px 18px 6px; border-bottom: 1px solid var(--d-line); }
.kit-ny[hidden] { display: none; }
.kit-ny-head { margin: 0 0 2px; font: 600 0.9333rem var(--d-heading, inherit); color: var(--d-olive-ink); }
.kit-ny-row { border-bottom: 1px solid var(--d-line); }
.kit-ny-row:last-of-type { border-bottom: 0; }
.kit-ny-sum { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 26px 9px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kit-ny-sum:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; border-radius: 6px; }
.kit-ny-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 0.8667rem; }
.kit-ny-who { color: var(--d-muted); }
.kit-ny-due { flex: none; color: var(--d-olive-ink); font-weight: 600; }
.kit-ny-due.late { color: var(--d-overdue); }
.kit-ny-q { font: 650 1rem/1.35 var(--d-heading, inherit); color: var(--d-ink); overflow-wrap: anywhere; }
.kit-ny-row:not(.open) .kit-ny-q { font-weight: 600; font-size: 0.9667rem; }
.kit-ny-chev { position: absolute; right: 2px; top: 12px; color: var(--d-muted); transition: transform .12s ease; }
.kit-ny-row.open .kit-ny-chev { transform: rotate(180deg); }
.kit-ny-row.lit { margin: 0 -10px; padding: 0 10px; border-radius: 10px; background: var(--d-sage); box-shadow: inset 3px 0 0 var(--d-olive); }
.kit-ny-body { display: flex; flex-direction: column; gap: 8px; padding: 0 0 12px; }
.kit-ny-preview-who { margin: 0; font-size: 0.8667rem; color: var(--d-muted); overflow-wrap: anywhere; }
.kit-ny-quote { margin: 4px 0 0; padding: 8px 12px; border-left: 3px solid var(--d-sage-edge); border-radius: 0 8px 8px 0; background: var(--d-paper); color: var(--d-ink); font-size: 0.9333rem; line-height: 1.45; max-height: 9.5em; overflow-y: auto; overflow-wrap: anywhere; }
.kit-ny-facts { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: 0.8667rem; }
.kit-ny-facts > div { display: flex; gap: 4px; min-width: 0; }
.kit-ny-facts dt { color: var(--d-muted); }
.kit-ny-facts dd { margin: 0; color: var(--d-ink); overflow-wrap: anywhere; }
.kit-ny-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.kit-ny-acts.quiet { gap: 4px 16px; }
.kit-ny .btn.kit-ny-answer { min-height: 40px; padding: 0 14px; max-width: 100%; background: var(--d-surface); border: 1px solid var(--d-sage-edge); border-radius: 10px; color: var(--d-olive-ink); font-weight: 600; white-space: normal; text-align: center; }
.kit-ny .btn.kit-ny-answer:hover:not(:disabled) { border-color: var(--d-olive); background: var(--d-sage); }
.kit-ny .btn.kit-ny-answer:disabled { opacity: .55; cursor: default; }
.kit-ny-link { min-height: 32px; padding: 4px 0; border: 0; background: none; color: var(--d-olive-ink); font: inherit; font-size: 0.9333rem; font-weight: 500; text-align: left; cursor: pointer; }
.kit-ny-link:hover:not(:disabled) { text-decoration: underline; }
.kit-ny-link:disabled { opacity: .55; cursor: default; }
/* Olive focus, never the brand's terracotta (refined.css's :is(button…) rule would win otherwise). */
html[data-kit-brand] .kit-ny :is(button, a, [tabindex]):focus-visible, .kit-ny :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; }
.kit-ny-note { margin: -2px 0 0; font-size: 0.8333rem; color: var(--d-muted); }
.kit-ny-more { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 8px 0; border: 0; border-top: 1px solid var(--d-line); background: none; color: var(--d-olive-ink); font: inherit; font-size: 0.9333rem; text-align: left; cursor: pointer; }
.kit-ny-more svg { flex: none; }
.kit-ny-more:hover { text-decoration: underline; }
.kit-ny-empty { padding: 10px 0 12px; text-align: center; }
.kit-ny-empty-t { margin: 0; font: 650 1.0667rem var(--d-heading, inherit); color: var(--d-ink); }
.kit-ny-empty-hint { margin: 2px 0 0; font-size: 0.9333rem; color: var(--d-muted); }
.kit-ny.kit-ny-none .kit-ny-head { display: none; }
.kit-ny-receipts:empty { display: none; }
.kit-ny-receipt { margin: 6px 0; padding: 9px 12px; border-radius: 10px; background: var(--d-sage); }
.kit-ny-receipt-q { margin: 0; font-size: 0.8333rem; color: var(--d-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-ny-receipt-t { margin: 2px 0 0; font-size: 0.9333rem; color: var(--d-ink); }
.kit-ny-receipt.problem .kit-ny-receipt-t { color: var(--d-overdue); }
.kit-ny-receipt-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.kit-ny-receipt-acts:empty { display: none; }
.kit-ny-receipt .mail-send-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 0; background: none; font-size: 0.9333rem; font-weight: 400; color: var(--d-ink); }
.kit-ny-receipt .mail-send-strip.problem { color: var(--d-overdue); }
.kit-ny-receipt .mail-btn { min-height: 32px; padding: 0 12px; border: 1px solid var(--d-sage-edge); border-radius: 8px; background: var(--d-surface); color: var(--d-olive-ink); font: inherit; font-weight: 600; cursor: pointer; }
.kit-ny-receipt .mail-send-link { color: var(--d-olive-ink); }
.kit-ny-receipt .dim { color: var(--d-muted); }
body.kit-stack .kit-ny { max-height: 40%; }
/* Needs you's page (KT-60438): the same rows at the page's reading width, no nested scroll, the
   page's own heading (no number, N2); "What Kit did" (KT-60439) mounts in #needs-you-below. */
.needs-you-view { max-width: 760px; }
.kit-ny.kit-ny-page { max-height: none; overflow: visible; padding: 0; border-bottom: 0; }
.kit-ny.kit-ny-page .kit-ny-list { border-top: 1px solid var(--d-line); }
.kit-ny.kit-ny-page .kit-ny-sum { padding: 12px 30px 12px 0; }
.kit-ny.kit-ny-page .kit-ny-chev { top: 15px; }
.kit-ny.kit-ny-page .kit-ny-empty { padding: 28px 0; text-align: left; }
.needs-you-below:empty { display: none; }
/* Narrow: over the page, with an edge and a shadow; a peek that was open waits underneath. */
body.kit-open:not(.kit-docked) .kit-panel { box-shadow: var(--shadow-lg); border-left-color: var(--d-sage-edge); }
body.kit-open:not(.kit-docked) .overlay.peek { display: none; }
/* Docked: the page makes room, and a peek steps left of Kit. */
body.kit-docked .main { padding-right: var(--kit-w); }
/* Two views at a time (KT-60496, Michelle 2026-10-15): beside Kit a task takes the whole page and
   the list or Today waits under it, so opening Kit slides the task over the page. The page keeps
   its own layout underneath (no reflow), and the task eases with the page's padding. */
body.kit-docked {
  --kit-page-w: calc(100vw - var(--sidebar-w) - var(--kit-w));
  --peek-w: var(--kit-page-w);
}
body.kit-docked.peek-ev { --peek-w: 320px; }
body.kit-docked.peek .main { padding-right: var(--kit-w); }
body.kit-docked .overlay.peek { right: var(--kit-w); }
@media (min-width: 1100px) {
  .overlay.peek { transition: right .22s ease-out; }
  .overlay.peek .panel { transition: width .22s ease-out; }
}
body.resizing-cols .overlay.peek, body.resizing-cols .overlay.peek .panel { transition: none; }
@media (prefers-reduced-motion: reduce) { .overlay.peek, .overlay.peek .panel { transition: none; } }
/* Under 1366px with an event open: one right column, the event on top (at most half of it), Kit below. */
body.kit-stack.peek .main { padding-right: var(--kit-w); }
body.kit-stack .overlay.peek { right: 0; top: calc(48px + var(--kit-inset)); }
body.kit-stack .overlay.peek .panel.ev-panel { width: var(--kit-w); height: auto; max-height: 50%; align-self: flex-start; box-shadow: none; border-bottom: 1px solid var(--d-sage-edge); animation: none; }
body.kit-stack .overlay.peek .panel.ev-panel .panel-body { overflow-y: auto; }
/* My Health has its own Kit thread: while the panel holds the field, that one steps aside. */
body.kit-open .health-kit { display: none !important; }
/* Phone widths have the Kit sheet in the app: an open panel takes the screen. */
@media (max-width: 719px) {
  .kit-ask, .kit-panel-expand { display: none !important; }
  .kit-panel { width: 100%; }
}

/* Schedules: outcomes first, with quiet aligned timing and delivery columns.
   Scope the title rule above the refined theme's generic row line clamp. */
.kit-board .schedules-view .schedule-toolbar { display: flex; margin: 0 0 20px; }
.kit-board .schedules-view .schedule-modes { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.kit-board .schedules-view .schedule-modes .btn[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.kit-board .schedules-view .row.sched .title { display: flex; flex-direction: column; -webkit-line-clamp: unset; gap: 3px; }
.kit-board .schedules-view .row.automation { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 230px) 130px; gap: 18px; align-items: center; }
.kit-board .schedules-view .row.automation .name { white-space: normal; overflow-wrap: anywhere; }
.kit-board .schedules-view .row.automation .what { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; }
.kit-board .schedules-view .schedule-timing { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; font-weight: 400; }
.kit-board .schedules-view .schedule-next { color: var(--ink); }
.kit-board .schedules-view .schedule-repeat { color: var(--ink-2); }
.kit-board .schedules-view .schedule-destination { min-width: 0; justify-self: end; }
.kit-board .schedules-view .schedule-destination .badge { white-space: normal; overflow-wrap: anywhere; }
.kit-board .schedules-view .schedule-attention .group-head { color: var(--danger); }
.kit-board .schedules-view .schedule-attention .card { border-color: var(--danger); }
.kit-board .schedules-view .schedule-problem { color: var(--danger); font-size: 0.8rem; font-weight: 500; }
.kit-board .schedules-view .row.attention { background: color-mix(in srgb, var(--danger) 4%, var(--surface)); }
@media (max-width: 1050px) {
  .kit-board .schedules-view .row.automation { grid-template-columns: minmax(0, 1fr) 170px; gap: 6px 16px; }
  .kit-board .schedules-view .schedule-destination { grid-column: 1; justify-self: start; }
  .kit-board .schedules-view .schedule-timing { grid-column: 2; grid-row: 1 / 3; }
}
@media (max-width: 600px) {
  .kit-board .schedules-view .view-head { flex-wrap: wrap; gap: 6px; }
  .kit-board .schedules-view .view-head .grow { display: none; }
  .kit-board .schedules-view .view-head .sub { flex-basis: 100%; }
  .kit-board .schedules-view .row.automation { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kit-board .schedules-view .schedule-timing { grid-column: 1; grid-row: auto; }
  .kit-board .schedules-view .schedule-destination { grid-column: 1; }
  .kit-board .schedules-view .row.automation .what { white-space: normal; }
  .kit-board .schedules-view .schedule-modes .btn, .kit-board .schedules-view .toggle { min-height: 44px; }
}
/* What Kit did (KT-60439): one quiet line under Needs you on #/needs-you, no number, never bold. */
.kit-did { margin-top: 8px; border-top: 1px solid var(--d-line); }
.kit-did-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 8px 0; border: 0; background: none; color: var(--d-muted); font: inherit; font-size: 0.9333rem; font-weight: 400; text-align: left; cursor: pointer; }
.kit-did-toggle:hover { color: var(--d-ink); }
.kit-did-toggle:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; border-radius: 6px; }
.kit-did-head { font-weight: 400; }
.kit-did-chev { flex: none; transition: transform .12s ease; }
.kit-did.open .kit-did-chev { transform: rotate(180deg); }
.kit-did-list[hidden] { display: none; }
.kit-did-list { padding: 0 0 8px; }
.kit-did-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--d-line); }
.kit-did-row:first-child { border-top: 0; }
.kit-did-text { min-width: 0; }
.kit-did-title { margin: 0; display: flex; align-items: baseline; gap: 8px; font-size: 0.9333rem; color: var(--d-ink); }
.kit-did-kind { flex: none; font-size: 0.8333rem; color: var(--d-soft); }
.kit-did-what { overflow-wrap: anywhere; }
.kit-did-row[data-state="undone"] .kit-did-what, .kit-did-row[data-state="cancelled"] .kit-did-what { color: var(--d-muted); text-decoration: line-through; text-decoration-color: var(--d-soft); }
.kit-did-from { margin: 2px 0 0; font-size: 0.8333rem; color: var(--d-muted); overflow-wrap: anywhere; }
.kit-did-note { margin: 4px 0 0; font-size: 0.8667rem; color: var(--d-overdue); }
.kit-did-acts { flex: none; display: flex; align-items: center; gap: 4px 14px; }
.kit-did-link { min-height: 32px; padding: 4px 0; border: 0; background: none; color: var(--d-olive-ink); font: inherit; font-size: 0.8667rem; font-weight: 500; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; }
.kit-did-link:hover:not(:disabled) { text-decoration: underline; }
.kit-did-link:disabled { opacity: .55; cursor: default; }
.kit-did-link:focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; border-radius: 4px; }
.kit-did-empty { margin: 0; padding: 6px 0 10px; font-size: 0.9333rem; color: var(--d-muted); }
@media (max-width: 479px) { .kit-did-row { flex-direction: column; gap: 2px; } }

/* Schedules controls (KT-60774): one action per row, Pause / Off in the panel. */
.kit-board .schedules-view .row.automation { grid-template-columns: minmax(0, 1fr) minmax(160px, 230px) 130px 104px; cursor: pointer; }
.kit-board .schedules-view .schedule-act { justify-self: end; }
.kit-board .schedules-view .schedule-act-btn { color: var(--d-olive-ink); font-weight: 500; white-space: nowrap; }
.kit-board .schedules-view .row.attention .schedule-act-btn { color: var(--danger); }
.panel .schedule-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 6px; }
.panel .schedule-state { color: var(--ink-2); font-size: 0.875rem; margin-right: 4px; }
.panel .schedule-off { display: block; width: fit-content; align-self: flex-start; margin: 0 0 12px; color: var(--ink-2); }
.panel .schedule-failed { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 4px; }
.panel .schedule-failed span { flex: 1 1 240px; }
@media (max-width: 1050px) {
  .kit-board .schedules-view .row.automation { grid-template-columns: minmax(0, 1fr) 170px auto; }
  .kit-board .schedules-view .schedule-act { grid-column: 3; grid-row: 1 / 3; align-self: center; }
}
@media (max-width: 600px) {
  .kit-board .schedules-view .row.automation { grid-template-columns: minmax(0, 1fr) auto; }
  .kit-board .schedules-view .schedule-act { grid-column: 2; grid-row: 1; align-self: start; }
  .kit-board .schedules-view .schedule-act-btn, .panel .schedule-controls .btn, .panel .schedule-failed .btn { min-height: 44px; }
}