/* ==========================================================================
   Tapebook look (operator-approved mockup 3, 2026-09-25)

   The default look. Every rule is scoped to :root[data-look="tapebook"], so
   the classic look (Settings -> Appearance -> Look -> Classic) renders
   exactly as before with the attribute absent. Loaded after every component
   and view stylesheet it adjusts, and before print.css. It replaces the
   short-lived Studio look (a stored "studio" preference reads as this one).

   Decisions it encodes (BRIEF-WYGLADU-TAPEBOOK.md, mockups 1-3):
   - windows are neutral (mockup 1's, NOT the website's warm ink - "za dużo
     różu") and, since 2026-09-26, solid: the page / sidebar / window /
     inner-tile steps of the classic look, a top-lit fill and rim, a soft
     long shadow and a slate + rose ambient. The first cut's near-transparent
     windows "merged" into the page ("mroczna i zlewająca się");
   - one calm, friendly face, Figtree, for headings, text, figures and
     labels (since 2026-09-26; Syne, Host Grotesk and Geist Mono read
     "too technical, robotic"); small labels are plain sentence-case text,
     not letter-spaced capitals; no italics anywhere;
   - the house radii 6 / 10 / 14 / 18 / 22: controls are rounded rectangles,
     not pills; the active option and the primary action are solid ink;
   - meanings in quieter tones than the RiskDeck panel ("zbyt jaskrawe"):
     profit, loss, warning (near a limit), open risk - and nothing else;
   - pink only as a small accent (the active menu item's dot), the house
     amber only on the little square before an eyebrow label.
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree/Figtree-wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens: both themes ---- */
:root[data-look="tapebook"] {
  /* One face for everything. The mono token points at it too: in this look
     every "mono" use is a small label or tag, never code, and the operator
     wants those calm, not typewritten. Figures read tabular wherever the
     component asks for tabular-nums (Figtree has tnum). */
  --font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-family-display: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-family-heading: var(--font-family-display);
  --font-family-mono: var(--font-family);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;

  --tb-amber: #f2b25c;
  --tb-rose: #e6a5bf;
}

/* ---- Tokens: dark ---- */
:root[data-look="tapebook"][data-theme="dark"] {
  /* The classic look's steps (page, sidebar, window, raised), which the
     operator called right ("kolory okien, tła, kontrasty"), pulled further
     apart for a polished finish ("jeszcze większy kontrast ... efekt
     polish"): a deeper page, brighter windows. The transparent windows of
     the first cut merged into the page. */
  --color-bg: #09090c;
  --color-bg-elevated: #0e0e12;
  /* Solid, for everything that floats over content (dropdowns, drawer,
     modals, tooltips). Resting windows use --tb-window. */
  --color-surface: #1e1e24;
  --color-surface-raised: #26262d;
  --color-surface-hover: #2b2b32;
  --color-border: rgba(255, 255, 255, 0.11);
  --color-border-strong: rgba(255, 255, 255, 0.2);

  --color-text-primary: #f4f3f1;
  --color-text-secondary: rgba(244, 243, 241, 0.74);
  --color-text-tertiary: rgba(244, 243, 241, 0.56);

  /* The accent is the ink: links, today, focus, the active option. */
  --color-accent: #f4f3f1;
  --color-accent-rgb: 244, 243, 241;
  --color-accent-soft: rgba(244, 243, 241, 0.09);
  --color-accent-fill: #f4f3f1;
  --color-on-accent: #0b0b0c;
  --color-accent-2: #f4f3f1;
  --color-accent-2-rgb: 244, 243, 241;

  /* A window is a solid step well above the page, polished: a sheen that
     fades from 6% white over the top third, a bright 1px rim on the top
     edge over a faint all-round one, a tight contact shadow and a long soft
     one. Inner tiles (today, the calendar, the active menu item) are one
     step further up. */
  --tb-window: #1c1c22;
  --tb-window-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 38%, rgba(255, 255, 255, 0) 70%);
  --tb-window-2: #26262d;
  --tb-window-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.015),
    0 1px 2px rgba(0, 0, 0, 0.6), 0 18px 40px -16px rgba(0, 0, 0, 0.9);
  --tb-window-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 1px 2px rgba(0, 0, 0, 0.6), 0 24px 52px -16px rgba(0, 0, 0, 1);
  --tb-open: #8fbfe6;

  --surface-gradient: none;
  /* Light in the room, as in the classic look, without its blue (blue means
     open risk here): a cool slate field top left, the house rose bottom
     right. */
  --app-ambient:
    radial-gradient(1100px 760px at 14% -10%, rgba(150, 165, 205, 0.12), transparent 62%),
    radial-gradient(1000px 700px at 104% 106%, rgba(230, 165, 191, 0.08), transparent 62%);
  --glass-bg: rgba(20, 20, 24, 0.74);
  --glass-border: rgba(255, 255, 255, 0.13);
  --shadow-sm: none;
  --shadow-md: none;
  --surface-highlight: transparent;
  --surface-lowlight: transparent;
}

