/* Reel: shared palette for desktop and companions. Black film stock, signal red ink, bone paper in light. */
html[data-theme="reel"] {
  color-scheme:dark;
  --tint:#ff2a1f; --accent:#ff2a1f; --accent-2:#f2ede6; --accent-3:#d60001;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --bg:#070707; --panel:#0f0f0f; --panel-2:#171717; --border:#2a2a2a;
  --text:#f2ede6; --muted:#a39d94; --input-bg:#0b0b0b; --link:#ff4d42;
  --green:#7fd49b; --red:#ff6b5e; --amber:#f0c060; --orange:#ff9a52;
  --radius:0px; --radius-btn:0px; --radius-input:0px;
  --surface:var(--panel); --surface-border-color:var(--border);
  --grad-brand:linear-gradient(#ff2a1f,#ff2a1f);
  --grad-primary:linear-gradient(#ff2a1f,#ff2a1f);
  --grad-primary-hover:linear-gradient(#ff4d42,#ff4d42);
  --btn-soft:linear-gradient(var(--panel-2),var(--panel-2));
  --btn-soft-hover:linear-gradient(var(--border),var(--border));
  --app-bg:var(--bg); --shadow:none; --shadow-glow:none;
}
html[data-theme="reel"][data-mode="light"] {
  color-scheme:light;
  --tint:#d60001; --accent:#d60001; --accent-2:#0b0b0b; --accent-3:#d60001;
  --bg:#efebe4; --panel:#f7f4ef; --panel-2:#e6e1d8; --border:#cfc8bc;
  --text:#0b0b0b; --muted:#5a554e; --input-bg:#fbf9f5; --link:#b30000;
  --green:#1d6b3a; --red:#b3261e; --amber:#7a5200; --orange:#a94200;
  --grad-brand:linear-gradient(#d60001,#d60001);
  --grad-primary:linear-gradient(#d60001,#d60001);
  --grad-primary-hover:linear-gradient(#b30000,#b30000);
}

/* ---------- Tokens ---------- */
html[data-theme="reel"] {
  --rl-red:#ff2a1f; --rl-ink:#f2ede6; --rl-strip:#151515; --rl-on-red:#070707;
  --rl-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --rl-serif:"Instrument Serif","Times New Roman",serif;
  --rl-ease:cubic-bezier(.7,0,.2,1); --rl-out:cubic-bezier(.16,1,.3,1);
  --rl-gutter:clamp(20px,3vw,56px);
  --rl-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-theme="reel"][data-mode="light"] { --rl-red:#d60001; --rl-ink:#0b0b0b; --rl-strip:#0b0b0b; --rl-on-red:#0b0b0b; }

@keyframes rl-rise { from { translate:0 105%; } }
@keyframes rl-fade { from { opacity:0; translate:0 18px; } }
@keyframes rl-grain { 0% { background-position:0 0; } 25% { background-position:-37px 61px; } 50% { background-position:83px -22px; } 75% { background-position:-64px -90px; } 100% { background-position:12px 44px; } }
@keyframes rl-rec { 50% { opacity:.15; } }
@keyframes rl-wipe { 0%,30% { clip-path:inset(0 0 0 0); } 100% { clip-path:inset(0 0 100% 0); } }

/* ---------- Film stock: grain over everything, no glow ---------- */
html[data-theme="reel"][data-mode] body { background:var(--bg); font-family:var(--font); }
html[data-theme="reel"][data-mode] body::before {
  content:"" !important; display:block !important; position:fixed; inset:-50px; z-index:9990; pointer-events:none;
  background:var(--rl-grain) !important; opacity:.06; mix-blend-mode:normal;
  animation:rl-grain .9s steps(1) infinite !important;
}
html[data-theme="reel"][data-mode="light"] body::before { opacity:.09; filter:invert(1); }
html[data-theme="reel"][data-mode] body::after { display:none; }
/* The cut slate: a red card with the title wipes up when the theme rolls (theme-reel.js adds .rl-cut). */
html.rl-cut[data-theme="reel"][data-mode] body::after {
  content:"STATION PORTAL"; display:grid; place-items:center; position:fixed; inset:0; z-index:9995; pointer-events:none;
  background:var(--rl-red); color:var(--rl-on-red); mix-blend-mode:normal;
  font:900 clamp(48px,11vw,190px)/.85 var(--rl-display); font-stretch:125%; letter-spacing:-.03em; text-align:center;
  animation:rl-wipe 1.05s var(--rl-ease) forwards !important;
}
html[data-theme="reel"] ::selection { background:var(--rl-red); color:var(--rl-on-red); }

/* ---------- Type: extended black grotesk titles, condensed serif caps, Helvetica body ---------- */
html[data-theme="reel"][data-mode] :is(h1,h2,h3,h4) { font-family:var(--rl-display); font-weight:900; font-stretch:125%; letter-spacing:-.02em; text-transform:uppercase; color:var(--text); }
html[data-theme="reel"][data-mode] .section-head h2 {
  font-size:clamp(40px,5.4vw,92px); line-height:.86; color:var(--rl-red); margin-bottom:6px;
  overflow:hidden; padding-bottom:.04em; -webkit-text-fill-color:currentColor; background:none;
}
/* Title letters rise into frame one after another (letters are split by theme-reel.js). */
html[data-theme="reel"][data-mode] .section-head h2 .rl-t { display:inline-block; white-space:pre; animation:rl-rise .9s var(--rl-out) calc(var(--i,0) * 32ms) backwards !important; }
html[data-theme="reel"][data-mode] :is(h3,h4) { font-size:1.1em; letter-spacing:-.01em; }
html[data-theme="reel"][data-mode] :is(a,.link) { color:var(--link); text-underline-offset:.2em; }
html[data-theme="reel"][data-mode] :is(.stat .label,.cal .dow,.themes-eyebrow,label) { font-family:var(--font); text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:500; color:var(--muted); }
html[data-theme="reel"][data-mode] .stat .value { font-family:var(--rl-display); font-weight:900; font-stretch:125%; font-size:28px; letter-spacing:-.02em; color:var(--text); }

/* ---------- Header: transparent, corner labels in serif caps ---------- */
html[data-theme="reel"][data-mode][data-style] .topbar {
  background:color-mix(in srgb,var(--bg) 82%,transparent) !important; border:0 !important; box-shadow:none !important;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:10px var(--rl-gutter); min-height:58px;
}
html[data-theme="reel"][data-mode] .topbar .brand {
  font:900 21px/1 var(--rl-display); font-stretch:125%; letter-spacing:-.03em; text-transform:uppercase;
  background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--rl-red); -webkit-text-fill-color:currentColor;
}
html[data-theme="reel"][data-mode] #breadcrumb :is(.crumb,.crumb-back,.crumb.current) {
  font-family:var(--rl-serif); font-size:19px; text-transform:uppercase; letter-spacing:.01em;
  border:0 !important; box-shadow:none !important; background:transparent !important; color:var(--text);
}
html[data-theme="reel"][data-mode] #breadcrumb .crumb.current { color:var(--rl-red); }
html[data-theme="reel"][data-mode] .topbar .chip { background:transparent; border:0; font-family:var(--rl-serif); font-size:17px; text-transform:uppercase; color:var(--muted); }
html[data-theme="reel"][data-mode][data-style] .topbar .btn.ghost {
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  font-family:var(--rl-serif); font-size:19px; text-transform:uppercase; color:var(--rl-red); padding:4px 8px; min-height:34px;
  background-image:linear-gradient(currentColor,currentColor) !important; background-repeat:no-repeat !important;
  background-size:0 1px !important; background-position:100% 88% !important; transition:background-size .5s var(--rl-ease) !important;
}
html[data-theme="reel"][data-mode][data-style] .topbar .btn.ghost:hover { background-size:calc(100% - 16px) 1px !important; background-position:8px 88% !important; }

/* ---------- Frame: Apple / Antigravity proportions ---------- */
html[data-theme="reel"][data-mode] #content { max-width:1600px; margin-inline:auto; padding:32px var(--rl-gutter); }
@media (max-width:700px) { html[data-theme="reel"][data-mode] #content { padding:24px 16px; } }
html[data-theme="reel"][data-mode] #content > :not(.station-layout):not(.section-head) { animation:rl-fade .8s var(--rl-out) .15s backwards; }
html[data-theme="reel"][data-mode] #content > .station-layout { animation:none; transform:none; }
html[data-theme="reel"][data-mode] .station-layout > :is(.station-main,.station-rail-right) { animation:rl-fade .8s var(--rl-out) .2s backwards; }

/* ---------- Surfaces: sharp frames, hairlines, a red bar slides in under a hovered card ---------- */
html[data-theme="reel"][data-mode][data-style] :is(.card,.stat,.modal,.login-card,.status-strip) {
  background:var(--panel) !important; border:1px solid var(--border) !important; border-radius:0 !important;
  box-shadow:inset 0 0 0 0 var(--rl-red) !important; -webkit-backdrop-filter:none; backdrop-filter:none;
}
html[data-theme="reel"][data-mode] .card::before { display:none; }
html[data-theme="reel"][data-mode][data-style] .card { transition:box-shadow .45s var(--rl-ease),border-color .3s !important; }
html[data-theme="reel"][data-mode][data-style] .card:hover { transform:none !important; border-color:var(--rl-red) !important; box-shadow:inset 0 -5px 0 0 var(--rl-red) !important; }
html[data-theme="reel"][data-mode][data-style] .station-card { padding:26px; }
html[data-theme="reel"][data-mode] .station-card h3 { font-size:26px; line-height:.95; }
html[data-theme="reel"][data-mode][data-style] .station-card .sc-balance { background:var(--panel-2) !important; border:0 !important; border-radius:0; }
html[data-theme="reel"][data-mode] .station-card .sc-bal-num { font-family:var(--rl-display); font-weight:900; font-stretch:125%; }
html[data-theme="reel"][data-mode][data-style] .add-card { background:transparent !important; border:1px dashed var(--border) !important; font-family:var(--rl-serif); font-size:22px; text-transform:uppercase; }
html[data-theme="reel"][data-mode][data-style] .station-rail-right { background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; }

/* ---------- Controls: hard-edged slates; a red fill wipes up on hover ---------- */
html[data-theme="reel"][data-mode][data-style] .btn {
  border-radius:0 !important; font-family:var(--font); font-size:12.5px; font-weight:500; text-transform:uppercase; letter-spacing:.08em;
  transition:background-size .45s var(--rl-ease),color .3s,border-color .3s !important;
}
html[data-theme="reel"][data-mode][data-style] #content .btn:not(.primary):not(.info):not(.danger) {
  border:1px solid var(--border); color:var(--text); box-shadow:none !important;
  background:linear-gradient(var(--rl-red),var(--rl-red)) 0 100%/100% 0 no-repeat,var(--panel) !important;
}
html[data-theme="reel"][data-mode][data-style] #content .btn:not(.primary):not(.info):not(.danger):not(:disabled):hover { background-size:100% 100%,auto !important; color:var(--rl-on-red); border-color:var(--rl-red); }
html[data-theme="reel"][data-mode][data-style] :is(.btn.primary,.btn.info) { background:var(--rl-red) !important; color:var(--rl-on-red) !important; border:0; box-shadow:none !important; }
html[data-theme="reel"][data-mode][data-style] :is(.btn.primary,.btn.info):not(:disabled):hover { background:var(--rl-ink) !important; color:var(--bg) !important; }
html[data-theme="reel"][data-mode][data-style] :is(input,select,textarea) { border-radius:0; border:1px solid var(--border); background:var(--input-bg); box-shadow:none; }
html[data-theme="reel"][data-mode][data-style] :is(input,select,textarea):focus { outline:none; border-color:var(--rl-red); box-shadow:0 0 0 1px var(--rl-red); }
html[data-theme="reel"][data-mode] :is(input[type="checkbox"],input[type="radio"]) { accent-color:var(--rl-red); }
html[data-theme="reel"][data-mode][data-style] .seg button.active { background:var(--rl-red) !important; color:var(--rl-on-red) !important; }
html[data-theme="reel"][data-mode][data-style] :is(.tab:not(.active),.seg button:not(.active)) { box-shadow:none !important; }
html[data-theme="reel"][data-mode] .toast:not(.err) { background:var(--rl-red); color:var(--rl-on-red); border-radius:0; font-weight:500; text-transform:uppercase; letter-spacing:.06em; font-size:12.5px; box-shadow:none; }

/* ---------- Calendar: a contact sheet on a film strip (sprocket holes top and bottom); today is the red frame ---------- */
html[data-theme="reel"][data-mode][data-style] .cal {
  gap:1px; padding:30px 14px; border-radius:0;
  background:
    repeating-linear-gradient(90deg,var(--bg) 0 12px,transparent 12px 26px) 6px 9px/calc(100% - 12px) 10px no-repeat,
    repeating-linear-gradient(90deg,var(--bg) 0 12px,transparent 12px 26px) 6px calc(100% - 9px)/calc(100% - 12px) 10px no-repeat,
    var(--rl-strip);
}
html[data-theme="reel"][data-mode] .cal .dow { color:#8f8a83; padding:4px 0 8px; }
html[data-theme="reel"][data-mode][data-style] .cal .day:not(.empty) {
  border-radius:0 !important; background:var(--panel) !important; border:0 !important; box-shadow:inset 0 0 0 0 var(--rl-red) !important;
  transform:none !important; transition:box-shadow .35s var(--rl-ease) !important;
}
html[data-theme="reel"][data-mode][data-style] .cal .day.empty { background:transparent !important; }
html[data-theme="reel"][data-mode][data-style] .cal .day:not(.empty):hover { box-shadow:inset 0 0 0 3px var(--rl-red) !important; }
html[data-theme="reel"][data-mode] .cal .day .num { font-family:var(--rl-display); font-weight:900; font-stretch:125%; font-size:19px; letter-spacing:-.02em; }
html[data-theme="reel"][data-mode][data-style] .cal .day.today { background:var(--rl-red) !important; color:var(--rl-on-red); z-index:1; }
html[data-theme="reel"][data-mode][data-style] .cal .day.today :is(.num,*) { color:var(--rl-on-red) !important; }
html[data-theme="reel"][data-mode][data-style] .cal .day.today:hover { box-shadow:inset 0 0 0 3px var(--rl-on-red) !important; }
html[data-theme="reel"][data-mode] .month-bar { flex-wrap:wrap; row-gap:10px; }
html[data-theme="reel"][data-mode] .month-bar .title { font-family:var(--rl-serif); font-weight:400; font-size:32px; text-transform:uppercase; letter-spacing:0; }

/* ---------- Page list: the film credits. Numbered chapters in serif caps; letters roll on hover
   (split by theme-reel.js); the current chapter wears a blinking REC dot. Rows never move. ---------- */
html[data-theme="reel"][data-mode][data-style] .station-rail-left {
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0;
}
@media (min-width:981px) {
  html[data-theme="reel"][data-mode][data-style] .station-rail-left {
    position:sticky; top:76px; max-height:calc(100vh - 96px); overflow:hidden auto; scrollbar-width:none; border-right:1px solid var(--border) !important; padding:0 10px 0 14px;
  }
}
html[data-theme="reel"][data-mode] .station-rail-left::-webkit-scrollbar { display:none; }
html[data-theme="reel"][data-mode] .tabs.station-tabs-v { counter-reset:rl-ch; gap:0; }
html[data-theme="reel"][data-mode][data-style] .station-rail-left .tab {
  display:grid !important; grid-template-columns:28px minmax(0,1fr) auto; align-items:baseline; column-gap:6px;
  padding:5px 4px !important; min-height:0; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
  font-family:var(--rl-serif); font-size:19px; line-height:1.02; font-weight:400; text-transform:uppercase; color:var(--text) !important; text-align:left;
  transform:none !important; transition:color .3s !important;
}
html[data-theme="reel"][data-mode] .station-tabs-v > .tab { counter-increment:rl-ch; }
html[data-theme="reel"][data-mode] .station-rail-left .tab::before {
  content:counter(rl-ch,decimal-leading-zero); position:static; display:block; inset:auto; width:auto; height:auto; background:none; opacity:1;
  font:500 10.5px/1 var(--font); letter-spacing:.06em; color:var(--muted); align-self:center;
}
html[data-theme="reel"][data-mode] .station-rail-left .station-submenu { counter-reset:rl-sub; display:flex; flex-direction:column; margin:0 0 4px; padding:0; background:transparent; border:0; border-radius:0; }
html[data-theme="reel"][data-mode] .station-rail-left .station-submenu .tab { counter-increment:rl-sub; font-size:16.5px; padding-left:16px !important; color:var(--muted) !important; }
html[data-theme="reel"][data-mode] .station-rail-left .station-submenu .tab::before { content:counter(rl-ch,decimal-leading-zero) "." counter(rl-sub); }
html[data-theme="reel"][data-mode] .station-rail-left .tab .rl-ico { display:none; }
html[data-theme="reel"][data-mode] .station-rail-left .tab .muted { font-family:var(--font); font-size:11px; color:var(--muted); }
html[data-theme="reel"][data-mode][data-style] .station-rail-left .tab.active { color:var(--rl-red) !important; }
html[data-theme="reel"][data-mode] .station-rail-left .tab.active::before { color:var(--rl-red); }
html[data-theme="reel"][data-mode] .station-rail-left .tab.active::after {
  content:""; position:absolute; left:-12px; right:auto; top:50%; bottom:auto; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:var(--rl-red);
  animation:rl-rec 1.4s steps(1) infinite !important;
}
html[data-theme="reel"][data-mode][data-style] .station-rail-left .tab:not(.active):hover { color:var(--rl-red) !important; }
/* Letter roll: each letter slides up and its twin rolls in from below. */
html[data-theme="reel"] .rl-w { display:inline; }
html[data-theme="reel"] .rl-x { display:inline-block; overflow:hidden; vertical-align:top; white-space:nowrap; padding-bottom:.08em; margin-bottom:-.08em; }
html[data-theme="reel"] .rl-l { display:inline-block; position:relative; white-space:pre; transition:translate .55s var(--rl-ease) calc(var(--i,0) * 16ms); }
html[data-theme="reel"] .rl-l::after { content:attr(data-c); position:absolute; left:0; top:100%; }
html[data-theme="reel"] :is(.tab,.btn):hover .rl-l { translate:0 -100%; }
@media (max-width:980px) {
  html[data-theme="reel"][data-mode][data-style] .station-rail-left .tab { font-size:18px; width:auto; }
  html[data-theme="reel"][data-mode] .station-rail-left .tab.active::after { left:auto; right:-4px; top:6px; }
}

/* ---------- Hover poster (theme-reel.js): a red title card trails the pointer over the chapters ---------- */
#rl-poster { display:none; }
html[data-theme="reel"] #rl-poster {
  display:grid; grid-template-rows:auto 1fr auto; position:fixed; left:0; top:0; z-index:9980; pointer-events:none;
  width:230px; height:150px; padding:12px 14px; background:var(--rl-red); color:var(--rl-on-red); will-change:transform,clip-path;
  clip-path:inset(50% 0 50% 0); transition:clip-path .5s var(--rl-ease);
}
html[data-theme="reel"] #rl-poster.on { clip-path:inset(0 0 0 0); }
html[data-theme="reel"] #rl-poster .rl-pn { font:500 11px/1 var(--font); letter-spacing:.08em; display:flex; justify-content:space-between; }
html[data-theme="reel"] #rl-poster .rl-pe { font-size:44px; line-height:1; align-self:center; filter:grayscale(1) contrast(1.4); mix-blend-mode:multiply; }
html[data-theme="reel"] #rl-poster .rl-pt { font:900 22px/.9 var(--rl-display); font-stretch:125%; letter-spacing:-.03em; text-transform:uppercase; }

/* ---------- Gallery preview ---------- */
.theme-showcase[data-preset="reel"] .theme-showcase-art { background:linear-gradient(transparent 70%,#ff2a1f 70% 72%,transparent 72%),#070707; }
.theme-showcase[data-preset="reel"] .theme-showcase-orbit { display:none; }
.theme-showcase[data-preset="reel"] .theme-showcase-pane { background:#0f0f0f; border:1px solid #2a2a2a; border-radius:0; }
.theme-showcase[data-preset="reel"] .theme-showcase-type { font-family:"Archivo",sans-serif; font-weight:900; font-stretch:125%; text-transform:uppercase; color:#ff2a1f; }
.theme-showcase[data-preset="reel"] .theme-showcase-mini-button { background:#ff2a1f; border-radius:0; }
.theme-showcase[data-preset="reel"] .theme-showcase-caption { color:#f2ede6; font-family:"Instrument Serif",serif; text-transform:uppercase; position:relative; z-index:2; }

@media (prefers-reduced-motion:reduce) {
  html[data-theme="reel"] *, html[data-theme="reel"] *::before, html[data-theme="reel"] *::after { animation:none !important; transition-duration:.01ms !important; }
  html[data-theme="reel"] #rl-poster { display:none; }
  html.rl-cut[data-theme="reel"] body::after { display:none; }
  html[data-theme="reel"][data-mode] body::before { animation:none !important; }
}