/* Screen-specific styles. Tokens only; components live in components.css. */

/* ================================================================ small helpers */
.h-full { height: 100%; }
.pb-3 { padding-bottom: var(--space-3); }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.max-form { max-width: 720px; }
.icon-expand, .icon-theme-dark, .icon-hide, .icon-stop, .icon-unmuted, .icon-unlocked { display: none; }
.app-body[data-sidebar="collapsed"] .icon-collapse { display: none; }
.app-body[data-sidebar="collapsed"] .icon-expand { display: inline-block; }
@media (min-width: 768px) and (max-width: 1279px) {
  .app-body:not([data-sidebar="expanded"]) .icon-collapse { display: none; }
  .app-body:not([data-sidebar="expanded"]) .icon-expand { display: inline-block; }
}
:root[data-theme="light"] .icon-theme-light { display: none; }
:root[data-theme="light"] .icon-theme-dark { display: inline-block; }
[aria-pressed="true"] > .icon-show { display: none; }
[aria-pressed="true"] > .icon-hide { display: inline-block; }
.is-playing .icon-play { display: none; }
.is-playing .icon-stop { display: inline-block; }
.is-unmuted .icon-muted { display: none; }
.is-unmuted .icon-unmuted { display: inline-block; }
[aria-pressed="true"] .icon-locked { display: none; }
[aria-pressed="true"] .icon-unlocked { display: inline-block; }
.btn.is-loading.is-playing .icon-stop { display: none; }

.offline-banner {
  position: fixed;
  left: 50%;
  top: calc(var(--topbar-h) + var(--space-2));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-small);
}

/* Toolbars above lists. */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.toolbar .field, .toolbar .fieldset { margin-top: 0; }
.toolbar__search { width: min(280px, 100%); }
.field--inline { display: flex; align-items: center; gap: var(--space-2); }
.field--inline .select { width: auto; min-width: 140px; }
.field--inline .field__label { color: var(--color-text-muted); white-space: nowrap; }
.row--compact { min-height: 52px; padding-top: var(--space-2); padding-bottom: var(--space-2); }
a.row { color: inherit; }
a.row:hover { background: var(--color-surface-2); text-decoration: none; }
.bullet-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-1); }
.bullet-list li::marker { color: var(--color-text-subtle); }
.generic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.generic-list > li { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.dl--compact { grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); }
.dl--nested { font-size: var(--fs-caption); }
.disclosure > summary { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--fs-small); font-weight: 500; padding: var(--space-1) 0; border-radius: var(--radius-xs); }
.disclosure > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); margin-right: 4px; transition: transform var(--dur-fast) var(--ease-standard); }
.disclosure[open] > summary::before { transform: rotate(45deg); }
.disclosure[open] > summary { margin-bottom: var(--space-3); }
.disclosure--card > summary { display: flex; padding: var(--space-4) var(--space-5); margin: 0; }
.disclosure--card > summary::before { margin-right: var(--space-2); }
.disclosure--card[open] > summary { margin-bottom: 0; }
.disclosure--section > summary { display: flex; width: 100%; justify-content: space-between; gap: var(--space-3); color: var(--color-text); font-size: inherit; }
.disclosure--section > summary::before { order: 2; margin: 0 var(--space-1) 0 0; }
.disclosure--section > summary .card__title { flex: 1; }
.disclosure--section[open] > summary { margin-bottom: 0; }
.cal-table .cal-table__repeat { color: transparent; }
.cal-table .cal-table__repeat::selection { color: inherit; }
.cal-table tr.cal-table__first > * { border-top: 1px solid var(--color-border-strong); }
.cal-more { padding: var(--space-3) var(--space-5) var(--space-4); }
/* Phones: each plan row becomes a small card (day · time / content / format / platform · goal). */
@media (max-width: 767px) {
  .cal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cal-table, .cal-table tbody { display: block; }
  .cal-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); }
  .cal-table tr:first-child { border-top: 0; }
  .cal-table tr.cal-table__first { border-top-color: var(--color-border-strong); }
  .cal-table tr > * { display: block; height: auto; padding: 0 !important; border: 0 !important; background: none !important; position: static; }
  .cal-table .cal-table__repeat { display: none; }
  .cal-table .cal-table__time { flex: 1; color: var(--color-text-muted); }
  .cal-table .cell-actions { order: 1; flex: none; align-self: center; margin-block: -8px; }
  .cal-table .cal-table__content, .cal-table .cal-table__format { order: 2; flex-basis: 100%; }
  .cal-table .cal-table__format { color: var(--color-text-muted); }
  .cal-table .cal-table__format br { display: none; }
  .cal-table .cal-table__format .text-caption::before { content: " · "; }
  .cal-table .cal-table__platform, .cal-table .cal-table__goal { order: 3; font-size: var(--fs-caption); color: var(--color-text-muted); }
  .cal-table .cal-table__goal::before { content: "· "; }
}

