/* v3 component styles — geometry and chrome from the design atlas
 * (claude-plans/v3-inventory.md maps every value to its atlas turn).
 * Tokens live in v3-tokens.css; per-card aura backgrounds are computed by
 * js/v3/aura.js. Look values up in the atlas before changing anything.
 * v3.1 layers on: fluid type via --fs-* tokens, the desktop body (day rail,
 * dialogs, auto-fill grid), and the unannounced quality floor (focus-visible
 * everywhere, 44px touch targets, reduced-motion). */

/* ---- focus + motion floor (AX-2) ---------------------------------------------- */
/* Quiet by default, unmistakable on keyboard: one focus language everywhere. */
button, input, textarea, select, a, [role="button"], [role="option"] { outline: none; }
:focus-visible {
  outline: 2px solid rgba(var(--fest), .9) !important; /* beats inline resets */
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-grain, .card-grain { display: none; }
}

/* ---- artist card (the atom) ------------------------------------------------ */
.card {
  position: relative; min-height: 64px;
  border: 1px solid var(--hairline); border-radius: var(--r-card);
  display: flex; align-items: center; justify-content: center;
  padding: 9px 11px 20px; text-align: center; overflow: hidden;
  cursor: pointer; -webkit-touch-callout: none; user-select: none;
  font-family: inherit; color: inherit; /* role=button div, keyboard-first (AX-1) */
}
.card.animated { background-size: 180% 180%; animation: gradShift 12s ease-in-out infinite; }
.card .name { position: relative; font-weight: 700; font-size: var(--fs-card); line-height: 1.2; }
.card .time { position: relative; font-size: 9px; font-weight: 600; }
.card.timed { flex-direction: column; gap: 2px; } /* search results carry stage · time */

/* Hover note affordance for pointer users (DT-6): the ✎ chip appears on
 * hover/focus, never on touch (long-press owns that path). Never a music
 * note — the glyph is reserved for Spotify. */
.card .note-affordance {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
  display: none; align-items: center; justify-content: center;
  background: rgba(10, 8, 18, .72); border: 1px solid var(--border-card);
  border-radius: var(--r-pill); color: var(--notes-chip-text); font-size: 11px;
  cursor: pointer; opacity: 0; transition: opacity .12s ease; padding: 0;
}
@media (hover: hover) and (pointer: fine) {
  .card .note-affordance { display: inline-flex; }
  .card:hover .note-affordance, .card:focus-within .note-affordance,
  .card:focus-visible .note-affordance { opacity: 1; }
}

/* Set-times grid cell variant: same card, tighter corners, time line.
 * Content is TOP-aligned: a short set's card clips at the bottom padding,
 * never mid-name — centered content shaved the top off the artist name
 * (Kevin's screenshot, 2026-07-12). Top edge = start time, like a printed
 * festival grid. */
/* border-box is load-bearing for the lane split (CELLS ONLY — the base card
 * keeps content-box so wall-grid geometry stays atlas-exact; Codex arc gate
 * P3): wall.js sets width% + margin-left% that must sum inside the column,
 * and content-box added padding+border on top, pushing split cards into the
 * neighbor stage (Kevin's screenshot, 2026-07-12). */
.card.cell { flex-direction: column; gap: 1px; padding: 5px 8px 17px; justify-content: flex-start; box-sizing: border-box; }
.card.cell .name { font-size: 12px; line-height: 1.15; max-width: 100%;
  /* Two lines beat a mid-name ellipsis on narrow lane-split cards. */
  white-space: normal; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  /* flex:none is the REAL clipped-name fix (measured on staging 2026-07-12):
   * a short card's content box is ~22px, and default flex-shrink squeezed the
   * name below one line-height — its own overflow:hidden then shaved the
   * glyphs. The name never shrinks; a too-short card crops time descenders
   * at the bottom instead, never the name. */
  flex: none; }
