/* ============================================================================
   demo.css — the Bwee interactive demo (stage / sidebar / views / terminal).
   Single source of truth, shared by the landing page (website/index.html) and
   the /examples detail pages. All demo-specific rules live here; the marketing
   page keeps its own chrome inline. The brand :root tokens are declared in the
   host page; the .stage block re-overrides --sans/--mono for the app preview.
   ============================================================================ */

  /* ───────────────────────── stage (mock) ──────────────────── */
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(194,80,45,0.5); }
    70% { box-shadow: 0 0 0 8px rgba(194,80,45,0); }
    100% { box-shadow: 0 0 0 0 rgba(194,80,45,0); }
  }

  /* The stage is a *fixed-size* window preview—it never resizes with the
     viewport so the chrome always reads at a real app's proportions (~3:2
     landscape), matching the actual Bwee window. When the container is too
     narrow (e.g. the site viewed inside Bwee's own view pane) the scroll
     wrapper lets it pan horizontally rather than squash. */
  .stage-scroll {
    overflow-x: auto;
    /* overflow-x:auto forces overflow-y to compute to auto, which would clip the
       stage's drop shadow. Pad vertically to give the shadow room, then pull the
       margins back so the surrounding vertical rhythm is unchanged. */
    margin: -24px -40px -56px;
    padding: 24px 40px 56px;
  }
  .stage {
    /* Designed at a larger logical size, then zoomed down to the display size.
       `zoom` scales text + layout together. The window stays ~800×540; shrinking
       the logical canvas (1000→920) makes everything render a bit bigger.
       To resize the window, keep display = logical × zoom (920×621 → 800×540). */
    width: 920px;
    height: 621px;
    zoom: 0.87;
    flex-shrink: 0;
    margin: 0 auto;
    position: relative;
    background: var(--paper);
    border: 1px solid var(--linen);
    border-radius: var(--r-xl);
    box-shadow: 0 30px 60px -30px rgba(28,28,26,0.22),
                0 8px 24px -12px rgba(28,28,26,0.10);
    overflow: hidden;
    /* App preview uses the real Bwee font stack—system sans for chrome and
       system mono for the terminal/code, matching MarkdownEditor.tsx +
       xterm-utils.ts. Override the tokens inside .stage so every rule that
       references var(--sans)/var(--mono) picks them up; marketing copy outside
       .stage keeps Inter / JetBrains Mono. */
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-family: var(--sans);
  }
  .stage-body {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr) minmax(0, 1fr);
    height: 100%;
  }
  /* lifecycle demo—phase 0: terminal takes the full content width (no view) */
  .stage-body.term-full { grid-template-columns: 172px 1fr; }
  .stage-body.term-full .view-pane { display: none; }
  /* Auto-tour: crossfade just the view and terminal content as tasks dissolve
     into one another (in sync with the headline word). The surrounding chrome —
     sidebar, view tabs, terminal header—stays put so only the pieces that
     actually change fade. */
  .stage-body #view,
  .stage-body #term { transition: opacity 300ms ease; }
  .stage-body.cy-fade #view,
  .stage-body.cy-fade #term { opacity: 0; }
  /* temporary replay control—lives on the page, below the app.
     position+z-index lifts it above .stage-scroll: the scroll container's
     bottom padding (shadow room) overlaps this button via negative margin,
     and on mobile that scroll/scrollbar zone would otherwise eat the tap. */
  .replay-wrap { text-align: center; margin-top: 20px; position: relative; z-index: 1; }
  .replay { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; line-height: 1; font-size: 13.5px; font-weight: 500; color: var(--stone); background: none; border: 0; padding: 0 8px; cursor: pointer; transition: color 0.15s ease; }
  .replay:hover { color: var(--ink); }

  /* sidebar */
  .side {
    background: var(--paper);
    padding: 0 10px 18px;
    font-size: 13px;
  }
  .side-controls {
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    margin: 0 -10px 10px;
  }
  .tl { display: flex; gap: 6px; }
  .tl span {
    width: 11px; height: 11px; border-radius: 50%;
    display: inline-block;
  }
  .tl .r { background: #e8746a; }
  .tl .y { background: #e8c34c; }
  .tl .g { background: #4cb46a; }
  .side .label {
    font-family: var(--mono); font-size: 10px;
    color: var(--stone); text-transform: uppercase;
    letter-spacing: 0.08em; padding: 0 10px 10px;
  }
  .side .label.spaced { padding-top: 18px; }
  .side .item {
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 13px;
    /* Matches Sidebar.tsx: inactive items use stone, active items shift to
       ink + font-medium. Without this, every row looks equally weighted and
       the active selection visually flattens against the rest. */
    color: var(--stone);
    position: relative;
    margin-bottom: 2px;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .side .item:hover { background: rgba(228,224,211,0.5); color: var(--ink); }
  .side .item.active {
    background: var(--linen);
    color: var(--ink);
    font-weight: 500;
  }
  .side .item.active:hover { background: var(--linen); }
  .side .task-list { display: flex; flex-direction: column; }
  /* resting order (stripped by runJapanDemo, reverting to DOM order) */
  .side .task-list.biz-init .item[data-task="review"]       { order: 1; }
  .side .task-list.biz-init .item[data-task="inbox"]        { order: 2; }
  .side .task-list.biz-init .item[data-task="calendar"]     { order: 3; }
  .side .task-list.biz-init .item[data-task="budget"]       { order: 4; }
  .side .task-list.biz-init .item[data-task="flight-watch"] { order: 5; }
  .side .task-list.biz-init .item[data-task="japan-trip"]   { order: 6; }
  /* the non-hero tasks fade in (staggered) after the demo finishes */
  .side .task-list .item.more { opacity: 0; transform: translateY(3px); pointer-events: none; }
  /* transition only on the way in, so resetting (replay) hides them instantly */
  .side .task-list.show .item.more { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.5s ease, transform 0.5s ease; }
  .side .task-list.show .item.more:nth-child(3) { transition-delay: 0.07s; }
  .side .task-list.show .item.more:nth-child(4) { transition-delay: 0.14s; }
  .side .task-list.show .item.more:nth-child(5) { transition-delay: 0.21s; }
  .side .task-list.show .item.more:nth-child(6) { transition-delay: 0.28s; }
  .side .item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--persimmon);
    border-radius: 6px 0 0 6px;
  }
  .side .item .nm {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
  }
  .side .divider {
    height: 1px; background: var(--hairline);
    margin: 12px 6px;
  }
  .side .static-row {
    padding: 8px 10px;
    display: flex; align-items: center; gap: 8px;
    color: var(--stone);
    font-size: 12.5px;
  }
  .side .static-row .dot { background: var(--sage); }

  /* abstract structural bar (used in sidebar/tabs/stubs to suggest content) */
  .bar {
    display: inline-block;
    height: 8px;
    background: rgba(28,28,26,0.14);
    border-radius: 3px;
    vertical-align: middle;
  }
  .side .item.active .bar { background: rgba(28,28,26,0.28); }

  /* view pane (middle) */
  .view-pane {
    background: #fff;
    border-left: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .view-tabs {
    height: 36px;
    background: var(--linen);
    /* Inset shadow (not border-bottom) so the active tab's white bg can mask
       it where the tab sits, letting the tab flow seamlessly into the content. */
    box-shadow: inset 0 -1px 0 0 var(--hairline);
    display: flex;
    align-items: flex-end;
    padding: 0 8px;
    flex-shrink: 0;
  }
  .view-tab {
    position: relative;
    appearance: none;
    background: transparent;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--stone);
    height: 32px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Identical border footprint on inactive—transparent so layout doesn't shift. */
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    cursor: default;
    user-select: none;
    white-space: nowrap;
  }
  .view-tab.active {
    background: #fff;
    color: var(--ink);
    font-weight: 500;
    border-color: var(--hairline);
    z-index: 1;
  }
  /* Outward "shoulders" at the active tab's bottom corners—a radial gradient
     carves a quarter-circle of strip background out of an 8×9 square, leaving a
     1px white "foot" that bridges over the strip's hairline. */
  .view-tab.active::before,
  .view-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 8px;
    height: 9px;
    pointer-events: none;
  }
  .view-tab.active::before {
    left: -8px;
    background: radial-gradient(circle at top left, transparent 8px, var(--hairline) 8px, var(--hairline) 9px, #fff 9px);
  }
  .view-tab.active::after {
    right: -8px;
    background: radial-gradient(circle at top right, transparent 8px, var(--hairline) 8px, var(--hairline) 9px, #fff 9px);
  }
  .view-tab svg { width: 14px; height: 14px; flex-shrink: 0; }
  .view-tab.hidden { display: none; }
  .view {
    flex: 1;
    min-height: 0;
    background: #fff;
    padding: 20px 22px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  /* the diff viewer goes edge-to-edge like a real review surface */
  .view.flush { padding: 0; }

  /* terminal pane (right) */
  .term-pane {
    background: #fff;
    border-left: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .term-header {
    height: 36px;
    background: var(--linen);
    border-bottom: 1px solid var(--hairline);
    flex-shrink: 0;
  }
  .term {
    flex: 1;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 12px;
    /* tight within a wrapped line; the gap between lines comes from .ln margin */
    line-height: 1.25;
    /* tighter horizontal padding so the markers (>, •) sit close to the divider */
    padding: 12px 10px 16px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
  }
  .term::-webkit-scrollbar { width: 7px; }
  .term::-webkit-scrollbar-thumb { background: rgba(35,33,30,0.16); border-radius: 4px; }
  .term::-webkit-scrollbar-thumb:hover { background: rgba(35,33,30,0.28); }
  /* scrollback takes its natural height at the top; the input sits right below
     it (not pinned to the bottom), leaving empty space underneath */
  .term-scroll { flex: 0 0 auto; overflow: hidden; }
  /* the prompt input—a plain line just below the content (no rules).
     Inline flow (not flex) so the caret aligns with the text like the scrollback. */
  /* margin-top matches the spacer height so a typed line keeps its vertical
     position when it promotes from the input box up into the scrollback */
  .term-input { flex-shrink: 0; margin-top: 12px; padding-left: 2ch; text-indent: -2ch; }
  /* in the initial state the scrollback is empty, so drop the top gap */
  .term-scroll:empty + .term-input { margin-top: 0; }
  .term-input .txt { white-space: pre-wrap; word-break: break-word; }
  /* one consistent gap between blocks (prompt / tool-calls / summary) */
  /* hanging indent: markers (>, •) sit in a 2ch gutter and every line's text
     starts at the same column—wrapped lines included—like real Claude Code */
  .term .ln { white-space: pre-wrap; word-break: break-word; margin-bottom: 12px; padding-left: 2ch; text-indent: -2ch; }
  /* sent user-input lines get a soft grey block, like real Claude Code.
     Left padding = box gutter (7px) + the 2ch marker gutter; text-indent keeps the > in it. */
  .term .ln.user { background: rgba(28,28,26,0.06); border-radius: 3px; padding: 3px 7px 3px calc(7px + 2ch); }
  /* tool-call lines pack tighter within their own block */
  .term .mu { color: var(--stone); margin-bottom: 5px; }
  /* adjacent margins collapse to the larger, so margin-top must itself be the
     full block gap (it wins over the tool line's 5px), with nothing below */
  .term .summary { margin-top: 12px; margin-bottom: 0; }
  .term .ok { color: var(--sage); }
  .term .px { color: var(--persimmon); }
  .term .cmd { color: var(--persimmon); font-weight: 600; background: rgba(194,80,45,0.10); padding: 0 5px; border-radius: 4px; }
  .term .pm { color: var(--ink); }
  /* turn separator: height == input margin-top (so a promoted line doesn't
     shift) and == the block gap (so spacing stays consistent across turns) */
  .term .spacer { height: 12px; margin-bottom: 0; }
  /* step bullet—a filled dot that pulses smoothly while the step runs, then holds */
  .term .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; vertical-align: 2px; margin-right: calc(2ch - 5px); }
  .term .ln.working .dot { animation: dotPulse 1.4s ease-in-out infinite; }
  @keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
  .term .cur {
    display: inline-block; width: 7px; height: 13px;
    background: var(--ink);
    vertical-align: text-bottom;
    margin-left: 1px;
  }

  .vhead {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px;
  }
  .vtitle { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
  .vmeta {
    font-family: var(--mono); font-size: 10px;
    color: var(--stone); letter-spacing: 0.04em;
  }
  .ihr { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
  .synced { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; color: var(--sage); letter-spacing: 0.03em; }
  .sdot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }

  /* markdown view—the plain itinerary doc that preceded the custom view */
  .v-md { color: var(--ink); margin-top: -4px; }
  .v-md .vh1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 4px; }
  .v-md .lede { color: var(--stone); font-size: 13px; margin: 0 0 18px; }
  .v-md .vh2 { font-size: 16px; font-weight: 700; margin: 20px 0 9px; padding-bottom: 5px; border-bottom: 1px solid var(--linen); }
  .v-md .vh3 { font-size: 13px; font-weight: 600; margin: 13px 0 5px; }
  .v-md ul { margin: 0; padding-left: 18px; }
  .v-md li { font-size: 13px; line-height: 1.75; }
  .v-md li::marker { color: var(--stone); }
  .v-md a { color: #3a6a99; text-decoration: none; border-bottom: 1px solid rgba(58,106,153,0.28); }
  .v-md a:hover { border-bottom-color: #3a6a99; }
  .v-md .meta { color: var(--stone); font-size: 12.5px; margin: 0 0 18px; }
  .v-md li .lk { color: var(--stone); font-size: 12px; }
  .v-md ul.todo { list-style: none; padding-left: 0; }
  .v-md ul.todo li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; line-height: 1.7; }
  .v-md ul.todo .cb { flex-shrink: 0; width: 13px; height: 13px; border: 1.5px solid var(--stone); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1; color: #fff; transform: translateY(1px); }
  .v-md ul.todo li.done .cb { background: var(--sage); border-color: var(--sage); }
  .v-md ul.todo li.done .lbl { text-decoration: line-through; color: var(--stone); }
  .v-md p { font-size: 13px; line-height: 1.62; margin: 0 0 11px; color: var(--ink); }
  .v-md code { font-family: var(--mono); font-size: 11.5px; background: rgba(35,33,30,0.08); padding: 0 4px; border-radius: 3px; }
  .v-md.plan { max-width: 620px; }

  /* view: tokyo-trip—itinerary map with day-colored pins + day detail.
     The whole view scrolls vertically inside the pane. */
  .v-tokyo { margin-top: -6px; }
  .v-tokyo .eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); }
  .v-tokyo .trip-title { font-size: 23px; font-weight: 600; letter-spacing: -0.02em; margin: 7px 0 5px; }
  .v-tokyo .trip-sub { font-size: 13px; line-height: 1.45; color: var(--stone); margin: 0 0 15px; }
  /* Single row; only this row scrolls horizontally when the pills don't fit.
     Negative margins break it out of the view's 22px padding so pills scroll
     edge-to-edge instead of getting clipped against an empty padding gutter;
     the matching padding keeps the first pill aligned with the other content. */
  .v-tokyo .pills { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 -22px 16px; padding: 0 22px; overflow-x: auto; scrollbar-width: none; }
  .v-tokyo .pills::-webkit-scrollbar { display: none; }
  /* font-weight stays constant across states so selecting doesn't change width */
  .v-tokyo .pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; background: var(--linen); color: var(--ink); cursor: pointer; transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease, filter 0.12s ease; }
  .v-tokyo .pill:hover { filter: brightness(0.97); }
  /* map—real CARTO tiles via Leaflet; pins are the selected city's stops, numbered by day */
  .v-tokyo .map { position: relative; height: 190px; background: #e4e0d6; border-radius: var(--r-md); overflow: hidden; margin-bottom: 18px; }
  .v-tokyo #jp-map { position: absolute; inset: 0; background: #e4e0d6; }
  .v-tokyo .mappin { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10.5px; font-weight: 600; font-family: var(--mono); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.32); transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .v-tokyo .mappin.sel { transform: scale(1.4); box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
  .v-tokyo .leaflet-control-attribution { font-size: 8.5px; background: rgba(255,255,255,0.7); }
  .v-tokyo .leaflet-container { font-family: var(--sans); }
  /* day detail */
  /* all days stacked—one block per day: "Day N · theme" then that day's photos */
  .v-tokyo .dayblock { margin-bottom: 20px; }
  .v-tokyo .dayblock:last-child { margin-bottom: 0; }
  .v-tokyo .dayblock-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  /* Day pill: deselected = empty with a colored outline; selected = solid fill.
     Toggling .active flips between them. Inset box-shadow draws the outline
     without nudging layout. */
  .v-tokyo .daypill { border: 0; cursor: pointer; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-indent: 0.06em; text-align: center; text-transform: uppercase; padding: 6px 11px 4px; border-radius: 999px; line-height: 1; transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; background: transparent; color: var(--c); box-shadow: inset 0 0 0 1.5px var(--c); }
  .v-tokyo .daypill:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
  .v-tokyo .daypill.active { background: var(--c); color: #fff; box-shadow: none; }
  .v-tokyo .daypill.active:hover { background: var(--c); }
  .v-tokyo .dayblock-head .daytitle { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
  /* photos—small single row per day, scrolls horizontally like the pills */
  .v-tokyo .cards { display: flex; flex-wrap: nowrap; gap: 9px; overflow-x: auto; margin: 0 -22px; padding: 2px 22px 0; scrollbar-width: none; }
  .v-tokyo .cards::-webkit-scrollbar { display: none; }
  .v-tokyo .card { position: relative; flex: 0 0 132px; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: var(--linen); cursor: pointer; transition: box-shadow 0.15s ease; }
  .v-tokyo .card.sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
  .v-tokyo .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .v-tokyo .card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 8px 7px; background: linear-gradient(transparent, rgba(28,28,26,0.66)); color: #fff; font-size: 10px; font-weight: 500; line-height: 1.25; }

  /* view: status tracker—projected elite-tier EQM + future trips for a
     generic airline mileage plan, modeled after a real status dashboard */
  .v-status { margin-top: -4px; }
  .v-status .st-eyebrow { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
  .v-status .st-num { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; margin-top: 3px; }
  .v-status .st-sub { font-size: 12px; color: var(--ink); line-height: 1.4; margin-top: 10px; }
  .v-status .plan { color: var(--sage); }
  /* top row: projected EQM (left) + projected tier (top-right) */
  .v-status .st-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .v-status .st-r { text-align: right; flex-shrink: 0; }
  .v-status .st-tiername { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 4px 0 3px; }
  .v-status .st-r .more { font-size: 11px; color: var(--sage); line-height: 1.3; }
  /* progress bar toward Titanium—pulled in from the right so the 100% tick
     (Titanium) has room to sit centered under its node without overflowing.
     The track is solid linen with a diagonal darker-grey hatch (the "projected"
     remainder); the solid black fill covers the earned portion on top. */
  .v-status .st-track { position: relative; height: 6px; border-radius: 999px; background: repeating-linear-gradient(45deg, rgba(35,33,30,0.2) 0 1px, transparent 1px 3px), var(--linen); margin: 16px 20px 0 0; }
  .v-status .st-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--ink); }
  .v-status .st-node { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px var(--hairline); transform: translate(-50%, -50%); }
  .v-status .st-node.done { background: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
  .v-status .st-ticks { position: relative; height: 28px; margin: 7px 20px 0 0; }
  .v-status .st-ticks span { position: absolute; transform: translateX(-50%); text-align: center; font-family: var(--mono); font-size: 8.5px; color: var(--stone); letter-spacing: 0.04em; line-height: 1.5; }
  .v-status .st-ticks span.edge-l { transform: none; text-align: left; }
  .v-status .st-ticks span.edge-r { transform: translateX(-100%); text-align: right; }
  .v-status .st-ticks span b { display: block; color: var(--ink); font-weight: 600; letter-spacing: 0.06em; }
  /* section header (Future trips / credit card) */
  .v-status .st-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 9px; padding-top: 11px; border-top: 1px solid var(--linen); }
  .v-status .st-sec .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
  .v-status .st-sec .act { display: flex; gap: 12px; font-size: 10.5px; color: var(--stone); }
  /* future-trip rows—each row is a button that expands to its segments */
  .v-status .trip-item { border-bottom: 1px solid var(--linen); }
  .v-status .trip-item:last-child { border-bottom: none; }
  .v-status .trip-item.end { border-bottom: none; } /* last trip before the card footer's own top border */
  .v-status .trip { display: grid; grid-template-columns: 36px minmax(0,1fr) auto 12px; gap: 11px; align-items: center; width: calc(100% + 12px); margin: 0 -6px; padding: 11px 6px; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-sm); transition: background-color 0.14s ease; }
  .v-status .trip:hover { background: rgba(35,33,30,0.03); }
  .v-status .trip .thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--linen); display: block; }
  .v-status .trip .where { font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v-status .trip .meta { font-family: var(--mono); font-size: 10px; color: var(--stone); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v-status .trip .eqm { text-align: right; }
  .v-status .trip .eqm b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
  .v-status .trip .eqm span { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--stone); }
  /* caret—a chevron that points down, flips up when the row is open */
  .v-status .caret { width: 7px; height: 7px; border-right: 1.5px solid var(--stone); border-bottom: 1.5px solid var(--stone); transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; justify-self: center; flex-shrink: 0; }
  .v-status .open .caret { transform: translateY(1px) rotate(225deg); }
  /* expanded list—accordions slide open via JS-animated height (measured
     from the inner wrapper), so collapsed rows fully hide with no clipping */
  .v-status .segs { height: 0; overflow: hidden; transition: height 0.3s ease; }
  .v-status .segs-in { padding: 2px 2px 10px 0; }
  .v-status .seg { display: grid; grid-template-columns: 14px 38px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 5px 0; }
  .v-status .seg .br { width: 7px; height: 7px; border-left: 1.5px solid var(--hairline); border-bottom: 1.5px solid var(--hairline); border-radius: 0 0 0 2px; align-self: start; margin: 4px 0 0 6px; }
  .v-status .seg .sd { font-family: var(--mono); font-size: 10px; color: var(--stone); }
  .v-status .seg .sr { font-family: var(--mono); font-size: 11px; color: var(--ink); white-space: nowrap; }
  .v-status .seg .sr i { font-style: normal; color: var(--stone); margin: 0 3px; }
  .v-status .seg .sr em { font-style: normal; font-size: 10px; color: var(--stone); margin-left: 6px; }
  /* credit-card breakdown—a description line + one row per month */
  .v-status .cc-desc { font-size: 11px; color: var(--stone); line-height: 1.45; padding: 1px 2px 9px 0; }
  .v-status .cc-row { display: grid; grid-template-columns: 14px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 5px 0; }
  .v-status .cc-row .br { width: 7px; height: 7px; border-left: 1.5px solid var(--hairline); border-bottom: 1.5px solid var(--hairline); border-radius: 0 0 0 2px; align-self: start; margin: 4px 0 0 6px; }
  .v-status .cc-row .m { font-family: var(--mono); font-size: 10.5px; color: var(--ink); }
  .v-status .cc-row .m i { font-style: normal; font-family: var(--sans); font-size: 10px; color: var(--stone); margin-left: 7px; }
  .v-status .cc-row .e { text-align: right; font-family: var(--mono); font-size: 11px; color: var(--ink); white-space: nowrap; }
  .v-status .cc-row .e b { font-weight: 600; }
  .v-status .cc-row .e span { color: var(--stone); font-size: 8.5px; letter-spacing: 0.04em; }
  .v-status .cc-row.proj { opacity: 0.5; }
  .v-status .seg .se { text-align: right; font-family: var(--mono); font-size: 11px; color: var(--ink); white-space: nowrap; }
  .v-status .seg .se b { font-weight: 600; }
  .v-status .seg .se .plan { color: var(--sage); }
  .v-status .seg .se span { color: var(--stone); font-size: 8.5px; letter-spacing: 0.04em; }
  /* credit-card footer—also a button that expands to its EQM breakdown */
  .v-status .st-foot { display: flex; align-items: center; gap: 10px; width: calc(100% + 12px); margin: 0 -6px; padding: 11px 6px 8px; background: none; border: 0; border-top: 1px solid var(--linen); border-radius: var(--r-sm); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color 0.14s ease; }
  .v-status .st-foot:hover { background: rgba(35,33,30,0.03); }
  .v-status .st-foot .lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
  .v-status .st-foot .val { margin-left: auto; font-size: 11.5px; color: var(--stone); }


  /* view: spending—custom-category stacked chart + pills + searchable ledger */
  .v-spend { position: relative; }
  .v-spend .eyebrow { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); }
  .v-spend .hero { font-size: 32px; font-weight: 300; letter-spacing: -0.025em; line-height: 1.04; margin: 3px 0 2px; }
  .v-spend .sub { font-size: 11.5px; color: var(--stone); }
  .v-spend .chart { display: flex; align-items: flex-end; gap: 8px; height: 162px; margin-top: 18px; }
  .v-spend .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; }
  .v-spend .col .cv { font-family: var(--mono); font-size: 9px; color: var(--stone); }
  .v-spend .bar { width: 100%; max-width: 42px; height: auto; background: transparent; display: flex; flex-direction: column-reverse; border-radius: 5px; overflow: hidden; }
  .v-spend .bar span { display: block; }
  .v-spend .col .ml { font-size: 10.5px; color: var(--stone); cursor: pointer; padding: 1px 5px; border-radius: 999px; transition: color 0.14s ease, background 0.14s ease; }
  .v-spend .col .ml:hover { color: var(--ink); }
  .v-spend .col .ml.sel { color: var(--ink); font-weight: 600; background: var(--linen); }
  .v-spend .pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
  .v-spend .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; padding: 4px 9px 4px 8px; border-radius: 999px; border: 1px solid; color: var(--ink); }
  .v-spend .pill .pd { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .v-spend .pill .pa { font-family: var(--mono); font-size: 9.5px; color: var(--stone); }
  .v-spend .ledger { margin: 18px -22px -20px; padding: 14px 22px 18px; background: #faf9f6; border-top: 1px solid var(--hairline); }
  .v-spend .led-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); margin-bottom: 7px; }
  .v-spend .row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto 96px; gap: 9px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linen); }
  .v-spend .row:last-child { border-bottom: none; }
  .v-spend .row .rd { font-family: var(--mono); font-size: 9.5px; line-height: 1; color: var(--stone); }
  .v-spend .row .rm { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .v-spend .row .ra { font-family: var(--mono); font-size: 10.5px; line-height: 1; text-align: right; }
  .v-spend .row .rp { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; line-height: 1; padding: 2px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; transform: translateY(-2px); }
  .v-spend .row .rp .pd { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  /* interactive: smaller pills, hover line, search, recategorize dropdown */
  .v-spend .pills { gap: 8px; }
  .v-spend .pill { gap: 5px; font-size: 9px; padding: 3px 9px 3px 7px; cursor: pointer; transition: filter 0.12s ease; }
  .v-spend .pill:hover { filter: brightness(0.97); }
  .v-spend .pill .pd { width: 6px; height: 6px; }
  .v-spend .pill .pa { font-size: 8px; }
  .v-spend .pill.off { background: #fff; border-color: var(--hairline); color: var(--stone); }
  .v-spend .pill.off .pd { opacity: 0.35; }
  .v-spend .pill.off .nm { text-decoration: line-through; }
  .v-spend .sp-reset { font-family: var(--mono); font-size: 10px; color: var(--stone); cursor: pointer; align-self: center; padding: 0 2px; }
  .v-spend .sp-reset:hover { color: var(--ink); }
  .v-spend .chart { margin-top: 16px; position: relative; }
  .v-spend .bar span { cursor: pointer; transition: height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.15s ease; }
  /* floating white tooltip anchored above the hovered bar segment */
  .v-spend .sp-tip { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 12; transform: translate(-50%, -100%); background: #fff; border: 1px solid var(--hairline); border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,0.12); padding: 5px 9px; font-size: 10.5px; color: var(--ink); white-space: nowrap; display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.12s ease; }
  .v-spend .sp-tip.on { opacity: 1; }
  .v-spend .sp-tip .hd { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .v-spend .sp-tip .ta { font-family: var(--mono); color: var(--stone); }
  .v-spend .sp-search { display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid var(--hairline); border-radius: 7px; padding: 4px 9px; margin-bottom: 10px; }
  .v-spend .sp-search svg { width: 11px; height: 11px; color: var(--stone); flex-shrink: 0; }
  .v-spend .sp-search input { flex: 1; border: 0; background: transparent; outline: none; font-family: var(--sans); font-size: 11px; color: var(--ink); }
  .v-spend .sp-search input::placeholder { color: var(--stone); }
  .v-spend .row .rp { cursor: pointer; font-family: var(--sans); color: var(--ink); }
  .v-spend .row .rcar { width: 5px; height: 5px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(-1px) rotate(45deg); opacity: 0.5; margin-left: 2px; }
  .v-spend .rpw { position: relative; justify-self: end; align-self: center; }
  .v-spend .sp-drop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; background: #fff; border: 1px solid var(--hairline); border-radius: 8px; box-shadow: 0 5px 16px rgba(0,0,0,0.13); padding: 4px; min-width: 128px; }
  .v-spend .sp-drop.up { top: auto; bottom: calc(100% + 4px); }
  .v-spend .sp-drop button { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: transparent; font-family: var(--sans); font-size: 11px; color: var(--ink); padding: 5px 8px; border-radius: 5px; cursor: pointer; text-align: left; }
  .v-spend .sp-drop button:hover { background: var(--linen); }
  .v-spend .sp-drop button .pd { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .v-spend .sp-empty { font-size: 11px; color: var(--stone); text-align: center; padding: 18px 0; }

  /* view: inbox—triaged into Urgent (emphasized) / Normal (quieted) / FYI (collapsed) */
  .v-inbox .sec { margin-bottom: 16px; }
  .v-inbox .sec:last-child { margin-bottom: 0; }
  .v-inbox .sec-h { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--stone); margin-bottom: 8px; }
  .v-inbox .sec-name { font-weight: 600; }
  .v-inbox .sec-ct { font-size: 9.5px; line-height: 16px; min-width: 16px; text-align: center; padding: 0 5px; border-radius: 999px; background: var(--linen); color: var(--stone); }
  /* shared row */
  .v-inbox .msg { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; line-height: 1.3; }
  .v-inbox .msg .ic { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
  .v-inbox .msg .ic svg { width: 15px; height: 15px; display: block; }
  .v-inbox .msg .who { font-weight: 500; font-size: 12px; }
  .v-inbox .msg .txt { font-size: 12px; color: var(--stone); }
  .v-inbox .msg .tm { font-family: var(--mono); font-size: 10px; color: var(--stone); }
  /* item wrapper holds a row + its inline control; uniform card padding across buckets */
  .v-inbox .item { padding: 7px 10px; border-radius: 8px; transition: opacity 0.18s ease, background 0.16s ease; }
  .v-inbox .item.gone { opacity: 0; }
  /* Urgent—always a tinted card with a persimmon accent rail */
  .v-inbox .sec.urgent .sec-h { color: var(--persimmon); }
  .v-inbox .sec.urgent .sec-ct { background: rgba(194,80,45,0.14); color: var(--persimmon); }
  .v-inbox .sec.urgent .item { background: #fbf1ed; margin-bottom: 5px; box-shadow: inset 2px 0 0 0 var(--persimmon); }
  .v-inbox .sec.urgent .item:last-child { margin-bottom: 0; }
  .v-inbox .sec.urgent .msg .who { font-size: 12.5px; font-weight: 600; }
  .v-inbox .sec.urgent .msg .ic svg { width: 16px; height: 16px; }
  /* Normal—list with dividers; expands into a neutral card */
  .v-inbox .sec.normal .item { border-bottom: 1px solid var(--linen); }
  .v-inbox .sec.normal .item:last-child { border-bottom: none; }
  .v-inbox .sec.normal .msg .who { font-size: 11.5px; font-weight: 500; color: var(--ink); }
  .v-inbox .sec.normal .msg .txt { font-size: 11.5px; }
  .v-inbox .sec.normal .msg .ic svg { width: 14px; height: 14px; }
  /* FYI—collapsed accordion under a clickable header; expands into a neutral card */
  .v-inbox .sec.fyi { padding-top: 2px; }
  .v-inbox .sec.fyi .sec-h { width: 100%; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--stone); }
  .v-inbox .sec.fyi .caret { width: 6px; height: 6px; margin-left: auto; border-right: 1.4px solid var(--stone); border-bottom: 1.4px solid var(--stone); transform: rotate(-45deg); transition: transform 0.2s ease; }
  .v-inbox .sec.fyi.open .caret { transform: rotate(45deg); }
  .v-inbox .sec.fyi .sec-body { max-height: 0; overflow: hidden; transition: max-height 0.42s ease; }
  .v-inbox .sec.fyi .item { opacity: 0.9; border-bottom: 1px solid var(--linen); }
  .v-inbox .sec.fyi .item:first-child { margin-top: 8px; }
  .v-inbox .sec.fyi .item:last-child { border-bottom: none; }
  .v-inbox .sec.fyi .item:hover, .v-inbox .sec.fyi .item.open { opacity: 1; }
  .v-inbox .sec.fyi .msg .who { font-size: 11.5px; color: var(--ink); }
  .v-inbox .sec.fyi .msg .txt { font-size: 11.5px; }
  .v-inbox .sec.fyi .msg .ic svg { width: 14px; height: 14px; }
  /* the expanded neutral card (Normal + FYI) */
  .v-inbox .sec.normal .item.open, .v-inbox .sec.fyi .item.open { background: #f6f4ee; border-bottom-color: transparent; }
  /* hover = a lighter preview of the expanded card */
  .v-inbox .sec.normal .item:hover:not(.open), .v-inbox .sec.fyi .item:hover:not(.open) { background: #faf8f3; }
  .v-inbox .sec.urgent .item:hover { background: #fbede6; }
  /* clickable row + mark-read */
  .v-inbox .msg { cursor: pointer; }
  .v-inbox .bd { min-width: 0; }
  .v-inbox .meta { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 46px; }
  .v-inbox .openin, .v-inbox .mark { display: none; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 1px solid var(--hairline); background: #fff; color: var(--stone); border-radius: 5px; cursor: pointer; }
  .v-inbox .openin svg, .v-inbox .mark svg { width: 12px; height: 12px; }
  .v-inbox .openin:hover { color: var(--ink); border-color: var(--stone); }
  .v-inbox .mark:hover { color: var(--sage); border-color: var(--sage); }
  .v-inbox .msg:hover .tm { display: none; }
  .v-inbox .msg:hover .openin, .v-inbox .msg:hover .mark { display: inline-flex; }
  /* expanded control: context preview + reply pill (max-height set inline to the
     exact content height so open/close animate in lockstep, no dead zone) */
  .v-inbox .ctl { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; }
  .v-inbox .ctl-in { padding: 9px 0 2px 26px; }
  .v-inbox .ctx { font-size: 11px; line-height: 1.5; color: var(--stone); border-left: 2px solid var(--hairline); padding-left: 9px; margin-bottom: 9px; }
  .v-inbox .reply { display: flex; align-items: center; gap: 6px; border: 1px solid var(--hairline); border-radius: 8px; background: #fff; padding: 3px 3px 3px 11px; }
  .v-inbox .reply:focus-within { border-color: var(--stone); }
  .v-inbox .reply input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 5px 0; font-family: var(--sans); font-size: 11px; color: var(--ink); outline: none; }
  .v-inbox .reply input::placeholder { color: var(--stone); }
  .v-inbox .send { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; padding: 0; border: 0; background: var(--ink); color: #fff; border-radius: 6px; cursor: pointer; }
  .v-inbox .send svg { width: 14px; height: 14px; }

  /* view: calendar—week grid with candidate slots your rules picked */
  .v-cal .grid { display: grid; grid-template-columns: 30px repeat(5, 1fr); gap: 3px; }
  .v-cal .hd { font-family: var(--mono); font-size: 9px; color: var(--stone); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; padding-bottom: 4px; }
  .v-cal .hr { font-family: var(--mono); font-size: 9px; color: var(--stone); display: flex; align-items: center; }
  .v-cal .cell { height: 22px; border-radius: 3px; background: var(--linen); }
  .v-cal .cell.busy { background: rgba(35,33,30,0.16); }
  .v-cal .cell.slot { background: var(--persimmon); position: relative; }
  .v-cal .cell.slot::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--paper); font-size: 11px; }
  .v-cal .legend { display: flex; gap: 14px; font-family: var(--mono); font-size: 10px; color: var(--stone); margin-top: 12px; }
  .v-cal .legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

  /* view: scheduler—find time across people, with toggleable flexibility rules */
  .cal-head { align-items: center; }
  .v-sched .sched-top { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
  .v-sched .field { display: flex; align-items: center; gap: 9px; }
  .v-sched .flabel { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone); }
  .v-sched .field-col { display: flex; flex-direction: column; gap: 8px; }
  .v-sched .ppills { display: flex; flex-wrap: wrap; gap: 6px; }
  .v-sched .ppill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; padding: 2px 6px 2px 3px; border-radius: 999px; background: #fff; border: 1px solid var(--hairline); color: var(--ink); }
  .v-sched .pav { width: 15px; height: 15px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 8.5px; font-weight: 600; flex-shrink: 0; }
  .v-sched .pav.sm { width: 15px; height: 15px; font-size: 8.5px; }
  .v-sched .ppill.you { padding-right: 9px; }
  .v-sched .ppill .cx { border: 0; background: none; color: var(--stone); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; transform: translateY(1.5px); }
  .v-sched .ppill .cx:hover { color: var(--ink); }
  .v-sched .cap { display: flex; align-items: center; gap: 7px; min-height: 17px; margin-bottom: 9px; font-size: 11px; color: var(--stone); }
  .v-sched .toks { display: contents; }
  .v-sched .addwrap { position: relative; display: inline-flex; }
  .v-sched .addbtn { width: 21px; height: 21px; border-radius: 50%; border: 1px dashed var(--hairline); background: #fff; color: var(--stone); font-size: 15px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.22s ease, color 0.15s ease, border-color 0.15s ease; }
  .v-sched .addbtn:hover { color: var(--ink); border-color: var(--stone); }
  .v-sched .addwrap.open .addbtn { transform: rotate(45deg); color: var(--ink); border-style: solid; border-color: var(--stone); }
  .v-sched .picker { position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 12; background: #fff; border: 1px solid var(--hairline); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.14); padding: 4px; min-width: 128px; opacity: 0; transform: translateY(-6px) scale(0.96); transform-origin: top right; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; }
  .v-sched .addwrap.open .picker { opacity: 1; transform: none; pointer-events: auto; }
  .v-sched .addwrap.menuleft .picker { right: auto; left: 0; transform-origin: top left; }
  .v-sched .topt { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; border: 0; background: none; font-family: var(--sans); font-size: 11px; color: var(--ink); padding: 5px 8px; border-radius: 5px; cursor: pointer; }
  .v-sched .topt:hover { background: var(--linen); }
  .v-sched .durs, .cal-head .durs { display: inline-flex; gap: 4px; }
  .v-sched .dur, .cal-head .dur { font-family: var(--sans); font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--hairline); background: #fff; color: var(--stone); cursor: pointer; }
  .v-sched .dur.on, .cal-head .dur.on { background: var(--ink); border-color: var(--ink); color: #fff; }
  .v-sched .rlabel { font-family: var(--mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--stone); margin-top: 18px; margin-bottom: 8px; }
  .v-sched .rulelist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 7px; }
  .v-sched .rlrow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink); }
  .v-sched .rlrow .rd { width: 6px; height: 6px; border-radius: 50%; background: var(--persimmon); flex-shrink: 0; }
  .v-sched .rulenote { font-size: 11px; color: var(--stone); padding-left: 14px; margin-bottom: 16px; }
  /* The grid is always rendered at 15-min sub-cell granularity. Changing duration
     re-tags which sub-cells are slot tops/bottoms; the seams (row margins), corners,
     merge-borders and colors all transition, so cells split apart / join together. */
  .v-sched .grid { display: flex; flex-direction: column; --sh: 7px; }
  .v-sched .hdrow { display: flex; gap: 2px; margin-bottom: 2px; }
  .v-sched .hdrow .hpad { width: 26px; flex: none; }
  .v-sched .hd { flex: 1 1 0; font-family: var(--mono); font-size: 9px; color: var(--stone); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; padding-bottom: 2px; }
  .v-sched .srow { display: flex; gap: 2px; transition: margin-top 0.26s ease; }
  .v-sched .srow.seam { margin-top: 2px; }
  .v-sched .srow .hr { width: 26px; flex: none; height: var(--sh); font-family: var(--mono); font-size: 8.5px; color: var(--stone); display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; }
  .v-sched .cell { flex: 1 1 0; height: var(--sh); box-sizing: border-box; position: relative; border: 0 solid transparent; border-radius: 0; background-color: rgba(35,33,30,0.10); transition: background-color 0.26s ease, border-radius 0.26s ease, border-width 0.26s ease, border-color 0.26s ease; }
  .v-sched .cell.st { border-top-left-radius: 2px; border-top-right-radius: 2px; z-index: 2; }
  .v-sched .cell.sb { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
  .v-sched .cell.open { background-color: #c8e6d1; cursor: pointer; }
  .v-sched .cell.open.st::after { content: '✓'; position: absolute; left: 50%; top: calc(var(--span) * var(--sh) / 2); transform: translate(-50%, -50%); color: #4f7059; font-size: 9px; transition: top 0.26s ease, color 0.2s ease; }
  .v-sched .cell.open.sel { background-color: #5b7d66; }
  .v-sched .cell.open.sel.st::after { color: #e4f3e9; }
  .v-sched .cell.sugg { background-color: rgba(243,205,96,0.55); cursor: pointer; }
  .v-sched .cell.sugg.st::after { content: ''; position: absolute; left: 50%; top: calc(var(--span) * var(--sh) / 2); transform: translate(-50%, -50%); width: 5px; height: 5px; border-radius: 50%; background: #cf9a2a; transition: top 0.26s ease; }
  .v-sched .cell.open.hl { background-color: #b9ddc6; }
  .v-sched .cell.sugg.hl { background-color: rgba(243,205,96,0.72); }
  .v-sched .cell.sugg.sel { background-color: #e3ad36; }
  .v-sched .cell.sugg.sel.st::after { background: #fff8e6; }
  .v-sched .legend { display: flex; gap: 13px; font-family: var(--mono); font-size: 9.5px; color: var(--stone); margin-top: 12px; }
  .v-sched .legend .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
  .v-sched .legend .sw.open { background: #c8e6d1; }
  .v-sched .legend .sw.sugg { background: rgba(232,196,100,0.85); }
  .v-sched .legend .sw.busy { background: rgba(35,33,30,0.16); }
  .v-sched .legend .sw.excl { background: repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(35,33,30,0.18) 2px, rgba(35,33,30,0.18) 4px); }
  .v-sched .detail { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linen); }
  .v-sched .detail:empty { display: none; }
  .v-sched .bookbtn { margin-top: 11px; min-width: 80px; text-align: center; font-family: var(--sans); font-size: 11.5px; font-weight: 500; padding: 5px 15px; border-radius: 999px; border: 0; background: var(--persimmon); color: #fff; cursor: pointer; transition: background 0.15s ease; }
  .v-sched .bookbtn:hover { background: #a8401f; }
  .v-sched .bookbtn.loading { pointer-events: none; }
  .v-sched .bookbtn.done, .v-sched .bookbtn.done:hover { background: var(--sage); pointer-events: none; cursor: default; }
  .v-sched .bookbtn .spin { display: inline-block; width: 11px; height: 11px; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; border-radius: 50%; animation: calspin 0.6s linear infinite; vertical-align: -2px; }
  @keyframes calspin { to { transform: rotate(360deg); } }
  .v-sched .detail .dh { font-size: 12px; font-weight: 600; margin-bottom: 7px; }
  .v-sched .detail .move { font-size: 11.5px; color: var(--stone); padding: 2px 0; }
  .v-sched .detail .move .mw { color: var(--ink); font-weight: 500; }
  .v-sched .detail .hint { font-size: 11.5px; color: var(--stone); line-height: 1.5; }
  .v-sched .peek { display: flex; flex-direction: column; gap: 4px; }
  .v-sched .peek .pr2 { display: flex; align-items: center; gap: 7px; font-size: 11.5px; }
  .v-sched .peek .pdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
  .v-sched .peek .pdot.open { background: #7bbf93; }
  .v-sched .peek .pdot.soft { background: #e3ad36; }
  .v-sched .peek .pdot.busy { background: rgba(35,33,30,0.22); }
  .v-sched .peek .pn { font-weight: 600; }
  .v-sched .peek .pmeta { color: var(--stone); }

  /* view: review—a local working-tree diff with Claude's inline comments */
  .v-review { font-size: 12px; }
  .v-review .rv-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--hairline); font-family: var(--mono); font-size: 10.5px; position: sticky; top: 0; background: #fff; z-index: 3; }
  .v-review .rv-stat { color: var(--stone); }
  .v-review .rv-stat .add { color: #4f7d5b; }
  .v-review .rv-stat .del { color: var(--persimmon); }
  .v-review .rv-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; }
  .v-review .rv-toggle { font-family: var(--mono); font-size: 10.5px; color: var(--stone); background: var(--linen); border: 1px solid var(--hairline); border-radius: 5px; padding: 2px 8px; cursor: pointer; }
  .v-review .rv-toggle:hover { color: var(--ink); }
  .v-review .rv-collapse { font-family: var(--mono); font-size: 10.5px; color: var(--stone); background: none; border: 0; cursor: pointer; padding: 0; }
  .v-review .rv-collapse:hover { color: var(--ink); }
  .v-review .rv-file { border: 0; border-bottom: 1px solid var(--hairline); }
  .v-review .rv-file.tests { display: none; }
  .v-review.show-tests .rv-file.tests { display: block; }
  .v-review .rv-fh { display: flex; align-items: center; gap: 9px; padding: 7px 16px; background: #23211e; color: #f3f1eb; cursor: pointer; font-family: var(--mono); font-size: 11px; }
  .v-review .rv-file.new .status { color: #8fd0a0; }
  .v-review .rv-fh .car { font-size: 8px; opacity: 0.7; transition: transform 0.18s ease; }
  .v-review .rv-file.collapsed .rv-fh .car { transform: rotate(-90deg); }
  .v-review .rv-fh .status { color: #d8a13a; letter-spacing: 0.06em; font-size: 9.5px; }
  .v-review .rv-fh .path { font-weight: 600; }
  .v-review .rv-fh .fstat { margin-left: auto; display: inline-flex; gap: 7px; }
  .v-review .rv-fh .fstat .add { color: #8fd0a0; }
  .v-review .rv-fh .fstat .del { color: #e6957f; }
  .v-review .rv-body { font-family: var(--mono); font-size: 11px; line-height: 1.5; background: #fff; overflow-x: auto; scrollbar-width: none; }
  .v-review .rv-body::-webkit-scrollbar { display: none; }
  .v-review .rv-file.collapsed .rv-body { display: none; }
  .v-review .dl { display: flex; white-space: pre; min-width: max-content; }
  .v-review .dl > span { box-sizing: border-box; }
  .v-review .dl .gut { flex: none; width: 52px; text-align: right; padding: 0 12px 0 10px; color: #b9b3a4; user-select: none; }
  .v-review .dl .code { padding-right: 16px; }
  .v-review .dl.add { background: #e7f6eb; }
  .v-review .dl.del { background: #fcebe9; }
  .v-review .dl.gap { background: #faf9f5; color: #cbc5b5; }
  .v-review .dl.gap .code { color: #cbc5b5; letter-spacing: 2px; padding-left: 4px; }
  .v-review .dl .w { border-radius: 2px; padding: 0 1px; }
  .v-review .dl.add .w { background: #b6e4c2; }
  .v-review .dl.del .w { background: #f6c3bd; }
  .v-review .c-kw { color: #a3361f; }
  .v-review .c-typ { color: #6b4fae; }
  .v-review .c-str { color: #3f7d4f; }
  .v-review .c-com { color: #9a9384; font-style: italic; }
  .v-review .c-num { color: #b5793b; }
  /* inline Claude comment threaded into the diff */
  .v-review .cmt { position: sticky; left: 0; margin: 3px 16px 3px 44px; max-width: 540px; box-sizing: border-box; background: #fff; border: 1px solid var(--hairline); border-left: 3px solid var(--stone); border-radius: 8px; padding: 11px 15px; font-family: var(--sans); box-shadow: 0 1px 3px rgba(35,33,30,0.07); cursor: default; transition: padding 0.17s ease, border-color 0.15s ease; }
  .v-review .cmt.issue { border-left-color: var(--persimmon); }
  .v-review .cmt.warn { border-left-color: #cf7a23; }
  .v-review .cmt.nit { border-left-color: #d8a13a; }
  .v-review .cmt.praise { border-left-color: var(--sage); }
  /* body + reply live in a collapsible track that animates its real height to/from 0 */
  .v-review .cmt-collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.19s ease; }
  .v-review .cmt-collapse-in { overflow: hidden; min-height: 0; }
  .v-review .cmt-head { transition: margin-bottom 0.17s ease; }
  /* feedback given → collapse to a very narrow strip; click it to reopen */
  .v-review .cmt.given { padding-top: 5px; padding-bottom: 5px; cursor: pointer; }
  .v-review .cmt.given .cmt-collapse { grid-template-rows: 0fr; }
  .v-review .cmt.given .cmt-head { margin-bottom: 0; }
  .v-review .cmt.given .fb { display: none; }
  .v-review .cmt.given.valid { border-left-color: var(--sage); }
  .v-review .cmt.given.invalid { border-left-color: var(--persimmon); }
  .v-review .cmt-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
  .v-review .cmt-head .ava { width: 16px; height: 16px; border-radius: 4px; background: var(--ink); color: #f3f1eb; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .v-review .cmt-head .cw { font-size: 11.5px; font-weight: 600; }
  .v-review .cmt-head .sev { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 999px; }
  .v-review .cmt-head .sev.issue { background: rgba(194,80,45,0.13); color: var(--persimmon); }
  .v-review .cmt-head .sev.nit { background: rgba(216,161,58,0.16); color: #a9781f; }
  .v-review .cmt-head .sev.warn { background: rgba(207,122,35,0.15); color: #b3651a; }
  .v-review .cmt-head .sev.praise { background: rgba(74,93,79,0.14); color: var(--sage); }
  .v-review .cmt-head .fb { margin-left: auto; display: inline-flex; gap: 4px; }
  .v-review .cmt-head .fb-btn { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; padding: 0; border: 1px solid var(--hairline); border-radius: 5px; background: #fff; color: var(--stone); cursor: pointer; }
  .v-review .cmt-head .fb-btn svg { width: 11px; height: 11px; }
  .v-review .cmt-head .fb-btn.valid:hover { color: #3f9d5a; border-color: #3f9d5a; background: rgba(63,157,90,0.10); }
  .v-review .cmt-head .fb-btn.invalid:hover { color: var(--persimmon); border-color: var(--persimmon); background: rgba(194,80,45,0.08); }
  .v-review .cmt-head .verdict { display: none; margin-left: auto; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; }
  .v-review .cmt.given .verdict { display: inline; }
  .v-review .cmt.given.valid .verdict { color: var(--sage); }
  .v-review .cmt.given.invalid .verdict { color: var(--persimmon); }
  .v-review .cmt-body { font-size: 12px; line-height: 1.55; color: var(--ink); }
  .v-review .cmt-body code { font-family: var(--mono); font-size: 11px; background: rgba(35,33,30,0.08); padding: 0 4px; border-radius: 3px; }
  .v-review .cmt-reply { display: grid; grid-template-rows: 0fr; margin-top: 0; transition: grid-template-rows 0.19s ease, margin-top 0.19s ease; }
  .v-review .cmt.open .cmt-reply { grid-template-rows: 1fr; margin-top: 9px; }
  .v-review .cmt-reply-in { overflow: hidden; min-height: 0; }
  .v-review .cmt-reply input { width: 100%; box-sizing: border-box; font-family: var(--sans); font-size: 11.5px; padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 6px; background: #fff; outline: none; }
  .v-review .cmt-reply input:focus { border-color: var(--stone); }
  .v-review .cmt .reply-ln { display: flex; gap: 7px; margin-top: 8px; align-items: baseline; }
  .v-review .cmt .reply-ln .you { font-size: 11.5px; font-weight: 600; flex: none; }
  .v-review .cmt .reply-ln .rt { font-size: 12px; color: var(--ink); }

  /* ---- solo-task mode (examples detail pages) -----------------------------
     A detail page is scoped to one example, so the sidebar shows only its
     task—other tasks would dilute the focus. BweeDemo.mount({soloTask:true})
     adds .solo-task to the stage; switchTo() marks the active item. */
  .stage.solo-task .side .item:not(.active) { display: none; }

  /* ---- inline mount sizing (examples detail pages) ------------------------
     When mounted inline (not the landing tour), the stage may need to fit a
     narrower column. .demo-mount breaks out wider than the text column and the
     stage scales down responsively so the whole window stays visible with no
     horizontal scroll. */
  .demo-mount { width: 100%; }
  .demo-mount .stage-scroll { overflow-x: hidden; }
  /* The stage is a fixed ~800px-wide canvas (920 × 0.87 zoom). When the mount
     column is narrower than that, demo.js scales the whole .stage down (CSS
     transform) so both rounded edges stay visible and nothing scrolls
     sideways, then corrects the wrapper height so layout below doesn't gap. */