.cal-more[open] > summary { margin-bottom: var(--space-2); }
.mini-card { padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); display: grid; gap: var(--space-1); }
.mini-stat { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); display: grid; gap: 2px; }
.mini-stat__value { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
.mini-stat__value small { font-size: var(--fs-small); color: var(--color-text-muted); font-weight: 500; }
.color-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); flex: none; }
.color-dot--lg { width: 28px; height: 28px; border-radius: var(--radius-sm); }

/* ================================================================ login */
.auth-body { background: var(--color-bg); }
.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6) var(--space-4);
  background: radial-gradient(600px 300px at 50% 0%, var(--color-primary-soft), transparent);
}
.login-card {
  width: min(400px, 100%);
  display: grid;
  gap: var(--space-5);
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-3);
}
.login-card__brand { margin-bottom: var(--space-2); flex: none; }
.login-card__help { line-height: 1.7; }
@media (max-width: 480px) { .login-card { padding: var(--space-6) var(--space-5); } }

/* ================================================================ dashboard */
.setup { position: relative; padding: var(--space-4) var(--space-5); }
.setup__summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); padding-right: var(--space-8); }
.setup__steps { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.setup__steps li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body); }
.setup__steps li.is-done { color: var(--color-text-muted); }
.setup__close { position: absolute; top: var(--space-3); right: var(--space-3); }

.channel-card { display: grid; gap: var(--space-4); padding: var(--space-5); align-content: start; height: 100%; }
.channel-card__head { display: flex; align-items: center; gap: var(--space-3); }
.channel-card__titles { flex: 1; min-width: 0; display: grid; gap: 2px; }
.channel-card__titles .h3 a { color: var(--color-text); }
.channel-card__titles .h3 a:hover { text-decoration: none; color: var(--color-primary-fg); }
.channel-card__titles .icon { vertical-align: -2px; }
.channel-card__goal { display: grid; gap: var(--space-2); }
.channel-card__trend { display: flex; align-items: center; gap: var(--space-3); }
.channel-card__trend p { display: flex; align-items: center; gap: var(--space-1); }
.channel-card__trend .sparkline { width: 88px; height: 28px; flex: none; }
.channel-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: var(--fs-small); }
.channel-card__meta dt { color: var(--color-text-subtle); font-size: var(--fs-caption); margin-bottom: 2px; }
.channel-card__meta dd { display: flex; align-items: center; gap: var(--space-2); }
.sparkline { width: 100%; height: 30px; overflow: visible; }
.sparkline path { fill: none; stroke: var(--slot); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }

.insight { display: grid; gap: var(--space-1); justify-items: start; }
.insight__quote { justify-self: stretch; }
.insight__quote { margin: 0; padding-left: var(--space-3); border-left: 3px solid var(--color-border-strong); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.next-step { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5); }
.next-step .empty__icon { flex: none; }
@media (max-width: 767px) { .next-step { flex-direction: column; align-items: flex-start; } }

