/* Mavan UI kit · components. Each part of the kit in its own section, in this order:
 *    1. Theme Designer controls
 *    2. Base
 *    3. Button
 *    4. Icon button
 *    5. Switcher
 *    6. Chip
 *    7. Pill
 *    8. Menu
 *    9. Field
 *   10. Switch
 *   11. Card
 *   12. Sidebar row
 *   13. Panel
 *   14. Dialog
 *   15. Feedback
 *   16. Meter
 * Rules (docs/UI_RULES.md): components use tokens only, never raw colours, corners, shadows or type sizes
 * (scripts/kit-lint.mjs checks it); the accent is only ever a fill. A change here is judged on the UI kit page
 * (uikit.js) in every theme, light and dark, before the suite. Layout and features live in app.css. */

/* ===== 1. Theme Designer controls ===== Theme, depth, sidebar and gradient cards, accent swatches, sliders, colours, toggles, lists, previews. First because their rules came before the general button rules, which must still win on hover. */
.ad-intro h2, .ad-section h3 { font-family: var(--font-heading); }
.pane[data-type="appearance"] > .pane-body { display: flex; overflow: hidden; }
.ad-scroll { flex: 1; min-height: 0; overflow: auto; padding: var(--space-6) var(--space-5) var(--space-5); }
.ad-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.ad-intro h2 { margin: 0 0 var(--space-1); font-size: var(--type-title); font-weight: 700; letter-spacing: -.035em; }
.ad-intro p, .ad-section header p { margin: 0; color: var(--text-2); font-size: var(--type-small); }
.ad-draft { flex: none; max-width: 45%; border-radius: var(--radius-full); padding: var(--space-1) var(--space-2); background: var(--fill); color: var(--text-2); font-size: var(--type-meta); overflow-wrap: anywhere; }
.ad-preview-wrap { --preview-caption: var(--text-2); padding: var(--space-4); border-radius: var(--radius-large); background: var(--page); margin-bottom: var(--space-6); }
.ad-preview-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); color: var(--text-2); font-size: var(--type-meta); font-weight: 600; }
.ad-previews { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }
.ad-previews.single { grid-template-columns: minmax(0,1fr); } /* an always-dark theme: one preview */
.ad-preview { min-width: 0; margin: 0; color: var(--text); font-family: var(--font); }
.ad-preview figcaption { color: var(--preview-caption); font-size: var(--type-meta); margin-bottom: var(--space-2); }
.ad-mini { display: flex; height: 222px; overflow: hidden; border-radius: var(--radius-surface); background: var(--backdrop); background-position: var(--photo-position); background-size: cover; box-shadow: var(--elev-2); border: 1px solid var(--pane-border); font-size: var(--type-micro); }
.ad-mini-side { flex: 0 0 28%; min-width: 0; padding: var(--space-3) var(--space-2); background: var(--sidebar-bg); color: var(--sidebar-text); backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur)); }
.ad-mini-side strong { display: block; overflow: hidden; font-size: var(--type-micro); margin-bottom: var(--space-4); }
.ad-mini-nav { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-1); border-radius: var(--radius-small); margin-bottom: var(--space-1); color: var(--sidebar-text-2); white-space: nowrap; }
.ad-mini-nav i { font-style: normal; color: var(--sidebar-icon); }
.ad-mini-nav.on { background: var(--sidebar-selected); color: var(--sidebar-selected-text); box-shadow: var(--sidebar-selected-shadow); }
.ad-mini-nav.on i { color: inherit; }
.ad-mini-stage { flex: 1; min-width: 0; background: var(--stage-bg); }
.ad-mini-stage > header { display: flex; justify-content: space-between; padding: var(--space-3); background: var(--bar-bg-style); color: var(--bar-text); backdrop-filter: blur(var(--bar-blur)); }
.ad-mini-panels { display: flex; gap: var(--space-2); padding: var(--space-2); height: calc(100% - 38px); }
.ad-mini-panel { position: relative; flex: 1; min-width: 0; padding: var(--space-3); border: 1px solid var(--pane-border); border-radius: var(--radius-control); background: var(--card); box-shadow: var(--elev-2); }
.ad-mini-panel + .ad-mini-panel { flex: 0 0 20%; padding: var(--space-2); }
.ad-mini-panel h4 { margin: 0 0 var(--space-1); font: 650 var(--type-small)/1.15 var(--font-heading); letter-spacing: -.02em; }
.ad-mini-panel p { color: var(--text-2); margin: 0 0 var(--space-3); font-size: var(--type-micro); }
.ad-mini-card { background: var(--card-sub); border: 1px solid var(--line-card); border-radius: var(--radius-small); padding: var(--space-2); box-shadow: var(--elev-1); white-space: nowrap; }
.ad-mini-card small { display: block; margin: var(--space-1) 0 0 var(--space-3); color: var(--text-2); font-size: var(--type-micro); }
.ad-dot { display: inline-block; width: 5px; height: 5px; margin-right: var(--space-1); border-radius: var(--radius-full); background: var(--positive); }
.ad-mini-panel button { pointer-events: none; margin-top: var(--space-3); padding: var(--space-1) var(--space-2); font-size: var(--type-micro); border-radius: var(--radius-control); }
.ad-mini-chips { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.ad-mini-chips span { padding: 2px var(--space-1); border-radius: var(--radius-small); background: var(--fill); color: var(--accent-second); font-size: var(--type-micro); }
.ad-mini-menu { position: absolute; right: var(--space-1); top: 42px; width: 80px; padding: var(--space-2); border: 1px solid var(--line-card); border-radius: var(--radius-control); background: var(--raised); box-shadow: var(--elev-3); }
.ad-mini-menu b, .ad-mini-menu span { display: block; padding: var(--space-1) 0; color: var(--text-2-on-raised); font-weight: 400; }
.ad-notice { min-height: 1.4em; margin: var(--space-3) 0 0; color: var(--text-2); font-size: var(--type-meta); }
.ad-section { margin-bottom: var(--space-6); }
.ad-section > header { margin-bottom: var(--space-4); }
.ad-section h3 { margin: 0 0 var(--space-1); font-size: var(--type-heading); font-weight: 650; letter-spacing: -.015em; }
.ad-theme-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(104px,1fr)); gap: var(--space-3); }
.ad-theme { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-2); background: var(--card-sub); border: 1px solid var(--line-card); text-align: left; font-size: var(--type-small); }
.ad-theme:hover, .ad-depths button:hover, .ad-sidebar-styles button:hover, .ad-gradients button:hover { background: var(--fill); } /* a guarded surface: the captions stay readable */
.ad-theme[aria-checked="true"], .ad-depths button[aria-checked="true"], .ad-sidebar-styles button[aria-checked="true"], .ad-gradients button[aria-checked="true"] { background: var(--fill); border-color: var(--line-card-hover); box-shadow: var(--elev-1); }
.ad-theme > span:not(.ad-theme-art) { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ad-theme small, .ad-depths small { color: var(--text-2); font-size: var(--type-micro); }
.ad-theme-art { position: relative; display: block; width: 100%; height: 58px; overflow: hidden; border-radius: var(--radius-small); background: var(--tile-backdrop, var(--tile-bg)); background-size: cover; } /* each theme's own backdrop: Aurora's gradient, Slate's glow */
.ad-theme-art i { position: absolute; inset: 8px 8px 8px 28%; border-radius: var(--radius-small); background: var(--tile-card); }
.ad-theme-art b { position: absolute; top: 12px; left: 38%; color: var(--tile-ink); font-size: var(--type-heading); }
.ad-theme-art em { position: absolute; bottom: 13px; left: 38%; width: 28%; height: 5px; border-radius: var(--radius-full); background: var(--tile-accent); }
.ad-field { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0; font-size: var(--type-small); }
.ad-field > span { min-width: 92px; font-weight: 500; }
.ad-field select { min-width: 140px; height: var(--control-md); border-radius: var(--radius-control); background: var(--fill); border: 1px solid var(--line-card); color: var(--text); font: inherit; padding: 0 var(--space-2); }
.ad-range { display: block; }
.ad-range > span { display: flex; justify-content: space-between; margin-bottom: var(--space-2); }
.ad-range output { color: var(--text-2); font-variant-numeric: tabular-nums; }
.ad-range input { display: block; width: 100%; height: var(--control-sm); margin: 0; border-radius: var(--radius-small); accent-color: var(--text); cursor: pointer; } /* its keyboard ring follows the kit's corners */
.ad-colours { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-3) 0; }
.ad-colour { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--type-small); }
.ad-colour input { width: var(--control-md); height: var(--control-md); padding: 3px; border: 1px solid var(--line-card); border-radius: var(--radius-control); background: var(--card); cursor: pointer; }
.ad-colour small { color: var(--text-2); font-size: var(--type-meta); font-variant-numeric: tabular-nums; }
.ad-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-lg); font-size: var(--type-small); }
.ad-toggle small { display: block; margin-top: 2px; color: var(--text-2); font-size: var(--type-meta); }
.ad-toggle input { width: var(--size-knob); height: var(--size-knob); accent-color: var(--text); }
.ad-depths { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-2); }
.ad-depths button { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); border: 1px solid var(--line-card); background: var(--card-sub); text-align: left; }
.ad-depths strong { font-size: var(--type-small); font-weight: 600; }
.ad-depth-art { display: block; position: relative; height: 58px; width: 100%; border-radius: var(--radius-small); background: var(--page); }
.ad-depth-art i, .ad-depth-art b { position: absolute; inset: 12px 24% 12px 12%; border: 1px solid var(--line-card); border-radius: var(--radius-small); background: var(--card); }
.ad-depth-art b { inset: 22px 12% 6px 38%; background: var(--raised); }
[data-depth-art="soft"] i, [data-depth-art="soft"] b { box-shadow: var(--elev-1); }
[data-depth-art="layered"] i, [data-depth-art="layered"] b { box-shadow: var(--elev-2); }
[data-depth-art="immersive"] { background: var(--accent-tint); }
[data-depth-art="immersive"] i, [data-depth-art="immersive"] b { box-shadow: var(--elev-3); border-radius: var(--radius-control); }
.ad-sidebar-styles { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-2); }
.ad-sidebar-styles button { border: 1px solid var(--line-card); padding: var(--space-2); background: var(--card-sub); font-size: var(--type-meta); }
.ad-side-art { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); margin-bottom: var(--space-2); border-radius: var(--radius-small); background: var(--sidebar); }
.ad-side-art i { height: 3px; width: 75%; border-radius: var(--radius-full); background: var(--text-2); opacity: .4; }
[data-side-art="tinted"], [data-side-art="wash"] { background: var(--accent-tint); }
[data-side-art="contrast"] { background: var(--inverse); }
[data-side-art="contrast"] i { background: var(--on-inverse); }
[data-side-art="glass"] { background: var(--glass-tint); }
.ad-gradients { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-2); }
.ad-gradients button { display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--line-card); padding: var(--space-2); background: var(--card-sub); font-size: var(--type-meta); }
.ad-gradients i { width: 30px; height: 24px; border-radius: var(--radius-small); background: var(--gradient-swatch); }
.ad-accent-swatches { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.ad-accent-swatches button { display: grid; place-items: center; min-width: var(--control-md); min-height: var(--control-md); padding: var(--space-1); border-color: transparent; background: transparent; }
.ad-accent-swatches button[aria-checked="true"] { background: var(--fill); box-shadow: var(--elev-1); }
.ad-accent-swatches i { width: 24px; height: 24px; border-radius: var(--radius-small); background: var(--swatch); }
.ad-details summary, .ad-more summary { cursor: pointer; font-size: var(--type-small); color: var(--text-2); }
.ad-details { margin: var(--space-3) 0; }
.ad-photo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0; }
.ad-muted { color: var(--text-2); font-size: var(--type-meta); }
p.ad-muted { margin: var(--space-1) 0 var(--space-3); }
.ad-notice:empty { display: none; } /* nothing to say: no gap */
.ad-accent .ad-accent-swatches { align-items: center; margin-bottom: 0; }
.ad-accent .ad-colour { margin-left: var(--space-2); }
/* Grey hue and tint draw what they change */
.ad-range input.ad-track { -webkit-appearance: none; appearance: none; height: var(--size-track); margin: 9px 0; border-radius: var(--radius-full); background: var(--ad-track); box-shadow: var(--edge-9); }
.ad-range input.ad-track::-webkit-slider-thumb { -webkit-appearance: none; width: var(--size-mark); height: var(--size-mark); border-radius: var(--radius-full); background: var(--card); box-shadow: var(--elev-1), var(--edge-13); }
.ad-range input.ad-track::-moz-range-thumb { width: var(--size-mark); height: var(--size-mark); border: 0; border-radius: var(--radius-full); background: var(--card); box-shadow: var(--elev-1), var(--edge-13); }
.ad-type-picks { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ad-specimen { padding: var(--space-5); margin-top: var(--space-4); border-radius: var(--radius-surface); background: var(--card-sub); border: 1px solid var(--line-card); font-family: var(--specimen-body); }
.ad-specimen h4 { margin: 0 0 var(--space-2); font: 650 var(--type-page)/1.2 var(--specimen-heading); letter-spacing: -.02em; }
.ad-specimen p { font-size: var(--type-reading); line-height: 1.6; margin: 0 0 var(--space-3); }
.ad-specimen small { color: var(--text-2); font-size: var(--type-meta); }
.ad-footer { position: relative; flex: none; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line-card); background: var(--card); box-shadow: var(--elev-2); }
.ad-footer-status { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-footer-status strong { max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-size: var(--type-small); }
.ad-footer-status span { color: var(--text-2); font-size: var(--type-meta); }
.ad-footer-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.ad-footer button, .ad-photo-actions button { min-height: var(--control-md); }
.ad-more { position: relative; }
.ad-more > summary { list-style: none; padding: var(--space-2); border-radius: var(--radius-control); background: var(--button); color: var(--text); }
.ad-more > div { position: absolute; bottom: calc(100% + var(--space-2)); right: 0; width: 220px; padding: var(--space-2); border: 1px solid var(--line-card); border-radius: var(--radius-surface); background: var(--raised); box-shadow: var(--elev-3); }
.ad-more button { display: block; width: 100%; background: transparent; text-align: left; color: var(--text); }
.ad-more button:hover { background: var(--control-hover); }
.ad-more small { display: block; padding: var(--space-2); color: var(--text-2-on-raised); font-size: var(--type-meta); line-height: 1.5; }
.ad-name-dialog { max-width: 420px; }
@container (max-width: 580px) {
  .ad-previews { grid-template-columns: 1fr; }
  .ad-preview:not(.current) { display: none; }
}
@container (max-width: 580px) {
  .ad-mini { height: 240px; }
  .ad-depths { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ad-sidebar-styles { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ad-field { align-items: flex-start; flex-direction: column; }
  .ad-type-picks { display: block; }
  .ad-draft { max-width: 40%; }
}
@media (max-width: 600px), (pointer: coarse) {
  .ad-scroll { padding: var(--space-4); }
  .ad-footer { padding: var(--space-3) var(--space-4); }
  .ad-field .seg button, .ad-theme, .ad-depths button, .ad-sidebar-styles button, .ad-gradients button, .ad-toggle { min-height: var(--touch); }
  .ad-more { position: static; }
  .ad-more > div { right: auto; left: var(--space-4); }
  .ad-more > summary, .ad-photo-actions button { min-height: var(--touch); }
}
.ap-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.ap-theme { display: flex; flex-direction: column; gap: 6px; padding: 6px 6px var(--space-2); border: 0; border-radius: var(--radius-control); background: transparent; box-shadow: none; color: var(--text-2); }
.ap-theme:hover { background: var(--control-hover); box-shadow: none; color: var(--text); }
.ap-theme[aria-checked="true"] { background: var(--track); color: var(--text); font-weight: 650; }
.ap-mock { position: relative; display: flex; height: 64px; overflow: hidden; border-radius: calc(var(--radius-control) - 3px); background: var(--p-page); box-shadow: var(--edge-9); }
.ap-side { flex: 0 0 22%; background: var(--p-side); }
.ap-card { display: flex; flex: 1; flex-direction: column; gap: 4px; margin: 8px; padding: 6px 7px; border-radius: var(--p-r); background: var(--p-card); box-shadow: var(--edge-10); }
.ap-card b { color: var(--p-text); font: 700 13px/1 var(--p-font); }
.ap-card s { display: block; height: 3px; border-radius: 2px; background: var(--p-text2); opacity: .55; }
.ap-card s + s { width: 60%; }
.ap-card em { align-self: flex-end; width: 22px; height: 8px; margin-top: auto; border-radius: min(var(--p-r), 4px); background: var(--p-accent); }
.ap-on { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-small); background: var(--p-accent); color: var(--p-on); }
.ap-name { font-size: var(--type-small); text-align: center; }
.ap-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.ap-label { color: var(--text-2); font-size: var(--type-small); }
.ap-row .seg button:disabled { opacity: .45; }
.ap-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ap-gap { width: var(--space-2); }
.ap-swatch { position: relative; display: grid; place-items: center; width: var(--control-sm); height: var(--control-sm); padding: 0; border: 0; border-radius: var(--radius-control); background: var(--sw); box-shadow: var(--edge-9); color: var(--sw-on); cursor: pointer; }
.ap-swatch:hover { box-shadow: var(--edge-11); }
.ap-custom { background: var(--sw, transparent); color: var(--text-2); }
.ap-custom:not(.on) { background: var(--track); }
.ap-custom.on { color: var(--sw-on); }
.ap-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ap-note { min-height: 1lh; margin: 0; color: var(--text-2); font-size: var(--type-small); }
@media (max-width: 600px) {
  .ap-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== 2. Base ===== Box sizing, the page, form controls inheriting type, keyboard focus, scoped themes, the theme crossfade. */
:root { font: var(--type-body)/1.4 var(--font); color: var(--text); background: var(--page); }
@media (prefers-reduced-motion: reduce) {
  .theming, .theming * { transition: none !important; }
}
/* Changing theme crossfades instead of snapping (themes.js adds this for a moment). */
.theming, .theming * { transition: background-color .28s ease, color .28s ease, border-color .28s ease, fill .28s ease !important; }
* { box-sizing: border-box; }
/* The body is the "back" layer the sidebar sits on; the stage (top bar + list) slides over it */
body { margin: 0; background: var(--sidebar); text-shadow: var(--text-glow); -webkit-font-smoothing: antialiased; }
input, select, textarea { font: inherit; color: inherit; }
input:where(:not([type=checkbox], [type=radio], [type=range], [type=color])):focus, textarea:focus { outline: none; } /* typing fields only: the caret is the cue; checkboxes, sliders, colours and lists keep the keyboard ring */
:focus-visible { outline: 2px solid var(--focus-neutral); outline-offset: 1px; } /* keyboard only, and neutral: coral is never a line */
input[type=checkbox] { accent-color: var(--accent); }

/* ===== 3. Button ===== Plain buttons (the theme’s grey), the primary button (the accent, always a fill), and the status line’s action. */
button { font: inherit; color: inherit; }
button { cursor: pointer; background: var(--button); border: 1px solid transparent; border-radius: var(--radius-control); padding: 4px 10px; box-shadow: none; transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease; }
button:hover { background: var(--button-hover); box-shadow: none; }
button:active { translate: 0 1px; } /* adds to a part's own transform (a centred caret), never replaces it */
button:disabled { cursor: default; opacity: .5; }
input:disabled, textarea:disabled, select:disabled { cursor: default; opacity: .5; } /* a field that can't be used looks it, like a button */
.status-action { margin-left: var(--space-1); padding: 0 var(--space-2); height: var(--size-tag); border: 0; border-radius: var(--radius-small); background: var(--fill); box-shadow: none; color: var(--text); font-size: var(--type-meta); font-weight: 600; }
.status-action:hover { background: var(--track-strong); box-shadow: none; }
.btn-primary { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--primary-hover); border-color: transparent; }
.btn-add { display: inline-flex; flex: none; align-items: center; gap: 6px; height: var(--control-md); padding: 0 14px 0 16px; border-radius: var(--radius-control); font-size: var(--type-body); box-shadow: var(--accent-shadow); }
.btn-add:hover { box-shadow: var(--accent-shadow-hover); }
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}
@container pane (max-width: 600px) {
  .btn-add { padding: 0 var(--space-3); }
}
@container pane (max-width: 360px) {
  /* Very narrow: Add and Upload keep just their icon */
  .btn-add { width: var(--control-md); padding: 0; justify-content: center; font-size: 0; }
  .btn-add svg { width: 16px; height: 16px; }
}

/* ===== 4. Icon button ===== Transparent until hovered: top bar, close. */
.bar .icon-btn { color: inherit; }
.icon-btn, .icon-x { box-shadow: none; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: var(--control-icon); padding: 0; color: var(--text); }
.icon-x { display: inline-flex; align-items: center; justify-content: center; width: var(--size-close); height: var(--size-close); padding: 0; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--text-muted); flex: none; }
.icon-x:hover { background: var(--control-hover); color: var(--text); box-shadow: none; }
.icon-x svg { width: 13px; height: 13px; }

