/* ==========================================================================
   Tapebook look layer
   Rules scoped to :root[data-look="tapebook"] that adjust the shared
   component stylesheets: type tokens (Inter, the stacks of css/variables.css),
   a few component shapes, and the tags and tiles that are not rebuilt yet.
   Loaded after every component and view stylesheet it adjusts, and before
   print.css. Colours, windows and shadows live in css/variables.css and
   css/components/desk.css; radii come from the concentric set 28 / 22 / 12 /
   10 / 999 / 50% (variables.css). Small labels are plain sentence-case text.
   ========================================================================== */

/* ---- Tokens: both themes ---- */
:root[data-look="tapebook"] {
  /* One face for everything (Inter, the stacks of css/variables.css). The
     mono token points at it too: every "mono" use is a small label or tag,
     never code. Figures read tabular wherever the component asks for it. */
  --font-family: "TB Figures", "TB Text", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-family-display: "TB Figures", "TB Text", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-family-heading: var(--font-family-display);
  --font-family-mono: var(--font-family);

}

/* ---- Colour tokens ----
   Since the v12 redesign (2026-10-15) every colour, window and shadow token
   lives in css/variables.css (one look, one palette, four lead colours).
   This file keeps its type, radii and component rules until each view is
   rebuilt. */

/* ---- 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. */
/* The shared sources (dataviz.css, layout.css) are sentence case now; this list
   only undoes the capitals still declared by table.css, journal.css and ledger.css. */
:root[data-look="tapebook"] :is(.data-table th, .detail-section__title, .detail-drawer__title,
  .acct-crumb, .calendar-weekdays span, .day-journal__kind, .review-takeaway__date, .plan-day__date,
  .ac-risk__state, .daystrip__labels span, .trade-list__dir, .trade-list__res, .acct-id__meta span,
  .acct-tile__ccy, .sim-slider__value) {
  font-family: var(--font-family);
  letter-spacing: 0;
  text-transform: none;
}

/* The labels above figures and over table columns: 13px in the secondary
   tone (2026-09-28) - the tertiary tone is kept for hints under a figure. */
: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: var(--fs-caption);
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* Tags and small notes (direction, result, currency, state, demo): a step
   up from the 9.5-11.5px they 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, .attn-card__ccy, .acct-tile__chal) {
  font-size: var(--fs-caption);
  font-weight: 500;
}

/* The corner's words sit under the menu's (14px, medium): smaller and lighter (the operator 6.11). */
:root[data-look="tapebook"] :is(.topnav__tools, .topbar__actions) :is(.demo-tag, .readonly-tag, .access-pill, .access-pill__action) {
  font-size: 11.5px;
  font-weight: 400;
}

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

:root[data-look="tapebook"] .orbit__limit {
  font-size: 12px;
  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: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-secondary);
}

/* 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: var(--fs-caption);
}

/* v12: no eyebrow marker. The eyebrow's words stay (they say where the
   figures come from) as a quiet caption until each view is rebuilt. */
:root[data-look="tapebook"] .tb-eyebrow::before {
  content: none;
}

/* ---- 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 fold button's hover (layout.css) loses to the label colour rule
   above, so it is restated at this specificity. */
:root[data-look="tapebook"] .acct-nav__head:hover {
  color: var(--color-text-secondary);
}

/* The signet and the wordmark are shared with the classic look since
   2026-09-27 (css/layout.css .sidebar__brand-*). */

/* ---- 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) {
  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--interactive:hover {
  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);
}

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

: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);
}

/* ---- Segmented controls ----
   One look for every period / view switch (.segmented, .pill-toggle, .pf-seg,
   .dv-seg): the capsule track and the raised thumb of css/components/form.css
   (--seg-track, --seg-thumb). Nothing here restyles them. */

/* ---- 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. */
:root[data-look="tapebook"] 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"] 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);
}

/* Another month's empty day: no frame, as that month's days with trades. */
:root[data-look="tapebook"] .calendar-grid:not(.calendar-grid--week) .calendar-cell--empty.is-outside:not(.is-today):not(:hover) {
  border-color: transparent;
}

/* ---- Fields ----
   The field's fill, hairline and radius (12) are css/components/form.css's; the
   rule that set radius 12 here is gone so there is one value, not two. The
   switch is Settings' .set-switch; the generic .switch it styled had no user. */
:root[data-look="tapebook"] .cselect__option.is-active {
  background: var(--color-surface-hover);
}

/* ---- 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: var(--fw-figure);
  letter-spacing: var(--ls-figure);
  line-height: 1;
}

/* READ-ONLY DEMO: neutral, not the demo data's amber - it is a state, not a warning. */
:root[data-look="tapebook"] .readonly-tag {
  font-size: var(--fs-caption);
}

@media (max-width: 700px) {
  /* In a phone's compact trade row the direction is plain text on the meta
     line (table.css strips its padding and fill there); the frame above
     came back on top of that, tight against the letters. Only at this
     width: the table carries the class on a desktop too, where the tag
     keeps its frame. */
  :root[data-look="tapebook"] .data-table--compact-rows td[data-label="Dir."] .badge {
    box-shadow: none;
  }
}