.week-dots { display: flex; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.week-dots li { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-border-strong); color: var(--color-text-muted); font-size: var(--fs-caption); font-weight: 600; }
.week-dots li.is-on { background: var(--color-primary); border-color: var(--color-primary); color: #FFFFFF; }

/* ================================================================ swatches & colour chips */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.swatch { position: relative; display: grid; justify-items: center; gap: var(--space-1); cursor: pointer; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch__dot { width: 32px; height: 32px; border-radius: 50%; background: var(--slot); box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px transparent; transition: box-shadow var(--dur-fast) var(--ease-standard); }
.swatch input:checked + .swatch__dot { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-text); }
.swatch input:focus-visible + .swatch__dot { outline: 2px solid var(--color-focus-ring); outline-offset: 4px; }
.swatch__name { font-size: var(--fs-caption); color: var(--color-text-muted); }
.swatch input:checked ~ .swatch__name { color: var(--color-text); font-weight: 600; }
.color-chip { display: inline-flex; align-items: center; gap: var(--space-1-5); height: 32px; padding: 0 var(--space-3) 0 var(--space-1-5); border-radius: var(--radius-full); border: 1px solid var(--color-border); font-size: var(--fs-label); color: var(--color-text-muted); }
.color-chip span { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.color-chip[aria-pressed="true"] { border-color: var(--color-primary); color: var(--color-text); background: var(--color-primary-soft); }
.color-input { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-field); cursor: pointer; }
.color-input--wide { width: 100%; height: var(--control-h); }
.toggle-chip { position: relative; display: inline-flex; }
.toggle-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.toggle-chip span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); color: var(--color-text-muted); font-size: var(--fs-label); font-weight: 500; }
.toggle-chip input:checked + span { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-text); }
.toggle-chip input:focus-visible + span { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
@media (pointer: coarse) { .toggle-chip span, .color-chip { min-height: 44px; } }

/* ================================================================ wizards */
.wizard .stepper { margin-bottom: var(--space-6); }
.wizard__layout { display: grid; grid-template-columns: minmax(0, 880px) 280px; gap: var(--space-8); align-items: start; }
.wizard__form { display: grid; gap: var(--space-6); min-width: 0; }
.wizard__step { display: grid; gap: var(--space-5); align-content: start; }
.wizard__title { scroll-margin-top: calc(var(--topbar-h) + var(--space-6)); }
.wizard__title:focus { outline: none; }
.wizard__group { display: grid; gap: var(--space-4); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.wizard__rail { position: sticky; top: calc(var(--topbar-h) + var(--space-6)); }
.wizard__footer {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 72px;
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-2);
}
.wizard__footer--static { position: static; margin: 0; border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: none; flex-wrap: wrap; }
.wizard:not(.is-enhanced) [data-wizard-next], .wizard:not(.is-enhanced) [data-wizard-back] { display: none; }
.wizard:not(.is-enhanced) [data-wizard-submit] { display: inline-flex; }
.wizard.is-enhanced .wizard__step[hidden] { display: none; }
.show-below-xl { display: none; }
@media (max-width: 1279px) {
  .wizard__layout { grid-template-columns: minmax(0, 1fr); }
  .wizard__rail { display: none; }
  .show-below-xl { display: block; }
}
@media (max-width: 767px) {
  .wizard__footer { flex-wrap: wrap; }
  .wizard__footer > span { width: 100%; }
  .wizard__footer .btn-group { width: 100%; display: grid; grid-template-columns: 1fr 2fr; }
  .wizard__footer .btn-group .btn[hidden] { display: none; }
  .wizard__footer .btn-group .btn:only-child, .wizard__footer [data-wizard-back][hidden] + .btn { grid-column: 1 / -1; }
}
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 767px) { .summary-grid { grid-template-columns: minmax(0, 1fr); } }
.preset-frame {
  --accent: #FF5A1F;
  background:
    radial-gradient(70% 45% at 50% 30%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(120% 80% at 50% 20%, #2B3A4A 0%, #0B1320 60%, #050608 100%);
  place-items: center;
  padding: var(--space-2);
  max-height: 150px;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.preset-frame__caption { color: #FFFFFF; font-weight: 800; font-size: 15px; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.preset-frame__caption.is-upper { text-transform: uppercase; }
.preset-frame__caption b { color: var(--hl, #FF5A1F); font-weight: 900; }
.caption-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.caption-tile .radio-card__box { justify-items: center; text-align: center; padding: var(--space-3); }
.caption-mini {
  display: grid;
  place-items: end center;
  width: 72px;
  aspect-ratio: 9 / 16;
  padding: 0 4px 22%;
  border-radius: var(--radius-sm);
  background: radial-gradient(120% 80% at 50% 20%, #2B3A4A 0%, #0B1320 60%, #050608 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .02em;
  text-align: center;
}
.caption-mini b { color: #FF8A5B; font-size: 12px; }
.caption-mini--phrase { font-size: 8px; }
.voice-list { display: grid; gap: var(--space-1); }
.voice-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
}
.voice-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }
.voice-option input { appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: var(--color-field); display: grid; place-content: center; flex: none; margin: 0; }
.voice-option input:checked { border-color: var(--color-primary); background: var(--color-primary); }
.voice-option input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FFFFFF; }
.voice-option__text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.platform-plan { display: grid; gap: var(--space-3); }
.platform-plan__row { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); }
.idea-generator { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.idea-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.idea { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-2); }
.idea--recommended { border-color: var(--color-primary); }
.idea__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.idea__title { font-weight: 600; }
.idea-quote { margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); background: var(--color-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.radio-card--lg .radio-card__box { padding: var(--space-5); gap: var(--space-3); }
.radio-card--lg input:checked + .radio-card__box { padding: calc(var(--space-5) - 1px); }
@media (max-width: 767px) {
  .radio-cards--3 { grid-template-columns: minmax(0, 1fr); }
  .caption-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .radio-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Live preview frame (channel wizard rail). */
.preview-frame { display: grid; gap: var(--space-2); justify-items: center; margin: 0; }
.preview-frame__screen {
  --hl: #FF5A1F;
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    radial-gradient(60% 35% at 50% 38%, rgba(242, 165, 65, .18), transparent 70%),
    radial-gradient(120% 80% at 50% 20%, #2B3A4A 0%, #0B1320 60%, #050608 100%);
  box-shadow: var(--shadow-2);
}
.preview-frame__watermark { position: absolute; top: 4%; right: 5%; color: rgba(255, 255, 255, .8); font-size: 11px; font-weight: 600; }
.preview-frame__badge { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); padding: 2px 8px; border-radius: var(--radius-xs); background: rgba(0, 0, 0, .55); color: #FFFFFF; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.preview-frame__figure { position: absolute; left: 50%; top: 38%; width: 22%; aspect-ratio: 1 / 2.4; transform: translateX(-50%); border-radius: 40% 40% 8% 8%; background: linear-gradient(#F4F4F0 0 22%, transparent 22%), linear-gradient(90deg, transparent 46%, #1A1A1A 46% 54%, transparent 54%); opacity: .85; }
.preview-frame__caption {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 18%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 .3em;
  color: #FFFFFF;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 0 #000, 0 0 6px rgba(0, 0, 0, .8);
}
.preview-frame__caption.is-upper { text-transform: uppercase; }
.preview-frame__screen[data-position="upper"] .preview-frame__caption { bottom: auto; top: 22%; }
.preview-frame__screen[data-position="middle"] .preview-frame__caption { bottom: 42%; }
.preview-frame__screen[data-style="single_word"] .w { display: none; }
.preview-frame__screen[data-style="single_word"] .w--on { display: inline; color: var(--hl); font-size: 30px; }
.preview-frame__screen[data-style="karaoke"] .w--on { color: var(--hl); }
.preview-frame__screen[data-style="phrase"] .w--on { color: inherit; }
.preview-frame__screen[data-style="none"] .preview-frame__caption { display: none; }

/* ================================================================ channel settings */
.settings-card { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.dirty-marker { color: var(--color-warning); font-size: var(--fs-caption); font-weight: 500; margin-left: var(--space-2); }
.caption-settings { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-6); align-items: start; }
.caption-preview { margin: 0; display: grid; gap: var(--space-2); justify-items: center; }
.caption-preview img { width: 100%; max-width: 220px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius-lg); background: var(--color-media-bg); }
@media (max-width: 1023px) { .caption-settings { grid-template-columns: minmax(0, 1fr); } }
.range {
  --fill: 50%;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--color-primary) var(--fill), var(--color-border-strong) var(--fill));
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-primary);
}
.range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--color-border-strong); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--color-primary); }
.range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); border: 3px solid var(--color-surface); box-shadow: 0 0 0 1px var(--color-primary); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 4px var(--color-focus-ring); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 4px var(--color-focus-ring); }
@media (forced-colors: active) { .range { appearance: auto; -webkit-appearance: auto; } }
.input--file { padding: var(--space-2); height: auto; }
.input--file::file-selector-button { margin-right: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-2); color: var(--color-text); padding: 6px 12px; cursor: pointer; }
.watch-list { list-style: none; margin: 0; padding: 0; display: grid; }
.watch-list li { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; border-bottom: 1px solid var(--color-border); }
.watch-list li:last-child { border-bottom: 0; }
.watch-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.watch-form .field + .field { margin-top: 0; }
.watch-form .field:not(.flex-1) { width: 150px; }
.danger-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.danger-row:last-child { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 767px) { .danger-row { flex-direction: column; align-items: flex-start; } }