/* Meanings only where the Colours setting is "Colour" - the Minimal
   palette's own greys must win, as they do in the classic look. */
:root[data-look="tapebook"][data-theme="dark"]:not([data-palette="minimal"]) {
  --color-profit: #6cc596;
  --color-profit-soft: rgba(108, 197, 150, 0.12);
  --color-loss: #e37b72;
  --color-loss-soft: rgba(227, 123, 114, 0.12);
  --color-warning: #deaa6a;
  --color-warning-soft: rgba(222, 170, 106, 0.12);
  /* Account identity: no green, red, blue, violet or amber - those are
     profit, loss, open risk, protection and the house accent. */
  --acct-1: #ede4d6;
  --acct-2: #7fc7c4;
  --acct-3: #e6a5bf;
  --acct-4: #a99f98;
  --acct-5: #c7b299;
  --acct-6: #b9b3c9;
  --acct-7: #8fa9a6;
  --acct-8: #cfa3a0;
}

/* ---- Tokens: light ---- */
:root[data-look="tapebook"][data-theme="light"] {
  /* A cool page, a step deeper than the classic one so the white windows
     stand clear of it; the sidebar a step lighter than the page. */
  --color-bg: #e6e9ef;
  --color-bg-elevated: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-raised: #f4f5f8;
  --color-surface-hover: #eceef2;
  --color-border: rgba(15, 20, 30, 0.1);
  --color-border-strong: rgba(15, 20, 30, 0.17);

  --color-text-primary: #111113;
  --color-text-secondary: rgba(17, 17, 19, 0.7);
  /* 0.62: 4.9:1 on the page, 5.3:1 on a window - the 11px mono labels. */
  --color-text-tertiary: rgba(17, 17, 19, 0.62);

  --color-accent: #111113;
  --color-accent-rgb: 17, 17, 19;
  --color-accent-soft: rgba(17, 17, 19, 0.07);
  --color-accent-fill: #111113;
  --color-on-accent: #ffffff;
  --color-accent-2: #111113;
  --color-accent-2-rgb: 17, 17, 19;

  --tb-window: #ffffff;
  --tb-window-image: none;
  --tb-window-2: #f4f5f8;
  --tb-window-shadow: 0 1px 2px rgba(16, 22, 36, 0.07), 0 3px 8px -2px rgba(16, 22, 36, 0.05),
    0 18px 40px -16px rgba(16, 22, 36, 0.22);
  --tb-window-shadow-hover: 0 1px 2px rgba(16, 22, 36, 0.08), 0 4px 10px -2px rgba(16, 22, 36, 0.06),
    0 26px 52px -16px rgba(16, 22, 36, 0.28);
  --tb-open: #2f6fa8;
  --tb-rose: #b8577e;
  --tb-amber: #c98a2e;

  --surface-gradient: none;
  --app-ambient:
    radial-gradient(1100px 760px at 14% -10%, rgba(120, 140, 190, 0.06), transparent 62%),
    radial-gradient(1000px 700px at 104% 106%, rgba(184, 87, 126, 0.06), transparent 62%);
  --glass-bg: rgba(255, 255, 255, 0.76);
  --glass-border: rgba(0, 0, 0, 0.1);
  --shadow-sm: none;
  --shadow-md: none;
  --surface-highlight: transparent;
  --surface-lowlight: transparent;
}

