/* Kit Board — the family's projects & issues.
   Same face as the rest of Kit: warm paper, ink, terracotta. Tokens mirror
   infra/compose-dev/whitelabel/brand.css so the board and the chat app 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(217, 98, 43, 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(58,38,22,.05), 0 14px 34px -10px rgba(58,38,22,.12);
  --shadow-lg: 0 2px 4px rgba(58,38,22,.05), 0 34px 68px -18px rgba(58,38,22,.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 ~300px. */
  --peek-w: min(clamp(640px, 60vw, 1040px), calc(100vw - var(--sidebar-w) - 300px));
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  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 old host's initial screen (infra/mm-webapp patches
   0001 + 0004): 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: 28px; font-weight: 650; letter-spacing: -.035em; }
.boot.KitSplash .KitSplash__tagline { margin: 0; color: #62675f; font-size: 16px; }
/* Hosted (a web view, the chat pane): 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, body.embed-chat .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: 0; 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(--brand-hi);
}
.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: 19px; 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: 13px;
}
.topbar .me { display: flex; align-items: center; gap: 8px; }
/* The avatar menu (kit mode): the account matters the old host's account
   menu and settings gear held, 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: 14px; text-align: left;
}
.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: 12px; 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; }
.me-menu-push { padding: 0; }
.me-menu-push .kit-push-toggle { width: 100%; justify-content: flex-start; padding: 8px 10px; font-size: 14px; color: var(--ink); }
.me-menu-push .kit-push-toggle:hover { background: var(--wash); }
.me-menu-version { padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; font-size: 11.5px; 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);
}

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

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

.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: 48px; height: calc(100vh - 48px);
}
/* Kit mode, the chat view: 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: 10px -14px 0; overflow: hidden;
}
.sidebar .chat-list-slot > * { flex: 1; min-height: 0; }
/* The household's settings at the foot of the column (kit mode). */
.sidebar .sidebar-foot { flex: none; padding: 10px 10px 0; font-size: 12px; }
.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: 11px; 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: 12px; 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; cursor: pointer; text-align: left; font: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.sidebar .kit-nav-side .kit-nav-heading:hover { color: var(--ink-2); }
.sidebar .kit-nav-side .kit-nav-heading:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--r-sm); }
.sidebar .kit-nav-side .kit-nav-chevron { flex: none; transition: transform .15s ease; }
.sidebar .kit-nav-side.kit-nav-collapsed .kit-nav-chevron { transform: rotate(-90deg); }
/* 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: 26px; font-weight: 600; margin: 0;
  letter-spacing: .005em;
}
.view-head .sub { color: var(--ink-2); font-size: 13px; }
.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(58,38,22,.05);
}
.btn:hover { border-color: var(--ink-3); }
.btn.primary {
  background: var(--brand); border-color: var(--brand); color: #fff; 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(--brand-hi); box-shadow: 0 0 0 3px var(--focus); }

/* ---------- 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: 13px; cursor: pointer;
}
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- 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: 13px; 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: 12px; 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: 11px; color: var(--ink-3); letter-spacing: .02em; white-space: nowrap; }

.badge {
  font-size: 11px; 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: #fff; background: var(--ink-3);
  text-transform: uppercase;
}
.avatar.unassigned { background: transparent; border: 1px dashed var(--ink-3); 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: 17px; 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: 12px; color: var(--ink-2); }
.project-card .grow { flex: 1; }
.pill {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--wash); color: var(--ink-2); white-space: nowrap;
}
.pill.started { background: rgba(166,62,27,.12); color: var(--brand); }
.pill.completed { background: rgba(62,124,79,.14); color: var(--ok); }
.pill.paused { background: rgba(176,126,34,.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; }

.project-head-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow); padding: 16px 18px; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.project-head-card .toprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.project-head-card h2 { font-family: var(--serif); margin: 0; font-size: 22px; flex: 1; min-width: 200px; }
.project-head-card .summary { color: var(--ink-2); }
.project-head-card .facts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }

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

.overlay {
  position: fixed; inset: 0; background: rgba(31,26,22,.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%); }
@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); }
}
@keyframes slide-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Embedded (#/peek/…, framed by the chat host): no chrome, the panel IS the
   document — the host draws the slide-over and the backdrop around us. */
body.embedded .topbar { display: none; }
/* No "Opening the board…" splash in a frame: the host keeps the panel
   off-screen until we post 'ready', so the frame stays blank paper. */