/* ================================================================ series */
.series-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.series-card { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; }
.series-card__cover { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(120% 80% at 50% 20%, #2B3A4A 0%, #0B1320 60%, #050608 100%); }
.series-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.series-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .5); }
.series-card__badge { position: absolute; left: var(--space-3); bottom: var(--space-3); }
.series-card__body { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); align-content: start; }
.series-card__body .h3 { padding-right: var(--space-8); }
.series-card__body .h3 a { color: var(--color-text); }
.series-card__next { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1-5); }
/* Beats .card--interactive .raise (position: relative), which would drop it into the grid flow. */
.series-card .series-card__menu { position: absolute; top: var(--space-2); right: var(--space-2); }
.series-card__menu .menu-trigger { background: var(--color-scrim-media); color: #FFFFFF; }
.series-card--new { min-height: 260px; }

.bible-section { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); }
.character-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.character-card { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.character-card .field + .field { margin-top: 0; }
.palette { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.palette li { display: flex; align-items: center; gap: var(--space-3); }
.outline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.outline__item { display: flex; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.outline__item:last-child { border-bottom: 0; padding-bottom: 0; }
.outline__item .field + .field { margin-top: 0; }
.outline__num { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-surface-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.sticky-actions { position: sticky; bottom: var(--space-4); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface-2); box-shadow: var(--shadow-2); }
form:not(.is-dirty) > .sticky-actions { position: static; box-shadow: none; background: transparent; border-color: transparent; padding-inline: 0; }
.json-editor { min-height: 360px; font-size: 12px; }
/* [role=list] reset in base.css is more specific than .timeline alone. */
.timeline, .timeline[role="list"] { list-style: none; margin: 0; padding: 0 0 0 var(--space-6); position: relative; display: grid; gap: var(--space-4); }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--color-border); }
.timeline__item { position: relative; }
.timeline__dot { position: absolute; left: calc(var(--space-6) * -1 + 2px); top: 20px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-bg); }
.timeline--compact .timeline__dot { top: 6px; }
.thread-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.thread-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.thread-list .icon { margin-top: 3px; color: var(--color-text-subtle); }