.card.cell .time { flex: none; }
.card.cell .corner-about { bottom: 3px; left: 5px; }
.card.cell .corner-who { bottom: 3px; right: 4px; }
.card.cell .chip-notes { height: 12px; padding: 0 5px; font-size: 8px; }
.card.cell .chip-spotify { height: 11px; padding: 0 5px; font-size: 8px; }

.corner-about { position: absolute; bottom: 4px; left: 6px; display: flex; align-items: center; gap: 3px; }
.corner-who { position: absolute; bottom: 4px; right: 5px; display: flex; align-items: center; }
.chip-notes {
  display: inline-flex; align-items: center; height: 13px; padding: 0 6px;
  border-radius: var(--r-bubble); background: var(--notes-fill);
  border: 1px solid var(--notes-stroke); color: #fff; font-size: 8.5px; font-weight: 800; line-height: 1;
  font-family: inherit; /* the count chip is a real <button> now (audit 4.4) */
}
.chip-spotify {
  display: inline-flex; align-items: center; gap: 3px; height: 12px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--spotify-fill);
  border: 1px solid var(--spotify-stroke); color: #fff; font-size: 8.5px; font-weight: 800; line-height: 1;
}
.mark { height: 12px; border-radius: var(--r-pill); color: #fff; font-weight: 800;
        display: inline-flex; align-items: center; justify-content: center; margin-left: 3px; flex: none; }
/* Weekend tag (ST-3): quiet top-left marker for W1/W2-only artists in Both view */
.chip-weekend { position: absolute; top: 4px; left: 5px; font-size: 8px; font-weight: 800;
                letter-spacing: .06em; color: var(--text-tertiary); border: 1px solid var(--border-card);
                border-radius: var(--r-pill); padding: 1px 5px; background: rgba(10, 8, 18, .6); }
/* The '+n' ghost only appears over saturated multi-person auras (3+ pickers)
 * — it gets the same white-on-scrim treatment as every other mark (audit 8.1). */