body.embedded #app .boot { display: none; }
body.embedded .overlay, body.embedded .overlay.peek { background: transparent; pointer-events: auto; }
body.embedded .panel, body.embedded .overlay.peek .panel {
  width: 100%; height: 100vh; height: 100dvh; box-shadow: none; animation: none; pointer-events: auto;
}
/* Hosted (the Kit Shell): the board as content inside a native host — the
   iOS app's web view (embed=mobile) or the chat shell's centre pane
   (embed=chat). 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, body.embed-chat .topbar { display: none; }
body.embed-mobile .kit-nav--tabs, body.embed-chat .kit-nav--tabs { display: none !important; }
body.embed-mobile .kit-nav-side, body.embed-chat .kit-nav-side,
body.embed-mobile .kit-nav-side + .section-label { display: none; }
body.embed-chat .sidebar .section-label { margin-top: 0; padding-top: 4px; border-top: 0; }
body.embed-mobile .shell, body.embed-chat .shell { min-height: 100vh; min-height: 100dvh; }
body.embed-chat .sidebar { top: 0; height: 100vh; 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; }
/* 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; position: fixed; right: 16px; z-index: 12;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; background: var(--brand); color: #fff; box-shadow: var(--shadow-lg); }
.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: 12px; letter-spacing: .02em; }
.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: 20px; 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(--brand-hi); 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: 12px; 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 issue panel lays out like the issue page: title across the top,
   notes and the thread down the left, the properties in a card on the right
   that stays put while the thread scrolls. Narrow panels keep one column. */
@container panel (min-width: 680px) {
  .panel.issue .panel-body {
    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 .title-input { grid-area: title; width: calc(100% + 16px); font-size: 24px; }
  .panel.issue .panel-main { grid-area: main; gap: 18px; }
  .panel.issue .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-props .field-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .panel.issue .rich-input, .panel.issue .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: 11px; color: var(--ink-3); flex: 1; }

/* ---------- 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: 12.5px; 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(166,62,27,.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: 14px;
}

/* 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: 12px; 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: 12px; 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(--brand-hi); 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: 12px; 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(58,38,22,.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: 11.5px; color: var(--ink-3);
}
.rich-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.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: 12px; 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: 13px; }
.comment-head .when { font-size: 11px; color: var(--ink-3); margin-left: auto; }
.comment-body { font-size: 14px; line-height: 1.5; }
.comment-empty { color: var(--ink-3); font-size: 13px; padding: 2px 0; }
.mention {
  color: var(--brand); font-weight: 600; background: rgba(166,62,27,.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(--brand-hi); 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; }

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

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

.section-title {
  font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 22px 0 2px;
}
.section-sub { color: var(--ink-2); font-size: 13px; 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: 12px; 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: 12px; 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(166,62,27,.10); color: var(--brand); }
.kind.job { background: rgba(62,108,124,.12); color: #3E6C7C; }
.kind.rec { background: transparent; color: var(--ink-3); }
.row.sched.off .kind { opacity: .6; }
.onoff {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.onoff.on { background: rgba(62,124,79,.14); color: var(--ok); }
.onoff.off { background: var(--wash); color: var(--ink-3); }
.onoff.paused { background: rgba(176,126,34,.14); color: var(--snooze); }
.badge.warn { background: rgba(176,126,34,.14); color: var(--snooze); }
.hb {
  font-size: 11px; 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(176,126,34,.10); }
.fact code { font-size: 12px; background: var(--wash); padding: 1px 5px; border-radius: 4px; }
.run {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; 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: 20px; 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: 11px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.fact .v { font-size: 14px; 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: 13px; color: var(--ink-2);
}
.callout.warn { border-color: rgba(176,126,34,.4); background: rgba(176,126,34,.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: 12.5px; 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: 13px;
}
.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: 12px; }
.run-item .err { color: var(--danger); font-size: 12px; 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(62,124,79,.12); color: var(--ok); }
.kind.write { background: rgba(166,62,27,.10); color: var(--brand); }
.kind.post { background: rgba(62,108,124,.12); color: #3E6C7C; }
.group-blurb { margin: 4px 2px 8px; color: var(--ink-2); font-size: 13px; }
.row.tool-row .ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tool-prose { margin: 0; font-size: 14px; 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: 13px; 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: 13px; padding: 6px 10px; }

.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: 28px; 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(--brand-hi); 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: 12px; font-weight: 600; color: var(--ink-2); }
.prop select, .prop input { width: 100%; font-size: 13px; padding: 5px 8px; }
.prop .tags { display: flex; flex-wrap: wrap; gap: 4px; }
.stamps { display: flex; flex-direction: column; gap: 3px; font-size: 12px; 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;
  background: var(--ink); color: var(--paper); padding: 10px 18px;
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); font-size: 14px;
  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: #fff; }
.toast button { border: 0; background: none; color: inherit; font-weight: 700; cursor: pointer; padding: 0; }

/* ---------- 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 (kit mode, signed out or expired): the old host's
   KitWelcome (infra/mm-webapp/patches/0001-kit-login-screen.patch,
   kit_welcome.scss) — 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 #29312835;
}
.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 #929975; transform: rotate(-25deg);
}
.KitWelcome h1 { margin: 0; font-family: inherit; font-size: 34px; font-weight: 600; letter-spacing: -.04em; }
.KitWelcome h2 { margin: 13px 0 0; font-family: inherit; font-size: 18px; font-weight: 400; letter-spacing: -.01em; }
.KitWelcome__panel > p { margin: 17px 0 26px; color: var(--ink-2); font-size: 14px; 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: 15px; 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: #fffefa;
  cursor: pointer; font-size: 15px; font-weight: 600; transition: background 160ms ease;
}
.KitWelcome__continue:hover { background: #823b23; color: #fffefa; }
.KitWelcome__switch {
  display: inline-block; margin-top: 23px; color: var(--ink-2); font-size: 13px;
  text-decoration: underline; text-underline-offset: 4px;
}
.KitWelcome__switch:hover { color: var(--brand); }
.KitWelcome :is(button, a):focus-visible { outline: 3px solid var(--brand); outline-offset: 5px; }
.KitWelcome__foot { margin: 24px 0 0; font-size: 12px; 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; }
  .topbar #kit-search { flex: 1; margin: 0 4px; }
  /* 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;
  }
  /* Seven entries fit a 375px bar only if each may shrink and its label
     may be cut: an admin sees Chat · Issues · Projects · Calendar ·
     Schedules · Tools · Admin. */
  /* (.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 { flex: 1 1 0; min-width: 0; max-width: none; flex-direction: column; gap: 3px; padding: 4px 2px; border-radius: 0; font-size: 10.5px; }
  .kit-nav.kit-nav--tabs a span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kit-nav.kit-nav--tabs a[aria-current="page"] { font-weight: 600; }
  .kit-nav.kit-nav--tabs svg { width: 20px; height: 20px; }
  /* The fold toggle: a pill like the tabs; folded, the bar is the view
     showing now plus this pill. */
  .kit-nav.kit-nav--tabs .kit-nav-toggle {
    flex: 1 1 0; min-width: 0; 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: 10.5px; font-weight: 500; line-height: 1; color: var(--kit-nav-fg);
  }
  .kit-nav.kit-nav--tabs .kit-nav-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
  .kit-nav.kit-nav--tabs .kit-nav-chevron { width: 20px; height: 20px; transition: transform .15s ease; }
  .kit-nav.kit-nav--tabs.kit-nav-collapsed .kit-nav-chevron { transform: rotate(180deg); }
  .kit-nav.kit-nav--tabs.kit-nav-collapsed a { flex: 0 1 auto; padding: 4px 16px; }
  .kit-nav.kit-nav--tabs.kit-nav-collapsed .kit-nav-toggle { flex: 0 1 auto; padding: 4px 16px; }

  .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;
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--brand); color: #fff; box-shadow: var(--shadow-lg);
  }
  .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: 22px; }

  .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: 23px; }
}