/* ================================================================ studio */
.is-studio .page { max-width: none; }
.studio { padding: var(--space-5) var(--gutter) var(--space-16); }
.studio-header { margin-bottom: var(--space-4); }
.studio-header__nav { display: flex; justify-content: space-between; margin: 0 calc(var(--space-3) * -1) var(--space-2); }
.studio-header__main.page-header { margin-bottom: var(--space-4); flex-direction: row; flex-wrap: nowrap; align-items: flex-start; }
.studio-header__main .page-header__main { flex: 1; min-width: 0; }
.studio-header__main .page-header__actions { flex: none; }
/* Publishing panel: the primary action stays reachable while scrolling the panel. */
.publish-submit { position: sticky; bottom: 0; z-index: 1; padding: var(--space-3) 0 var(--space-1); background: var(--color-surface); }
.pipeline { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; }
.pipeline__step { flex: 1; position: relative; display: flex; align-items: center; min-width: 0; }
.pipeline__step:not(:last-child)::after { content: ""; flex: 1; height: 2px; margin: 0 var(--space-3); background: var(--color-border); }
.pipeline__step.is-done:not(:last-child)::after { background: var(--color-success); }
.pipeline__step a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); margin-left: calc(var(--space-2) * -1); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: var(--fs-label); white-space: nowrap; }
.pipeline__step a:hover { background: var(--color-surface-2); text-decoration: none; color: var(--color-text); }
.pipeline__icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--color-border-strong); }
.pipeline__step.is-done .pipeline__icon { border-color: transparent; background: var(--color-success-soft); color: var(--color-success); }
.pipeline__step.is-current .pipeline__icon { border: 2px solid var(--color-primary); color: var(--color-primary-fg); }
.pipeline__step.is-current a { color: var(--color-text); font-weight: 600; }
.pipeline__step.is-error .pipeline__icon { border-color: transparent; background: var(--color-danger-soft); color: var(--color-danger); }
.pipeline__step.is-error a { color: var(--color-danger); }
.pipeline__step.is-done a { color: var(--color-text); }

.studio__layout { display: grid; grid-template-columns: minmax(560px, 1fr) var(--studio-panel-w); gap: var(--space-6); align-items: start; }
.studio__main { min-width: 0; }
.studio__panel {
  position: sticky;
  top: calc(var(--topbar-h) + var(--space-4));
  max-height: calc(100vh - var(--topbar-h) - var(--space-8));
  overflow-y: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: 0 var(--space-4) var(--space-5);
  scrollbar-gutter: stable;
}
.studio__panel:focus { outline: none; }
.tabs--panel { position: sticky; top: 0; z-index: var(--z-raised); background: var(--color-surface); margin: 0 calc(var(--space-4) * -1) var(--space-4); padding: 0 var(--space-2); }
.studio__switch { display: none; margin-bottom: var(--space-4); }
.studio-panel__content { display: grid; gap: var(--space-4); }
.panel-section { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.panel-section__title { font-size: var(--fs-label); font-weight: 600; color: var(--color-text); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1-5); font-size: var(--fs-small); }
.checklist li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.checklist .is-ok .icon { color: var(--color-success); }
.checklist .is-missing .icon { color: var(--color-warning); }
.checklist .is-optional .icon { color: var(--color-text-subtle); }
.panel-actions { display: grid; gap: var(--space-2); }
.studio .player__frame { height: auto; width: 100%; max-height: min(70vh, 640px); max-width: calc(min(70vh, 640px) * 9 / 16); }
.studio .player__frame--empty { aspect-ratio: auto; height: 220px; max-width: none; }
.action-bar { display: none; }
.manual-row { display: flex; align-items: center; gap: var(--space-2); }
.hook-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
.formula-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-small); }
.formula-list li { display: grid; gap: 2px; }
.script-text { white-space: normal; color: var(--color-text); }
#hook-variants:not(:empty) { margin-top: var(--space-3); }