.mark.ghost { border: 1px dashed rgba(255, 255, 255, .55); background: rgba(12, 10, 20, .55);
              color: #fff; padding: 0 4px; font-size: 7.5px; }

/* ---- people ----------------------------------------------------------------- */
.person-chip { color: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 12px;
               border-radius: var(--r-pill); border: none; cursor: pointer; }
.person-chip.you { font-weight: 700; }
.person-chip.add { background: transparent; border: 1.5px dashed var(--border-emphasis);
                   color: var(--text-secondary); padding: 4px 10px; }
.avatar { width: 17px; height: 17px; border-radius: var(--r-pill); color: #fff; font-size: 8px;
          font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar-cluster { display: inline-flex; }
.avatar-cluster .avatar + .avatar { margin-left: -5px; }
.avatar.lg { width: 30px; height: 30px; font-size: 12px; }

/* ---- toolbar (wall header row) ---------------------------------------------- */
.search-pill {
  display: inline-flex; align-items: center; gap: 7px; background: var(--card);
  border: 1px solid var(--border-card); border-radius: var(--r-pill);
  padding: 7px 13px; color: var(--text-secondary); font-size: 12.5px;
}
.search-pill input { background: transparent; border: none; outline: none; color: var(--text-primary);
                     font-size: 12.5px; font-family: var(--font-ui); width: 100%; }
.sort-chip {
  display: inline-flex; align-items: center; gap: 4px; background: var(--card);
  border: 1px solid var(--border-card); border-radius: var(--r-pill);
  padding: 7px 12px; color: #E5E7EB; font-size: 11.5px; font-weight: 700; cursor: pointer;
  font-family: var(--font-ui);
}
.sort-chip .caret { color: var(--text-tertiary); transition: transform .12s ease; }
.sort-chip[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Sort popover listbox (DT-7): part of the app's control family — quiet
 * surface, live caret, full keyboard (arrows / Enter / Esc / typeahead). */
.sort-wrap { position: relative; display: inline-flex; }
.sort-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 35;
  min-width: 168px; background: #141021; border: 1px solid var(--border-card);
  border-radius: 12px; padding: 5px; margin: 0; list-style: none;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}
.sort-pop [role="option"] {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 8px;
  color: var(--text-body); font-size: 13px; font-weight: 600; cursor: pointer;
}
.sort-pop [role="option"]:hover, .sort-pop [role="option"].kb-active {
  background: rgba(255, 255, 255, .08);
}
.sort-pop [role="option"][aria-selected="true"] { color: rgb(var(--fest)); }
.sort-pop .check { width: 12px; flex: none; font-size: 11px; }
.notes-chip {
  display: inline-flex; align-items: center; gap: 5px; background: transparent;
  border: 1.5px solid var(--notes-chip-stroke); color: var(--notes-chip-text);
  font-weight: 700; font-size: 11.5px; padding: 6px 12px; border-radius: var(--r-bubble); cursor: pointer;
}
.notes-chip .count { background: rgba(139, 123, 255, .25); border-radius: var(--r-pill);
                     padding: 0 6px; font-size: 10px; }
.toolbar-divider { width: 1px; height: 22px; background: var(--hairline); margin: 0 6px; }

/* ---- day header rule --------------------------------------------------------- */
/* Jumping to a day (tab tap) must land the header BELOW the sticky chrome,
 * not under it — app.js measures the rail + stage strip into --jump-offset. */
.day-rule { display: flex; align-items: baseline; gap: 10px; scroll-margin-top: var(--jump-offset, 8px); }
.day-rule .day { font-family: var(--font-display); letter-spacing: var(--track-display);
                 font-size: var(--fs-day); color: var(--text-header); }
.day-rule .date { color: var(--text-tertiary); font-size: 10px; font-weight: 700; }
.day-rule .line { flex: 1; height: 1px; background: var(--hairline); }

/* ---- desktop day rail (DT-1) --------------------------------------------------- */
/* ≥720 the dock dies; the rail is its desktop body — sticky under the top of
 * the window, YOU chip jumps to top, tabs scrollspy with the wall. */
.day-rail { display: none; }
@media (min-width: 720px) {
  .day-rail {
    display: flex; align-items: center; gap: 18px;
    position: sticky; top: 0; z-index: 25;
    margin: 4px calc(-1 * var(--sp-gutter)) 0;
    padding: 9px var(--sp-gutter);
    background: rgba(12, 10, 20, .78);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
  }
  /* Same anatomy as the dock (unified 2026-07-12, Kevin note 1.1): your
   * avatar circle, the day tabs, the fest name + sync dot. One component
   * vocabulary, two positions. */
  .day-rail .you { width: 26px; height: 26px; font-size: 10px; position: relative; }
  .day-rail .fest-link { margin-left: auto; }
  .day-rail .rail-days { display: flex; gap: 20px; overflow-x: auto; }
  .day-rail .day-tab {
    font-family: var(--font-display); letter-spacing: var(--track-label);
    font-size: var(--fs-micro); text-transform: uppercase;
    color: var(--text-tertiary); background: none; border: none;
    border-bottom: 2px solid transparent; padding: 2px 0 3px;
    cursor: pointer; flex: none;
  }
  .day-rail .day-tab.active { color: rgb(var(--fest)); border-bottom-color: rgb(var(--fest)); }
}

/* ---- notes ------------------------------------------------------------------- */
.note-row { display: flex; gap: 9px; }
.note-row .avatar { width: 22px; height: 22px; font-size: 9px; }
.bubble { color: var(--text-body); font-size: var(--fs-body); line-height: 1.5; background: var(--card);
          border: 1px solid var(--hairline); border-radius: var(--r-bubble); padding: 9px 11px; flex: 1; }
.bubble.pinned { border-color: var(--notes-stroke); }
.bubble .meta { display: block; color: var(--text-tertiary); font-size: 10px; font-weight: 600; margin-top: 3px; }
.pin-btn { color: var(--text-tertiary); font-size: 11px; font-weight: 700; flex: none;
           align-self: center; background: none; border: none; cursor: pointer; }
.pin-btn.active { color: var(--tonal-text); }
.composer { display: flex; gap: 8px; align-items: center; }
.composer input {
  flex: 1; background: var(--card); border: 1px solid var(--border-input); border-radius: var(--r-card);
  padding: 10px 12px; color: var(--text-primary); font-size: 12.5px; font-family: var(--font-ui); outline: none;
}
.composer input::placeholder { color: var(--text-tertiary); }

/* ---- bottom sheet / desktop dialog (DT-2) --------------------------------------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--dock); border-radius: var(--r-sheet);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .5);
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  max-height: 72vh; overflow-y: auto;
  animation: sheetIn .15s ease;
}
@keyframes sheetIn { from { opacity: 0; transform: scale(.98); } }
.sheet .grabber { width: 36px; height: 4px; border-radius: var(--r-pill);
                  background: var(--border-card); margin: 0 auto; flex: none;
                  touch-action: none; cursor: grab; padding: 6px 30px; background-clip: content-box; }
.sheet .sheet-title { font-family: var(--font-display); letter-spacing: .04em;
                      font-size: 19px; color: var(--text-header); }
.sheet .sheet-close { width: 30px; height: 30px; flex: none; border-radius: var(--r-pill);
                      background: var(--card); border: 1px solid var(--border-card);
                      color: var(--text-secondary); font-size: 12px; cursor: pointer;
                      display: inline-flex; align-items: center; justify-content: center; }
.note-action { background: none; border: none; padding: 0; cursor: pointer;
               color: var(--text-tertiary); font-size: 10px; font-weight: 700;
               text-decoration: underline; text-underline-offset: 2px; }
/* A full-width strip pinned to the bottom of a 1440px window is a phone
 * pattern stretched — ≥720 the same surface is a centered dialog. */
@media (min-width: 720px) {
  .sheet {
    inset: auto; left: 50%; top: 50%; right: auto; bottom: auto;
    translate: -50% -50%;
    width: min(560px, 92vw); max-height: 80vh;
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  }
  .sheet .grabber { display: none; }
}

/* ---- dock (mobile only) ------------------------------------------------------ */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--dock); border-top: 1px solid var(--hairline);
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px;
}
.dock .you { width: 26px; height: 26px; font-size: 10px; position: relative; }
/* Centered when they fit, scrollable from the START when they don't — plain
 * justify-content:center clips the first tabs unreachably at 390px (AX-6). */