/* ---------- 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-box { background: var(--surface); border-color: var(--line); color: 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 ---------- */

.view.wide { max-width: 1240px; }
.cal-nav { display: flex; align-items: center; gap: 2px; }
.cal-nav .btn.quiet { padding: 6px 8px; }
.cal-range { font-family: var(--serif); font-size: 17px; margin-left: 8px; white-space: nowrap; }
.cal-side-toggle { display: none; }

.cal { display: flex; gap: 16px; align-items: flex-start; }
.cal-side { width: 208px; flex: none; position: sticky; top: 12px; }
.cal-main {
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow); overflow: hidden;
  display: flex; flex-direction: column;
}
.cal-main > .empty, .cal-main > .cal-issues { margin: 12px; }

.cal-list-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 6px 8px;
}
.cal-show-all, .cal-only {
  font: inherit; font-size: 11px; font-weight: 600; line-height: 16px;
  border: 0; cursor: pointer; border-radius: 999px; white-space: nowrap;
}
.cal-show-all { background: none; color: var(--accent); padding: 0 2px; }
.cal-show-all:hover { color: var(--accent-hi); text-decoration: underline; }
.cal-list-empty { font-size: 13px; color: var(--ink-3); padding: 2px 8px; }
.cal-group { margin-bottom: 8px; }
.cal-group-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 4px; font-size: 13px; font-weight: 600; }
.cal-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 13px;
  cursor: pointer; border-radius: var(--r-sm); min-width: 0; position: relative;
}
.cal-row:hover { background: var(--wash); }
.cal-row input { margin: 0; accent-color: var(--brand); flex: none; }
.cal-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
/* "Only" sits over the tail of the name on hover, fading the text out under it. */
.cal-only {
  display: none; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 2px 9px; background: var(--accent); color: #fff;
  box-shadow: -12px 0 10px -2px var(--wash);
}
.cal-only:hover { background: var(--accent-hi); }
.cal-row:hover .cal-only, .cal-row:focus-within .cal-only { display: inline-block; }
@media (hover: none) {
  .cal-only { display: inline-block; position: static; transform: none; box-shadow: none; margin-left: auto; }
}

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

