:root {
  color-scheme: dark;
  --page: #071016;
  --surface: #0c171f;
  --surface-raised: #11212b;
  --surface-strong: #152a36;
  --line: #233b48;
  --ink: #edf7fa;
  --muted: #99aeb8;
  --cyan: #22d3d8;
  --cyan-soft: #113b43;
  --amber: #f0b45a;
  --green: #69d9a1;
  --red: #ef7b85;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--page); color: var(--ink); }
button, select { font: inherit; }
button { cursor: pointer; }
a { color: var(--cyan); }

.auth-gate { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 0%, #103240 0, var(--page) 46%); }
.auth-gate[hidden] { display: none; }
.auth-card { width: min(100%, 470px); padding: 30px; border: 1px solid #286170; border-radius: 14px; background: #0a171e; box-shadow: 0 26px 70px rgba(0, 0, 0, .44); }
.auth-card h1 { margin-bottom: 14px; color: var(--ink); font-size: clamp(28px, 5vw, 38px); }
.auth-copy { color: #c6d7dc; line-height: 1.55; }
.auth-form { display: grid; gap: 9px; margin-top: 22px; }
.auth-form label { color: var(--muted); font-size: 12px; font-weight: 700; }
.auth-form input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #071016; color: var(--ink); }
.auth-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 216, .12); }
.auth-form button, .auth-secondary { padding: 11px 13px; border: 1px solid var(--cyan); border-radius: 8px; background: var(--cyan); color: #062128; font-weight: 750; }
.auth-form button:hover { background: #65e2e4; }
.auth-form button:disabled { cursor: wait; opacity: .7; }
.auth-secondary { width: 100%; margin-top: 10px; background: transparent; color: var(--cyan); }
.auth-secondary:hover { background: var(--cyan-soft); color: var(--ink); }
.auth-help { margin: 17px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.auth-notice, .auth-inline-error { margin: 16px 0 0; padding: 10px; border: 1px solid #436c58; border-radius: 7px; background: #112b22; color: #c8e8d4; font-size: 13px; line-height: 1.45; }
.auth-inline-error { border-color: #75404a; background: #2a151a; color: #ffd4d8; }
.auth-qr { display: grid; place-items: center; width: 210px; min-height: 210px; margin: 22px auto 0; padding: 10px; border-radius: 10px; background: #fff; }
.auth-qr img { width: 190px; height: 190px; }

.app-shell { height: 100vh; overflow: hidden; display: grid; grid-template-columns: 280px minmax(0, 1fr) 0; transition: grid-template-columns .2s ease; }
.app-shell.right-open { grid-template-columns: 280px minmax(0, 1fr) 332px; }

.left-rail { min-height: 100vh; overflow-y: auto; padding: 26px 18px; background: #0b171f; border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 26px; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); font-size: 13px; }
.brand strong { letter-spacing: .02em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }

.nav { display: grid; gap: 6px; margin-bottom: 30px; }
.nav button, .source-filter { width: 100%; display: flex; justify-content: space-between; align-items: center; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 10px; text-align: left; }
.nav button.active, .nav button:hover { color: var(--ink); background: var(--surface-raised); border-color: var(--line); }
.nav .nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }

.rail-label { margin: 0 8px 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .11em; font-size: 10px; font-weight: 700; }
.source-filter { margin-bottom: 5px; font-size: 13px; }
.source-filter:hover, .source-filter.active { color: var(--ink); background: var(--surface); }
.role-count { color: var(--cyan); font-variant-numeric: tabular-nums; }
.rail-rule { border: 0; border-top: 1px solid var(--line); margin: 24px 8px; }
.weekly-card { margin: 0 8px; padding: 14px; background: var(--cyan-soft); border: 1px solid #1c5961; border-radius: 10px; }
.weekly-card span { color: var(--cyan); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.weekly-card p { margin: 7px 0 0; font-size: 13px; line-height: 1.45; }

.workspace { min-width: 0; height: 100vh; overflow-y: auto; padding: 0 clamp(22px, 4vw, 60px) 44px; scrollbar-gutter: stable; }
.topbar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0 0 40px; padding: 28px 0 22px; background: var(--page); border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 5px; color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(28px, 4vw, 44px); letter-spacing: -.045em; }
h2 { color: var(--cyan); font-size: 20px; letter-spacing: -.02em; }
h3 { margin-bottom: 6px; font-size: 15px; }
.subtitle { max-width: 700px; margin: 13px 0 0; color: var(--muted); line-height: 1.5; }
.menu-toggle { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 20px; line-height: 1; }
.menu-toggle:hover, .menu-toggle[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }

.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.metric { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.metric .value { color: var(--cyan); font-size: 28px; font-weight: 700; }
.metric .label { color: var(--muted); font-size: 12px; }

.panel { margin-bottom: 18px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.panel-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-header p { margin: 0; color: var(--muted); font-size: 13px; }
.story-list { display: grid; gap: 10px; }
.story-row { width: 100%; display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #0a1319; color: var(--ink); text-align: left; }
.story-row:hover, .story-row.selected { border-color: var(--cyan); background: #0b1a21; }
.story-row .story-meta { color: var(--muted); font-size: 12px; }
.status { display: inline-flex; width: max-content; padding: 4px 7px; border: 1px solid currentColor; border-radius: 999px; color: var(--amber); font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.status.ready { color: var(--green); }

.detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 18px; }
.detail-grid p, .detail-grid li { color: #c6d5da; line-height: 1.55; }
.fact-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.fact-list li { margin: 0; padding: 6px 9px; border-radius: 999px; background: var(--surface-strong); color: var(--ink); font-size: 12px; }
.source-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--cyan); font-weight: 600; text-decoration: none; }
.source-link::after { content: "↗"; }

.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 680px; border-collapse: collapse; }
th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 13px; }
th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
td { color: #d3e0e4; }
.source-cell { display: flex; align-items: center; gap: 9px; }
.active-source { background: #0b1a21; }
.source-select { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: transparent; color: #d3e0e4; font: inherit; font-weight: 600; text-align: left; }
.source-select:hover, .source-select[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 3px; }
.active-source-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: transparent; }
.source-select[aria-pressed="true"] .active-source-dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(240, 180, 90, .14); }
.source-open-link { flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--cyan); font-size: 11px; font-weight: 700; text-decoration: none; }
.source-open-link:hover { border-color: var(--cyan); background: var(--cyan-soft); color: var(--ink); }
.weekly-news-row td { padding: 0 10px 12px 26px; background: #0a171e; }
.weekly-news-list { display: grid; gap: 3px; padding: 10px 12px; border-left: 1px solid #41606b; }
.weekly-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 4px 8px 20px; border-bottom: 1px solid var(--line); }
.weekly-timeline > span { margin-right: 3px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.timeline-week, .timeline-generate { padding: 4px 7px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 700; }
.timeline-week:hover, .timeline-week.active { border-color: var(--cyan); color: var(--ink); background: var(--surface-raised); }
.timeline-generate { margin-left: auto; border-color: #2b6973; color: var(--cyan); }
.timeline-generate:hover { border-color: var(--cyan); background: var(--cyan-soft); color: var(--ink); }
.weekly-news-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 7px 20px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.weekly-news-header a { color: var(--cyan); font-size: 11px; text-decoration: none; }
.weekly-news-header a:hover { color: var(--ink); text-decoration: underline; }
.weekly-news-item { display: flex; align-items: baseline; gap: 7px; width: 100%; padding: 6px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #c9d9de; font-size: 12px; text-align: left; }
.weekly-news-item:hover { border-color: var(--line); background: var(--surface-raised); color: var(--ink); }
.weekly-news-item.active { border-color: #7b5a25; background: #211b10; color: var(--ink); }
.weekly-news-marker { color: var(--amber); font-size: 14px; line-height: 1; }
.weekly-notice { margin: 2px 4px 7px 20px; color: var(--amber); font-size: 11px; line-height: 1.4; }
.editorial-package { margin-bottom: 18px; padding: 20px; border: 1px solid #1a5360; border-radius: 12px; background: linear-gradient(145deg, #0d1d25, var(--surface)); }
.editorial-package-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.editorial-package-header h2 { margin-bottom: 6px; }
.editorial-package-header p { max-width: 760px; margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.editorial-package-header .source-link { flex: 0 0 auto; margin-top: 8px; }
.research-dossier { margin: 0 0 16px; padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #091820; }
.research-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.research-header h3 { margin: 0; color: var(--ink); font-size: 15px; }
.research-status { display: inline-flex; flex: 0 0 auto; padding: 4px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.research-status.corroborated { color: var(--green); }
.research-status.pending { color: var(--amber); }
.research-summary { max-width: 900px; margin: 10px 0 13px; color: #c7d7dc !important; font-size: 13px !important; line-height: 1.5 !important; }
.research-claims { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.research-claims > div { min-width: 0; padding: 9px; border: 1px solid #244450; border-radius: 7px; background: #0b2029; }
.research-claims strong, .research-claims span { display: block; }
.research-claims strong { color: var(--ink); font-size: 11px; }
.research-claims span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.research-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.research-sources a { min-width: 0; padding: 9px; border: 1px solid #244450; border-radius: 7px; background: #0a151c; color: var(--ink); text-decoration: none; }
.research-sources a:hover { border-color: var(--cyan); background: var(--cyan-soft); }
.research-sources strong, .research-sources small { display: block; }
.research-sources strong { margin: 4px 0; color: var(--cyan); font-size: 11px; line-height: 1.35; }
.research-sources small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.source-type { color: var(--amber); font-size: 9px; font-weight: 750; letter-spacing: .08em; }
.research-empty { margin: 10px 0; color: var(--amber) !important; font-size: 12px !important; }
.draft-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.draft-card { display: flex; flex-direction: column; min-width: 0; min-height: 510px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #09151c; }
.draft-card-header { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.draft-card-header .eyebrow { margin-bottom: 4px; }
.draft-card h3 { margin: 0; color: var(--cyan); font-size: 18px; }
.draft-description { min-height: 38px; margin: 12px 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.draft-editor { width: 100%; flex: 1 1 auto; min-height: 310px; max-height: 720px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 8px; outline: 0; background: #071016; color: var(--ink); font: 13px/1.6 ui-sans-serif, system-ui, sans-serif; }
.draft-editor:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 216, .12); }
.draft-editor h2, .draft-editor h3 { color: var(--cyan); line-height: 1.25; }
.draft-editor h2 { margin: 0 0 14px; font-size: 18px; }
.draft-editor h3 { margin: 18px 0 8px; font-size: 14px; }
.draft-editor p { margin: 0 0 12px; }
.draft-editor ul, .draft-editor ol { margin: 0 0 12px; padding-left: 20px; }
.draft-editor li { margin-bottom: 5px; }
.draft-editor blockquote { margin: 12px 0; padding: 9px 12px; border-left: 2px solid var(--cyan); color: var(--muted); background: #091a22; }
.draft-editor table { width: 100%; margin: 12px 0; border-collapse: collapse; font-size: 12px; }
.draft-editor th, .draft-editor td { padding: 7px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.draft-editor th { color: var(--cyan); }
.draft-editor a { color: var(--cyan); }
.voice-audio-anchor { display: inline-flex; margin-left: 7px; vertical-align: middle; }
.voice-audio-icon { width: 25px; height: 25px; display: inline-grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; background: #09232b; color: var(--cyan); cursor: pointer; font-size: 12px; line-height: 1; }
.voice-audio-icon:hover { background: var(--cyan); color: #061217; }
.draft-source-links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 9px; }
.draft-source-links a { color: var(--cyan); font-size: 11px; font-weight: 700; text-decoration: none; }
.draft-source-links a:hover { color: var(--ink); text-decoration: underline; }
.draft-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; }
.draft-footer-left { display: inline-flex; min-width: 0; align-items: center; gap: 10px; }
.draft-save { color: var(--muted); font-size: 11px; }
.draft-actions { display: inline-flex; align-items: center; gap: 10px; }
.draft-save-now { flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--cyan); font-size: 11px; font-weight: 700; }
.draft-save-now:hover { color: var(--ink); text-decoration: underline; }
.audio-upload-button { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border: 1px solid var(--cyan); border-radius: 5px; color: var(--cyan); font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.audio-upload-button:hover, .audio-upload-button.is-dragover { background: var(--cyan); color: #061217; }
.audio-file-name { max-width: 130px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.video-preview-button { min-height: 25px; padding: 4px 8px; border: 1px solid #5a737e; border-radius: 5px; background: transparent; color: var(--ink); font-size: 11px; font-weight: 700; white-space: nowrap; }
.video-preview-button:not(:disabled) { border-color: var(--cyan); color: var(--cyan); cursor: pointer; }
.video-preview-button:not(:disabled):hover { background: var(--cyan); color: #061217; }
.video-preview-button:disabled { cursor: not-allowed; opacity: .45; }
.draft-reset { flex: 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--cyan); font-size: 11px; font-weight: 700; }
.draft-reset:hover { color: var(--ink); text-decoration: underline; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.template-card { min-height: 230px; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #0a1319; }
.template-card p { color: var(--muted); line-height: 1.5; }
.template-card a { margin-top: auto; font-weight: 700; text-decoration: none; }

.right-rail { overflow-y: auto; background: #0a151c; border-left: 1px solid var(--line); }
.right-rail-inner { width: 332px; min-height: 100vh; padding: 84px 18px 24px; }
.right-rail p { color: var(--muted); font-size: 13px; line-height: 1.55; }
.control-card { padding: 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.control-card strong { display: block; margin-bottom: 4px; }
.checklist { display: grid; gap: 9px; margin: 16px 0; }
.checklist span { display: flex; gap: 9px; color: #c6d5da; font-size: 13px; }
.check { width: 16px; height: 16px; display: inline-grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); font-size: 10px; }
.check.open { color: var(--amber); border-color: var(--amber); }
.action { width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--cyan); border-radius: 8px; background: transparent; color: var(--cyan); font-weight: 700; text-align: left; }
.action:hover { background: var(--cyan-soft); }
.local-note { margin: 14px 0 0; color: var(--muted); font-size: 11px !important; }

.social-video-modal { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 24px; }
.social-video-backdrop { position: absolute; inset: 0; border: 0; background: rgba(1, 8, 12, .82); }
.social-video-dialog { position: relative; z-index: 1; width: min(940px, 100%); max-height: calc(100vh - 48px); overflow: auto; padding: 20px; border: 1px solid var(--cyan); border-radius: 14px; background: #08141b; box-shadow: 0 24px 80px rgba(0, 0, 0, .55); }
.social-video-dialog > header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 16px; }
.social-video-dialog h2 { margin: 3px 0 0; color: var(--ink); }
.social-video-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font-size: 24px; line-height: 1; }
.vertical-video { position: relative; width: min(100%, 405px); aspect-ratio: 9 / 16; overflow: hidden; margin: 0 auto; border: 1px solid var(--line); border-radius: 12px; background: #050c10; }
.vertical-video > img { width: 100%; height: 100%; object-fit: cover; }
.vertical-video-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 14, 19, .56), rgba(3, 14, 19, .08) 38%, rgba(3, 14, 19, .82)); }
.vertical-video-brand { position: absolute; top: 24px; left: 24px; color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.vertical-video-caption { position: absolute; right: 22px; bottom: 86px; left: 22px; display: grid; gap: 8px; padding: 15px; border: 1px solid rgba(34, 211, 216, .7); border-radius: 10px; background: rgba(4, 16, 22, .84); color: var(--ink); font-size: 14px; line-height: 1.45; }
.vertical-video-caption strong { color: var(--cyan); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.vertical-video-toggle { position: absolute; right: 22px; bottom: 24px; padding: 10px 14px; border: 0; border-radius: 7px; background: var(--cyan); color: #061217; font-weight: 800; cursor: pointer; }
.social-video-note { max-width: 405px; margin: 12px auto 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.author-session { display: grid; gap: 4px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.author-session span, .author-session small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.author-session strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; }
.auth-secondary.compact { margin-top: 8px; padding: 7px 9px; font-size: 11px; }
.empty { padding: 40px 0; color: var(--muted); text-align: center; }

@media (max-width: 1050px) {
  .app-shell.right-open { grid-template-columns: 240px minmax(0, 1fr) 300px; }
  .app-shell { grid-template-columns: 240px minmax(0, 1fr) 0; }
  .right-rail-inner { width: 300px; }
  .template-grid, .draft-grid, .research-claims, .research-sources { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .app-shell, .app-shell.right-open { height: auto; overflow: visible; grid-template-columns: 1fr; }
  .left-rail { min-height: auto; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding-bottom: 14px; }
  .nav { display: flex; margin-bottom: 18px; overflow-x: auto; }
  .nav button { width: max-content; white-space: nowrap; }
  .source-filters, .weekly-card, .left-rail .rail-rule { display: none; }
  .workspace { height: auto; overflow: visible; padding: 22px 18px 34px; }
  .topbar { position: static; margin: 0 0 28px; padding: 0; border-bottom: 0; }
  .metric-grid, .detail-grid { grid-template-columns: 1fr; }
  .editorial-package-header { flex-direction: column; }
  .draft-card { min-height: 420px; }
  .right-rail { position: fixed; inset: 0 0 0 auto; width: min(332px, 92vw); z-index: 3; box-shadow: -20px 0 40px rgba(0,0,0,.35); }
  .right-rail-inner { width: 100%; }
}