.dock .days { flex: 1; display: flex; gap: 24px; overflow-x: auto; }
.dock .day-tab:first-child { margin-left: auto; }
.dock .day-tab:last-child { margin-right: auto; }
.dock .day-tab { font-weight: 700; font-size: 12px; padding-bottom: 3px;
                 border-bottom: 2px solid transparent; color: var(--text-tertiary);
                 background: none; border-top: none; border-left: none; border-right: none;
                 cursor: pointer; font-family: var(--font-ui); flex: none; position: relative; }
/* 44px touch floor on coarse pointers without moving a pixel of layout:
 * expand the hit area, not the element (AX-6). */
@media (pointer: coarse) {
  .dock .you::after, .dock .day-tab::after, .gear-btn::after, .pin-btn::after,
  .back-btn::after, .fest-link::after {
    content: ''; position: absolute; inset: -10px;
  }
  .gear-btn, .pin-btn, .back-btn, .fest-link { position: relative; }
}
.dock .day-tab .num { font-size: 9px; font-weight: 600; margin-left: 2px; }
.dock .day-tab.active { color: rgb(var(--fest)); font-weight: 800; border-bottom-color: rgb(var(--fest)); }
/* Shared between dock and day rail (one component, two positions). */
.fest-link { display: inline-flex; align-items: center; gap: 6px; background: none;
             border: none; cursor: pointer; flex: none; }