/* ===== 5. Switcher ===== A recessed track with the chosen one raised: segmented controls, panel tabs. */
.seg button[aria-selected="true"], .pane-tab.active { color: var(--text-2-on-raised); }
.ad-field .seg { max-width: 100%; overflow-x: auto; }
/* Segmented controls (panel tabs, notepad Outline/Text): one look everywhere — a recessed track, the active choice raised in white */
.pane-tabs, .nb-tabs, .seg { display: flex; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto; border-radius: var(--radius-control); background: var(--track); scrollbar-width: none; }
.nb-tabs, .seg { display: inline-flex; flex: none; }
.pane-tabs[hidden] { display: none; }
.pane-tab, .nb-tabs button, .seg button { display: inline-flex; flex: none; align-items: center; gap: 6px; height: var(--control-sm); padding: 0 12px; border: 0; border-radius: calc(var(--radius-control) - 3px); background: transparent; box-shadow: none; color: var(--text); font-size: var(--type-small); font-weight: 500; white-space: nowrap; } /* every label reads; the chosen one is raised and bold */
.pane-tab:hover, .nb-tabs button:hover, .seg button:hover { background: var(--on-track-hover); box-shadow: none; color: var(--text); }
.pane-tab.active, .nb-tabs button[aria-selected="true"], .seg button[aria-selected="true"] { background: var(--raised); box-shadow: var(--raised-shadow); color: var(--text); font-weight: 600; }
.pane-tab svg { width: 14px; height: 14px; }
.pane-tab { cursor: pointer; padding-right: 4px; user-select: none; }
.pane-tab.dragging { opacity: .5; }
.pane-tab.tab-before { box-shadow: var(--drop-before); }
.pane-tab.tab-after { box-shadow: var(--drop-after); }
.pane-tab-x { display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--size-mark); height: var(--size-mark); padding: 0; border: 0; border-radius: var(--radius-small); background: transparent; box-shadow: none; color: var(--text-muted); }
.pane-tab-x:hover { background: var(--on-track-hover); box-shadow: none; color: var(--text); }
.pane-tab .pane-tab-x svg { width: 12px; height: 12px; }
@media (max-width: 700px) {
  .pane-tab span { display: none; }
  .pane-tab { padding: 0 4px 0 10px; }
}
.seg button { padding: 0 var(--space-2); }
.ap-row .seg { justify-self: start; }

