/* BUTACCA distributor workspace — Apple Design, 8px spacing and system type. */
:root {
  color-scheme: dark;
  --bg: #141416;
  --surface: #202023;
  --surface-hi: #2b2b30;
  --sidebar: rgba(24,24,27,.94);
  --line: #3d3d43;
  --ink: #f5f5f7;
  --soft: #dedee3;
  --muted: #b3b3bc;
  --accent: #ff7278;
  --focus: #8abfff;
  --positive: #9ce0b0;
  --positive-bg: #21372b;
  --warning: #ffcf8d;
  --warning-bg: #3a3023;
  --error: #ffb5ad;
  --shadow: 0 4px 20px rgba(0,0,0,.12);
  --radius: 16px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #fff;
  --surface-hi: #ededf1;
  --sidebar: rgba(244,244,247,.94);
  --line: #d4d4db;
  --ink: #1d1d1f;
  --soft: #3f3f45;
  --muted: #62626a;
  --accent: #b92c37;
  --focus: #0068bf;
  --positive: #25623b;
  --positive-bg: #e9f5ed;
  --warning: #785116;
  --warning-bg: #fff2dd;
  --error: #ac3026;
  --shadow: 0 4px 20px rgba(0,0,0,.035);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-underline-offset: 4px; }
button, a { touch-action: manipulation; }
button, .button {
  display: inline-flex; justify-content: center; align-items: center; gap: var(--space-1);
  min-height: 44px; max-width: 100%; padding: 11px 16px;
  border: 1px solid transparent; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-size: 14px; line-height: 1.4;
  font-weight: 600; text-decoration: none; cursor: pointer; text-align: center;
  overflow-wrap: anywhere; transition: background 180ms ease, box-shadow 180ms ease;
}
button:hover, .button:hover { background: var(--soft); }
button:disabled { cursor: default; opacity: .55; }
.secondary { background: var(--surface-hi); color: var(--ink); border-color: var(--line); }
.secondary:hover { background: var(--surface); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.workspace:focus { outline: none; }
[hidden] { display: none; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(28px, 2.7vw, 38px); font-weight: 650; line-height: 1.15; letter-spacing: -.035em; }
h2 { font-size: 21px; font-weight: 650; line-height: 1.3; letter-spacing: -.02em; }
h3 { font-size: 16px; font-weight: 600; line-height: 1.4; }
p { line-height: 1.6; }
h1, h2, h3, p, strong, small, dd, dt, summary { overflow-wrap: anywhere; }
.muted, .hint, small { color: var(--muted); }
small, .hint { font-size: 13px; line-height: 1.55; }
.eyebrow { font-size: 11px; font-weight: 600; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-1); }
.brand { font-size: 22px; font-weight: 760; letter-spacing: .12em; text-decoration: none; white-space: nowrap; }
.brand span { color: var(--accent); letter-spacing: 0; }
.skip { position: fixed; left: 16px; top: -80px; padding: 12px; background: var(--ink); color: var(--bg); border-radius: 8px; z-index: 50; }
.skip:focus { top: 16px; }
.shell { display: grid; grid-template-columns: 248px minmax(0,1fr); min-height: 100vh; }
.sidebar {
  height: 100dvh; position: sticky; top: 0; padding: 32px 16px 24px;
  border-right: 1px solid var(--line); background: var(--sidebar);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; flex-direction: column; gap: 24px; overflow-y: auto;
}
.sidebar-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-inline: 8px; }
.sidebar-company { padding-inline: 8px; font-size: 14px; }
.sidebar-company .eyebrow { font-size: 10px; }
.sidebar-company strong { display: block; line-height: 1.5; }
.menu-toggle { display: none; }
.nav { display: grid; gap: 24px; }
.nav-group { display: grid; gap: 4px; }
.nav-label { font-size: 11px; font-weight: 600; color: var(--muted); padding: 0 12px 6px; }
.nav button { justify-content: flex-start; width: 100%; background: transparent; color: var(--muted); font-weight: 500; text-align: left; padding: 10px 12px; }
.nav button svg { width: 18px; height: 18px; flex: none; }
.nav button span { min-width: 0; }
.nav button:hover { background: var(--surface-hi); color: var(--ink); }
.nav button[aria-current="page"] { background: var(--surface-hi); color: var(--ink); box-shadow: inset 3px 0 var(--accent); font-weight: 600; }
.identity { margin-top: auto; padding: 24px 8px 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 13px; }
.identity .secondary { background: transparent; font-size: 12px; min-height: 44px; }
.workspace { container-type: inline-size; min-width: 0; max-width: 1600px; width: 100%; margin-inline: auto; padding: 32px clamp(24px,3vw,48px) 64px; }
.context { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line); font-size: 13px; }
.context select { width: min(100%,320px); }
.context a { color: var(--muted); font-size: 12px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 16px; }
.topbar>div { min-width: 0; }
.topbar .actions { margin: 0; flex-shrink: 0; max-width: 44%; justify-content: flex-end; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.intro { max-width: 760px; margin-bottom: 24px; color: var(--muted); font-size: 15px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; line-height: 1.4; color: var(--soft); white-space: normal; max-width: 100%; }
.badge.signal::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); }
.badge[data-status="approved"], .badge[data-status="scheduled"] { color: var(--positive); background: var(--positive-bg); }
.badge[data-status="review"], .badge[data-status="changes"] { color: var(--warning); background: var(--warning-bg); }
.notice { font-size: 13px; line-height: 1.65; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); margin-bottom: 24px; overflow-wrap: anywhere; }
.notice strong { color: var(--ink); }
.stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 24px 0 32px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; box-shadow: var(--shadow); }
.stat dt { font-size: 13px; color: var(--muted); }
.stat dd { margin: 0; }
.stat .value { font-size: clamp(24px,2.4vw,36px); line-height: 1.15; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat .stat-note { margin-top: auto; font-size: 12px; line-height: 1.5; color: var(--muted); }
.grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 24px; align-items: start; }
.grid>*, .work-columns>* { min-width: 0; }
.cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.panel { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 24px; box-shadow: var(--shadow); }
.panel>p { margin-top: 12px; }
.panel-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.count-badge { display: grid; place-items: center; min-width: 32px; min-height: 32px; border-radius: 10px; padding: 4px 8px; background: var(--surface-hi); color: var(--soft); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.section-heading { margin: 32px 0 16px; }
.empty { padding: 40px 24px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; }
.empty p { margin: 16px auto; max-width: 520px; color: var(--muted); }
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
caption { text-align: left; padding: 20px; font-size: 13px; line-height: 1.5; color: var(--muted); border-bottom: 1px solid var(--line); }
th, td { padding: 20px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-hi); line-height: 1.5; }
td { overflow-wrap: anywhere; }
td p { font-size: 12px; color: var(--muted); margin-top: 4px; }
td .actions { margin: 0; }
td button { font-size: 12px; padding: 10px 12px; }
tr:last-child td { border-bottom: 0; }
.cell-label { display: none; }
.cell-content { min-width: 0; }
.finance-table td:not(:first-child) { font-variant-numeric: tabular-nums; }
.finance-table td:first-child button { display: flex; margin-top: 12px; }
.title-name { display: flex; align-items: center; gap: 12px; }
.title-name>div { min-width: 0; }
.poster { width: 40px; height: 56px; flex: none; border-radius: 6px; background: var(--surface-hi); display: grid; place-items: center; color: var(--muted); font-size: 18px; border: 1px solid var(--line); }
.price-warning { color: var(--warning); }
.toolbar { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: end; margin: 24px 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.toolbar>label, .toolbar .field { display: grid; gap: 8px; font-size: 13px; color: var(--muted); min-width: 0; }
.task-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
.advanced-filters { grid-column: 1/-1; border-top: 1px solid var(--line); padding-top: 8px; }
.advanced-filters summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 13px; color: var(--soft); }
.toolbar-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 8px; }
.panel>[data-action="more-tasks"], .panel>[data-action="more-conversations"] { margin-top: 24px; }
input, select, textarea { width: 100%; min-width: 0; min-height: 44px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 15px; }
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }
input[readonly] { color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 24px 0 16px; }
.field { display: grid; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--soft); min-width: 0; }
.wide { grid-column: 1/-1; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.6; padding: 12px 0; }
.check input { flex: none; margin-top: 3px; }
.error { color: var(--error); font-size: 14px; margin-top: 12px; white-space: pre-line; }
.error:empty { display: none; }
.list-item { padding: 20px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.list-item:last-child { border-bottom: 0; padding-bottom: 0; }
.list-item p { font-size: 13px; color: var(--muted); margin-top: 8px; }
.list-item time { color: var(--muted); font-size: 12px; }
.material-type { display: inline-flex; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.calendar-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 24px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line); }
.calendar-row:last-child { border-bottom: 0; padding-bottom: 0; }
.calendar-row>div { min-width: 0; }
.calendar-row h3 { margin-bottom: 8px; }
.calendar-row>div>button { margin-top: 16px; }
.window { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 20px; font-size: 14px; }
.window-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin: 0; }
.window-facts>div { min-width: 0; }
.window-facts dt { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.window-facts dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.window-promotion { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.auth { max-width: 490px; margin: 7vh auto; padding: 32px; }
.auth .brand { display: block; margin-bottom: 48px; }
.auth h1 { font-size: 34px; }
.auth>p { margin: 16px 0; }
.auth form { margin-top: 32px; }
.auth .field { margin-bottom: 24px; }
.auth button[type="submit"] { width: 100%; }
.auth small { display: block; margin-top: 24px; }
.loading { padding: 64px; color: var(--muted); }
dialog { width: min(800px,calc(100vw - 32px)); max-height: 90dvh; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
dialog .close { display: flex; margin: 0 0 16px auto; }
dialog h2 { margin-bottom: 24px; }
dialog .save-bar { padding-bottom: 0; }
.preformatted { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; }
.access-link { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; margin: 24px 0; }
.access-link input { font-size: 13px; }
.access-link p { font-size: 13px; color: var(--muted); }
.shared { max-width: 960px; margin: 40px auto; padding: 24px; }
.shared .brand { display: block; margin-bottom: 40px; }
#feedback:not(:empty) { position: fixed; right: 24px; bottom: 24px; max-width: min(440px,calc(100vw - 48px)); background: var(--surface-hi); border: 1px solid var(--line); padding: 16px 20px; border-radius: 12px; font-size: 14px; line-height: 1.6; z-index: 40; box-shadow: var(--shadow); overflow-wrap: anywhere; }
.dossier-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; color: var(--muted); font-size: 13px; margin: 24px 0; font-variant-numeric: tabular-nums; }
.dossier-reference { margin-left: auto; font-size: 12px; }
.dossier-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; padding: 8px; margin-bottom: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.dossier-tabs button { background: transparent; color: var(--muted); min-width: 0; font-weight: 500; font-size: 13px; }
.dossier-tabs button:hover { background: var(--surface-hi); color: var(--ink); }
.dossier-tabs button[aria-current="page"] { background: var(--surface-hi); color: var(--ink); box-shadow: inset 0 -2px var(--accent); font-weight: 600; }
.section-description { margin-bottom: 24px; color: var(--muted); font-size: 14px; }
.dossier-fields { border: 0; padding: 0; margin: 0; min-width: 0; }
.dossier-fields:disabled { opacity: .85; }
.dossier-content { min-width: 0; }
.save-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; border-top: 1px solid var(--line); }
.save-bar span { font-size: 13px; color: var(--muted); }
.save-bar button { flex: none; }
.review-strip { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 24px; font-size: 14px; }
.checklist { padding: 0; list-style: none; margin: 24px 0 0; }
.checklist li { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.checklist li:last-child { border-bottom: 0; }
.pending-dot { width: 6px; height: 6px; border: 1px solid var(--muted); border-radius: 50%; }
.checklist button { padding-inline: 12px; }
.ready { padding: 24px 0; color: var(--positive); }
.dossier-cards { margin-top: 24px; }
.material-card { padding: 20px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 12px; min-width: 0; }
.material-card p { font-size: 13px; color: var(--muted); }
.secondary-details summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 14px; font-weight: 600; }
.secondary-details { padding-block: 16px; }
.secondary-details>p { font-size: 13px; }
.secondary-details>button { margin-top: 16px; }
.work-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.work-item { padding: 24px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.work-item:last-child { border-bottom: 0; padding-bottom: 0; }
.work-item .eyebrow { margin-bottom: 8px; text-transform: none; letter-spacing: 0; font-size: 12px; }
.work-item>p:not(.eyebrow) { color: var(--muted); font-size: 13px; margin-top: 8px; }
.work-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--soft); margin-top: 16px; }
.work-meta .error { margin: 0; font-size: inherit; }
.page-footnote { margin-top: 8px; }
.discussion-actions { margin: 0 0 24px; }
.discussion { padding: 24px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.discussion:last-child { border-bottom: 0; }
.discussion-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.discussion-heading .badge { flex-shrink: 0; max-width: 45%; }
.message-list { list-style: none; padding: 0; margin: 24px 0; }
.message-list li { padding: 16px 20px; border-radius: 12px; background: var(--bg); margin: 16px 0; }
.message-list .message-author { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.message-author time { display: block; margin-top: 4px; }
.reply-form textarea { min-height: 100px; }
.internal-notes { border-style: dashed; }
.film-preview { display: grid; grid-template-columns: minmax(160px,240px) minmax(0,1fr); gap: 32px; margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.film-preview>div { min-width: 0; }
.preview-poster { aspect-ratio: 2/3; background: var(--bg); border: 1px dashed var(--line); border-radius: 12px; display: grid; place-items: center; text-align: center; color: var(--muted); overflow: hidden; }
.preview-poster span { padding: 24px; }
.preview-poster img { display: block; width: 100%; height: 100%; object-fit: contain; }
.preview-copy>h2 { font-size: clamp(28px,3vw,40px); line-height: 1.15; }
.preview-copy>p { margin-block: 16px; }
.preview-facts { color: var(--muted); font-size: 14px; }
.preview-copy dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px 16px; font-size: 14px; margin: 24px 0; }
.preview-copy dt { color: var(--muted); }
.preview-copy dd { margin: 0; }
.preview-prices { border-block: 1px solid var(--line); padding: 20px 0; display: flex; flex-wrap: wrap; gap: 24px; }
.preview-prices p { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.preview-prices strong { font-size: 24px; color: var(--ink); font-variant-numeric: tabular-nums; }
.preview-upload { margin-top: 24px; }
.preview-upload input { font-size: 12px; max-width: 100%; }
.film-preview>div>.hint { margin: 12px 0; }
.film-preview>div>button { margin-top: 16px; }
@container (max-width: 900px) {
  .grid, .work-columns { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dossier-tabs { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .topbar { flex-direction: column; gap: 16px; }
  .topbar .actions { max-width: 100%; justify-content: flex-start; }
  .responsive-table, .responsive-table tbody { display: block; }
  .responsive-table caption { display: block; }
  .responsive-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .responsive-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 24px; padding: 24px; border-bottom: 1px solid var(--line); }
  .responsive-table tr:last-child { border-bottom: 0; }
  .responsive-table td { display: block; min-width: 0; padding: 0; border: 0; }
  .responsive-table td:first-child { grid-column: 1/-1; }
  .responsive-table:not(.finance-table) td:last-child { grid-column: 1/-1; }
  .cell-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
}
@container (max-width: 600px) {
  .toolbar, .toolbar-filters, .form-grid, .cards, .calendar-row, .film-preview { grid-template-columns: 1fr; }
  .dossier-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .wide { grid-column: auto; }
  .dossier-reference { width: 100%; margin-left: 0; }
  .save-bar, .review-strip, .discussion-heading { flex-direction: column; align-items: flex-start; }
  .save-bar button { width: 100%; }
  .discussion-heading .badge { max-width: 100%; }
  .preview-poster { width: min(100%,240px); margin-inline: auto; }
  .preview-copy dl { grid-template-columns: 1fr; gap: 6px; }
  .preview-copy dd { margin-bottom: 12px; }
  .checklist li { grid-template-columns: 8px minmax(0,1fr); }
  .checklist button, .checklist small { grid-column: 2; justify-self: start; }
}
@media (max-width: 1100px) {
  .shell { grid-template-columns: 220px minmax(0,1fr); }
  .sidebar { padding-inline: 12px; }
}
@media (max-width: 760px) {
  .shell { display: block; }
  .sidebar { height: auto; position: static; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); gap: 24px; }
  .sidebar-header { padding: 0; }
  .brand { font-size: 20px; }
  .menu-toggle { display: inline-flex; }
  .sidebar-company, .nav, .identity { display: none; }
  .sidebar[data-mobile-open="true"] .sidebar-company, .sidebar[data-mobile-open="true"] .nav, .sidebar[data-mobile-open="true"] .identity { display: grid; }
  .sidebar[data-mobile-open="true"] .nav { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 20px 8px; }
  .nav button { font-size: 13px; }
  .identity { margin-top: 0; }
  .workspace { padding: 24px 16px 64px; }
  .context { margin-bottom: 24px; padding-bottom: 16px; gap: 12px; }
  .context select { max-width: 100%; }
  .panel, .film-preview { padding: 20px; }
  .stat { padding: 16px; }
  .stats { gap: 12px; }
  .auth { margin-top: 2vh; padding: 24px; }
  dialog { padding: 20px; border-radius: 16px; }
  dialog .form-grid { grid-template-columns: 1fr; gap: 16px; }
  dialog .wide { grid-column: auto; }
  .window-facts { grid-template-columns: 1fr; }
  .work-item .actions { align-items: stretch; }
  .work-item .actions>button { width: 100%; }
  .responsive-table tr { padding: 20px; gap: 20px 16px; }
}
@media (prefers-reduced-transparency: reduce) {
  .sidebar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  dialog::backdrop { backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none; transition: none; scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .sidebar, dialog::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  button, .badge, .panel, .stat, .dossier-tabs { border: 1px solid CanvasText; }
  .nav button[aria-current="page"], .dossier-tabs button[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -3px; }
}
/* Task-based information architecture: one content group at a time. */
.page-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.page-tabs [role="tab"] { flex: 1 1 128px; background: transparent; color: var(--muted); font-weight: 500; min-width: 0; }
.page-tabs [aria-selected="true"] { background: var(--surface-hi); color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px var(--accent); }
.page-tabs [role="tab"]:hover { color: var(--ink); background: var(--surface-hi); }
.tab-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.page-tab-panel { min-width: 0; scroll-margin-top: 20px; }
.page-tab-panel[hidden], .paged-items [hidden] { display: none; }
.workspace-summary { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.workspace-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.dossier-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 20px; }
.dossier-subnav button { font-weight: 500; font-size: 13px; }
.dossier-subnav [aria-current="page"] { color: var(--ink); border-color: var(--accent); }
.pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.pagination-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.pagination-position, .pagination-range { font-variant-numeric: tabular-nums; }
.paged-items:not(.cards):not(.task-cards):not(tbody)>[data-page-item]+[data-page-item] { border-top: 1px solid var(--line); }
.paged-items .work-item { padding-block: 16px; }
.paged-items .list-item { padding-bottom: 16px; }
.paged-items.cards .panel { margin-bottom: 0; }
.material-summary h2 { font-size: 17px; }
.material-summary .material-type { margin-bottom: 12px; }
.material-conditions, .earlier-messages, .notice-body { margin-top: 12px; }
.material-conditions summary, .earlier-messages summary, .notice-body summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-size: 13px; color: var(--muted); }
.material-conditions p { margin-block: 8px; }
@media (max-width: 760px) {
  .pagination-actions { width: 100%; }
  .page-tabs { gap: 4px; padding: 6px; }
  .page-tabs [role="tab"] { padding-inline: 8px; font-size: 13px; }
}
@media (forced-colors: active) {
  .page-tabs [aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
}

.task-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.paged-items.task-cards > [data-page-item] { border: 0; }
@container (max-width: 720px) { .task-cards { grid-template-columns: 1fr; gap: 0; } .paged-items.task-cards > [data-page-item]+[data-page-item] { border-top: 1px solid var(--line); } }

/* Compact task navigation and explicit save feedback. */
.dossier-mobile-nav { display: none; margin-bottom: 24px; }
.dossier-mobile-nav label { display: block; margin-bottom: 8px; font-size: 13px; color: var(--muted); }
.save-bar.edit-save { position: sticky; bottom: 16px; z-index: 3; padding: 16px; margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.save-copy { min-width: 0; display: grid; gap: 4px; }
.save-copy small { font-size: 12px; color: var(--muted); }
.edit-save[data-edit-state="dirty"] [data-save-status] { color: var(--warning); }
@container (max-width: 600px) {
  .dossier-tabs, .dossier-subnav { display: none; }
  .dossier-mobile-nav { display: block; }
  .save-bar.edit-save { bottom: 8px; gap: 12px; }
}

/* Keep confirmations clear of the form’s persistent save action. */
body.editing-section #feedback:not(:empty) { top: 16px; bottom: auto; }

.file-link { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-hi); color: var(--ink); font-size: 13px; text-decoration: none; }
.file-name { overflow-wrap: anywhere; }
#file-upload-form progress { width: 100%; margin: 16px 0; accent-color: var(--accent); }

.connection-checklist { display: grid; gap: 12px; padding-left: 20px; margin: 20px 0; line-height: 1.6; }

.file-confirmation { margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; color: var(--positive); background: var(--positive-bg); font-size: 13px; overflow-wrap: anywhere; }

/* BUTACCA approved wordmark 20261026 */
/* Approved lettering is outlined. These sizes never alter its spacing or weight. */
.butacca-wordmark { display: block !important; width: 152px !important; max-width: 100%; height: auto !important; aspect-ratio: 500 / 116; object-fit: contain; filter: none; }
.wordmark:has(.butacca-wordmark), .brand:has(.butacca-wordmark) { display: inline-flex; align-items: center; flex-shrink: 0; letter-spacing: 0 !important; line-height: 1; }
.site-header .wordmark:has(.butacca-wordmark) { min-height: 44px; }
[data-theme="light"] .butacca-wordmark { filter: invert(1); }
.cinema-app .butacca-wordmark, .exp-sound-screen .butacca-wordmark, .cinema-moment-signature .butacca-wordmark { filter: none; }
.cinema-app .wordmark .butacca-wordmark { width: 142px !important; }
.cinema-app[data-view="tv"] .wordmark .butacca-wordmark { width: 182px !important; }
.footer-main .butacca-wordmark, .footer-top .butacca-wordmark { width: 160px !important; }
.preview-top .butacca-wordmark { width: 118px !important; }
.exp-sound-screen .butacca-wordmark { width: 96px !important; }
.brand .butacca-wordmark { width: 156px !important; }
.auth .brand .butacca-wordmark, .shared .brand .butacca-wordmark { width: 200px !important; }
.cinema-moment-signature .butacca-wordmark { width: 135px !important; }

@media(forced-colors:active){.butacca-wordmark{filter:none!important;background:#000;forced-color-adjust:none}}