.fest-link .fest-name { font-family: var(--font-display); letter-spacing: .04em;
                        font-size: 13px; color: rgb(var(--fest)); }
.you-avatar { border: 1.5px solid #fff; background: none; cursor: pointer; padding: 0; }
.dock.hidden { display: none; }
@media (min-width: 720px) { .dock { display: none; } } /* desktop has no dock */

/* class names match js/sync.js setSyncStatus: sync-online|syncing|offline|error */
.sync-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--sync-ok); display: inline-block; }
.sync-dot.sync-syncing { background: var(--sync-syncing); }
.sync-dot.sync-offline, .sync-dot.sync-error { background: var(--sync-offline); }

/* ---- settings ---------------------------------------------------------------- */
.micro-label { color: var(--text-tertiary); font-size: var(--fs-micro); font-weight: 800;
               letter-spacing: var(--track-label); text-transform: uppercase; }
.settings-card { background: var(--card); border: 1px solid var(--border-card);
                 border-radius: var(--r-settings); padding: 14px; }
.settings-card.current { border: 1.5px solid rgba(var(--fest), .55); }
.settings-list { background: var(--card); border: 1px solid var(--border-card);
                 border-radius: var(--r-settings); overflow: hidden; }
.settings-list .list-row { padding: 13px 14px; display: flex; align-items: center; gap: 10px;
                           border-bottom: 1px solid var(--hairline); }
.settings-list .list-row:last-child { border-bottom: none; }
.list-row .row-title { color: var(--text-primary); font-weight: 700; font-size: 13.5px; }
.list-row .row-sub { color: var(--text-tertiary); font-size: 11px; font-weight: 600; }
.list-row .chev { color: var(--text-tertiary); margin-left: auto; }

/* fest row (landing + settings "other festivals") — padding rides the gutter */
.fest-row { display: flex; align-items: center; gap: 11px; background: var(--card);
            border: 1px solid var(--border-card); border-radius: var(--r-settings);
            padding: 12px clamp(14px, 1.6vw, 20px); cursor: pointer; }
.fest-row .fest-name { font-family: var(--font-display); letter-spacing: .04em;
                       font-size: 16px; white-space: nowrap; }
.fest-row .fest-name .yr { font-size: .65em; opacity: .75; }
.fest-row .fest-dates { color: var(--text-tertiary); font-size: 10.5px; font-weight: 600; margin-top: 2px;
                        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fest-row .chev { color: var(--text-tertiary); flex: none; }
.dashed-row { display: flex; align-items: center; justify-content: center; gap: 8px;
              border: 1.5px dashed var(--border-input); border-radius: var(--r-settings);
              padding: 11px; color: var(--text-secondary); font-weight: 700; font-size: 12px;
              background: none; cursor: pointer; width: 100%; }

/* ---- set-times grid ----------------------------------------------------------- */
/* The hour rail lives OUTSIDE the horizontal scroller (CORE-2): stages swipe,
 * the time axis never leaves the screen. Rail + grid share the exact same
 * grid-template-rows string (set inline) so hours align with cards.
 * All day scrollers mirror ONE scrollLeft (wall.js wireTimesScrollSync), and
 * the sticky stage strip above carries the column names for every day —
 * scroll-snap was removed with the per-day header rows: snapping any one
 * scroller would fight the mirrored position. */
.times-wrap { display: flex; align-items: flex-start; }
.times-rail { display: grid; width: 40px; flex: none; row-gap: 4px; }
.times-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
                flex: 1; min-width: 0; }
/* The timetable wall goes full-viewport ≥720 (DT-5, the run's one aesthetic
 * risk): a real festival timetable pinned flat. The rail column stays aligned
 * with the shell's left edge; body overflow-x:clip guarantees no page wiggle.
 * The stage strip mirrors the exact same geometry or its columns would sit
 * offset from the day grids below it. */