/* ===== 6. Chip ===== Small facts on a thing: status, priority, due, labels, badges, references, people. */
.chip { box-shadow: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: var(--control-sm); padding: 0 10px; overflow: hidden; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text); font-size: var(--type-small); white-space: nowrap; }
.chip:hover { background: var(--fill); box-shadow: none; } /* a guarded surface: coloured chip words (status, Today) stay readable in every theme */
.chip .faint { color: var(--text-muted); }
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tone-idle .dot { color: var(--tone-idle); }
.tone-active .dot { color: var(--tone-active); }
.tone-blocked .dot { color: var(--tone-blocked); }
.tone-done .dot { color: var(--tone-done); }
.status-chip.tone-active { color: var(--tone-active-text); }
.status-chip.tone-blocked { color: var(--tone-blocked-text); }
.status-chip.tone-done { color: var(--tone-done-text); }
.prio-chip { font-weight: 800; letter-spacing: .04em; }
.prio-chip.prio-low { color: var(--prio-low); }
.prio-chip.prio-medium { color: var(--prio-medium); }
.prio-chip.prio-high { color: var(--prio-high); }
.due-chip.overdue { color: var(--prio-high); font-weight: 600; }
.due-chip.today { color: var(--accent-text); font-weight: 600; }
.tags-chip { gap: 4px; }
.tag { display: inline-flex; align-items: center; gap: 4px; height: var(--size-tag); padding: 0 8px; border-radius: var(--radius-full); background: var(--fill); color: var(--text); font-size: var(--type-meta); font-weight: 500; }
.more-tags { color: var(--text-2); font-size: var(--type-meta); }
.badges { display: inline-flex; flex: none; align-items: center; gap: 8px; color: var(--text-muted); cursor: pointer; }
.badges:hover { color: var(--accent-text); }
.badge { display: inline-flex; align-items: center; gap: 2px; font-size: var(--type-tiny); }
.badge svg { width: 14px; height: 14px; }
/* A link to a thing in the platform: its icon and current title; opens it */
.ref-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: var(--size-chip); margin: 1px 2px; padding: 0 var(--space-2) 0 6px; border: 0; border-radius: var(--radius-full); background: var(--track); box-shadow: none; color: var(--text); font-size: var(--type-small); font-weight: 600; line-height: 1; vertical-align: middle; cursor: pointer; }
.ref-chip:hover { background: var(--track-strong); box-shadow: none; }
.ref-chip svg { width: 14px; height: 14px; flex: none; color: var(--text-2); }
.ref-chip span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-chip.gone { color: var(--text-2); font-weight: 400; text-decoration: line-through; cursor: default; }
/* A person's mark: initials on their colour */
.av { --person: var(--person-1); display: inline-flex; flex: none; align-items: center; justify-content: center; width: var(--size-mark); height: var(--size-mark); border-radius: var(--radius-full); background: color-mix(in srgb, var(--person) 20%, var(--card)); color: color-mix(in srgb, var(--person) 78%, var(--text)); font-size: var(--type-micro); font-weight: 700; letter-spacing: .02em; line-height: 1; }
.av-2 { --person: var(--person-2); }
.av-3 { --person: var(--person-3); }
.av-4 { --person: var(--person-4); }
.av-5 { --person: var(--person-5); }
.av-6 { --person: var(--person-6); }
.pill .av { width: var(--size-knob); height: var(--size-knob); margin-left: -4px; }
.av-face { width: var(--size-face); height: var(--size-face); font-size: var(--type-small); } /* a face that starts a two-line row */
.av-face svg { width: 16px; height: 16px; }
/* Faces: who's in something, stacked (a chat with a team of bots, later people). Each face is ringed in the surface it sits on. */
.faces { display: inline-flex; flex: none; align-items: center; }
.faces > .av { box-shadow: var(--edge-face); }
.faces > .av + .av { margin-left: -7px; }
.faces-row > .av { width: var(--size-chip); height: var(--size-chip); font-size: var(--type-micro); }
.faces-row > .av + .av { margin-left: -8px; }
.sidebar .faces { --face-ring: var(--sidebar-bg); }
/* A bot's face is a little creature (faces.js), drawn on no fill of its own; in a stack it sits on its surface's colour */
.av.av-bot { background: transparent; }
.av.av-bot > svg { width: 100%; height: 100%; }
.faces > .av.av-bot { background: var(--face-ring, var(--card)); }
.faces > .av.av-bot > svg { width: 86%; height: 86%; }
.pill.on .av { background: color-mix(in srgb, var(--on-inverse) 22%, transparent); color: var(--on-inverse); }