.scene-list { display: grid; gap: var(--space-4); }
.scene-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.scene {
  position: relative;
  padding: var(--space-3) var(--space-4) var(--space-4) calc(var(--space-4) + 3px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  scroll-margin-top: calc(var(--topbar-h) + var(--space-4));
}
.scene::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-warning); }
.scene--ok::before { background: var(--color-success); }
.scene--error::before { background: var(--color-danger); }
.scene--uploading::before { background: var(--color-primary); }
.scene--skeleton::before { background: var(--color-border); }
.scene.is-dragover { outline: 2px dashed var(--color-primary); outline-offset: 2px; }
.scene__header { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; margin-bottom: var(--space-3); flex-wrap: wrap; }
.scene__reorder { display: flex; gap: 0; margin-left: calc(var(--space-2) * -1); }
.scene__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; border-radius: var(--radius-xs); }
.scene__title:focus-visible { outline-offset: 4px; }
.scene__state { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: var(--fs-caption); font-weight: 500; }
.scene__state--ok { color: var(--color-success); }
.scene__state--missing { color: var(--color-warning); }
.scene__state--error { color: var(--color-danger); }
.scene__body { display: flex; gap: var(--space-4); align-items: flex-start; }
.scene__fields { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.scene__fields .field + .field { margin-top: 0; }
.scene__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.input--upper { text-transform: uppercase; }
.add-scene { justify-self: start; }
@media (max-width: 1279px) {
  .studio__layout { grid-template-columns: minmax(0, 1fr) var(--studio-panel-w); }
  .media-slot { width: 80px; }
}
@media (max-width: 1023px) {
  .studio__switch { display: flex; }
  .studio__layout { grid-template-columns: minmax(0, 1fr); }
  .studio__panel { position: static; max-height: none; overflow: visible; }
  .studio[data-mobile-pane="main"] .studio__panel,
  .studio:not([data-mobile-pane]) .studio__panel { display: none; }
  .studio .tabs--panel { display: none; }
  .studio__main > .tabs { display: none; }
  .studio[data-mobile-pane="render"] .studio__main,
  .studio[data-mobile-pane="pubblica"] .studio__main { display: none; }
}
@media (max-width: 767px) {
  .studio { padding-top: var(--space-4); padding-bottom: calc(64px + env(safe-area-inset-bottom) + var(--space-8)); }
  .scene__body { flex-direction: column; }
  .media-slot { width: 96px; }
  .scene__body { display: grid; grid-template-columns: 96px minmax(0, 1fr); }
  .scene__fields { grid-column: 1 / -1; }
  .scene__state span { display: none; }
  .pipeline__step:not(.is-current):not(.is-error) .pipeline__label { display: none; }
  .pipeline__step.is-current, .pipeline__step.is-error { flex: 2.4; }
  .pipeline__step:not(:last-child)::after { margin: 0 var(--space-1); min-width: 12px; }
  .action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
  }
  .toast-region { bottom: calc(64px + env(safe-area-inset-bottom) + var(--space-3)); }
}