@media (min-width: 720px) {
  .times-wrap {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    /* Asymmetric on purpose (audit 3.2): the LEFT edge aligns with the shell
     * (reading rhythm holds), the RIGHT runs to the window minus a gutter —
     * "as many columns as fit the window" (F5), not re-capped at shell-max. */
    padding-inline: max(var(--sp-gutter), calc(50vw - var(--shell-max) / 2)) var(--sp-gutter);
    box-sizing: border-box;
  }
}
.times-grid { display: grid; gap: 4px; min-width: 100%; } /* columns set inline: repeat(n, minmax(150px,1fr)) */
.stage-head { font-family: var(--font-display); letter-spacing: var(--track-display);
              color: rgb(var(--fest)); font-size: 12.5px;
              min-width: 0; padding: 0 8px; text-align: center;
              line-height: 32px; height: 32px; box-sizing: border-box;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
              background: var(--card); border-radius: var(--r-card); }

/* The sticky stage strip (one for the whole page): stage names pin below the
 * sticky chrome while every day scrolls under them. Lives outside the
 * horizontal scrollers — position:sticky can't escape an overflow container
 * (same physics that put the hour rail outside the scroller). --rail-h is
 * measured by app.js: the day rail's height on desktop, 0 on mobile. */
.stage-strip {
  position: sticky; top: var(--rail-h, 0px); z-index: 24;
  background: rgba(12, 10, 20, .88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding-bottom: 4px;
}
.stage-strip .strip-rail { width: 40px; flex: none; } /* aligns with .times-rail */
.stage-strip .times-scroll { scrollbar-width: none; }
.stage-strip .times-scroll::-webkit-scrollbar { display: none; }
.hour-label { text-align: right; padding-right: 6px; font-size: 9.5px;
              color: var(--text-tertiary); font-weight: 600; position: relative; top: -7px; }
/* Everything-else column (ST-2): activities + stage-less sets, chronological.
 * Quiet by design — it shares the grid but never competes with the stages. */
.ee-col { display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-height: 0; }
.ee-item { display: flex; flex-direction: column; gap: 1px; background: var(--card);
           border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 6px 9px; }
.ee-item .ee-time { color: var(--text-tertiary); font-size: 9px; font-weight: 700; }
.ee-item .ee-name { color: var(--text-body); font-size: 11.5px; font-weight: 600; line-height: 1.25; }
.ee-item .ee-venue { color: var(--text-tertiary); font-size: 9.5px; font-weight: 600; }

/* ---- wall grid + undo toast ---------------------------------------------------- */
/* Density scales with the window (DT-3): as many ~176px columns as fit, so a
 * 1080px shell breathes at 5-6 columns instead of stretching 4. */
.wall-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 720px) { .wall-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 7px; } }
@media (min-width: 1100px) { .wall-grid { gap: 9px; } }
.undo-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 50;
  background: var(--dock); border: 1px solid var(--border-emphasis);
  border-radius: var(--r-row); padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  color: var(--text-body); font-size: 12.5px; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
}
.undo-btn { background: none; border: none; color: var(--tonal-text);
            font-weight: 800; font-size: 12.5px; cursor: pointer; }

/* ---- misc -------------------------------------------------------------------- */
.back-btn { color: var(--text-secondary); font-size: 16px; background: none; border: none; cursor: pointer; }
.screen-title { font-family: var(--font-display); letter-spacing: var(--track-display);
                font-size: 18px; color: var(--text-header); }
.seg { border: 1px solid var(--border-input); color: var(--text-secondary); font-weight: 600;
       font-size: 12px; padding: 7px 13px; border-radius: var(--r-pill); background: none; cursor: pointer; }
.seg.active { background: rgba(var(--fest), .14); color: #fff; border-color: transparent; font-weight: 700; }