.cal-days { display: grid; border-bottom: 1px solid var(--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(--ink-2); border-left: 1px solid var(--line);
}
.cal-day:hover .num { background: var(--wash); }
.cal-day .dow { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.cal-day .num {
  font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--ink);
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.cal-day.today .dow { color: var(--brand); font-weight: 600; }
.cal-day.today .num, .cal-day.today:hover .num { background: var(--brand); color: #fff; }

.cal-allday {
  display: grid; grid-auto-rows: 24px; row-gap: 2px; padding: 4px 0;
  border-bottom: 1px solid var(--line); background: var(--paper-2);
}
.cal-allday-label { grid-column: 1; grid-row: 1; font-size: 10px; color: var(--ink-3); 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: 10px; color: var(--ink-3); white-space: nowrap;
}
.cal-col { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.cal-col.today { background: rgba(166,62,27,.03); }
.cal-hour { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.cal-hour:first-child { border-top: 0; }
.cal-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--brand); 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(--brand);
}

.cal-ev {
  --ev: var(--brand);
  position: absolute; z-index: 2; border: 0; text-align: left; cursor: pointer; overflow: hidden;
  border-radius: 6px; padding: 3px 6px; font-size: 12px; line-height: 1.25; color: var(--ink);
  background: color-mix(in srgb, var(--ev) 22%, #fff); border-left: 3px solid var(--ev);
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.cal-ev:hover { background: color-mix(in srgb, var(--ev) 34%, #fff); z-index: 4; }
.cal-ev .s { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev .t { color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.cal-ev.declined { opacity: .55; }
.cal-ev.declined .s { text-decoration: line-through; }
.cal-ev.free { background: transparent; border: 1px dashed var(--ev); border-left: 3px solid var(--ev); }
.cal-ev.allday { position: static; margin: 0 3px; height: 22px; justify-content: center; }

/* event panel */
.ev-title {
  font-family: var(--serif); font-size: 22px; font-weight: 600; margin: 0; line-height: 1.25;
  padding-left: 12px; border-left: 4px solid var(--brand); overflow-wrap: anywhere;
}
.ev-fact { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.ev-fact > svg { flex: none; margin-top: 2px; color: var(--ink-3); }
.ev-fact .v { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ev-cals { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-cal {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  padding: 3px 8px 3px 8px; border-radius: 999px; background: var(--wash);
}
.ev-cal .avatar { width: 18px; height: 18px; font-size: 9px; }
.ev-desc {
  overflow-wrap: anywhere; font-size: 14px; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--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(--line); padding-top: 14px; }
.guests-head { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.guests-head .tally { font-weight: 400; color: var(--ink-3); }
.guest {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
}
.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: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guest .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); flex: none; }

@media (max-width: 719px) {
  .cal-side-toggle { display: inline-block; }
  .cal-side { display: none; position: static; width: auto; }
  .cal.side-open { flex-direction: column; }
  .cal.side-open .cal-side {
    display: block; width: 100%; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 6px;
  }
  .cal-range { font-size: 14px; margin-left: 4px; }
  .view-head .chip-row { order: 5; }
  .cal-scroll { max-height: calc(100vh - 300px); }
  .cal-ev { padding: 2px 4px; font-size: 11px; border-radius: 4px; }
  .cal-ev .t { display: none; }
  .cal-day { padding: 6px 2px 4px; }
  .cal-day .num { font-size: 18px; width: 28px; height: 28px; }
}

/* ---------- 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: 12px; background: var(--wash); padding: 1px 6px; border-radius: 4px; }
.row.park .name .badge { max-width: 240px; }
.row.park .what {
  font-size: 12px; 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: 12px; }
.kind.park { background: rgba(176,126,34,.14); color: var(--snooze); }
.kind.park.unattended { background: rgba(166,62,27,.10); color: var(--brand); }
.admin-note { margin: 10px 0 0; }
@media (max-width: 720px) {
  .row.park .what { white-space: normal; }
}

/* ---------- Chat (kit mode): the React island fills the view ----------
   The view is the island's box, shaped like the old host's centre pane: 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: 48px; --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: 13px; }
.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(46px + env(safe-area-inset-bottom)); }
}