dialog.dialog--lightbox { width: min(420px, calc(100vw - 32px)); }
.lightbox__body { padding: var(--space-3); justify-items: center; }
.lightbox__body video, .lightbox__body img { max-height: 70vh; width: auto; max-width: 100%; border-radius: var(--radius-md); background: #000; }

/* ================================================================ media */
.media-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.media-grid--picker { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.media-card { display: grid; gap: var(--space-1); min-width: 0; }
.media-card__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 16;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.media-card__thumb--audio { aspect-ratio: 1; }
.media-card__thumb:hover { border-color: var(--color-border-strong); }
.media-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-card__name { font-size: var(--fs-small); font-weight: 500; }
.media-card__usage { font-size: var(--fs-caption); color: var(--color-text-subtle); display: block; min-width: 0; }
.media-card__usage .icon { vertical-align: -2px; margin-right: 2px; }
.media-card.is-new .media-card__thumb { animation: highlight 1.2s var(--ease-standard); }
@keyframes highlight { from { box-shadow: 0 0 0 3px var(--color-primary); } to { box-shadow: 0 0 0 3px transparent; } }
.upload-tray { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); }
.upload-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); font-size: var(--fs-small); }
.upload-row .progress { grid-column: 1 / -1; }
.upload-row.is-error .upload-row__status { color: var(--color-danger); }
.upload-row.is-ok .upload-row__status { color: var(--color-success); }
.media-detail__preview { display: grid; place-items: center; background: var(--color-media-bg); border-radius: var(--radius-lg); overflow: hidden; }
.media-detail__preview video, .media-detail__preview img { max-height: 50vh; width: auto; max-width: 100%; }
.media-detail__preview audio { margin: var(--space-6); }
@media (max-width: 767px) { .media-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } }
@media (max-width: 400px) { .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================ charts */
.chart { display: grid; gap: var(--space-3); margin: 0; }
.chart__caption { display: grid; gap: 2px; }
.chart__title { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.chart__summary { color: var(--color-text-muted); font-size: var(--fs-small); }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; margin: 0; padding: 0; font-size: var(--fs-caption); color: var(--chart-text); }
.chart__legend li { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.chart__key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--slot); }
.chart__key--line { width: 14px; height: 3px; border-radius: 2px; }
.chart__frame { position: relative; height: 240px; padding: 8px 64px 28px 52px; }
.chart__plot { position: relative; height: 100%; }
.chart__grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--chart-grid); }
.chart__grid--base { border-top-color: var(--chart-axis); }
.chart__ytick { position: absolute; right: calc(100% + 8px); transform: translateY(-50%); font-size: var(--fs-caption); color: var(--chart-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__line { fill: none; stroke: var(--slot); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { fill: var(--slot); opacity: .1; stroke: none; }
.chart__dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--slot); box-shadow: 0 0 0 2px var(--color-surface); transform: translate(-50%, -50%); pointer-events: none; }
.chart__endlabel { position: absolute; left: calc(100% + 10px); transform: translateY(-50%); font-size: var(--fs-caption); font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart__hover { position: absolute; inset: 0; }
.chart__col { position: absolute; top: 0; bottom: 0; }
.chart__crosshair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--chart-axis); opacity: 0; }
.chart__col.is-active .chart__crosshair { opacity: 1; }
.chart__xtick { position: absolute; top: calc(100% + 8px); transform: translateX(-50%); font-size: var(--fs-caption); color: var(--chart-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart__xtick:first-of-type { transform: none; }
.chart__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.chart__barcol { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.chart__bar { position: relative; width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: var(--slot); transition: filter var(--dur-fast) var(--ease-standard); }
.chart__barcol.is-active .chart__bar { filter: brightness(1.2); }
.chart__barlabel { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: var(--fs-caption); font-weight: 600; color: var(--color-text); white-space: nowrap; }
.chart__xlabel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); font-size: var(--fs-caption); color: var(--chart-text); white-space: nowrap; }

.chart__frame:has(> .chart__plot--bars) { padding-right: 16px; }
.chart__empty { display: grid; place-items: center; gap: var(--space-2); height: 200px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--fs-small); }
.chart__toggle { justify-self: start; }
.chart__table { max-height: 320px; overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.chart-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  min-width: 140px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-caption);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.chart-tooltip.is-visible { opacity: 1; }
.chart-tooltip__title { color: var(--color-text-muted); margin-bottom: 2px; max-width: 260px; }
.chart-tooltip__row { display: flex; align-items: center; gap: var(--space-2); }
.chart-tooltip__row strong { font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.chart-tooltip__row span { color: var(--color-text-muted); }
@media (max-width: 767px) {
  .chart__frame { height: 200px; padding-left: 44px; padding-right: 52px; }
}
@media (forced-colors: active) { .chart__line { stroke: CanvasText; } .chart__bar { background: CanvasText; } }

.share-bar { display: flex; gap: 2px; height: 16px; border-radius: var(--radius-sm); overflow: hidden; }
.share-bar span { display: block; height: 100%; }
.share-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); }
.share-legend li { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.share-legend i { width: 12px; height: 12px; border-radius: 3px; }
.share-legend strong { font-variant-numeric: tabular-nums; }
.comment-row { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border); display: grid; gap: var(--space-1); }
.comment-row:last-child { border-bottom: 0; }
.comment-row__text { margin: 0; font-size: var(--fs-body); }
.comment-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); color: var(--color-text-subtle); font-size: var(--fs-caption); }
.sync-status:not(:empty) { margin-bottom: var(--space-6); }
.page-header__actions .job-card { min-width: 320px; }