/* ===== 7. Pill ===== Pick a value: the chosen one is filled. */
.prio-pill.prio-low b { color: var(--prio-low); }
.prio-pill.prio-medium b { color: var(--prio-medium); }
.prio-pill.prio-high b { color: var(--prio-high); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--size-pill); padding: 0 12px; border: 1px solid var(--line-card); border-radius: var(--radius-control); background: var(--card); box-shadow: none; color: var(--text); font-size: var(--type-small); white-space: nowrap; }
.pill:hover { background: var(--fill); box-shadow: none; }
.pill.on, .pill.on:hover { background: var(--inverse); border-color: var(--inverse); color: var(--on-inverse); }
.prio-pill.on b { color: var(--on-inverse) !important; } /* a chosen pill is the inverse fill; its dot keeps the status colour */
.prio-pill b { font-weight: 800; letter-spacing: .04em; }
.pill-date { cursor: pointer; }
.pill-date input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.pill-date svg, .pill-select svg { width: 14px; height: 14px; }
.pill-ghost { border-color: transparent; color: var(--text-2); }
.pill-select { gap: 8px; padding-right: 10px; }
.pills-sm { margin-top: 8px; }
.pill-sm { gap: 4px; height: var(--size-close); padding: 0 10px 0 8px; color: var(--text-2); font-size: var(--type-meta); }
.pill-sm svg { width: 11px; height: 11px; }

/* ===== 8. Menu ===== Popovers and menus: one line per row, label, note, shortcut, tick, submenu. */
.popover { position: fixed; z-index: 20; min-width: 200px; max-width: min(400px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto; padding: 6px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-surface); box-shadow: var(--shadow); }
.popover:focus { outline: none; }
.popover hr { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.popover .title { padding: 4px 8px; color: var(--text-2); font-size: var(--type-meta); }
.popover label { display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
.popover label.keep { color: var(--text-2); font-size: var(--type-small); }
.popover .kbd { float: right; color: var(--text-2); font-size: var(--type-meta); }
/* Menu items (not pills) */
.popover button:not(.pill) { display: block; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius-small); background: transparent; box-shadow: none; text-align: left; }
.popover button:not(.pill):hover { background: var(--accent-tint); color: var(--text); } /* the tint marks the row; the words stay readable in every theme */
.popover button:not(.pill):hover .menu-note, .popover button:not(.pill):hover .kbd { color: var(--text); }
.popover button.danger { color: var(--danger); }
/* Multi-level menu rows: optional tick column, label, shortcut or a chevron into the next level */
.popover button.menu-item, .popover button.menu-back { display: flex; align-items: center; gap: 8px; min-width: 220px; }
.menu-label { flex: 1; white-space: nowrap; } /* one line each: a menu row never wraps */
.menu-check { display: inline-flex; flex: none; width: 14px; color: var(--text); }
.popover .menu-item .kbd { float: none; }
.menu-note { min-width: 0; overflow: hidden; color: var(--text-2); font-size: var(--type-meta); text-overflow: ellipsis; white-space: nowrap; }
.popover button.menu-back { padding-left: 6px; }
.menu-sub { display: inline-flex; color: var(--text-muted); }
.popover .menu-back { color: var(--text-2); font-size: var(--type-small); font-weight: 600; }
.menu-back svg { transform: rotate(180deg); }
.popover button.danger:hover { background: var(--danger-tint); color: var(--text); }
.popover button:not(.pill):disabled { background: transparent; color: var(--text-2); }
.popover .picker { max-height: 240px; overflow-y: auto; }
.popover .picker button { padding-left: calc(10px + var(--d, 0) * 14px); }
.popover.picker { width: 300px; padding: 12px; }
.picker-pop .title { padding: 0 0 8px; }
.muted-note { margin: 4px 0; color: var(--text-2); font-size: var(--type-small); }
@media (max-width: 700px) {
  .popover { max-width: calc(100vw - 16px); }
  .popover.picker { width: min(300px, calc(100vw - 16px)); }
}
body:has(> .scrim) .popover { z-index: 31; } /* a menu opened inside a dialog (Settings › Connections ⋯) sits above it */

/* ===== 9. Field ===== Search with its filter button, labelled text fields. */
.search { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; max-width: 560px; height: var(--control-md); padding: 0 4px 0 12px; border-radius: var(--radius-control); background: var(--track); color: var(--text-2); cursor: text; }
.search:focus-within { background: var(--track-strong); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font-size: var(--type-body); }
.search input::-webkit-search-cancel-button { display: none; }
.filter-btn { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 30px; height: var(--control-sm); padding: 0; border: 0; border-radius: calc(var(--radius-control) - 3px); background: transparent; box-shadow: none; color: var(--text-2); }
.filter-btn:hover { background: var(--on-track-hover); box-shadow: none; color: var(--text); }
.filter-btn.on { background: var(--card); box-shadow: var(--surface-shadow); color: var(--text); }
.filter-n { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: var(--size-count); height: var(--size-count); padding: 0 4px; border-radius: var(--radius-full); background: var(--inverse); color: var(--on-inverse); font-size: var(--type-micro); font-weight: 700; }
.filter-n[hidden] { display: none; }
@media (max-width: 700px) {
  .search input { font-size: var(--type-heading); }
}
.dialog-tools .search { max-width: none; }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field > span { color: var(--text-2); font-size: var(--type-meta); font-weight: 600; }
.field input, .field textarea { width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-control); background: var(--fill); color: var(--text); font-size: var(--type-body); line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus { background: var(--track-strong); }
.field > select { width: 100%; height: var(--control-md); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-control); background: var(--fill); color: var(--text); font-size: var(--type-body); }
.field > select:focus { background: var(--track-strong); }