:root[data-look="tapebook"][data-theme="light"]:not([data-palette="minimal"]) {
  /* Quiet but AA on the page (ambient included, 4.5-4.9:1) and on a window (5.8-6.3:1). */
  --color-profit: #266c4a;
  --color-profit-soft: rgba(38, 108, 74, 0.1);
  --color-loss: #ad4239;
  --color-loss-soft: rgba(179, 71, 62, 0.09);
  --color-warning: #825819;
  --color-warning-soft: rgba(130, 88, 25, 0.1);
  --acct-1: #7a7064;
  --acct-2: #2f8a86;
  --acct-3: #b8577e;
  --acct-4: #857a72;
  --acct-5: #957a55;
  --acct-6: #6f6890;
  --acct-7: #4f7d79;
  --acct-8: #a0625e;
}

/* Minimal: identity by luminance, as in the classic minimal palette, but the
   accent is ink here - so the ramp is restated instead of starting at it. */
:root[data-look="tapebook"][data-palette="minimal"] {
  --acct-1: rgba(255, 255, 255, 0.98);
  --acct-2: rgba(255, 255, 255, 0.78);
  --acct-3: rgba(255, 255, 255, 0.62);
  --acct-4: rgba(255, 255, 255, 0.5);
  --acct-5: rgba(255, 255, 255, 0.41);
  --acct-6: rgba(255, 255, 255, 0.34);
  --acct-7: rgba(255, 255, 255, 0.28);
  --acct-8: rgba(255, 255, 255, 0.22);
}

:root[data-look="tapebook"][data-palette="minimal"][data-theme="light"] {
  --acct-1: rgba(0, 0, 0, 0.9);
  --acct-2: rgba(0, 0, 0, 0.72);
  --acct-3: rgba(0, 0, 0, 0.58);
  --acct-4: rgba(0, 0, 0, 0.47);
  --acct-5: rgba(0, 0, 0, 0.39);
  --acct-6: rgba(0, 0, 0, 0.32);
  --acct-7: rgba(0, 0, 0, 0.26);
  --acct-8: rgba(0, 0, 0, 0.2);
}

/* ---- Type ---- */
:root[data-look="tapebook"] :is(h1, h2, h3) {
  font-family: var(--font-family-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Small labels and tags read as plain text: sentence case, no tracking, a
   size the eye does not have to work for. The shared components set these
   in letter-spaced capitals (the classic look keeps that); here every one
   of them is undone in one place. */
:root[data-look="tapebook"] :is(.tb-eyebrow, .tb-label, .card__label, .data-table th,
  .detail-section__title, .detail-drawer__title, .acct-nav__head, .acct-crumb, .calendar-weekdays span,
  .day-journal__kind, .review-takeaway__date, .plan-day__date, .ac-risk__state, .orbit__limit,
  .daystrip__labels span, .trade-list__dir, .trade-list__res, .acct-id__meta span, .acct-tile__ccy,
  .demo-tag, .sim-slider__value) {
  font-family: var(--font-family);
  letter-spacing: 0;
  text-transform: none;
}

/* The labels above figures and over table columns. */
:root[data-look="tapebook"] :is(.tb-eyebrow, .tb-label, .card__label, .data-table th,
  .detail-section__title, .detail-drawer__title, .acct-nav__head, .review-takeaway__date, .plan-day__date) {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-tertiary);
}

/* Tags (direction, result, currency, state, demo): a step up from the
   9.5-10.5px their capitals were set in. */
:root[data-look="tapebook"] :is(.trade-list__dir, .trade-list__res, .acct-id__meta span, .acct-tile__ccy,
  .ac-risk__state, .demo-tag, .acct-crumb, .day-journal__kind) {
  font-size: 12px;
  font-weight: 500;
}

:root[data-look="tapebook"] :is(.calendar-weekdays span, .daystrip__labels span) {
  font-size: 12px;
}

:root[data-look="tapebook"] .orbit__limit {
  font-size: 11px;
  text-transform: none;
}

/* A pseudo-element cannot sit inside :is(), so the stacked table's cell
   labels (mobile) get their own rule. */
:root[data-look="tapebook"] .data-table td[data-label]::before {
  font-family: var(--font-family);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-tertiary);
}

