/* ==========================================================================
   Subtrack — Accessibility & HIG refinement pass
   Loaded LAST and intentionally UNLAYERED so it wins the cascade over the
   base / theme / refinement @layers. Every rule here maps to a specific
   review item (see inline tags). It never touches business logic or the
   editorial serif type family (that choice is kept by request).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Item 6 · Focus is a single high-contrast keyline, never the brand orange.
   Dark ink on the light canvas; light ink on the dark editor / detail rails.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2.5px solid #14120d;
  outline-offset: 2px;
}
.subscription-card:focus-visible,
.select-control > .select-trigger:focus-visible,
.subscription-dialog :where(input, select, textarea):focus-visible,
.subscription-dialog .form-select-control > .select-trigger:focus-visible,
.subscription-dialog .date-picker-trigger:focus-visible,
.subscription-dialog .field input:focus-visible,
.subscription-dialog .field select:focus-visible,
.subscription-dialog .field textarea:focus-visible {
  outline: 2.5px solid #14120d;
  outline-offset: 2px;
}
/* Dark surfaces: keep the keyline but flip it to light for contrast. */
.subscription-dialog .dialog-head :where(button, a, [tabindex]):focus-visible,
.subscription-dialog .dialog-head > .dialog-close:focus-visible,
.detail-dialog .detail-cover :where(button, a, [tabindex]):focus-visible {
  outline: 2.5px solid #fdfbf5;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Item 2 · No functional text below ~11.5px. Raise every sub-11px token to a
   legible floor while preserving the visual hierarchy above it.
   -------------------------------------------------------------------------- */
.flip-ledger-code,
.flip-project span,
.flip-remaining > span,
.flip-ledger-foot,
.flip-ledger-foot strong,
.flip-ledger-category { font-size: 0.72rem; }

.detail-facts div dt,
.detail-dialog .detail-facts div dt,
.detail-dialog .detail-history > header strong,
.detail-dialog .detail-price::before,
.detail-dialog .detail-price.is-pending::before,
.detail-dialog .detail-price[data-pending="true"]::before { font-size: 0.72rem; }

.subscription-dialog .date-calendar-title-meta,
.subscription-dialog .date-calendar-year-field span,
.subscription-dialog .date-calendar-jump-hint,
.subscription-dialog .date-calendar-weekdays span,
.subscription-dialog .color-field .color-value small,
.subscription-dialog .color-field .color-edit-hint,
.history-edit-field { font-size: 0.72rem; }

.subscription-dialog .dialog-head .section-kicker,
.subscription-dialog .dialog-head::after { font-size: 0.74rem; }

/* --------------------------------------------------------------------------
   Item 3 · Information that was revealed only on :hover is now always shown,
   so touch users never lose the billing unit or the category.
   -------------------------------------------------------------------------- */
.card-amount small,
.card-face-front .card-amount small,
.subscription-card .card-header .card-category,
.card-face-front .card-header .card-category {
  opacity: 1 !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   Item 4 · Never lay noise over readable text, and lift low-contrast greys to
   meet WCAG AA on the warm canvas.
   -------------------------------------------------------------------------- */
.detail-content::before,
.detail-dialog .detail-content::before { content: none !important; }

.card-pending,
.card-schedule,
.card-face-front .card-schedule,
.detail-facts div dt,
.detail-dialog .detail-facts div dt,
.detail-note,
.detail-dialog .detail-note,
.detail-history > header strong,
.detail-dialog .detail-history > header strong,
.detail-dialog .detail-history > #detailHistoryList,
.detail-history > #detailHistoryList,
.field-hint,
.subscription-dialog .field-hint,
.detail-dialog .detail-price::before,
.detail-dialog .detail-facts div dt,
.select-option { color: #5f584f; }

.card-muted,
.subscription-card { --card-muted: #5f584f; }

/* --------------------------------------------------------------------------
   Item 10 · Italics are for emphasis/quotation, not for labels, hints,
   statuses, placeholders or timestamps. Normalise functional copy.
   -------------------------------------------------------------------------- */
.eyebrow,
.section-kicker,
.stat-head,
.stat-card > div > p:not(.stat-head p),
.field > span:first-child,
.field legend,
.field-hint,
.field-error,
.card-category,
.card-pending,
.renewal-copy span,
.renewal-price span,
.renewal-empty,
.status-group-head span,
.status-group-head small,
.status-group-head p,
.insight-head,
.overview-upcoming,
.insight-total span,
.detail-note,
.detail-dialog .detail-note,
.detail-facts dt,
.detail-history header span,
.detail-history header strong,
.flip-ledger-category,
.flip-remaining em,
.footer,
.reset-button,
.text-link,
.subscription-dialog .dialog-head .section-kicker,
input::placeholder,
textarea::placeholder,
.field input::placeholder,
.field textarea::placeholder { font-style: normal; }

/* --------------------------------------------------------------------------
   Item 9 · Text must not be clipped mid-glyph when it grows. Relax the hard
   pixel locks on the title so it can breathe to a second line.
   -------------------------------------------------------------------------- */
.card-primary h3,
.card-face-front .card-primary h3 {
  height: auto;
  max-height: none;
  line-height: 1.25;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.subscription-card .card-primary,
.card-face-front .card-primary { height: auto; }

/* --------------------------------------------------------------------------
   Item 7 · Deference: dial back purely decorative material so it never
   competes with content. Noise grain and ambient blooms become whisper-quiet.
   -------------------------------------------------------------------------- */
.noise { opacity: 0.02 !important; }
.hero-visual::before { opacity: 0.5; }
.hero-visual::after { opacity: 0.35; }

/* --------------------------------------------------------------------------
   Item 8 · Large real-time gaussian blur is a mobile perf tax. Cap the biggest
   backdrop blurs to a sane radius; the glass read survives.
   -------------------------------------------------------------------------- */
.detail-dialog {
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.detail-cover,
.detail-dialog .detail-cover {
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

/* --------------------------------------------------------------------------
   Item 15 · Status marks convey state, they don't breathe. Kill any ambient
   pulsing/haloing so nothing animates indefinitely.
   -------------------------------------------------------------------------- */
.ov-live i,
.pulse-symbol,
.local-pill i {
  animation: none !important;
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Item 11 · The detail cover rejoins the warm light system instead of reading
   as an unrelated dark landing-page banner. Text flips back to ink.
   -------------------------------------------------------------------------- */
.detail-dialog .detail-cover {
  color: #fffaf2;
  background:
    radial-gradient(15rem 17rem at 112% -8%, color-mix(in oklab, var(--detail-color) 62%, transparent), transparent 68%),
    radial-gradient(13rem 16rem at -22% 108%, color-mix(in oklab, var(--detail-color) 34%, transparent), transparent 72%),
    linear-gradient(155deg, color-mix(in oklab, var(--detail-color) 20%, #25251f) 0%, #1d1e1a 72%, #191a17 100%);
}
.detail-dialog .detail-cover > span {
  color: rgba(255,250,242,.82);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.detail-dialog .detail-cover > strong {
  color: #fffaf2;
  text-shadow: 0 18px 34px rgba(0,0,0,.24);
}
.detail-dialog .detail-cover > i {
  background: color-mix(in oklab, var(--detail-color) 70%, #fff);
  box-shadow: 0 0 14px color-mix(in oklab, var(--detail-color) 40%, transparent);
}
.detail-dialog .detail-cover::before {
  border-color: rgba(255,255,255,.11);
  box-shadow:
    0 0 0 30px rgba(255,255,255,.025),
    0 0 0 62px rgba(255,255,255,.018);
}
/* Decorative brand watermark: keep it faint and clearly non-informational. */
.detail-dialog .detail-cover::after {
  color: rgba(255,250,242,.46);
}
@media (max-width: 700px) {
  .detail-dialog .detail-cover > strong { color: #fffaf2; }
  .detail-dialog .detail-close {
    color: rgba(255,250,242,.82);
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
  }
  .detail-dialog .detail-close:hover {
    color: #fff;
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.15);
  }
}

/* Item 11 (cont.) · The subscription editor's identity rail also rejoins the
   light system, so opening the editor no longer flips to a dark banner. */
.subscription-dialog .dialog-head {
  color: #fffaf2;
  background:
    radial-gradient(18rem 16rem at 115% 8%, color-mix(in oklab, var(--editor-color) 54%, transparent), transparent 72%),
    linear-gradient(158deg, color-mix(in oklab, var(--editor-color) 18%, #292821) 0%, #20211d 72%, #191a17 100%);
  box-shadow: inset -1px 0 rgba(255,255,255,.05);
}
.subscription-dialog .dialog-head h2 {
  color: #fffaf2;
  text-shadow: 0 18px 34px rgba(0,0,0,.24);
}
.subscription-dialog .dialog-head .section-kicker {
  color: rgba(255,250,242,.82);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
}
.subscription-dialog .dialog-head::after {
  color: rgba(255,250,242,.46);
}
.subscription-dialog .dialog-head > .dialog-close {
  color: rgba(255,250,242,.82);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 1px rgba(255,255,255,.09);
}
.subscription-dialog .dialog-head > .dialog-close:hover {
  color: #fff;
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.15);
}