/* ===== 10. Switch ===== On or off, applied at once. */
.vt-switch { position: relative; flex: none; width: 40px; height: var(--size-chip); padding: 0; border: 0; border-radius: var(--radius-full); background: var(--line-strong); box-shadow: none; transition: background .15s; }
.vt-switch:hover { background: var(--line-strong); box-shadow: none; filter: brightness(.94); }
.vt-switch span { position: absolute; top: 3px; left: 3px; width: var(--size-knob); height: var(--size-knob); border-radius: var(--radius-full); background: var(--knob); box-shadow: var(--knob-shadow); transition: transform .15s; }
.vt-switch[aria-checked="true"] { background: var(--accent); }
.vt-switch[aria-checked="true"]:hover { background: var(--accent); filter: brightness(.94); }
.vt-switch[aria-checked="true"] span { transform: translateX(16px); }
.vt-switch:focus-visible { outline: none; filter: brightness(.88); }
/* A switch inside a popover stays a switch (menu rows style every button in one) */
.popover button.vt-switch { display: block; width: 40px; padding: 0; border-radius: var(--radius-full); background: var(--line-strong); color: inherit; text-align: initial; }
.popover button.vt-switch:hover { background: var(--line-strong); color: inherit; }
.popover button.vt-switch[aria-checked="true"], .popover button.vt-switch[aria-checked="true"]:hover { background: var(--accent); }

/* ===== 11. Card ===== A thing in a list (a task): lifts on hover, glows when open, steps back when done. */
/* Tasks: cards. Every level is the same height; each level steps in. */
.row.task { margin: 6px 0; background: var(--card); border: 1px solid var(--line-card); border-radius: var(--radius-control); box-shadow: var(--surface-shadow); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.row.task:hover { box-shadow: var(--surface-shadow-hover); transform: translateY(var(--hover-lift)); border-color: var(--line-card-hover); }
.row.task.sub { margin-left: calc(var(--level, 1) * var(--step)); }
.row.task.sub { margin-top: 4px; background: var(--card-sub); }
/* The task open in the panel glows */
/* No ring, only light: layered, soft coral blur that fades out evenly around the card */
.row.task.selected, .row.task.selected:hover { z-index: 3; box-shadow: var(--selected-glow); }
.row.task.done { opacity: .7; }
.row.task.context { opacity: .55; }
.row.task.context:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .row.task { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .row.task:hover { transform: none; }
}
@container pane (max-width: 600px) {
  .row.task { min-height: var(--row-narrow); }
}

/* ===== 12. Sidebar row ===== Rows, folders, section heads and the homes switcher, on the sidebar’s own surface. */
.sb-btn { box-shadow: none; }
/* The three homes: a segmented control of icons */
.sb-tabs { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: var(--radius-control); background: var(--track); }
.sb-tabs button { display: inline-flex; align-items: center; justify-content: center; height: var(--control-icon); padding: 0; border: 0; border-radius: calc(var(--radius-control) - 3px); background: transparent; box-shadow: none; color: var(--text-2); }
.sb-tabs button:hover { background: var(--on-track-hover); box-shadow: none; color: var(--text); }
.sb-tabs button[aria-selected="true"] { background: var(--raised); box-shadow: var(--raised-shadow); color: var(--text); }
.sb-section + .sb-section { margin-top: var(--space-5); }
.sb-head { display: flex; align-items: center; gap: 2px; padding: 2px 2px var(--space-2) var(--space-2); }
.sb-title { flex: 1; color: var(--text-2); font-size: var(--type-meta); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.sb-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: var(--control-sm); padding: 0; border: 0; border-radius: var(--radius-small); background: transparent; color: var(--text-2); }
.sb-btn:hover { background: var(--control-hover); box-shadow: none; color: var(--text); }
.sb-item, .sb-folder { display: flex; align-items: center; gap: 10px; height: var(--control-icon); padding: 0 var(--space-2); border-radius: var(--radius-control); color: var(--text); font-size: var(--type-body); cursor: default; user-select: none; -webkit-user-select: none; transition: background-color .12s ease; }
.sb-folder { margin-top: 2px; font-weight: 600; }
.sb-item.nested, .sb-empty.nested { padding-left: 34px; } /* under the parent's name */
.sb-item:hover, .sb-folder:hover { background: var(--line-soft); }
.sb-item.active { background: var(--card); color: var(--accent-text); font-weight: 600; box-shadow: var(--surface-shadow); }
.sb-item:focus-visible, .sb-folder:focus-visible { outline-offset: -2px; }
.sb-icon { display: inline-flex; flex: none; color: var(--text-2); }
.sb-item.active .sb-icon { color: var(--accent); }
/* Open in another panel */
.sb-item.shown .sb-name::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 2px 7px; border-radius: 50%; background: var(--text-muted); vertical-align: middle; }
.sb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-caret { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 16px; height: 100%; color: var(--text-muted); }
.sb-caret:empty { display: none; }
.sb-caret svg { width: 12px; height: 12px; transition: transform .15s ease; }
.sb-folder[aria-expanded="true"] .sb-caret svg { transform: rotate(90deg); }
.sb-count { color: var(--text-2); font-size: var(--type-meta); font-weight: 400; }
.sb-empty { display: flex; align-items: center; height: var(--control-sm); color: var(--placeholder); font-size: var(--type-meta); }
.sb-item.wk-row.active .sb-icon { color: var(--accent); }
.sidebar .sb-item, .sidebar .sb-folder { color: var(--sidebar-text); }
.sidebar .sb-title, .sidebar .sb-count, .sidebar .sb-btn, .sidebar .sb-tabs button, .sidebar .sb-caret, .sidebar .sb-empty { color: var(--sidebar-text-2); }
.sidebar .sb-icon { color: var(--sidebar-icon); }
.sidebar .sb-item:hover, .sidebar .sb-folder:hover { background: var(--sidebar-hover); }
.sidebar .sb-item.active, .sidebar .sb-tabs button[aria-selected="true"] { background: var(--sidebar-selected); color: var(--sidebar-selected-text); box-shadow: var(--sidebar-selected-shadow); }
.sidebar .sb-item.active .sb-icon { color: inherit; }
/* A two-line row (the Chat home): a face, the name over a quiet line about it, and a signal at the end */
.sb-item.sb-two { gap: var(--space-2); height: auto; min-height: var(--row-narrow); padding-top: 5px; padding-bottom: 5px; }
.sb-lines { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.sb-lines .sb-name { flex: none; }
.sb-sub { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--text-2); font-size: var(--type-meta); font-weight: 400; line-height: 1.3; }
.sb-sub > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-sub svg { flex: none; width: 12px; height: 12px; }
.sidebar .sb-sub { color: var(--sidebar-text-2); }
.sidebar .sb-item:hover .sb-sub { color: var(--sidebar-text); } /* the hover's fill would make the grey too faint */
.sidebar .sb-item.active .sb-sub { color: var(--sidebar-selected-text); } /* the selected fill varies by theme: its own ink */
@media (max-width: 700px) {
  .sb-item, .sb-folder { height: var(--control-lg); font-size: var(--type-heading); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-caret svg { transition: none; }
}
/* What's new in a home: a count on its icon */
.sb-tabs button { position: relative; }
.sb-badge { position: absolute; top: 1px; left: calc(50% + 4px); min-width: var(--size-count); height: var(--size-count); padding: 0 4px; border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font-size: var(--type-tiny); font-weight: 700; line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }

/* ===== 13. Panel ===== The panel card, its header (what it shows, its icon buttons), body and resize edge. */
:root[data-depth="immersive"] .pane { background: var(--pane-solid, var(--card)); }
:root[data-lines="off"] .pane-head { border-bottom-color: transparent; }
.pane-type { font-family: var(--font-heading); }
@media (max-width: 600px), (pointer: coarse) {
  .pane { --control-sm: 44px !important; --control-icon: 44px !important; --control-md: 44px !important; --control-lg: 48px !important; }
}
.pane { position: relative; display: flex; flex-direction: column; flex: 0 0 var(--pane-w, 440px); min-width: 280px; height: 100%; scroll-snap-align: start; background: var(--pane-bg, var(--card)); border: 1px solid var(--pane-border); border-radius: var(--radius-large); box-shadow: var(--panel-shadow); overflow: hidden; transition: flex-basis .28s var(--ease), background-color .2s ease; }
.pane.fluid { flex: 1 0 560px; }
.pane.expanded { flex: 0 0 100%; }
.pane.collapsed { flex: 0 0 52px; min-width: 52px; cursor: pointer; }
.pane.resizing { transition: none; user-select: none; }
.pane.look-none { border-color: transparent; box-shadow: none; }
/* Connected panels: one card, square inner corners, a divider line you can drag */
.pane.joined-r { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.pane.joined-l { margin-left: calc(-1 * var(--gap)); border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid var(--line-strong); }
.pane.joined-r .pane-resize::after { right: 2px; height: 32px; margin-top: -16px; opacity: .5; }
.pane-head { flex: none; display: flex; align-items: center; gap: 2px; height: var(--pane-head-h); padding: 0 var(--space-2); border-bottom: 1px solid var(--line-soft); }
.pane.look-none .pane-head { border-bottom-color: transparent; }
.pane-spacer { flex: 1; }
.pane-type { display: inline-flex; align-items: center; gap: 8px; height: var(--size-title); padding: 0 10px; border: 0; border-radius: var(--radius-control); background: transparent; box-shadow: none; font-size: var(--type-body); font-weight: 650; color: var(--text); }
.pane-type:hover { background: var(--control-hover); box-shadow: none; }
.pane-type svg { color: var(--text-2); flex: none; }
.pane-type:not(.pane-type-v) { min-width: 0; max-width: 100%; }
.pane-type:not(.pane-type-v) span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* a long title stays on one line */
.pane-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--control-icon); height: var(--control-icon); padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; box-shadow: none; color: var(--text-2); }
.pane-btn:hover { background: var(--control-hover); box-shadow: none; color: var(--text); }
.pane-btn[aria-pressed="true"] { color: var(--accent-text); }
.pane-body { flex: 1; min-height: 0; overflow: auto; container: pane / inline-size; } /* content sizes itself to its panel */
/* Collapsed: a slim strip with the panel's icon and name running down it */
.pane.collapsed .pane-head { flex-direction: column; height: auto; gap: 8px; padding: 8px 0; border-bottom: 0; }
.pane.collapsed .pane-body, .pane.collapsed .pane-resize { display: none; }
.pane-type-v { writing-mode: vertical-rl; height: auto; padding: 10px 0; width: 34px; gap: 10px; }
.pane-type-v svg { writing-mode: horizontal-tb; }
/* Drag the right edge to resize */
.pane-resize { position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: 12px; cursor: col-resize; touch-action: none; }
.pane-resize::after { content: ""; position: absolute; top: 50%; right: 4px; width: 4px; height: var(--control-lg); margin-top: -22px; border-radius: var(--radius-small); background: var(--grip); opacity: 0; transition: opacity .15s ease; }
.pane:hover .pane-resize::after, .pane.resizing .pane-resize::after { opacity: 1; }
.pane.resizing .pane-resize::after { background: var(--accent); }
@media (max-width: 700px) {
  .pane-resize { display: none; }
}
@media (max-width: 700px) {
  .pane, .pane.fluid, .pane.expanded { flex: 0 0 calc(100vw - 16px); min-width: 0; border-radius: var(--radius-large); }
  .pane.collapsed { flex: 0 0 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .pane { transition: none; }
}

/* ===== 14. Dialog ===== A scrim and a card: head, tools, body, foot. */
.scrim { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: var(--space-4); background: var(--scrim); }
.dialog { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(640px, calc(100dvh - 32px)); overflow: hidden; background: var(--card); border-radius: var(--radius-large); box-shadow: var(--shadow); }
.dialog-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-4) 0 var(--space-5); }
.dialog-head h2 { flex: 1; margin: 0; font-size: var(--type-panel); }
.dialog-tools { padding: var(--space-3) var(--space-5) 0; }
.dialog-foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--line-soft); }
.dialog-foot button { height: var(--control-md); padding: 0 var(--space-4); border-radius: var(--radius-control); }
.dialog-body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-5); overflow-y: auto; }
.dialog-spacer { flex: 1; }
.dialog-foot button { display: inline-flex; align-items: center; gap: 6px; }
.dialog-foot button svg { width: 14px; height: 14px; }

