/*
 * The suite's interface: every app's frame, sign-in, settings, dialogs,
 * notices and controls, with the Cronum Studio brand. One look for every
 * app; each keeps its accent (the product's colour, from tokens.css by
 * <html data-app="…">, or --app set by the page) and greys with a touch of
 * that hue. Yolk marks "now" and nothing else.
 *
 * Logical properties throughout (margin-inline, inset-inline-start): the
 * suite's convention, and right-to-left for free. The theme hangs from
 * <html data-theme>, which theme.js resolves before the first paint.
 * Linked after tokens.css, which brings the brand's colours and fonts.
 */

:root {
  color-scheme: light;
  /* The drawer and what slides with it: quick to start, soft to land. */
  --kit-slide-time: .28s;
  --kit-slide: cubic-bezier(.32, .72, 0, 1);
  --kit-hue: var(--app, #7A7064);
  --kit-accent: var(--app-accent, var(--app, #16130E));
  --kit-on-accent: var(--app-on, #FFFFFF);
  --kit-accent-soft: color-mix(in oklab, var(--kit-accent) 12%, #FFFFFF);
  --kit-bg: color-mix(in oklab, var(--kit-hue) 4%, #FAF8F4);
  --kit-side: color-mix(in oklab, var(--kit-hue) 7%, #F4F1EA);
  --kit-panel: #FFFFFF;
  --kit-hover: color-mix(in oklab, var(--kit-hue) 9%, #F1EEE7);
  --kit-text: color-mix(in oklab, var(--kit-hue) 8%, #17150F);
  --kit-muted: color-mix(in oklab, var(--kit-hue) 14%, #6E675C);
  --kit-border: color-mix(in oklab, var(--kit-hue) 9%, #E6E0D4);
  --kit-now: var(--cr-yolk-600);
  /* A highlighter's yellow in every app: a highlight is not the app's colour. */
  --kit-md-mark: color-mix(in oklab, var(--cr-yolk-500) 42%, #FFFFFF);
  --kit-now-text: var(--cr-yolk-text);
  --kit-ok: #1F8A57;
  --kit-warn: #A86200;
  --kit-danger: #C8372D;
  --kit-warn-soft: #FFF1D6;
  --kit-danger-soft: #FCE7E4;
  --kit-toast: #1F1B15;
  --kit-toast-text: #FFF7E6;
  --kit-scrim: rgba(10, 8, 4, .45);
  --kit-shadow: 0 1px 2px rgba(40, 30, 10, .07), 0 8px 24px rgba(40, 30, 10, .07);
  --kit-shadow-high: 0 12px 40px rgba(20, 15, 5, .22);
  --kit-radius: 10px;
  --kit-radius-large: 16px;
  --kit-sig-ring: var(--cr-yolk-600);
  --kit-sig-dot: var(--cr-ink);
  --kit-font: var(--cr-font-text);
  --kit-font-display: var(--cr-font-display);
  --kit-font-mono: var(--cr-font-mono);
  --kit-safe-top: env(safe-area-inset-top, 0px);
  --kit-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/*
 * In the dark, a product's colour (graphite, say) would vanish on ink: the
 * accent is its light step from tokens.css, or the colour lightened with
 * cream, with ink on it.
 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --kit-accent: var(--app-accent-dark, color-mix(in oklab, var(--app, #FFC21A) 55%, #FFF7E6));
  --kit-on-accent: var(--app-on-dark, #16130E);
  --kit-accent-soft: color-mix(in oklab, var(--kit-accent) 18%, #1C1914);
  --kit-bg: color-mix(in oklab, var(--kit-hue) 6%, #14120E);
  --kit-side: color-mix(in oklab, var(--kit-hue) 8%, #110F0B);
  --kit-panel: color-mix(in oklab, var(--kit-hue) 6%, #1C1914);
  --kit-hover: color-mix(in oklab, var(--kit-hue) 10%, #26221B);
  --kit-text: #F6F1E7;
  --kit-muted: color-mix(in oklab, var(--kit-hue) 12%, #ABA294);
  --kit-border: color-mix(in oklab, var(--kit-hue) 10%, #312C24);
  --kit-now: var(--cr-yolk-500);
  --kit-md-mark: color-mix(in oklab, var(--cr-yolk-500) 34%, #1C1914);
  --kit-now-text: var(--cr-yolk-500);
  --kit-ok: #4CC184;
  --kit-warn: #FFC94D;
  --kit-danger: #F07A6E;
  --kit-warn-soft: #3A2E12;
  --kit-danger-soft: #3D1D19;
  --kit-toast: #FFF7E6;
  --kit-toast-text: #16130E;
  --kit-scrim: rgba(0, 0, 0, .6);
  --kit-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --kit-shadow-high: 0 12px 40px rgba(0, 0, 0, .55);
  --kit-sig-ring: var(--cr-yolk-500);
  --kit-sig-dot: var(--cr-cream);
}

/*
 * The Clean look (<html data-look="clean">, a host's choice for each person:
 * theme.js and shell.js): white and greys with no hue in them, hairline
 * borders, soft shadows and Inter everywhere. The product's accent stays, as
 * the one colour; yolk still marks "now". Light and dark each have their own.
 */
:root[data-look="clean"] {
  --kit-font: var(--cr-font-clean);
  --kit-font-display: var(--cr-font-clean);
  --kit-radius: 12px;
  --kit-radius-large: 18px;
  /*
   * Its type, corners and room, an iPhone's. Only this look sets the --look-*
   * variables: every use carries the Cronum look's value as its fallback
   * (`font-size: var(--look-body, 14px)`), so without them nothing changes.
   * The sizes are Apple's text styles.
   */
  --look-base: 17px;
  --look-large-title: 34px;
  --look-title1: 28px;
  --look-title2: 22px;
  --look-title3: 20px;
  --look-headline: 17px;
  --look-body: 17px;
  --look-callout: 16px;
  --look-subhead: 15px;
  --look-footnote: 13px;
  --look-caption: 12px;
  --look-caption2: 11px;
  --look-r-xs: 6px;
  --look-r-sm: 10px;
  --look-r-md: 12px;
  --look-r-lg: 14px;
  --look-r-xl: 18px;
  --look-gutter: 20px;
  --look-row-y: 12px;
  --look-row-gap: 14px;
  --look-head-y: 18px;
  --look-item-y: 10px;
  --look-bar-y: 10px;
  --look-section: 28px;
}
:root[data-look="clean"]:not([data-theme="dark"]) {
  --kit-accent-soft: color-mix(in oklab, var(--kit-accent) 10%, #FFFFFF);
  --kit-bg: #FFFFFF;
  --kit-side: #F5F5F7;
  --kit-panel: #FFFFFF;
  --kit-hover: #F2F2F7;
  --kit-text: #1D1D1F;
  --kit-muted: #6E6E73;
  --kit-border: #E5E5EA;
  --kit-toast: #1D1D1F;
  --kit-toast-text: #FFFFFF;
  --kit-scrim: rgba(0, 0, 0, .32);
  --kit-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .05);
  --kit-shadow-high: 0 10px 36px rgba(0, 0, 0, .14);
}
:root[data-look="clean"][data-theme="dark"] {
  --kit-accent-soft: color-mix(in oklab, var(--kit-accent) 18%, #1C1C1E);
  --kit-bg: #000000;
  --kit-side: #0E0E10;
  --kit-panel: #1C1C1E;
  --kit-hover: #2C2C2E;
  --kit-text: #F5F5F7;
  --kit-muted: #98989D;
  --kit-border: #38383A;
  --kit-md-mark: color-mix(in oklab, var(--cr-yolk-500) 34%, #1C1C1E);
  --kit-toast: #F5F5F7;
  --kit-toast-text: #1D1D1F;
  --kit-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --kit-shadow-high: 0 12px 40px rgba(0, 0, 0, .6);
}

/* ---------------------------------- base ---------------------------------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 400 var(--look-base, 15px)/1.5 var(--kit-font);
  color: var(--kit-text);
  background: var(--kit-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--kit-accent); }
h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 2px; }
.kit-mono { font-family: var(--kit-font-mono); font-size: var(--look-footnote, 12.5px); word-break: break-all; }
.kit-now { color: var(--kit-now-text); }
.kit-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* An icon from icons.js: stroked, round ends, the colour of its text. */
.kit-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .kit-icon[data-directional] { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  :root { --kit-slide-time: 0s; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ------------------------------ simple pages ------------------------------ */
/* A page without the app frame: the admin panel. */

.kit-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: calc(14px + var(--kit-safe-top)) 16px 0;
  max-width: 1120px; margin: 0 auto;
}
.kit-header h1 { margin: 0; font: 700 var(--look-title2, 21px)/1.1 var(--kit-font-display); letter-spacing: -.02em; }
.kit-header__icon { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.kit-header__app { color: var(--kit-muted); font-size: var(--look-subhead, 14px); }
.kit-header__spacer { flex: 1; }
.kit-header__user { color: var(--kit-muted); font-size: var(--look-subhead, 14px); }

.kit-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  max-width: 1120px; margin: 12px auto 0; padding: 0 16px;
  border-bottom: 1px solid var(--kit-border);
}
.kit-tab {
  padding: 9px 14px; border-radius: var(--look-r-sm, 8px) var(--look-r-sm, 8px) 0 0; color: var(--kit-muted);
  text-decoration: none; white-space: nowrap; font-weight: 500;
}
.kit-tab:hover { background: var(--kit-hover); color: var(--kit-text); }
.kit-tab[aria-current="page"] { color: var(--kit-text); box-shadow: inset 0 -2px var(--kit-accent); }

.kit-main { max-width: 1120px; margin: 0 auto; padding: 18px var(--look-gutter, 16px) 48px; }
.kit-main > h2 { margin: 0 0 4px; font: 700 var(--look-title2, 20px)/1.2 var(--kit-font-display); letter-spacing: -.02em; }
.kit-lead { margin: 0 0 16px; color: var(--kit-muted); }
.kit-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 0 0 14px; }
.kit-toolbar .kit-field { min-width: 180px; }

.kit-notice {
  background: var(--kit-panel); border: 1px solid var(--kit-border); border-radius: var(--kit-radius);
  padding: 18px; box-shadow: var(--kit-shadow); display: grid; gap: 12px; justify-items: start;
}
.kit-notice p { margin: 0; }
.kit-empty { color: var(--kit-muted); padding: 12px 2px; margin: 0; }

/* -------------------------------- controls -------------------------------- */

.kit-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 14px; border-radius: var(--look-r-md, 9px); border: 1px solid var(--kit-border);
  background: var(--kit-panel); color: var(--kit-text); font-weight: 500; font-size: var(--look-subhead, 14px);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.kit-btn:hover { background: var(--kit-hover); }
.kit-btn--primary { background: var(--kit-accent); border-color: var(--kit-accent); color: var(--kit-on-accent); font-weight: 600; }
.kit-btn--primary:hover { background: var(--kit-accent); filter: brightness(1.07); }
.kit-btn--quiet { background: none; border-color: transparent; }
.kit-btn--quiet:hover { background: var(--kit-hover); }
.kit-btn--danger { background: var(--kit-danger); border-color: var(--kit-danger); color: #FFFFFF; font-weight: 600; }
.kit-btn--danger:hover { background: var(--kit-danger); filter: brightness(1.07); }
.kit-btn--danger-quiet { background: none; border-color: transparent; color: var(--kit-danger); }
.kit-btn--small { min-height: 31px; padding: 0 10px; font-size: var(--look-subhead, 13.5px); border-radius: var(--look-r-sm, 8px); }
.kit-btn--block { width: 100%; }
.kit-btn[disabled], .kit-btn[aria-busy="true"] { opacity: .55; cursor: default; filter: none; }
.kit-btn .kit-icon { width: 17px; height: 17px; }

.kit-link { background: none; border: 0; padding: 0; color: var(--kit-accent); cursor: pointer; font-size: var(--look-subhead, 14px); text-decoration: none; font-weight: 500; }
.kit-link:hover { text-decoration: underline; }
.kit-link--danger { color: var(--kit-danger); }

.kit-icon-btn {
  width: 40px; height: 40px; border-radius: var(--look-r-md, 10px); border: 0; background: none; cursor: pointer; flex: none;
  display: inline-grid; place-items: center; color: var(--kit-muted); font-size: var(--look-title2, 22px); line-height: 1; padding: 0;
}
.kit-icon-btn:hover { background: var(--kit-hover); color: var(--kit-text); }
.kit-icon-btn .kit-icon { width: 20px; height: 20px; }

.kit-spinner {
  width: 15px; height: 15px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: kit-spin .8s linear infinite; flex: none;
}
@keyframes kit-spin { to { transform: rotate(360deg); } }

.kit-field { display: grid; gap: 5px; }
.kit-field > label { font-size: var(--look-footnote, 13px); font-weight: 500; color: var(--kit-text); }
.kit-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .kit-field select, .kit-field textarea, .kit-input {
  width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--look-r-md, 9px);
  border: 1px solid var(--kit-border); background: var(--kit-panel); color: var(--kit-text);
}
.kit-field textarea { min-height: 90px; resize: vertical; }
.kit-field input:focus-visible, .kit-field select:focus-visible, .kit-field textarea:focus-visible, .kit-input:focus-visible {
  outline: 2px solid var(--kit-accent); outline-offset: -1px; border-color: transparent;
}
.kit-field--bad input, .kit-field--bad select, .kit-field--bad textarea { border-color: var(--kit-danger); }
.kit-hint { margin: 0; color: var(--kit-muted); font-size: var(--look-footnote, 12.5px); }
.kit-error { margin: 0; color: var(--kit-danger); font-size: var(--look-footnote, 13px); }
.kit-check { display: flex; align-items: center; gap: 9px; }
.kit-check input { width: 18px; height: 18px; accent-color: var(--kit-accent); margin: 0; flex: none; }
.kit-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.kit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.kit-stack { display: grid; gap: 12px; }

/* A switch: a button with role="switch" and aria-checked. */
.kit-switch {
  width: 42px; height: 26px; border-radius: 999px; background: var(--kit-border); border: 0;
  position: relative; cursor: pointer; flex: none; padding: 0;
}
.kit-switch::after {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: inset-inline-start .15s;
}
.kit-switch[aria-checked="true"] { background: var(--kit-accent); }
.kit-switch[aria-checked="true"]::after { inset-inline-start: 19px; }
.kit-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.kit-switch-row small { display: block; color: var(--kit-muted); font-size: var(--look-footnote, 12.5px); }
.kit-switch-row--swatch > span:first-child { display: flex; align-items: center; gap: 8px; }

/* One choice among a few, side by side (the theme). */
.kit-segmented { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: var(--look-r-md, 10px); background: var(--kit-hover); gap: 2px; }
.kit-segmented button {
  border: 0; background: none; padding: 6px 12px; border-radius: var(--look-r-sm, 8px); color: var(--kit-muted); font-weight: 500;
  cursor: pointer; min-height: 32px;
}
.kit-segmented button[aria-pressed="true"] { background: var(--kit-panel); color: var(--kit-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* ---------------------------------- data ---------------------------------- */

.kit-table-wrap {
  overflow-x: auto; background: var(--kit-panel); border: 1px solid var(--kit-border);
  border-radius: var(--kit-radius); box-shadow: var(--kit-shadow);
}
.kit-table { width: 100%; border-collapse: collapse; font-size: var(--look-subhead, 14px); }
.kit-table th {
  text-align: start; font-weight: 600; color: var(--kit-muted); font-size: var(--look-footnote, 12.5px);
  padding: 10px 12px; border-bottom: 1px solid var(--kit-border); white-space: nowrap;
}
.kit-table td { padding: 10px 12px; border-bottom: 1px solid var(--kit-border); vertical-align: top; }
.kit-table tr:last-child td { border-bottom: 0; }
.kit-table tbody tr[data-open] { cursor: pointer; }
.kit-table tbody tr[data-open]:hover { background: var(--kit-hover); }
.kit-table small { display: block; color: var(--kit-muted); font-size: var(--look-footnote, 12.5px); }
/* The admin's account dialog (admin.js): folds that say what they hold, closed. */
.kit-fold__now {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--kit-muted); font-size: var(--look-footnote, 13px); font-weight: 400;
}
.kit-fold__now--warn { color: var(--kit-warn); font-weight: 600; }
.kit-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.kit-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.kit-row--end { align-items: end; }
.kit-row__last { margin-inline-start: auto; }
.kit-warning {
  margin: 0; padding: 10px 12px; border-radius: var(--look-r-md, 10px); font-size: var(--look-subhead, 13.5px); line-height: 1.4;
  background: var(--kit-warn-soft); color: var(--kit-warn);
}
.kit-subfold > summary { cursor: pointer; color: var(--kit-accent); font-size: var(--look-subhead, 14px); font-weight: 500; width: fit-content; }
.kit-subfold[open] > summary { margin-bottom: 10px; }
.kit-subfold > :not(summary) + :not(summary) { margin-top: 10px; }
.kit-contents { display: contents; }
.kit-dialog__end { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--kit-border); }
/* What an account uses (admin.js, Usage): a line per count, a bar where there is a limit. */
.kit-usage { display: grid; gap: 16px; }
.kit-usage__group { display: grid; gap: 8px; }
.kit-usage__group + .kit-usage__group { padding-top: 14px; border-top: 1px solid var(--kit-border); }
.kit-usage__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--look-subhead, 14px); font-weight: 600; }
.kit-usage__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
.kit-usage__row > .kit-meter, .kit-usage__row > .kit-usage__note { grid-column: 1 / -1; }
.kit-usage__row > .kit-badge { grid-column: 1 / -1; justify-self: start; }
.kit-usage__value { color: var(--kit-muted); font-variant-numeric: tabular-nums; text-align: end; }
.kit-usage__note { color: var(--kit-muted); font-size: var(--look-footnote, 12.5px); }
.kit-meter { display: block; block-size: 6px; border-radius: 999px; background: var(--kit-border); overflow: hidden; }
.kit-meter > span { display: block; block-size: 100%; border-radius: inherit; background: var(--kit-accent); }
.kit-meter--near > span { background: var(--kit-warn); }
.kit-meter--reached > span { background: var(--kit-danger); }
.kit-usage-cell { min-inline-size: 96px; }
.kit-usage-cell .kit-meter { inline-size: 80px; margin-block: 4px 2px; }
/* The calls of the month: thin bars on one baseline, a day without any a stub. */
.kit-usage__days { display: flex; align-items: end; gap: 2px; block-size: 48px; border-block-end: 1px solid var(--kit-border); }
.kit-usage__days > span { flex: 1; min-inline-size: 0; border-radius: 2px 2px 0 0; background: var(--kit-accent); }
.kit-usage__days > .kit-usage__day--none { background: var(--kit-border); }
/* Settings › Plan › Your usage: near a cap of one's own plan, said first, with what is at it. */
.kit-usage__alert--near { border-color: var(--kit-warn); }
.kit-usage__alert--reached { border-color: var(--kit-danger); }
.kit-usage__at { display: flex; flex-wrap: wrap; gap: 6px; }
.kit-usage__at > .kit-badge { font-size: var(--look-subhead, 14px); padding: 3px 10px; }
/*
 * The storage by module, as a phone shows its own: each module in its icon's hue, a step that
 * tells the four apart with any colour vision (light and dark each checked), the room left grey,
 * 2px of ground between parts. Another module, the muted ink.
 */
.kit-usage [data-module] { --kit-part: var(--kit-muted); }
.kit-usage [data-module="tasks"] { --kit-part: #EF4B2A; }
.kit-usage [data-module="projects"] { --kit-part: #A12A83; }
.kit-usage [data-module="next"] { --kit-part: #2BA8D2; }
.kit-usage [data-module="notes"] { --kit-part: #7C3AED; }
:root[data-theme="dark"] .kit-usage [data-module="tasks"] { --kit-part: #E8603F; }
:root[data-theme="dark"] .kit-usage [data-module="projects"] { --kit-part: #AD3D92; }
:root[data-theme="dark"] .kit-usage [data-module="next"] { --kit-part: #2A9FC6; }
:root[data-theme="dark"] .kit-usage [data-module="notes"] { --kit-part: #9C7CF0; }
.kit-storage { display: flex; gap: 2px; block-size: 12px; border-radius: 4px; background: var(--kit-border); overflow: hidden; }
.kit-storage__part { flex-grow: 0; flex-shrink: 0; min-inline-size: 3px; background: var(--kit-part); }
.kit-storage__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--look-footnote, 12.5px); }
.kit-storage__legend li { display: flex; align-items: center; gap: 6px; }
.kit-storage__size { color: var(--kit-muted); font-variant-numeric: tabular-nums; }
.kit-storage__dot { inline-size: 10px; block-size: 10px; border-radius: 3px; background: var(--kit-part); }
.kit-storage__dot[data-free] { background: var(--kit-border); }
/* A QR code (qr.js): black on white in any theme, with its quiet zone drawn in. */
.kit-qr { display: block; width: min(220px, 100%); height: auto; border-radius: var(--look-r-sm, 6px); }

.kit-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: var(--look-caption, 12px); font-weight: 600; background: var(--kit-hover); color: var(--kit-muted); white-space: nowrap;
}
.kit-badge--accent { background: var(--kit-accent-soft); color: var(--kit-accent); }
.kit-badge--ok { color: var(--kit-ok); }
.kit-badge--warn { background: var(--kit-warn-soft); color: var(--kit-warn); }
.kit-badge--danger { background: var(--kit-danger-soft); color: var(--kit-danger); }
.kit-badge--now { background: color-mix(in srgb, var(--kit-now) 22%, transparent); color: var(--kit-now-text); }

.kit-copy {
  display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--look-r-sm, 8px);
  background: var(--kit-bg); border: 1px dashed var(--kit-border); min-width: 0;
}
.kit-copy code { flex: 1; min-width: 0; font-family: var(--kit-font-mono); font-size: var(--look-footnote, 12.5px); word-break: break-all; }

/* A list of rows in a box: people, devices, tokens. */
.kit-list { border: 1px solid var(--kit-border); border-radius: var(--look-r-lg, 12px); background: var(--kit-panel); overflow: hidden; }
.kit-list__row { display: flex; align-items: center; gap: 12px; padding: var(--look-row-y, 11px) 14px; min-height: 52px; }
.kit-list__row + .kit-list__row { border-top: 1px solid var(--kit-border); }
.kit-list__text { flex: 1; min-width: 0; line-height: 1.35; }
.kit-list__text small { display: block; color: var(--kit-muted); font-size: var(--look-footnote, 12.5px); overflow-wrap: anywhere; }

.kit-blank {
  display: grid; justify-items: center; text-align: center; gap: 8px; padding: 28px 16px;
  color: var(--kit-muted);
}
.kit-blank__icon { width: 46px; height: 46px; border-radius: var(--look-r-lg, 12px); background: var(--kit-accent-soft); color: var(--kit-accent); display: grid; place-items: center; }
.kit-blank__icon .kit-icon { width: 22px; height: 22px; }
.kit-blank strong { color: var(--kit-text); font-size: var(--look-headline, 15px); }
.kit-blank p { margin: 0; max-width: 36ch; font-size: var(--look-subhead, 13.5px); }

.kit-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 600 var(--look-caption, 12px)/1 var(--kit-font); color: #FFFFFF; background: color-mix(in oklab, var(--kit-hue) 60%, #3D3A36);
}

/* --------------------------------- dialogs -------------------------------- */
/* On the browser's own <dialog>: it traps focus and closes with Escape. */

.kit-dialog {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px);
  padding: 0; border: 0; border-radius: var(--kit-radius-large); background: var(--kit-panel); color: var(--kit-text);
  box-shadow: var(--kit-shadow-high); display: flex; flex-direction: column;
}
.kit-dialog:not([open]) { display: none; }
.kit-dialog--wide { width: min(760px, calc(100vw - 24px)); }
.kit-dialog::backdrop { background: var(--kit-scrim); }
.kit-dialog__header { display: flex; align-items: center; gap: 8px; padding: 14px 10px 8px 20px; }
.kit-dialog__header h2 { margin: 0; flex: 1; font: 700 var(--look-title3, 18px)/1.2 var(--kit-font-display); letter-spacing: -.01em; }
.kit-dialog__body { padding: 6px 20px 14px; overflow-y: auto; display: grid; gap: 14px; }
.kit-dialog__body > p { margin: 0; }
/* Settings → Your data: what goes for good, asked before (settings.js sure()). */
.kit-sure > p { margin: 0; }
.kit-dialog__footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; }
.kit-dialog__grab { display: none; }

/* On a phone, a sheet that rises from the bottom, within reach of the thumb. */
@media (max-width: 640px) {
  .kit-dialog, .kit-dialog--wide {
    width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0;
    border-radius: var(--look-r-xl, 20px) var(--look-r-xl, 20px) 0 0; padding-bottom: var(--kit-safe-bottom);
    animation: kit-rise .22s ease-out;
  }
  .kit-dialog__grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--kit-border); margin: 8px auto 0; }
  .kit-dialog__footer .kit-btn { flex: 1; }
}
@keyframes kit-rise { from { transform: translateY(40px); opacity: .4; } }

/* ---------------------------------- menus --------------------------------- */

.kit-menu {
  position: fixed; z-index: 900; min-width: 220px; max-width: calc(100vw - 16px);
  background: var(--kit-panel); border: 1px solid var(--kit-border); border-radius: var(--look-r-lg, 12px);
  box-shadow: var(--kit-shadow-high); padding: 6px; display: grid; margin: 0;
}
.kit-menu__who { padding: 8px 10px 10px; border-bottom: 1px solid var(--kit-border); margin-bottom: 4px; font-size: var(--look-footnote, 13px); color: var(--kit-muted); overflow-wrap: anywhere; }
.kit-menu__who strong { display: block; color: var(--kit-text); font-size: var(--look-subhead, 14px); }
.kit-menu__item {
  display: flex; align-items: center; gap: 10px; padding: var(--look-item-y, 9px) 10px; border-radius: var(--look-r-sm, 8px); border: 0; background: none;
  cursor: pointer; text-align: start; color: var(--kit-text); font-size: var(--look-body, 14px); text-decoration: none; min-height: 40px;
}
.kit-menu__item:hover, .kit-menu__item:focus-visible { background: var(--kit-hover); outline: none; }
.kit-menu__item .kit-icon { width: 17px; height: 17px; color: var(--kit-muted); }
.kit-menu__image { width: 20px; height: 20px; border-radius: 6px; flex: none; display: block; margin-inline: -1px; }
.kit-menu__item--danger, .kit-menu__item--danger .kit-icon { color: var(--kit-danger); }
.kit-menu__item .kit-menu__end { margin-inline-start: auto; }
/* The one in use now: its tick in the accent. */
.kit-menu__item[aria-current="true"] { font-weight: 600; }
.kit-menu__item[aria-current="true"] .kit-menu__end .kit-icon { color: var(--kit-accent); }
.kit-menu__sep { height: 1px; background: var(--kit-border); margin: 4px 6px; }

/* --------------------------------- notices -------------------------------- */

.kit-toasts {
  position: fixed; inset-inline: 12px; bottom: calc(16px + var(--kit-safe-bottom)); z-index: 1000;
  display: grid; justify-items: center; gap: 8px; pointer-events: none;
}
.kit-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(460px, 100%);
  padding: 10px 10px 10px 14px; border-radius: var(--look-r-lg, 12px); background: var(--kit-toast); color: var(--kit-toast-text);
  box-shadow: var(--kit-shadow-high); font-size: var(--look-subhead, 14px); animation: kit-rise .18s ease-out;
}
.kit-toast > span { flex: 1; min-width: 0; }
.kit-toast--error { background: var(--kit-danger); color: #FFFFFF; }
.kit-toast__action {
  border: 0; background: none; color: inherit; font-weight: 600; padding: 6px 8px; border-radius: var(--look-r-sm, 7px); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; flex: none;
}

/* One row however narrow: the text wraps, its button and the × stay beside it. */
.kit-banner {
  display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; font-size: var(--look-subhead, 14px); line-height: 1.35;
  border-bottom: 1px solid var(--kit-border); background: var(--kit-panel);
}
.kit-banner > span { flex: 1 1 auto; min-width: 0; }
.kit-banner > .kit-btn { flex: none; }
.kit-banner > .kit-icon { color: var(--kit-muted); }
.kit-banner--warn { background: var(--kit-warn-soft); }
.kit-banner--warn > .kit-icon { color: var(--kit-warn); }
.kit-banner--accent { background: var(--kit-accent-soft); }
.kit-banner--accent > .kit-icon { color: var(--kit-accent); }
.kit-banner--danger { background: var(--kit-danger-soft); }
.kit-banner--danger > .kit-icon { color: var(--kit-danger); }
.kit-banner .kit-icon-btn { width: 32px; height: 32px; }

/* The state of a save, next to what is being saved. */
.kit-saved { display: inline-flex; align-items: center; gap: 5px; font-size: var(--look-footnote, 12.5px); color: var(--kit-muted); white-space: nowrap; }
.kit-saved .kit-icon { width: 14px; height: 14px; color: var(--kit-ok); }
.kit-saved .kit-spinner { width: 12px; height: 12px; }
.kit-saved--offline { color: var(--kit-warn); }
.kit-saved--offline .kit-icon { color: var(--kit-warn); }
.kit-saved--error, .kit-saved--error .kit-icon { color: var(--kit-danger); }

/* The live channel: green while it is open. */
.kit-live { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--kit-muted); transition: background .3s, box-shadow .3s; }
.kit-live[data-state="open"] { background: var(--kit-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kit-ok) 22%, transparent); }

/* ------------------------------ drag and drop ----------------------------- */
/* drag.js: what is picked up stays faded in its place, a card with its name and
   what letting go would do follows the pointer, and the place under it lights up. */

/* A finger held on a row picks it up: the phone's own menu and selection must not. */
.kit-draggable { -webkit-touch-callout: none; }
:root[data-kit-dragging], :root[data-kit-dragging] * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.kit-drag-source { opacity: .4; }
/* Physical left and top on purpose: it follows the pointer, whose coordinates are physical. */
.kit-drag-ghost {
  position: fixed; top: 0; left: 0; z-index: 1100; pointer-events: none; display: grid; gap: 3px;
  /* One column no wider than the card: a long title is cut, not carried past its edge. */
  grid-template-columns: minmax(0, 1fr);
  max-width: min(300px, calc(100vw - 8px)); padding: 9px 13px; border-radius: var(--look-r-lg, 12px);
  background: var(--kit-panel); color: var(--kit-text); border: 1px solid var(--kit-border);
  box-shadow: var(--kit-shadow-high); font-size: var(--look-subhead, 14px); line-height: 1.3;
}
.kit-drag-ghost > strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-drag-ghost__where { display: flex; align-items: flex-start; gap: 5px; font-size: var(--look-footnote, 12.5px); font-weight: 500; color: var(--kit-accent); }
/* Where it falls goes down to a second line before it is cut: "After …" is the part that has to be read. */
.kit-drag-ghost__where > span { min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.kit-drag-ghost__where .kit-icon { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.kit-drag-ghost--no .kit-drag-ghost__where { color: var(--kit-danger); }
.kit-drag-ghost__detail { font-size: var(--look-caption, 12px); color: var(--kit-muted); overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
[data-drop-state="ok"] { background: var(--kit-accent-soft) !important; box-shadow: inset 0 0 0 2px var(--kit-accent); }
[data-drop-state="no"] { box-shadow: inset 0 0 0 1.5px var(--kit-border); opacity: .7; }
/* Between two rows: where it would sit, as a dashed gap the size of the row, which the rest make room for. */
.kit-drop-gap {
  display: block; box-sizing: border-box; list-style: none; flex: none; margin: 0; padding: 0;
  border: 2px dashed var(--kit-accent); border-radius: var(--look-r-md, 10px); background: var(--kit-accent-soft);
}
/* Something held over a place that opens what is behind it (☰, a tab) says it is about to. */
[data-drag-spring][data-spring-armed] { filter: brightness(1.12); }
/* On a phone, while a task is carried that may also stay in the list: a tab at the start edge opens
   the drawer as soon as the finger reaches it, and one at the end edge, beside the open drawer, closes
   it (shell.js). Each takes more than its drawn pill, and slides in from its edge and out again. */
.kit-drag-tab {
  position: absolute; top: 50%; z-index: 40; width: 60px; height: 180px; margin-top: -90px;
  display: flex; align-items: center; visibility: hidden; pointer-events: none;
  transition: visibility 0s linear var(--kit-slide-time);
}
.kit-drag-tab--open { inset-inline-start: 0; justify-content: flex-start; }
.kit-drag-tab--back { inset-inline-end: 0; justify-content: flex-end; }
.kit-drag-tab__pill {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 112px;
  background: var(--kit-accent); color: var(--kit-on-accent); box-shadow: var(--kit-shadow-high); opacity: 0;
  transition: transform var(--kit-slide-time) var(--kit-slide), opacity .18s ease, width .15s ease;
}
.kit-drag-tab__pill .kit-icon { width: 20px; height: 20px; }
.kit-drag-tab--open .kit-drag-tab__pill { border-start-end-radius: var(--look-r-xl, 18px); border-end-end-radius: var(--look-r-xl, 18px); transform: translateX(-110%); }
.kit-drag-tab--back .kit-drag-tab__pill { border-start-start-radius: var(--look-r-xl, 18px); border-end-start-radius: var(--look-r-xl, 18px); transform: translateX(110%); }
[dir="rtl"] .kit-drag-tab--open .kit-drag-tab__pill { transform: translateX(110%); }
[dir="rtl"] .kit-drag-tab--back .kit-drag-tab__pill { transform: translateX(-110%); }
.kit-app[data-drag-tabs]:not([data-drawer]) .kit-drag-tab--open,
.kit-app[data-drag-tabs][data-drawer] .kit-drag-tab--back { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.kit-app[data-drag-tabs]:not([data-drawer]) .kit-drag-tab--open .kit-drag-tab__pill,
.kit-app[data-drag-tabs][data-drawer] .kit-drag-tab--back .kit-drag-tab__pill { transform: none; opacity: 1; }
.kit-drag-tab[data-spring-armed] .kit-drag-tab__pill { width: 48px; }
/* The gap grows where it is going and the one it leaves shrinks, at once: the rows between slide to
   their place instead of jumping (drag.js). One closing is no place to drop on. */
.kit-drop-gap { animation: kit-gap-open .2s var(--kit-slide); }
.kit-drop-gap--closing { animation: kit-gap-close .2s var(--kit-slide) forwards; pointer-events: none; overflow: hidden; }
/* A list with gaps between its rows (flex, grid) puts one more beside the gap at once: a negative margin of that size
   (--kit-gap-space, drag.js) takes it back while the gap is shut, or the rows would hop by it at the start and the end. */
@keyframes kit-gap-open { from { height: 0; opacity: 0; border-width: 0; margin-block-start: calc(-1 * var(--kit-gap-space, 0px)); } }
@keyframes kit-gap-close { to { height: 0; opacity: 0; border-width: 0; margin-block-start: calc(-1 * var(--kit-gap-space, 0px)); margin-block-end: 0; } }
/* Rows level with something beside them (a chart's bars) can't move: a dashed line, and nothing moves. */
.kit-drop-gap--thin { height: 0; border: 0; border-radius: 0; background: none; outline: 1px dashed var(--kit-accent); outline-offset: 0; }

/* ------------------------------- app frame -------------------------------- */
/*
 * shell.js: a sidebar and the app's views beside it. On a phone the sidebar is
 * a drawer and a list and its detail are two screens; on a tablet or a
 * computer it can be folded away (`data-folded`), and the bar with ☰ comes
 * back to unfold it. Container queries, so the frame answers to its own width.
 */

.kit-app {
  container: kit-app / inline-size; position: fixed; inset: 0; background: var(--kit-bg);
  /* The sidebar's width beside the views; an app laying out its own columns uses it too. */
  --kit-side-width: 260px;
}
.kit-shell {
  position: absolute; inset: 0; display: grid; overflow: hidden;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "bar" "banners" "main";
}

.kit-bar {
  grid-area: bar; display: flex; align-items: center; gap: 2px; min-width: 0;
  min-height: calc(54px + var(--kit-safe-top)); padding: var(--kit-safe-top) 8px 0;
  background: var(--kit-bg); border-bottom: 1px solid var(--kit-border);
}
.kit-bar__title {
  flex: 1; min-width: 0; padding-inline: 6px; font-weight: 600; font-size: var(--look-headline, 16px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kit-bar__actions { display: flex; align-items: center; gap: 2px; flex: none; }
.kit-bar__create { display: none; margin-inline-start: 6px; }
.kit-app:not([data-screen="detail"]) .kit-bar__back,
.kit-app[data-screen="detail"] .kit-bar__menu { display: none; }

.kit-appicon { width: 30px; height: 30px; border-radius: 8px; flex: none; display: block; }
.kit-appname { font: 700 var(--look-headline, 17px)/1 var(--kit-font-display); letter-spacing: -.02em; white-space: nowrap; }

.kit-banners { grid-area: banners; }
.kit-pane { grid-area: main; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--kit-bg); }
.kit-app[data-screen="detail"] .kit-pane--list,
.kit-app:not([data-screen="detail"]) .kit-pane--detail,
.kit-app[data-panes="single"] .kit-pane--detail { display: none; }
.kit-app[data-panes="single"] .kit-pane--list { display: block; }

/* The sidebar, a drawer on a phone. */
.kit-side {
  position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 30; width: min(290px, 86%);
  display: flex; flex-direction: column; min-height: 0; background: var(--kit-side);
  padding-top: var(--kit-safe-top); transform: translateX(-105%); visibility: hidden;
  /* Closing, it stays visible until it has slid out; opening, it is visible from the start. */
  transition: transform var(--kit-slide-time) var(--kit-slide), visibility 0s linear var(--kit-slide-time);
}
[dir="rtl"] .kit-side { transform: translateX(105%); }
.kit-app[data-drawer] .kit-side { transform: none; visibility: visible; box-shadow: var(--kit-shadow-high); transition-delay: 0s; }
.kit-scrim { position: absolute; inset: 0; z-index: 25; background: var(--kit-scrim); opacity: 0; pointer-events: none; transition: opacity var(--kit-slide-time) ease; }
.kit-app[data-drawer] .kit-scrim { opacity: 1; pointer-events: auto; }
/* A finger drags the drawer (shell.js): it is where the finger is, and slides only once it lets go. */
.kit-app[data-drawer-drag] .kit-side, .kit-app[data-drawer-drag] .kit-scrim { transition: none; }
.kit-side__head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.kit-side__head .kit-appname { flex: 1; }
/* Folding is for where the sidebar sits beside the views; in the drawer it would mean nothing. */
.kit-side__fold { display: none; width: 32px; height: 32px; margin-inline-end: -6px; }
.kit-side__create { padding: 4px 12px 10px; }
.kit-side__nav { flex: 1; overflow-y: auto; padding: 0 8px 10px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1px; }
.kit-side__foot { border-top: 1px solid var(--kit-border); padding: 8px 8px calc(8px + var(--kit-safe-bottom)); }

.kit-nav__section { font: 600 var(--look-footnote, 11px)/1 var(--kit-font); letter-spacing: .1em; text-transform: uppercase; color: var(--kit-muted); padding: 16px 8px 6px; }
.kit-nav__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: var(--look-item-y, 7px) 8px; border-radius: var(--look-r-sm, 8px);
  border: 0; background: none; color: var(--kit-text); text-decoration: none; text-align: start; cursor: pointer;
}
.kit-nav__item:hover { background: var(--kit-hover); }
/* The list scrolls and would cut a ring drawn outside the entry: it goes inside. The drawer itself
   takes the focus when a finger opens it, with nothing drawn. */
.kit-nav__item:focus-visible { outline-offset: -2px; }
.kit-side__nav:focus { outline: none; }
.kit-nav__item[aria-current="page"] { background: var(--kit-accent-soft); font-weight: 600; }
.kit-nav__item .kit-icon { color: var(--kit-muted); width: 17px; height: 17px; }
.kit-nav__item[aria-current="page"] .kit-icon { color: var(--kit-accent); }
.kit-nav__item--now, .kit-nav__item--now .kit-icon { color: var(--kit-now-text); }
.kit-nav__item--now .kit-icon { color: var(--kit-now); }
.kit-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-nav__count { font: 400 var(--look-footnote, 12px) var(--kit-font-mono); color: var(--kit-muted); font-variant-numeric: tabular-nums; }
.kit-nav__swatch { width: 10px; height: 10px; border-radius: var(--look-r-xs, 3px); flex: none; margin-inline: 3px; }

.kit-account {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border-radius: var(--look-r-md, 10px); border: 0;
  background: none; cursor: pointer; text-align: start; color: var(--kit-text);
}
.kit-account:hover { background: var(--kit-hover); }
.kit-account__text { min-width: 0; line-height: 1.25; flex: 1; }
.kit-account__text strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-account__text small { display: block; color: var(--kit-muted); font-size: var(--look-caption, 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kit-fab {
  position: absolute; inset-inline-end: 16px; bottom: calc(16px + var(--kit-safe-bottom)); z-index: 10;
  width: 56px; height: 56px; border-radius: var(--look-r-xl, 18px); border: 0; background: var(--kit-accent); color: var(--kit-on-accent);
  display: grid; place-items: center; box-shadow: var(--kit-shadow-high); cursor: pointer;
}
.kit-fab .kit-icon { width: 24px; height: 24px; }
.kit-app[data-screen="detail"] .kit-fab { display: none; }

/* A tablet: the sidebar stays; the list and its detail are still two screens. */
@container kit-app (min-width: 640px) {
  .kit-app[data-layout="side"] .kit-shell {
    grid-template-columns: var(--kit-side-width) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "side bar" "side banners" "side main";
  }
  .kit-app[data-layout="side"] .kit-side {
    position: static; grid-area: side; width: auto; transform: none; visibility: visible; box-shadow: none;
    border-inline-end: 1px solid var(--kit-border);
  }
  .kit-app[data-layout="side"] .kit-scrim, .kit-app[data-layout="side"] .kit-bar__menu { display: none; }
  .kit-side__fold { display: inline-grid; }
  /* With the sidebar in view, its own button creates; the floating one is for phones. */
  .kit-app .kit-fab { display: none; }
}

/* A computer: the list and its detail side by side. */
@container kit-app (min-width: 960px) {
  .kit-app[data-layout="side"][data-panes="split"] .kit-shell {
    grid-template-columns: var(--kit-side-width) minmax(260px, 340px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "side banners banners" "side list detail";
  }
  .kit-app[data-layout="side"] .kit-shell {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "side banners" "side main";
  }
  .kit-app[data-layout="side"] .kit-bar { display: none; }
  .kit-app[data-panes="split"] .kit-pane--list { grid-area: list; display: block; border-inline-end: 1px solid var(--kit-border); }
  .kit-app[data-panes="split"] .kit-pane--detail { grid-area: detail; display: block; }
}

/*
 * Folded away (shell.js): the views take the whole width, under the bar whose
 * ☰ unfolds it. Something carried brings it over them as a drawer, as on a
 * phone, and it goes again when the drag ends. An app that lays out its own
 * columns (Tasks, Projects) gives their folded version too.
 */
@container kit-app (min-width: 640px) {
  .kit-app[data-layout="side"][data-folded] .kit-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "bar" "banners" "main";
  }
  .kit-app[data-layout="side"][data-folded] .kit-bar { display: flex; }
  .kit-app[data-layout="side"][data-folded] .kit-bar__menu { display: inline-grid; }
  .kit-app[data-layout="side"][data-folded] .kit-bar__create { display: inline-flex; }
  .kit-app[data-layout="side"][data-folded] .kit-side { display: none; }
  .kit-app[data-layout="side"][data-folded] .kit-scrim { display: block; }
  .kit-app[data-layout="side"][data-folded][data-drawer] .kit-side {
    display: flex; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--kit-side-width); box-shadow: var(--kit-shadow-high);
  }
  .kit-app[data-layout="side"][data-folded][data-drawer] .kit-side__fold { display: none; }
}
@container kit-app (min-width: 960px) {
  .kit-app[data-layout="side"][data-panes="split"][data-folded] .kit-shell {
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "bar bar" "banners banners" "list detail";
  }
  /* The detail is beside the list here: nothing to go back from. */
  .kit-app[data-layout="side"][data-panes="split"][data-folded] .kit-bar__back { display: none; }
}

/*
 * The modules of a host (shell.js, in Cronum Work). The app's icon and name at
 * the sidebar's head are a button whose menu has the other modules and
 * Settings: on a phone, that is how one changes module, and the drawer keeps
 * all its width. Where the sidebar stays, a rail at its start has each module
 * the person uses, the host's home above them and Settings at its foot. The
 * person's button at the sidebar's foot gives way to both. The rail is ink in
 * both themes, as the brand's frame around the products' colours.
 */
.kit-side__app {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: -5px -6px; padding: 5px 6px;
  border: 0; border-radius: var(--look-r-md, 10px); background: none; color: var(--kit-text); cursor: pointer; text-align: start;
}
.kit-side__app:hover, .kit-side__app[aria-expanded="true"] { background: var(--kit-hover); }
.kit-side__app .kit-appname { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kit-side__app .kit-icon { width: 16px; height: 16px; flex: none; color: var(--kit-muted); }
.kit-side__app[aria-expanded="true"] .kit-icon { transform: rotate(180deg); }
.kit-side__app:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 1px; }
.kit-side__foot[hidden] { display: none; }
/* Without the foot, what ends the sidebar keeps clear of the phone's bottom edge. */
.kit-app[data-module] .kit-side__nav { padding-bottom: calc(10px + var(--kit-safe-bottom)); }
.kit-app[data-rail] { --kit-side-width: 326px; }
.kit-side__main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.kit-side[data-rail] { flex-direction: row; padding-top: 0; }
.kit-side[data-rail] .kit-side__main { padding-top: var(--kit-safe-top); }
.kit-rail {
  flex: none; width: 66px; display: none; flex-direction: column; align-items: center; gap: 4px; overflow-y: auto;
  padding: calc(12px + var(--kit-safe-top)) 0 calc(12px + var(--kit-safe-bottom)); background: var(--cr-ink);
}
.kit-rail__home { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: var(--look-r-lg, 12px); color: var(--cr-cream); }
.kit-rail__home img { width: 32px; height: 32px; border-radius: 9px; display: block; }
.kit-rail__module {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 58px; padding: 6px 2px;
  border-radius: var(--look-r-lg, 12px); color: var(--cr-stone-dark); text-decoration: none;
}
.kit-rail__module img { width: 28px; height: 28px; border-radius: 8px; display: block; }
.kit-rail__name { font: 500 var(--look-caption2, 10.5px)/1.2 var(--kit-font); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-rail__module:hover { background: rgba(255, 247, 230, .08); }
.kit-rail__module[aria-current="page"] { background: rgba(255, 247, 230, .12); color: var(--cr-cream); }
/* The module open now: its colour at the rail's edge. */
.kit-rail__module[aria-current="page"]::before {
  content: ''; position: absolute; inset-inline-start: -4px; inset-block: 10px; width: 4px; border-radius: 0 4px 4px 0;
  background: var(--module, var(--cr-cream));
}
.kit-rail__settings {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-top: auto; border: 0; border-radius: var(--look-r-lg, 12px);
  background: none; color: var(--cr-stone-dark); cursor: pointer;
}
.kit-rail__settings .kit-icon { width: 20px; height: 20px; }
.kit-rail__settings:hover, .kit-rail__settings[aria-expanded="true"] { background: rgba(255, 247, 230, .08); color: var(--cr-cream); }
/* The split view's views, just over Settings at the rail's foot. */
.kit-rail__split {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-top: auto; border: 0; border-radius: var(--look-r-lg, 12px);
  background: none; color: var(--cr-stone-dark); cursor: pointer;
}
.kit-rail__split .kit-icon { width: 20px; height: 20px; }
.kit-rail__split:hover, .kit-rail__split[aria-expanded="true"] { background: rgba(255, 247, 230, .08); color: var(--cr-cream); }
.kit-rail__split + .kit-rail__settings { margin-top: 0; }
.kit-rail a:focus-visible, .kit-rail button:focus-visible { outline: 2px solid var(--cr-cream); outline-offset: 1px; }
/* The Clean look, light: a white rail with a hairline, the modules' names in grey and the open one in ink. */
:root[data-look="clean"]:not([data-theme="dark"]) .kit-rail {
  background: var(--kit-panel); border-inline-end: 1px solid var(--kit-border);
}
:root[data-look="clean"]:not([data-theme="dark"]) :is(.kit-rail__module, .kit-rail__settings, .kit-rail__split) { color: var(--kit-muted); }
:root[data-look="clean"]:not([data-theme="dark"]) :is(.kit-rail__module, .kit-rail__settings, .kit-rail__split):hover,
:root[data-look="clean"]:not([data-theme="dark"]) :is(.kit-rail__settings, .kit-rail__split)[aria-expanded="true"] {
  background: var(--kit-hover); color: var(--kit-text);
}
:root[data-look="clean"]:not([data-theme="dark"]) .kit-rail__module[aria-current="page"] { background: var(--kit-hover); color: var(--kit-text); }
:root[data-look="clean"]:not([data-theme="dark"]) .kit-rail__home { color: var(--kit-text); }
:root[data-look="clean"]:not([data-theme="dark"]) .kit-rail :is(a, button):focus-visible { outline-color: var(--kit-accent); }
@container kit-app (min-width: 640px) {
  .kit-rail { display: flex; }
}

/* From one module to another (a host's rail, its menu on a phone) is a page of the same site
   after another: one fades into the next instead of a cut, and the rail, the same in both,
   stays where it is. Browsers without view transitions go on with the cut; whoever asks for
   less motion gets the cut too. */
@view-transition { navigation: auto; }
.kit-rail { view-transition-name: kit-rail; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ------------------------------- view heads ------------------------------- */
/*
 * shell.head(): a view's head, the same in every app. The title and the app's
 * actions; ☰ (← over a phone's detail) and the button that creates follow the
 * bar's own rules above, by their classes. A pane showing a head takes the
 * bar's place: the bar gives way, and the head keeps the clock's gap it kept.
 */
.kit-head {
  container: kit-head / inline-size; position: sticky; inset-block-start: 0; z-index: 4;
  padding: calc(8px + var(--kit-safe-top)) var(--look-gutter, 16px) var(--look-head-y, 10px); background: var(--kit-bg); border-bottom: 1px solid var(--kit-border);
}
.kit-head__row { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 40px; }
/* ☰ and ← sit on the head's edge, their icon where the title's margin would be. */
.kit-head__row > .kit-bar__menu, .kit-head__row > .kit-bar__back { margin-inline-start: -8px; }
.kit-head__title {
  flex: 1; min-width: 0; margin: 0; font: 700 var(--look-large-title, 21px)/1.2 var(--kit-font-display); letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kit-head__actions { display: flex; align-items: center; gap: 4px; flex: none; }
.kit-head__actions:empty { display: none; }
.kit-head .kit-bar__create { margin-inline-start: 4px; }
/* A narrow head (a list beside its detail) keeps the button's + and loses its words. */
@container kit-head (max-width: 419px) {
  .kit-head .kit-bar__create { padding-inline: 8px; }
  .kit-head .kit-bar__create-label { display: none; }
}

.kit-app:not([data-screen="detail"]):has(.kit-pane--list .kit-head) .kit-bar,
.kit-app[data-screen="detail"]:has(.kit-pane--detail .kit-head) .kit-bar { display: none; }
/*
 * With the bar gone, a banner is the first thing on the screen: it keeps the clock's gap, in its
 * own colour, and the head under it no longer needs it. Without this, in an iPhone's installed
 * app the banner went under the clock and the head kept an empty gap below it.
 */
.kit-app:not([data-screen="detail"]):has(.kit-pane--list .kit-head):has(.kit-banners > *) .kit-banners > :first-child,
.kit-app[data-screen="detail"]:has(.kit-pane--detail .kit-head):has(.kit-banners > *) .kit-banners > :first-child {
  padding-top: calc(8px + var(--kit-safe-top));
}
.kit-app:not([data-screen="detail"]):has(.kit-pane--list .kit-head):has(.kit-banners > *) .kit-head,
.kit-app[data-screen="detail"]:has(.kit-pane--detail .kit-head):has(.kit-banners > *) .kit-head { padding-top: 8px; }
@container kit-app (min-width: 960px) {
  /* The list and its detail side by side: the list's head has ☰ and create, and nothing goes back. */
  .kit-app[data-panes="split"]:has(.kit-pane--list .kit-head) .kit-bar { display: none; }
  .kit-app[data-panes="split"] .kit-head .kit-bar__back { display: none; }
}

/* --------------------------------- people ---------------------------------- */
/* The people one already shares with, as chips under a share dialog's email (people.js). */
.kit-people { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.kit-people[hidden] { display: none; }
.kit-people__label { flex-basis: 100%; font-size: var(--look-footnote, 12.5px); color: var(--kit-muted); }
.kit-people__chip {
  max-width: 100%; min-height: 32px; padding: 4px 12px; border: 1px solid var(--kit-border); border-radius: 999px;
  background: var(--kit-panel); color: var(--kit-text); font: 500 var(--look-subhead, 13.5px)/1.2 var(--kit-font); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kit-people__chip:hover { background: var(--kit-hover); }
.kit-people__chip[aria-pressed="true"] { background: var(--kit-accent-soft); border-color: var(--kit-accent); color: var(--kit-accent); }
.kit-people__chip[aria-pressed="true"]::before { content: "✓ "; }

/* ---------------------------------- links ---------------------------------- */
/* The "Linked" row of an item (links.js): one chip per link, a dot in the other module's colour. */
.kit-linked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.kit-linked[hidden] { display: none; }
.kit-linked__label { font-size: var(--look-footnote, 13px); font-weight: 500; color: var(--kit-muted); margin-inline-end: 2px; }
.kit-linked__chips { display: contents; }
.kit-linked__chip {
  display: inline-flex; align-items: center; max-width: 100%; min-width: 0; min-height: 32px;
  border: 1px solid var(--kit-border); border-radius: var(--look-r-sm, 8px); background: var(--kit-panel); font-size: var(--look-subhead, 13.5px);
}
.kit-linked__open {
  display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 4px 6px 4px 10px;
  color: var(--kit-text); text-decoration: none; border-radius: var(--look-r-sm, 8px);
}
a.kit-linked__open:hover .kit-linked__title { text-decoration: underline; }
.kit-linked__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--module, var(--kit-muted)); flex: none; }
.kit-linked__title { min-width: 0; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-linked__note { color: var(--kit-muted); font-size: var(--look-footnote, 12.5px); white-space: nowrap; }
.kit-linked__together { display: inline-grid; color: var(--kit-muted); }
.kit-linked__together .kit-icon { width: 14px; height: 14px; }
.kit-linked__more {
  width: 28px; height: 28px; margin-inline-end: 2px; border: 0; border-radius: var(--look-r-sm, 6px); background: none; color: var(--kit-muted);
  cursor: pointer; display: inline-grid; place-items: center; flex: none; padding: 0;
}
.kit-linked__more:hover { background: var(--kit-hover); color: var(--kit-text); }
.kit-linked__more .kit-icon { width: 16px; height: 16px; }
.kit-linked__chip[data-state="done"] .kit-linked__title,
.kit-linked__chip[data-state="cancelled"] .kit-linked__title { text-decoration: line-through; text-decoration-color: var(--kit-muted); }
.kit-linked__chip[data-state="gone"], .kit-linked__chip[data-state="hidden"] { border-style: dashed; background: none; }
.kit-linked__chip[data-state="gone"] .kit-linked__open,
.kit-linked__chip[data-state="hidden"] .kit-linked__open { color: var(--kit-muted); }
/* What "Link existing…" finds. */
.kit-linked__results { display: grid; gap: 2px; max-height: min(46vh, 340px); overflow-y: auto; }
.kit-linked__result {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: var(--look-r-sm, 8px);
  background: none; color: var(--kit-text); text-align: start; cursor: pointer; font: inherit;
}
.kit-linked__result:hover { background: var(--kit-hover); }
.kit-linked__result[disabled] { opacity: .55; cursor: default; background: none; }
.kit-linked__result .kit-linked__title { flex: 1; max-width: none; }
.kit-linked__result[data-state="done"] .kit-linked__title { text-decoration: line-through; text-decoration-color: var(--kit-muted); }
@media (max-width: 640px) {
  .kit-linked__title { max-width: 20ch; }
  .kit-linked__more { width: 36px; height: 36px; }
}

/* -------------------------------- sign-in --------------------------------- */
/* The product's colour large, the form beside it; stacked on a phone. */

.kit-signin { min-height: 100dvh; display: flex; flex-direction: column; background: var(--kit-bg); }
.kit-signin__hero {
  position: relative; overflow: hidden; display: grid; gap: 14px; align-content: end;
  min-height: 210px; padding: calc(28px + var(--kit-safe-top)) 24px 26px;
  background: var(--app, var(--cr-ink)); color: var(--cr-cream);
}
.kit-signin__hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 60%);
}
.kit-signin__hero img { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 0 0 2px rgba(255, 247, 230, .35); }
.kit-signin__hero h1 { margin: 0; font: 700 36px/1 var(--kit-font-display); letter-spacing: -.04em; }
.kit-signin__hero p { margin: 0; max-width: 32ch; font-size: var(--look-body, 15px); opacity: .92; }
.kit-signin__side { flex: 1; display: flex; flex-direction: column; }
.kit-signin__body { flex: 1; padding: 26px 20px 8px; }
.kit-signin__card { display: grid; gap: 14px; width: 100%; max-width: 380px; margin: 0 auto; }
.kit-signin__card h2 { margin: 0; font: 700 var(--look-title2, 22px)/1.2 var(--kit-font-display); letter-spacing: -.02em; }
.kit-signin__card > p { margin: 0; color: var(--kit-muted); font-size: var(--look-subhead, 14px); }
.kit-signin__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.kit-signin__notice { margin: 0; padding: 10px 12px; border-radius: var(--look-r-md, 9px); background: var(--kit-accent-soft); font-size: var(--look-subhead, 14px); }
.kit-signin__notice p { margin: 4px 0 0; }
.kit-signin__sig { display: flex; justify-content: center; padding: 22px 16px calc(22px + var(--kit-safe-bottom)); }
/* The connect page (connect.js): the device's name is what the app sent, set apart from the page's words. */
.kit-connect__device { color: var(--kit-text); font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 760px) {
  .kit-signin { flex-direction: row; }
  .kit-signin__hero { flex: 0 0 44%; align-content: center; padding: 56px; }
  .kit-signin__hero img { width: 76px; height: 76px; border-radius: 20px; }
  .kit-signin__hero h1 { font-size: 52px; }
  .kit-signin__hero p { font-size: var(--look-body, 17px); }
  .kit-signin__body { display: grid; align-content: center; }
}

/* -------------------------------- settings -------------------------------- */
/* A list of sections; on a phone, each section is a screen of its own. */

.kit-settings-page {
  position: fixed; inset: 0; z-index: 500; background: var(--kit-bg);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}
.kit-settings-page__bar {
  display: flex; align-items: center; gap: 4px; min-height: calc(54px + var(--kit-safe-top));
  padding: var(--kit-safe-top) 8px 0; border-bottom: 1px solid var(--kit-border);
}
.kit-settings-page__title { margin: 0; font-size: var(--look-headline, 16px); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-settings-page__body { overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--kit-safe-bottom); }

.kit-settings { container: kit-settings / inline-size; position: relative; min-height: 100%; }
.kit-settings__grid { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100%; }
.kit-settings__list { padding: 10px 10px 24px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; }
/* A group's heading folds and unfolds it (one open at a time); a group of one section opens it. */
.kit-settings__group {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 10px; margin-top: 2px;
  border: 0; border-radius: var(--look-r-md, 10px); background: none; cursor: pointer; text-align: start;
  font: 600 var(--look-footnote, 11px)/1 var(--kit-font); letter-spacing: .1em; text-transform: uppercase; color: var(--kit-muted);
}
.kit-settings__group:hover { background: var(--kit-hover); color: var(--kit-text); }
.kit-settings__group[aria-expanded="true"], .kit-settings__group[aria-current="page"] { color: var(--kit-text); }
.kit-settings__group[aria-current="page"] { background: var(--kit-accent-soft); }
.kit-settings__group-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-settings__fold { width: 16px; height: 16px; flex: none; transition: transform .15s ease; }
.kit-settings__group[aria-expanded="true"] .kit-settings__fold { transform: rotate(90deg); }
.kit-settings__folder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding-bottom: 6px; }
.kit-settings__folder[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .kit-settings__fold { transition: none; } }
.kit-settings__item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: var(--look-row-y, 9px) 10px; border-radius: var(--look-r-md, 10px);
  border: 0; background: none; color: var(--kit-text); text-align: start; cursor: pointer; text-decoration: none;
}
.kit-settings__item:hover { background: var(--kit-hover); }
.kit-settings__item[aria-current="page"] { background: var(--kit-accent-soft); }
.kit-settings__item[aria-current="page"] .kit-settings__label { font-weight: 600; }
.kit-settings__icon {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none;
  background: var(--kit-panel); border: 1px solid var(--kit-border); color: var(--kit-muted);
}
.kit-settings__item[aria-current="page"] .kit-settings__icon { color: var(--kit-accent); }
.kit-settings__text { flex: 1; min-width: 0; line-height: 1.3; }
.kit-settings__text small { display: block; color: var(--kit-muted); font-size: var(--look-footnote, 12.5px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-settings__chevron { color: var(--kit-muted); }
.kit-settings__page { padding: 20px 18px 40px; display: none; }
.kit-settings[data-open] .kit-settings__list { display: none; }
.kit-settings[data-open] .kit-settings__page { display: block; }
/* On a phone the bar already names the open section. */
@container kit-settings (max-width: 719px) {
  .kit-settings__page h2:first-child { display: none; }
}
.kit-settings__page h2:first-child { margin: 0 0 18px; font: 700 var(--look-title1, 24px)/1.1 var(--kit-font-display); letter-spacing: -.02em; }
.kit-settings__block { display: grid; gap: 12px; padding-block: 18px; border-top: 1px solid var(--kit-border); max-width: 640px; }
.kit-settings__block:first-of-type { border-top: 0; padding-top: 0; }
.kit-settings__block h3 { margin: 0; font-size: var(--look-headline, 15px); font-weight: 600; }
.kit-settings__block > p { margin: 0; }
/*
 * Side by side, the list and the open section each scroll on their own: the
 * grid fills the page exactly (a container query can't reach the page's body,
 * which scrolls both together on a phone) and each column has its scroll.
 */
@container kit-settings (min-width: 720px) {
  .kit-settings__grid { position: absolute; inset: 0; grid-template-columns: 290px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .kit-settings__list { border-inline-end: 1px solid var(--kit-border); display: grid !important; overflow-y: auto; overscroll-behavior: contain; }
  .kit-settings__page { display: block; padding: 28px 34px 48px; overflow-y: auto; overscroll-behavior: contain; }
  .kit-settings__chevron { display: none; }
}

.kit-facts { display: grid; border: 1px solid var(--kit-border); border-radius: var(--look-r-lg, 12px); background: var(--kit-panel); }
.kit-fact { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px; }
.kit-fact + .kit-fact { border-top: 1px solid var(--kit-border); }
.kit-fact > span { color: var(--kit-muted); font-size: var(--look-footnote, 13px); flex: 1 1 150px; }
.kit-fact > strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.kit-fact small { flex-basis: 100%; color: var(--kit-muted); font-size: var(--look-caption, 12px); font-family: var(--kit-font-mono); }
.kit-fact__value { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.kit-fact__value > strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.kit-fact__value > .kit-hint { margin: 0; }
.kit-fact__ok { color: var(--kit-ok); }
/* An app's own `a { color: inherit }` (Next) mustn't turn the source link into plain text. */
.kit-fact a { color: var(--kit-accent); }
/* Settings › Sharing (shared.js): one card for each thing shared, a row for each person. On a
   narrow phone the choice of permission goes under the name, never off the screen. */
.kit-shared[aria-busy="true"]:empty { min-height: 120px; }
.kit-shared__list { display: grid; gap: 10px; }
.kit-shared__item { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--kit-border); border-radius: var(--look-r-lg, 12px); background: var(--kit-panel); min-width: 0; }
.kit-shared__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kit-shared__icon, .kit-shared__emoji { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.kit-shared__icon { color: var(--kit-muted); }
.kit-shared__emoji { font-size: var(--look-title3, 18px); }
.kit-shared__title { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.kit-shared__title small { color: var(--kit-muted); font-size: var(--look-footnote, 12.5px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-shared__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.kit-shared__name--link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.kit-shared__name--link:hover { color: var(--kit-accent); text-decoration: underline; }
.kit-shared__people { display: grid; gap: 8px; }
.kit-shared__person { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-top: 8px; border-top: 1px solid var(--kit-border); }
.kit-shared__who { flex: 1 1 120px; min-width: 0; display: grid; line-height: 1.3; }
.kit-shared__who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-shared__who small { color: var(--kit-muted); font-size: var(--look-caption, 12px); }
.kit-shared__person .kit-icon-btn { width: 32px; height: 32px; flex: none; }
.kit-shared__about { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.kit-shared__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
/* What can be bought (plan.js): on a narrow phone the button goes under the name, not over it. */
.kit-plan__offer .kit-list__row { flex-wrap: wrap; row-gap: 8px; }
.kit-plan__offer .kit-list__text { flex: 1 1 150px; }
.kit-plan__offer .kit-btn { flex: none; }
.kit-plan__offer .kit-badge { margin-inline-start: 8px; vertical-align: 1px; }
/* Its price before the button: a founder's beside the regular one, struck through. */
.kit-plan__price { flex: none; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.kit-plan__price strong { font-size: 17px; font-weight: 700; color: var(--kit-text); }
.kit-plan__price s { color: var(--kit-muted); font-size: 13.5px; }
.kit-plan__price small { color: var(--kit-muted); font-size: 12.5px; }
.kit-plan__offer .kit-list__text small.kit-plan__note { margin-top: 4px; color: var(--kit-accent); }
/* What can be done at the provider's page, in "Change or cancel plan". */
.kit-plan__can { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; }
/* Your AI's instructions: one fold per app, one open at a time (settings.js fold()). */
.kit-folds { display: grid; gap: 8px; }
.kit-fold { border: 1px solid var(--kit-border); border-radius: var(--look-r-lg, 12px); background: var(--kit-panel); }
.kit-fold > summary {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; cursor: pointer;
  list-style: none; font-weight: 600; border-radius: var(--look-r-lg, 12px);
}
.kit-fold > summary::-webkit-details-marker { display: none; }
.kit-fold > summary:hover { background: var(--kit-hover); }
.kit-fold > summary img { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.kit-fold > summary span { flex: 1; min-width: 0; }
.kit-fold__chevron { color: var(--kit-muted); transition: transform .15s ease; }
.kit-fold[open] .kit-fold__chevron { transform: rotate(180deg); }
.kit-fold__body { display: grid; gap: 10px; padding: 0 14px 14px; }
.kit-fold__body > .kit-hint { margin: 0; }
.kit-fold__list { display: grid; gap: 6px; margin: 0; padding-inline-start: 18px; }
.kit-fold__list strong { color: var(--kit-text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .kit-fold__chevron { transition: none; } }

/* The plan: its own card, then what it includes, a check for what is in, a dash for what isn't. */
.kit-plan-card {
  display: grid; gap: 6px; padding: 20px 22px; border: 1px solid var(--kit-border); border-radius: 14px;
  background: var(--kit-panel); max-width: 640px;
}
.kit-plan-card__label { font: 600 11px/1 var(--kit-font); letter-spacing: .1em; text-transform: uppercase; color: var(--kit-muted); }
.kit-plan-card__name { font: 700 28px/1.1 var(--kit-font-display); letter-spacing: -.02em; color: var(--kit-text); }
.kit-plan-card__until { margin: 0; color: var(--kit-muted); font-size: 13.5px; }
.kit-plan-card__status { display: grid; gap: 4px; }
.kit-plan-card__status:empty { display: none; }
.kit-plan-card__extras { display: grid; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--kit-border); }
.kit-plan-card__extras ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 13.5px; }
/* Over the block's own `h3 { margin: 0 }`. */
.kit-settings__block .kit-benefits__title { margin: 28px 0 14px; font-size: var(--look-headline, 15px); font-weight: 600; }
.kit-benefits { list-style: none; margin: 0 0 12px; padding: 0 2px; display: grid; gap: 10px; }
.kit-benefits li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.35; }
.kit-benefits li svg { width: 18px; height: 18px; flex: none; color: var(--kit-ok); margin-top: 1px; }
.kit-benefits li.kit-benefits__no { color: var(--kit-muted); }
.kit-benefits li.kit-benefits__no svg { color: var(--kit-muted); }

/* The host's About: a card for each of its apps, with its version. */
.kit-about-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.kit-about-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1px solid var(--kit-border); border-radius: var(--look-r-lg, 12px); background: var(--kit-panel); min-width: 0; }
.kit-about-card img { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.kit-about-card__text { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.kit-about-card__text strong { font-weight: 600; }
.kit-about-card__text p { margin: 0; color: var(--kit-muted); font-size: var(--look-footnote, 13px); line-height: 1.35; }
.kit-about-card__text small { color: var(--kit-muted); font: var(--look-caption, 12px)/1.4 var(--kit-font-mono); font-variant-numeric: tabular-nums; }

.kit-about { display: flex; align-items: center; gap: 14px; }
.kit-about img { width: 54px; height: 54px; border-radius: 14px; }
.kit-about strong { display: block; font: 700 var(--look-title2, 22px)/1 var(--kit-font-display); letter-spacing: -.03em; }
.kit-about p { margin: 4px 0 0; color: var(--kit-muted); }
.kit-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; padding: 0; margin: 0; list-style: none; }
.kit-codes code { font-family: var(--kit-font-mono); }
.kit-instruction { white-space: pre-wrap; margin: 0; padding: 12px 14px; border-radius: var(--look-r-md, 10px); background: var(--kit-hover); font: var(--look-footnote, 13px)/1.5 var(--kit-font-mono); overflow-wrap: anywhere; }

/* The AI agents (agents.js): a chip for each with its mark, its steps, and the prompt for the modules ticked. */
.kit-agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); gap: 8px; }
.kit-agent {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--kit-border);
  border-radius: var(--look-r-md, 10px); background: var(--kit-panel); color: var(--kit-text); font: inherit; font-weight: 500; text-align: start; cursor: pointer;
}
.kit-agent:hover { background: var(--kit-hover); }
.kit-agent:focus-visible { outline: 2px solid var(--kit-accent); outline-offset: 2px; }
.kit-agent[aria-pressed="true"] { border-color: var(--kit-accent); box-shadow: inset 0 0 0 1px var(--kit-accent); }
.kit-agent span { min-width: 0; overflow-wrap: anywhere; }
.kit-agent-mark { width: 20px; height: 20px; flex: none; fill: currentColor; }
.kit-agent-steps { display: grid; gap: 10px; min-width: 0; }
.kit-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: kit-step; }
.kit-steps li { position: relative; display: grid; gap: 8px; min-width: 0; padding-inline-start: 36px; counter-increment: kit-step; }
.kit-steps li::before {
  content: counter(kit-step); position: absolute; inset-inline-start: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--kit-hover); color: var(--kit-text); font: 600 13px/1 var(--kit-font);
}
.kit-steps p { margin: 0; }
.kit-steps a.kit-btn { justify-self: start; }
.kit-prompt { display: grid; gap: 10px; min-width: 0; }
/* The prompt is long: in its own scroll, so Copy stays near. */
.kit-prompt .kit-instruction { max-height: min(22em, 55vh); overflow-y: auto; overscroll-behavior: contain; }
.kit-prompt__modules { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.kit-prompt__modules img { border-radius: 5px; flex: none; }

/* -------------------------- the phone's keyboard -------------------------- */
/*
 * keyboard.js, while the keyboard is up: what is fixed to the full screen takes
 * the part of it left in view (--kit-view-top, --kit-view-h), so its top doesn't
 * slide out of reach and its foot doesn't stay under the keyboard. The frame and
 * Settings fill it; a modal dialog (the kit's, or an app's own <dialog>) sits in
 * its middle, and on a phone, as a sheet, on the keyboard; the notices just above
 * it. The home indicator is under the keyboard: nothing keeps room for it. An
 * app's own layers that are not a <dialog> read the same attribute.
 */
:root[data-kit-keyboard] { --kit-safe-bottom: 0px; }
/* A field scrolled back into view is not left touching the keyboard's edge. */
:root[data-kit-keyboard] :is(input, textarea) { scroll-margin-block: 12px; }
:root[data-kit-keyboard] .kit-app,
:root[data-kit-keyboard] .kit-settings-page { top: var(--kit-view-top); bottom: auto; height: var(--kit-view-h); }
:root[data-kit-keyboard] dialog:modal {
  inset-block: auto; top: calc(var(--kit-view-top) + var(--kit-view-h) / 2); translate: 0 -50%;
  margin-block: 0; max-height: calc(var(--kit-view-h) - 24px);
}
:root[data-kit-keyboard] .kit-toasts { bottom: auto; top: calc(var(--kit-view-top) + var(--kit-view-h) - 16px); translate: 0 -100%; }
@media (max-width: 640px) {
  :root[data-kit-keyboard] dialog:modal { top: calc(var(--kit-view-top) + var(--kit-view-h)); translate: 0 -100%; max-height: calc(var(--kit-view-h) - 8px); }
}

/* ------------------------------- signature -------------------------------- */

#admin:empty + .kit-signature { display: none; }
.kit-signature { display: flex; justify-content: center; padding: 8px 16px max(28px, var(--kit-safe-bottom)); }
.cronum-sig {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--look-footnote, 12.5px);
  color: var(--kit-muted); text-decoration: none;
}
.cronum-sig strong { font-weight: 600; color: var(--kit-text); }
.cronum-sig svg { width: 17px; height: 17px; flex: none; }
.cronum-sig path { fill: none; stroke: var(--kit-sig-ring); stroke-width: 20; stroke-linecap: round; }
.cronum-sig circle { fill: var(--kit-sig-dot); }

/* ------------------------------- markdown --------------------------------- */
/* What markdown.js draws: a note, read. */

.kit-md { font-size: var(--look-body, 15.5px); line-height: 1.65; overflow-wrap: anywhere; }
.kit-md > :first-child { margin-top: 0; }
.kit-md h1, .kit-md h2, .kit-md h3 { font-family: var(--kit-font-display); font-weight: 700; letter-spacing: -.02em; margin: 1.4em 0 .4em; }
.kit-md h1 { font-size: var(--look-title1, 26px); letter-spacing: -.03em; }
.kit-md h2 { font-size: var(--look-title2, 19px); }
.kit-md h3 { font-size: var(--look-title3, 16.5px); }
.kit-md h4, .kit-md h5, .kit-md h6 { font-size: var(--look-headline, 15px); margin: 1.2em 0 .3em; }
.kit-md p { margin: 0 0 .75em; }
.kit-md ul, .kit-md ol { margin: 0 0 .75em; padding-inline-start: 1.4em; }
.kit-md li { margin: .15em 0; }
.kit-md li > ul, .kit-md li > ol { margin: .15em 0; }
.kit-md .kit-md__task { list-style: none; margin-inline-start: -1.4em; display: flex; gap: 9px; align-items: flex-start; }
.kit-md .kit-md__task > input { width: 18px; height: 18px; margin: .2em 0 0; flex: none; accent-color: var(--kit-accent); }
.kit-md .kit-md__task--done > span { color: var(--kit-muted); text-decoration: line-through; }
.kit-md blockquote { margin: 0 0 .75em; padding: 2px 0 2px 14px; border-inline-start: 3px solid var(--kit-border); color: var(--kit-muted); }
.kit-md code { font: .88em var(--kit-font-mono); background: var(--kit-hover); padding: 1px 5px; border-radius: var(--look-r-xs, 5px); }
.kit-md pre { margin: 0 0 .75em; padding: 12px 14px; border-radius: var(--look-r-md, 10px); background: var(--kit-hover); overflow-x: auto; }
.kit-md pre code { background: none; padding: 0; font-size: var(--look-subhead, 13.5px); }
.kit-md hr { border: 0; border-top: 1px solid var(--kit-border); margin: 1.4em 0; }
.kit-md a { color: var(--kit-accent); }
.kit-md mark { background: var(--kit-md-mark); color: inherit; border-radius: var(--look-r-xs, 3px); padding: 0 2px; }
.kit-md u { text-decoration-thickness: 1px; text-underline-offset: .18em; }
.kit-md img { max-width: 100%; height: auto; border-radius: var(--look-r-sm, 8px); }
.kit-md table { border-collapse: collapse; margin: 0 0 .75em; display: block; overflow-x: auto; }
.kit-md th, .kit-md td { border: 1px solid var(--kit-border); padding: 6px 10px; text-align: start; }

@media (max-width: 640px) {
  .kit-hide-narrow { display: none; }
}

/* The Clean look's own touches, beyond its variables: an iPhone's large title, sidebar and section labels. */
:root[data-look="clean"] .kit-head { border-bottom-color: transparent; }
:root[data-look="clean"] .kit-head__title { letter-spacing: -.022em; }
:root[data-look="clean"] .kit-nav__item { min-height: 44px; }
:root[data-look="clean"] :is(.kit-nav__section, .kit-settings__group) { letter-spacing: .02em; }
/* A list's narrow head, as on an iPhone: ☰, ← and the actions on the bar, the large title (with what
   leads it) on its own line under them. A detail's head keeps one line. */
@container kit-head (max-width: 639px) {
  :root[data-look="clean"] .kit-head[data-pane="list"] .kit-head__row { flex-wrap: wrap; row-gap: 2px; }
  :root[data-look="clean"] .kit-head[data-pane="list"] .kit-head__row::before { content: ""; order: 1; flex-basis: 100%; }
  :root[data-look="clean"] .kit-head[data-pane="list"] .kit-head__row > :not(.kit-bar__menu, .kit-bar__back, .kit-icon-btn, .kit-head__actions, .kit-bar__create) { order: 2; }
  :root[data-look="clean"] .kit-head[data-pane="list"] .kit-head__actions { margin-inline-start: auto; }
  :root[data-look="clean"] .kit-head[data-pane="list"] .kit-head__title:empty { display: none; }
}