/* The Portfolio tile's weekly-limit label stays a step under the figure
   beside it. */
:root[data-look="tapebook"] .acct-tile__week-row .tb-label {
  font-size: 11.5px;
}

/* The house eyebrow: an amber square before the label. */
:root[data-look="tapebook"] .tb-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  background: var(--tb-amber);
}

/* ---- Shell ---- */
/* The sidebar keeps the classic fill (--color-bg-elevated): a column a step
   off the page reads as the frame around the windows. */
:root[data-look="tapebook"] .sidebar {
  border-right-color: var(--color-border);
}

:root[data-look="tapebook"] .topbar {
  background: var(--glass-bg);
  border-bottom-color: var(--color-border);
}

:root[data-look="tapebook"] .topbar__title {
  font-family: var(--font-family);
  font-weight: 500;
  letter-spacing: -0.01em;
}

:root[data-look="tapebook"] .nav-item {
  border-radius: var(--radius-md);
}

:root[data-look="tapebook"] .nav-item.is-active {
  background: var(--tb-window-2);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

:root[data-look="tapebook"] .nav-item.is-active .nav-item__icon {
  color: var(--color-text-primary);
}

/* The one pink accent: a dot on the page you are on. */
:root[data-look="tapebook"] .nav-item.is-active::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--tb-rose);
}

/* Collapsed to icons (desktop only - the drawer below 881px is never
   collapsed): the dot would pull the icon off-centre. */
@media (min-width: 881px) {
  :root[data-look="tapebook"] #app.sidebar-collapsed .nav-item.is-active::after {
    display: none;
  }
}

/* The house signet replaces the app artwork: app.js renders both (or the
   fallback glyph plus the signet when the artwork file is missing), and this
   look shows only the signet. */