/* ===== 15. Feedback ===== The status line in the top bar and empty states. */
.bar .status:not(.warn) { color: var(--bar-text-2, var(--text-2)); }
.status { min-width: 0; margin: 0; overflow: hidden; color: var(--text-2); font-size: var(--type-meta); white-space: nowrap; text-overflow: ellipsis; }
.status.warn { color: var(--danger); }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 16px; color: var(--text-2); text-align: center; }
.empty-state svg { width: 28px; height: 28px; color: var(--text-muted); }
.empty-state p { margin: 0; font-size: var(--type-reading); }
@media (max-width: 700px) {
  .status { display: none; }
}

/* ===== 16. Meter ===== How much is left of something (AI headroom): a track with what's left filled. Plenty is quiet; running
   low takes the warning colour and nearly out the danger colour, always with the number beside it and the words in its popover. */
.meter { display: inline-flex; flex: none; align-items: center; gap: var(--space-2); height: var(--control-icon); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-control); background: transparent; box-shadow: none; color: var(--text); font-size: var(--type-meta); font-weight: 600; font-variant-numeric: tabular-nums; }
.meter[hidden] { display: none; }
.meter:hover, .meter[aria-expanded="true"] { background: var(--control-hover); box-shadow: none; }
.bar .meter { color: inherit; }
.meter-track { position: relative; display: block; flex: none; width: var(--size-meter); height: var(--size-meter-h); overflow: hidden; border-radius: var(--radius-full); background: var(--track-strong); }
.meter-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--meter, 0%); border-radius: var(--radius-full); background: var(--text-2); }
[data-level="low"] .meter-fill { background: var(--warning); }
[data-level="out"] .meter-fill { background: var(--danger); }
[data-level="none"] .meter-fill { width: 0; }
[data-level="none"] > .meter-num { color: var(--text-2); }
@media (max-width: 700px) { .bar .meter-num { display: none; } } /* a phone's top bar: the track alone; its popover has the numbers */

/* ===== 17. Signal ===== Where something stands, at the end of a row: three short bars. The colour says what (green: a new
   reply; amber: it needs you; blue: working, the bars lighting in turn) and how many are lit says how much (up to three).
   Nothing shows when there's nothing to say; its words are its label. */
.signal { --signal: var(--tone-done); display: inline-flex; flex: none; align-items: center; gap: 2px; height: var(--size-mark); }
.signal i { display: block; width: 6px; height: 12px; border-radius: var(--radius-full); background: var(--track-strong); }
.signal[data-n="1"] i:first-child, .signal[data-n="2"] i:nth-child(-n+2), .signal[data-n="3"] i { background: var(--signal); }
.signal[data-tone="warning"] { --signal: var(--tone-blocked); }
.signal[data-tone="active"] { --signal: var(--tone-active); }
.signal[data-tone="active"] i { animation: signal-turn 1.2s ease-in-out infinite; }
.signal[data-tone="active"] i:nth-child(2) { animation-delay: .2s; }
.signal[data-tone="active"] i:nth-child(3) { animation-delay: .4s; }
@keyframes signal-turn { 0%, 70%, 100% { opacity: .35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .signal[data-tone="active"] i { animation: none; } }

/* ===== 18. App ===== The Marketplace (marketplace.js). An app's icon is its glyph on a tile of its colour (--tone, one of the
   kit's own); a card shows the icon, the name and its kind, one line about it, and where it stands. The card lifts on hover
   like every card; its state is a small pill with a dot: grey in the works or paused, blue ready, green connected, amber
   when an update waits for you. */
.app-ic { --tone: var(--kind-text); display: inline-grid; flex: none; place-items: center; width: var(--size-app); height: var(--size-app); border-radius: var(--radius-control); background: linear-gradient(160deg, color-mix(in srgb, var(--tone) 72%, var(--on-app)), var(--tone) 70%); color: var(--on-app); box-shadow: var(--surface-shadow); }
.app-ic svg { width: 24px; height: 24px; }
.app-ic-lg { width: var(--size-app-lg); height: var(--size-app-lg); border-radius: calc(var(--radius-control) * 1.5); }
.app-ic-lg svg { width: 34px; height: 34px; }
.app-ic-sm { width: var(--size-app-sm); height: var(--size-app-sm); border-radius: var(--radius-small); box-shadow: none; }
.app-ic-sm svg { width: 17px; height: 17px; }
.mk-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--space-4); border-radius: var(--radius-surface); background: var(--card); box-shadow: var(--surface-shadow); color: var(--text); text-align: left; cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.mk-card:hover, .mk-card:focus-visible { box-shadow: var(--surface-shadow-hover); }
.mk-card:hover { transform: translateY(var(--hover-lift)); }
.mk-card-top { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-width: 0; }
.mk-card-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-name { overflow: hidden; font-size: var(--type-body); font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.mk-cat { overflow: hidden; color: var(--text-2); font-size: var(--type-meta); text-overflow: ellipsis; white-space: nowrap; }
.mk-sum { display: -webkit-box; flex: 1; margin: 0; overflow: hidden; color: var(--text-2); font-size: var(--type-small); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mk-state { --state: var(--tone-idle); display: inline-flex; flex: none; align-items: center; gap: 6px; height: var(--size-chip); padding: 0 10px 0 8px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--state) 13%, transparent); color: var(--text); font-size: var(--type-meta); font-weight: 600; white-space: nowrap; }
.mk-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--state); }
.mk-state[data-state="available"] { --state: var(--tone-active); }
.mk-state[data-state="connected"] { --state: var(--tone-done); }
.mk-state[data-state="update"] { --state: var(--tone-blocked); }