/* ================================================================ strategy */
.insights { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.insights li { display: flex; gap: var(--space-3); align-items: flex-start; }
.insights__num, .action-row__num, .order-list__num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary-soft-fg); font-weight: 600; font-size: var(--fs-label); font-variant-numeric: tabular-nums; }
.finding-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.finding-list li { padding-left: var(--space-3); border-left: 2px solid var(--color-border); }
.action-row { align-items: flex-start; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.action-row__title { font-weight: 500; }
.action-row .row__main { gap: var(--space-1); }
.hook-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hook-card { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.hook-card__text { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); font-weight: 500; }
.theme-list { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.theme-list li { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.request-list .row { padding-left: 0; padding-right: 0; }
.reply-card { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.reply-card__answer { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-2); }
.report { min-width: 0; }

/* ================================================================ calendar */
.calendar-wrap { overflow-x: auto; }
.calendar { width: 100%; min-width: 840px; table-layout: fixed; }
.calendar th { padding: var(--space-2) var(--space-3); text-align: left; font-size: var(--fs-label); font-weight: 500; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); text-transform: capitalize; }
.calendar th.is-today { background: var(--color-primary-soft); color: var(--color-text); }
.calendar__day { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.calendar td { vertical-align: top; height: 320px; padding: var(--space-2); border-right: 1px solid var(--color-border); }
.calendar td:last-child { border-right: 0; }
.calendar td.is-today { background: color-mix(in srgb, var(--color-primary-soft) 40%, transparent); }
.calendar__events { display: grid; gap: var(--space-2); }
.event {
  display: grid;
  gap: 4px;
  padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + 3px);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--fs-caption);
  position: relative;
}
.event::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 0 3px 3px 0; background: var(--slot); }
a.event:hover { border-color: var(--color-border-strong); text-decoration: none; }
.event--idea { background: transparent; border-style: dashed; border-color: var(--color-border-strong); }
.event__head { display: flex; align-items: center; gap: var(--space-1-5); }
.event__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.event__ch { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding: 0 4px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--slot) 22%, var(--color-surface)); font-size: 10px; font-weight: 700; }
.event__status { margin-left: auto; display: inline-flex; }
.event__title { font-size: var(--fs-caption); line-height: 1.35; }
.calendar-list { display: grid; gap: var(--space-2); }
.calendar-list .event { font-size: var(--fs-small); padding: var(--space-3) var(--space-3) var(--space-3) calc(var(--space-3) + 3px); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.legend-dashed { display: inline-block; width: 16px; height: 12px; border: 1px dashed var(--color-border-strong); border-radius: 3px; }

/* ================================================================ activity & settings */
.jobs-table td { height: 60px; }
.jobs-table__error { display: -webkit-box; white-space: normal; max-width: 44ch; }
.jobs-table .cell-actions { white-space: nowrap; }
.job-indicator .menu-trigger { font-variant-numeric: tabular-nums; }
.job-detail .log { max-height: 50vh; }
.settings-main { min-width: 0; }
.settings-group { scroll-margin-top: calc(var(--topbar-h) + var(--space-4)); margin-bottom: var(--space-10); }
.settings-group__title { margin-bottom: var(--space-3); }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.order-list li { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); background: var(--color-surface-2); }
.integration > form > .card__footer { border-top: 1px solid var(--color-border); }
.shortcuts td:first-child { white-space: nowrap; }
.shortcuts kbd + kbd { margin-left: 2px; }

@media (max-width: 1279px) {
  .stat-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .stat-grid, .stat-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .stat-tile { min-height: 96px; padding: var(--space-3); }
  .toolbar__search { width: 100%; }
  .page-header__actions .job-card { min-width: 0; width: 100%; }
  .channel-card__meta { grid-template-columns: 1fr; }
}

/* Strategy actions: done checkbox and progress. */
.action-row__check { flex: none; display: grid; place-items: center; min-width: 44px; min-height: 44px; margin: -10px 0 -10px -10px; cursor: pointer; }
.action-row__check input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.action-row.is-done .action-row__title { text-decoration: line-through; color: var(--color-text-muted); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }

/* Integrazioni: unconfigured services collapse into a one-line row. */
.integration__summary { list-style: none; cursor: pointer; border-radius: var(--radius-lg); }
.integration__summary::-webkit-details-marker { display: none; }
.integration__summary .integration__head { padding-bottom: var(--space-4); align-items: center; }
.integration__summary:hover { background: var(--color-surface-2); }
.integration__chevron { color: var(--color-text-subtle); transition: transform var(--dur-fast) var(--ease-standard); }
.integration__details[open] .integration__chevron { transform: rotate(180deg); }
.integration__details[open] .integration__summary .integration__head { padding-bottom: 0; }

/* Prossime pubblicazioni: in narrow cards the reminder pill keeps only «Promemoria»
   (the platform icon labels still say «pubblica a mano» to assistive tech). */
.upcoming { container-type: inline-size; }
@container (max-width: 420px) { .upcoming__more { display: none; } }