:root[data-look="tapebook"] .sidebar__brand-mark {
  width: auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

:root[data-look="tapebook"] .sidebar__brand-mark:has(.brand-signet) > :not(.brand-signet) {
  display: none;
}

:root[data-look="tapebook"] .brand-signet {
  display: block;
  height: 30px;
  width: auto;
  color: var(--color-text-primary);
}

:root[data-look="tapebook"] .sidebar__brand-name {
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.03em;
}

:root[data-look="tapebook"] .brand-name__accent {
  color: var(--color-text-tertiary);
  -webkit-text-fill-color: currentColor;
  background: none;
}

/* ---- Windows: a solid step above the page, lit from the top edge ---- */
:root[data-look="tapebook"] .card,
:root[data-look="tapebook"] :is(.acct-tile, .attn-card, .attn-clear) {
  box-shadow: var(--tb-window-shadow);
}

:root[data-look="tapebook"] .card {
  background-color: var(--tb-window);
  background-image: var(--tb-window-image);
}

:root[data-look="tapebook"] .card--flat {
  box-shadow: none;
}

:root[data-look="tapebook"] .card--glass {
  background: var(--glass-bg);
}

:root[data-look="tapebook"] .card--interactive:hover {
  box-shadow: var(--tb-window-shadow-hover);
  transform: none;
  border-color: var(--color-border-strong);
}

/* The Portfolio's clickable windows settle deeper under the pointer. */
:root[data-look="tapebook"] :is(.acct-tile, .attn-card:not(.attn-card--static)) {
  transition: border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

:root[data-look="tapebook"] :is(.acct-tile, .attn-card:not(.attn-card--static)):hover {
  box-shadow: var(--tb-window-shadow-hover);
}

/* The chart card's glow goes. */
:root[data-look="tapebook"] .chart-card::before {
  display: none;
}

/* ---- Buttons: rounded rectangles, the primary one in ink ---- */
:root[data-look="tapebook"] .btn {
  border-radius: var(--radius-md);
}

:root[data-look="tapebook"] .btn--primary,
:root[data-look="tapebook"] .btn--primary:hover {
  background: var(--color-accent-fill);
  color: var(--color-on-accent);
  box-shadow: none;
}

:root[data-look="tapebook"] .btn--primary:hover {
  opacity: 0.9;
}

:root[data-look="tapebook"] .btn--secondary {
  background: transparent;
  border-color: var(--color-border-strong);
}

:root[data-look="tapebook"] .btn--secondary:hover {
  background: var(--color-surface-hover);
}

:root[data-look="tapebook"] .btn--icon {
  border-radius: var(--radius-md);
}

/* ---- Switches: the active option is solid ink ---- */
:root[data-look="tapebook"] .pill-toggle,
:root[data-look="tapebook"] .segmented {
  background: var(--glass-bg);
  border-color: var(--color-border-strong);
  border-radius: 12px;
  box-shadow: none;
}

:root[data-look="tapebook"] .pill-toggle__opt {
  border-radius: 8px;
  color: var(--color-text-secondary);
}

:root[data-look="tapebook"] .pill-toggle__opt:hover {
  color: var(--color-text-primary);
}

:root[data-look="tapebook"] .pill-toggle__opt.is-active {
  background: var(--color-accent-fill);
  color: var(--color-on-accent);
}

:root[data-look="tapebook"] .segmented__thumb {
  background: var(--color-accent-fill);
  border-color: transparent;
  border-radius: 8px;
  box-shadow: none;
}

:root[data-look="tapebook"] .segmented__option {
  border-radius: 8px;
}

:root[data-look="tapebook"] .segmented__option.is-active {
  color: var(--color-on-accent);
}

/* ---- Badges: small tags ---- */
:root[data-look="tapebook"] .badge {
  border-radius: var(--radius-sm);
}

:root[data-look="tapebook"] .badge--accent {
  background: var(--color-accent-fill);
  color: var(--color-on-accent);
}

/* A result is a quiet tag with a thin edge in its own colour (Colour
   palette only - Minimal stays free of hue). */
:root[data-look="tapebook"]:not([data-palette="minimal"]) td[data-label="Result"] .badge--profit {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-profit) 38%, transparent);
}

:root[data-look="tapebook"]:not([data-palette="minimal"]) td[data-label="Result"] .badge--loss {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-loss) 38%, transparent);
}

/* Direction is not a result: LONG/SHORT stays neutral. */
:root[data-look="tapebook"] td[data-label="Dir."] .badge,
:root[data-look="tapebook"] .detail-head__top .badge--dir {
  background: transparent;
  color: var(--color-text-secondary);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

/* ---- KPI icons: small rounded tiles ---- */
:root[data-look="tapebook"] .kpi-card__icon {
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

:root[data-look="tapebook"] .kpi-card__icon--accent {
  background: var(--tb-window-2);
  color: var(--color-text-primary);
}

/* ---- Meters: a thin track in the RiskDeck panel's idiom ---- */
:root[data-look="tapebook"] .meter {
  background: var(--color-surface-raised);
}

:root[data-look="tapebook"] .meter__fill {
  background: var(--color-text-primary);
}

:root[data-look="tapebook"] .meter__fill--warning {
  background: var(--color-warning);
}

:root[data-look="tapebook"] .meter__fill--danger {
  background: var(--color-loss);
}

/* ---- Calendar: rounded tiles ---- */
:root[data-look="tapebook"] .calendar-cell {
  border-radius: var(--radius-lg);
  background: var(--tb-window-2);
  border-color: transparent;
}

:root[data-look="tapebook"] .calendar-cell:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border-strong);
}