/* ===== 19. Action card ===== Anything that comes to you (cards.js): where it came from and when, the situation in one
   sentence, one line on why it's here, a small view of the thing (Facts, Draft, Number, Time, Change), and one button that
   names what happens. It lifts on hover like every card; clicking it opens the thing beside. Once acted on, the button
   says what happened, then the card folds into a done row with Undo. */
.cd-stream { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--size-card-max); }
.cd-sum { margin: 0 0 var(--space-1); color: var(--text-2); font-size: var(--type-reading); }
.cd { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-4) var(--space-5); border-radius: var(--radius-surface); background: var(--card); box-shadow: var(--surface-shadow); color: var(--text); cursor: pointer; transition: box-shadow .18s ease, transform .18s ease; }
.cd:hover, .cd:focus-visible { box-shadow: var(--surface-shadow-hover); }
.cd:hover { transform: translateY(var(--hover-lift)); }
.cd-head { display: flex; align-items: center; gap: var(--space-2); min-width: 0; height: var(--size-chip); color: var(--text-2); font-size: var(--type-meta); }
.cd-src { display: inline-flex; flex: 1; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.cd-src > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-src svg { flex: none; color: var(--icon); }
.cd-at { flex: none; font-variant-numeric: tabular-nums; }
.cd-more { width: var(--control-sm); height: var(--control-sm); margin-right: calc(var(--space-2) * -1); }
.cd:not(:hover, :focus-within) .cd-more { opacity: 0; }
.cd-title { margin: 0; font-size: var(--type-heading); font-weight: 650; line-height: 1.35; }
.cd-why { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--text-2); font-size: var(--type-small); line-height: 1.45; }
.cd-why svg { flex: none; height: 1lh; color: var(--icon); }
.cd-view { margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--fill); font-size: var(--type-small); }
.cd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2) var(--space-4); margin: 0; }
.cd-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-facts dt { color: var(--text-2); font-size: var(--type-meta); }
.cd-facts dd { margin: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cd-when { display: grid; gap: 4px; margin: 0; }
.cd-when > div { display: flex; gap: var(--space-4); }
.cd-when dt { flex: none; min-width: 84px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cd-when dd { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-when > [data-new] dd { color: var(--tone-active-text); font-weight: 600; }
.cd-draft p { margin: 0; }
.cd-draft-to { display: flex; gap: var(--space-2); color: var(--text); }
.cd-draft-to span { color: var(--text-2); }
.cd-draft-sub { color: var(--text-2); }
.cd-draft-text { display: -webkit-box; margin-top: 4px !important; overflow: hidden; line-height: 1.5; white-space: pre-line; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.cd-file { display: inline-flex; align-items: center; gap: 6px; height: var(--size-chip); margin-top: var(--space-2); padding: 0 10px 0 8px; border-radius: var(--radius-small); background: var(--card); font-size: var(--type-meta); }
.cd-num { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.cd-num p { margin: 0; }
.cd-num-v { font-size: var(--type-title); font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cd-num-c { display: flex; align-items: center; gap: 6px; color: var(--text); font-weight: 600; }
.cd-num-c::before { content: ""; width: 0; height: 0; border-right: 4.5px solid transparent; border-bottom: 7px solid var(--tone-done); border-left: 4.5px solid transparent; }
.cd-num-c[data-up="no"]::before { border-top: 7px solid var(--tone-blocked); border-bottom: 0; }
.cd-num-n { color: var(--text-2); }
.cd-bars { display: inline-flex; align-items: flex-end; gap: 4px; height: var(--control-lg); }
.cd-bars i { width: 12px; height: var(--h); border-radius: 3px; background: var(--track-strong); }
.cd-bars i[data-now] { background: var(--accent); }
.cd-change { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cd-change li::before { content: "+"; display: inline-block; width: 14px; color: var(--text-2); font-weight: 600; }
.cd-change-more { color: var(--text-2); }
.cd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.cd-acts > button, .cd-btn { height: var(--control-sm); padding: 0 var(--space-4); border-radius: var(--radius-full); font-size: var(--type-small); }
.cd-acts > button[aria-busy="true"] { opacity: .7; cursor: progress; }
.cd-did { display: inline-flex; align-items: center; gap: 6px; }
.cd-did:disabled { opacity: 1; cursor: default; }
.cd[data-state="done"] { box-shadow: var(--surface-shadow); transform: none; }
.cd-done-h { margin: var(--space-3) 0 0; color: var(--text-2); font-size: var(--type-small); font-weight: 650; }
.cd-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.cd-row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-lg); padding: 0 var(--space-3) 0 var(--space-4); border-radius: var(--radius-surface); background: var(--card); box-shadow: var(--surface-shadow); font-size: var(--type-body); animation: cd-in .25s ease; }
.cd-row svg { flex: none; color: var(--tone-done); }
.cd-row-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-row-btn { flex: none; height: var(--control-sm); padding: 0 var(--space-3); border: 0; background: transparent; color: var(--text-2); font-size: var(--type-small); }
.cd-row-btn:hover { background: var(--control-hover); color: var(--text); }
.cd-all { align-self: flex-start; }
@keyframes cd-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .cd, .cd-row { transition: none; animation: none; } }

/* ===== 20. Rail ===== The sidebar's homes as a slim column (layout.js, the Focus and Chat first layouts), or a bar along
   the bottom (Simple). Home, the five homes, then search and Settings at the end. A home that's open in the sidebar is
   raised like a selected tab. It sits on the sidebar's own surface. */
.rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: var(--size-rail); padding: var(--space-3) 0; background: var(--sidebar-bg); color: var(--sidebar-text-2); }
.rail-btn { display: inline-grid; flex: none; place-items: center; width: var(--control-md); height: var(--control-md); padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; box-shadow: none; color: var(--sidebar-text-2); }
.rail-btn:hover { background: var(--sidebar-hover); color: var(--sidebar-text); }
.rail-btn[aria-pressed="true"] { background: var(--raised); box-shadow: var(--raised-shadow); color: var(--text); }
.rail-btn:first-child { margin-bottom: var(--space-2); }
.rail-spacer { flex: 1; }
.rail-bottom { top: auto; right: 0; flex-direction: row; justify-content: space-around; width: auto; height: var(--size-rail); padding: 0 var(--space-3); }
.rail-bottom .rail-btn:first-child { margin-bottom: 0; }
.rail-bottom .rail-spacer { display: none; }

/* ===== 21. Space ===== An app in its own space (spaces.js): a slim bar with the app's icon, name and what it's showing, the
   menu it hands over, then reload and full screen; under it the app fills the panel in its own look. */
.app-ic-xs { width: var(--size-mark); height: var(--size-mark); border-radius: var(--radius-small); box-shadow: none; }
.app-ic-xs svg { width: 13px; height: 13px; }
.sp { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sp-bar { display: flex; flex: none; align-items: center; gap: var(--space-2); min-width: 0; height: var(--control-lg); padding: 0 var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--line-soft); background: var(--card); }
.sp-name { flex: none; font-size: var(--type-small); font-weight: 650; }
.sp-title { min-width: 0; overflow: hidden; color: var(--text-2); font-size: var(--type-small); text-overflow: ellipsis; white-space: nowrap; }
.sp-menu { display: inline-flex; flex-wrap: nowrap; gap: 2px; min-width: 0; overflow: hidden; }
.sp-btn { height: var(--control-sm); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-control); background: transparent; box-shadow: none; color: var(--text-2); font-size: var(--type-small); white-space: nowrap; }
.sp-btn:hover { background: var(--control-hover); color: var(--text); }
.sp-spacer { flex: 1; }
.sp-frame { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--card); }
.sp-off { display: grid; flex: 1; place-content: center; gap: var(--space-3); padding: var(--space-6); color: var(--text-2); text-align: center; }
.sp-off p { margin: 0; }
.sp-strip { display: flex; flex: none; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line-soft); background: var(--fill); font-size: var(--type-small); }
.sp-strip p { flex: 1; min-width: 0; margin: 0; color: var(--text-2); }
.sp-strip button { flex: none; }
body.takeover .sp-bar { display: none; } /* full screen: the app takes the whole window; the panel's own header is the way back */
.sp-btn[aria-pressed="true"] { background: var(--track-strong); color: var(--text); font-weight: 600; } /* the view showing, of an app that runs here */
.sp-body { flex: 1; min-height: 0; overflow: hidden; container-type: inline-size; }