:root[data-look="tapebook"] .calendar-cell.is-today {
  border-color: var(--color-text-primary);
  box-shadow: none;
}

:root[data-look="tapebook"] .calendar-cell--profit {
  background-color: color-mix(in srgb, var(--color-profit) 7%, var(--tb-window-2));
  background-image: linear-gradient(to top, color-mix(in srgb, var(--color-profit) 65%, transparent) 0 2px, transparent 2px);
}

:root[data-look="tapebook"] .calendar-cell--loss {
  background-color: color-mix(in srgb, var(--color-loss) 7%, var(--tb-window-2));
  background-image: linear-gradient(to top, color-mix(in srgb, var(--color-loss) 65%, transparent) 0 2px, transparent 2px);
}

:root[data-look="tapebook"] .calendar-grid:not(.calendar-grid--week) .calendar-cell--empty:not(.is-today) {
  background: transparent;
  border-color: var(--color-border-strong);
}

:root[data-look="tapebook"] .calendar-grid:not(.calendar-grid--week) .calendar-cell--empty:not(.is-today):hover {
  background: var(--tb-window-2);
}

/* ---- Fields ---- */
:root[data-look="tapebook"] .cselect__trigger,
:root[data-look="tapebook"] .select:not(.cselect__native),
:root[data-look="tapebook"] .input {
  border-radius: var(--radius-md);
}

:root[data-look="tapebook"] .cselect__option.is-active {
  background: var(--color-surface-hover);
}

:root[data-look="tapebook"] .switch.is-on {
  background: var(--color-accent-fill);
}

:root[data-look="tapebook"] .switch.is-on .switch__thumb {
  background: var(--color-on-accent);
  box-shadow: none;
}

/* The account colours are pale in the dark theme: the chosen swatch's
   tick is dark there, not white (the Minimal greys are pale too). */
:root[data-look="tapebook"][data-theme="dark"] .acct-swatch {
  color: #0b0b0c;
}

:root[data-look="tapebook"][data-theme="dark"] .acct-swatch.is-active svg {
  filter: none;
}

/* ---- Floating layers keep a solid fill and the house radius ---- */
:root[data-look="tapebook"] .modal {
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  border-color: var(--color-border-strong);
}

:root[data-look="tapebook"] .modal__title {
  font-family: var(--font-family-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Field labels: quiet, one weight, the input carries the value. */
:root[data-look="tapebook"] .field__label {
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* ---- Trade detail drawer: the result as the drawer's figure ---- */
:root[data-look="tapebook"] .detail-drawer {
  background: var(--color-surface);
  border-left-color: var(--color-border-strong);
}

:root[data-look="tapebook"] .detail-head__symbol {
  font-family: var(--font-family-display);
  font-weight: 500;
  letter-spacing: -0.01em;
}

:root[data-look="tapebook"] .detail-head__pnl {
  font-family: var(--font-family-display);
  font-size: clamp(2.2rem, 1.8rem + 1vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* DEMO DATA in the house amber, like the website's "simulation" tag. */
:root[data-look="tapebook"] .demo-tag {
  color: var(--tb-amber);
  border-color: color-mix(in srgb, var(--tb-amber) 40%, transparent);
}

/* ---- Mobile bar: glass, rounded rectangle, the + as an ink tile ---- */
:root[data-look="tapebook"] .bottom-nav {
  border-radius: 16px;
  box-shadow: none;
}

:root[data-look="tapebook"] .bottom-nav__fab {
  border-radius: 12px;
  background: var(--color-accent-fill);
  color: var(--color-on-accent);
  box-shadow: none;
}

:root[data-look="tapebook"] .bottom-nav__item.is-active .bottom-nav__label::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 4px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--tb-rose);
}