/* ===== 22. Your app ===== An app built in the chat (builder.js), drawn by Mavan itself in its space: a count and New, then
   its view (a table, a board by a choice, a gallery of cards, a month, a chart), and the item's sheet beside it. Cards
   lift like tasks; the field that leads shows big; the sheet edits in place, one Undo step per field. */
.ba { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 0; background: var(--page); }
.ba.ba-with-sheet { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.ba-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; padding: var(--space-4) var(--space-5) var(--space-6); }
.ba-top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.ba-count { margin: 0; color: var(--text-2); font-size: var(--type-small); }
.ba-none { margin: var(--space-5) 0; color: var(--text-2); }
.ba-chip { height: var(--size-chip); padding: 0 var(--space-2); background: var(--fill); font-size: var(--type-meta); }
.ba-yes { display: inline-flex; color: var(--success); }
.ba-yes svg { width: 14px; height: 14px; }
/* Table */
.ba-scroll { overflow: auto; border-radius: var(--radius-surface); background: var(--card); box-shadow: var(--surface-shadow); }
.ba-table { width: 100%; border-collapse: collapse; font-size: var(--type-small); }
.ba-table th { position: sticky; top: 0; z-index: 1; padding: 0; background: var(--card); border-bottom: 1px solid var(--line-soft); text-align: left; }
.ba-table th button { width: 100%; height: var(--control-md); padding: 0 var(--space-3); border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text-2); font-size: var(--type-meta); font-weight: 600; text-align: inherit; white-space: nowrap; }
.ba-table th button:hover { background: var(--control-hover); color: var(--text); }
.ba-table th button[aria-sort] { color: var(--text); }
.ba-table th[data-kind="number"], .ba-table th[data-kind="money"], .ba-table th[data-kind="percent"], .ba-table td[data-kind="number"], .ba-table td[data-kind="money"], .ba-table td[data-kind="percent"] { text-align: right; font-variant-numeric: tabular-nums; }
.ba-table td { max-width: 280px; height: var(--row); padding: 0 var(--space-3); overflow: hidden; border-bottom: 1px solid var(--line-cell); text-overflow: ellipsis; white-space: nowrap; }
.ba-table td:first-child { color: var(--text); font-weight: 550; }
.ba-table tbody tr { cursor: pointer; }
.ba-table tbody tr:hover { background: var(--control-hover); }
.ba-table tbody tr:focus-visible { background: var(--track-strong); outline: none; }
.ba-table tbody tr:last-child td { border-bottom: 0; }
.ba-table a { color: var(--link); }
/* Cards (board and gallery) */
.ba-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line-card); border-radius: var(--radius-surface); background: var(--card); box-shadow: var(--surface-shadow); cursor: pointer; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.ba-card:hover { border-color: var(--line-card-hover); box-shadow: var(--surface-shadow-hover); transform: translateY(var(--hover-lift)); }
.ba-card:focus-visible { box-shadow: var(--surface-shadow-hover); }
.ba-card.ba-dragging { opacity: .5; }
.ba-card-t { margin: 0; font-size: var(--type-body); font-weight: 600; line-height: 1.3; }
.ba-lead { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font-size: var(--type-title); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ba-lead span { color: var(--text-2); font-size: var(--type-meta); font-weight: 500; }
.ba-facts { display: flex; flex-direction: column; gap: 4px; }
.ba-facts:empty { display: none; }
.ba-fact { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; font-size: var(--type-small); }
.ba-fact > span:first-child { flex: none; color: var(--text-2); font-size: var(--type-meta); }
.ba-fact > :last-child { min-width: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.ba-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); align-content: start; }
/* Board */
.ba-board { display: grid; grid-auto-columns: minmax(240px, 1fr); grid-auto-flow: column; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.ba-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-2); border-radius: var(--radius-surface); background: var(--track); transition: background .15s ease; }
.ba-col.ba-over { background: var(--track-strong); }
.ba-col-h { display: flex; align-items: center; gap: var(--space-2); height: var(--control-sm); padding-left: var(--space-1); }
.ba-col-h h3 { margin: 0; font-size: var(--type-small); font-weight: 650; }
.ba-col-h span { flex: 1; color: var(--text-2); font-size: var(--type-meta); }
.ba-cards { display: flex; flex-direction: column; gap: var(--space-2); min-height: var(--row); }
/* Calendar */
.ba-cal { display: flex; flex-direction: column; gap: var(--space-2); }
.ba-cal-h { display: flex; align-items: center; gap: var(--space-2); }
.ba-cal-h h3 { min-width: 160px; margin: 0; font-size: var(--type-body); font-weight: 650; text-align: center; }
.ba-cal-g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; border-radius: var(--radius-surface); background: var(--card); box-shadow: var(--surface-shadow); }
.ba-cal-d { padding: var(--space-2); border-bottom: 1px solid var(--line-soft); color: var(--text-2); font-size: var(--type-meta); font-weight: 600; text-align: center; }
.ba-day { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: calc(var(--row) * 2); padding: 6px; border-right: 1px solid var(--line-cell); border-bottom: 1px solid var(--line-cell); }
.ba-day:nth-child(7n) { border-right: 0; }
.ba-day[data-out] { background: var(--fill); }
.ba-day[data-out] .ba-day-n { color: var(--text-muted); }
.ba-day-n { align-self: flex-end; display: grid; place-items: center; min-width: var(--size-tag); height: var(--size-tag); border-radius: var(--radius-full); color: var(--text-2); font-size: var(--type-meta); font-variant-numeric: tabular-nums; }
.ba-day[data-today] .ba-day-n { background: var(--accent); color: var(--on-accent); font-weight: 650; }
.ba-ev { display: block; width: 100%; height: var(--size-tag); padding: 0 6px; overflow: hidden; border: 0; border-radius: var(--radius-small); background: var(--accent-tint); box-shadow: none; color: var(--text); font-size: var(--type-meta); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.ba-ev:hover { background: var(--track-strong); }
.ba-more { color: var(--text-2); font-size: var(--type-micro); }
/* Chart */
.ba-chart { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-4); border-radius: var(--radius-surface); background: var(--card); box-shadow: var(--surface-shadow); }
.ba-chart figcaption { margin-bottom: var(--space-2); font-size: var(--type-body); font-weight: 650; }
.ba-bar { display: grid; grid-template-columns: minmax(64px, 140px) minmax(0, 1fr) minmax(48px, auto); align-items: center; gap: var(--space-3); font-size: var(--type-small); }
.ba-bar-l { overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.ba-bar-t { height: var(--size-track); overflow: hidden; border-radius: var(--radius-full); background: var(--track); }
.ba-bar-t i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--accent); }
.ba-bar-v { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
/* The item's sheet */
.ba-sheet { display: flex; flex-direction: column; min-height: 0; overflow: auto; border-left: 1px solid var(--line-soft); background: var(--card); }
.ba-sheet-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4); background: var(--card); }
.ba-sheet-h h3 { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-size: var(--type-panel); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ba-fields { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) var(--space-4) var(--space-4); }
.ba-field { display: flex; flex-direction: column; gap: 4px; }
.ba-field > span { color: var(--text-2); font-size: var(--type-meta); }
.ba-field input:not([type="checkbox"]), .ba-field textarea, .ba-field select { width: 100%; min-height: var(--control-md); padding: 6px var(--space-2); border: 0; border-radius: var(--radius-control); background: var(--fill); color: var(--text); font: inherit; font-size: var(--type-small); }
.ba-field textarea { resize: vertical; }
.ba-field input:focus, .ba-field textarea:focus, .ba-field select:focus { background: var(--track-strong); outline: none; }
.ba-check { flex-direction: row; align-items: center; gap: var(--space-2); }
.ba-check > span { color: var(--text); font-size: var(--type-small); }
.ba-check input { width: var(--size-count); height: var(--size-count); margin: 0; accent-color: var(--accent); }
.ba-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-4); }
.ba-sheet-f { margin-top: auto; padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--line-soft); }
.ba-del { height: var(--control-sm); padding: 0 var(--space-2); background: transparent; box-shadow: none; color: var(--danger); font-size: var(--type-small); }
.ba-del:hover { background: var(--danger-tint); }
@media (prefers-reduced-motion: reduce) { .ba-card, .ba-card:hover { transition: none; transform: none; } }
@container (max-width: 640px) {
  .ba.ba-with-sheet { grid-template-columns: minmax(0, 1fr); }
  .ba-sheet { position: absolute; inset: 0; z-index: 4; border-left: 0; }
  .ba-main { padding: var(--space-3) var(--space-3) var(--space-6); }
  .ba-day { min-height: calc(var(--row) * 1.4); }
  .ba-ev { padding: 0 3px; }
}
.sp-body { position: relative; }