/* Creator OS portal. */

@font-face { font-family: "Plex"; src: url("fonts/plexsans-latin.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plexsans-arabic.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plexmono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Board: white modules on a cool grey page, hairline rules, square corners, one violet accent for the next action. */
:root {
  color-scheme: light;
  --bg: #f4f4f6;
  --paper: #ffffff;
  --paper-2: #f4f4f6;
  --ink: #111114;
  --ink-2: #3b3b44;
  --ink-3: #6b6b76;
  --rule: #e4e4ea;
  --rule-strong: #c9c9d2;
  --grid: transparent;
  --acc: #6a4bff;
  --acc-ink: #5236e0;
  --acc-soft: #efebff;
  --up: #0a8a3a;
  --down: #c62828;
  --pink: #efebff;        /* legacy ink names, remapped: results tint */
  --blue: #6a4bff;        /* legacy: the next action */
  --yellow: #f4f4f6;      /* legacy: waiting = neutral */
  --green: #e3f5ea;       /* legacy: done */
  --on-ink: #111114;
  --on-blue: #ffffff;
  --blend: normal;
  --grain-opacity: 0;
  --display: "Plex", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --ui: "Plex", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --pop: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.22s;
  --shadow: 0 1px 2px rgb(17 17 20 / 0.06);
  --gutter: 1rem;
  --side: 15rem;
}

/* ---------- paper ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-3) var(--paper-2); }
body {
  margin: 0; color: var(--ink); background: var(--bg); caret-color: var(--acc);
  font: 400 0.9375rem/1.5 var(--ui); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--acc-soft); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 0; border: 2px solid var(--paper-2); }
a { color: var(--ink); text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { text-decoration-color: var(--acc); color: var(--acc-ink); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.1; text-wrap: balance; }
h1 { font: 800 2.25rem/1 var(--display); font-stretch: 118%; letter-spacing: -0.02em; }
h2 { font: 800 1.375rem/1.1 var(--display); font-stretch: 112%; letter-spacing: -0.01em; }
h3 { font: 700 1rem/1.3 var(--ui); }
p { margin: 0; }
code { font-family: var(--mono); font-size: 0.875em; background: var(--paper-2); padding: 0.05em 0.3em; border-radius: 0; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; z-index: 60; background: var(--paper); padding: 0.5rem 0.75rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.125rem; height: 1.125rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--ink-3); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.8125rem; }

/* ---------- masthead ---------- */
.mast { border-bottom: 1px solid var(--rule-strong); background: var(--paper); position: relative; z-index: 2; }
.mast-in { max-width: 90rem; margin: 0 auto; padding: 0.5rem var(--gutter); display: flex; align-items: center; gap: 1rem; min-height: 3.25rem; }
.brand { font: 900 1.25rem/1 var(--display); font-stretch: 140%; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; display: inline-grid; }
.brand > span { grid-area: 1 / 1; }
.brand .reg { color: var(--acc); transform: translate(2px, 1.5px); mix-blend-mode: var(--blend); }
.nav { display: flex; gap: 0.125rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav a { white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 0.9375rem; color: var(--ink-2); padding: 0.375rem 0.625rem; border-radius: 0; }
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--on-ink); background: var(--yellow); }
.who { display: flex; align-items: center; gap: 0.5rem; color: var(--ink-3); font-size: 0.8125rem; }
main { max-width: 90rem; margin: 0 auto; padding: 1.5rem var(--gutter) 5rem; }

/* ---------- controls ---------- */
.btn { appearance: none; font: 650 0.9375rem/1.1 var(--ui); display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 2.75rem; padding: 0.625rem 1.05rem; border-radius: 0; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  cursor: pointer; text-decoration: none; transition: transform 0.15s ease-out, background-color 0.15s ease-out; }
.btn:hover { background: var(--paper-2); color: var(--ink); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.ink:hover { background: var(--ink-2); color: var(--paper); }
.btn.next { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.btn.next:hover { background: #00669f; color: var(--on-blue); }
.btn.on-blue { background: var(--on-blue); border-color: var(--on-blue); color: #17151a; }
.btn.on-blue:hover { background: #e9f3fa; }
.btn.quiet { border-color: transparent; background: transparent; }
.btn.quiet:hover { background: var(--paper-2); }
.btn.small { min-height: 2.25rem; padding: 0.4rem 0.8rem; font-size: 0.875rem; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
form.inline { display: inline; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

label { display: block; font-weight: 650; font-size: 0.9375rem; margin-bottom: 0.3rem; }
.hint { color: var(--ink-3); font-size: 0.875rem; font-weight: 400; margin-top: 0.3rem; max-width: 62ch; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=date], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--rule-strong); border-radius: 0;
  padding: 0.55rem 0.7rem; min-height: 2.75rem; transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out; }
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.45; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--yellow); }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); width: 1.1rem; height: 1.1rem; }
input[type=file] { font: inherit; font-size: 0.9375rem; width: 100%; padding: 1.5rem 1rem; border: 1px dashed var(--rule-strong); border-radius: 0; background: var(--paper-2); }
input[type=file]::file-selector-button { font: 650 0.9375rem var(--ui); border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); border-radius: 0; padding: 0.5rem 0.9rem; margin-right: 0.75rem; cursor: pointer; }
.check { display: flex; gap: 0.5rem; align-items: center; font-weight: 500; }
.field { margin-bottom: 1.125rem; }
.grid2 { display: grid; gap: 0 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* ---------- notices ---------- */
.flash { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.flash li { padding: 0.75rem 1rem; border: 1px solid var(--rule-strong); border-radius: 0; background: var(--paper); box-shadow: var(--shadow); }
.flash li.ok { background: color-mix(in srgb, var(--green) 16%, var(--paper)); }
.flash li.error, .errors { background: color-mix(in srgb, var(--pink) 16%, var(--paper)); }
.errors { border: 1px solid var(--rule-strong); border-radius: 0; padding: 0.875rem 1rem; margin-bottom: 1.25rem; }
.errors ul { margin: 0.375rem 0 0; padding-left: 1.25rem; }

/* ---------- page head ---------- */
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.head .sub { color: var(--ink-2); margin-top: 0.5rem; max-width: 60ch; }
.crumb { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.75rem; text-decoration: none; color: var(--ink-2); }
.crumb:hover { color: var(--ink); }

/* ---------- stamps: state by shape, then colour ---------- */
.stamp { display: inline-flex; align-items: center; gap: 0.3rem; font: 700 0.8125rem/1 var(--ui); padding: 0.32rem 0.6rem; border-radius: 0;
  border: 1px solid var(--rule-strong); color: var(--on-ink); background: var(--paper); white-space: nowrap; transform: rotate(-1.5deg);
  box-shadow: 0 0 0 2.5px #fff, 0 1px 3px rgb(23 21 26 / 0.25); }
.stamp.solid { background: var(--green); }
.stamp.pending { border-style: dashed; background: var(--yellow); }
.stamp.next { border-style: dashed; color: var(--ink); background: var(--paper); }
.stamp.struck { background: var(--paper); color: var(--ink); text-decoration: line-through 2px; }

/* ---------- stickers: the engine's lessons ---------- */
.stickers { display: flex; flex-wrap: wrap; gap: 0.625rem 0.5rem; list-style: none; margin: 0; padding: 0; }
.sticker { display: inline-flex; flex-direction: column; gap: 0.1rem; padding: 0.5rem 0.8rem 0.55rem; border-radius: 0;
  border: 1px solid var(--rule-strong); background: var(--pink); color: var(--on-ink); max-width: 19rem; transform: rotate(-1deg);
  box-shadow: 0 0 0 3.5px #fff, 0 2px 4px 3px rgb(23 21 26 / 0.14); }
.sticker:nth-child(2n) { transform: rotate(1.25deg); border-radius: 0; }
.sticker:nth-child(3n) { transform: rotate(-0.5deg); }
.sticker.avoid { background: var(--yellow); }
.sticker.low { border-style: dashed; border-width: 2px; background: color-mix(in srgb, var(--pink) 30%, #fdfcf8); box-shadow: 0 0 0 3.5px #fff; }
.sticker.avoid.low { background: color-mix(in srgb, var(--yellow) 40%, #fdfcf8); }
.sticker .what { font-weight: 700; font-size: 0.9375rem; line-height: 1.25; }
.sticker .ratio { font: 800 1.0625rem/1 var(--display); font-stretch: 80%; }
.sticker .conf { font-size: 0.75rem; font-weight: 650; }

/* ---------- the spread ---------- */
.spreads { display: grid; gap: 2.5rem; }
.spread { display: grid; gap: 1.25rem 1.75rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "hero" "ticket" "why";
  padding-top: 1.25rem; border-top: 1px solid var(--rule); position: relative; }
.spread-title { grid-area: title; } .hero { grid-area: hero; } .why { grid-area: why; } .ticket, .ticket-slot { grid-area: ticket; }
.spread-title { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; }
.spread-title h2 { font-size: 1.75rem; }
.spread-title h2 a { text-decoration: none; }
.spread-title h2 a:hover { text-decoration: underline; text-decoration-color: var(--acc); }
.spread-title .meta { color: var(--ink-2); font-size: 0.9375rem; }
.hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; align-items: center; }

.strip { width: 4.5rem; background: #fdfcf8; border: 1px solid var(--rule-strong); padding: 0.375rem 0.375rem 0.5rem; display: grid; gap: 0.375rem;
  transform: rotate(-2deg); box-shadow: var(--shadow); }
.frame { aspect-ratio: 1 / 1; overflow: hidden; position: relative; background: var(--pink); }
.frame:nth-child(2) { background: var(--yellow); } .frame:nth-child(3) { background: var(--green); }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.2); mix-blend-mode: multiply; transform: translate(2px, 1.5px); }
.frame:nth-child(2) img { transform: translate(-2px, 1px); } .frame:nth-child(3) img { transform: translate(1.5px, -2px); }
.frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background-image: radial-gradient(rgb(23 21 26 / 0.34) 0.75px, transparent 1.05px); background-size: 3px 3px; }
.frame:nth-child(1) img { object-position: 50% 18%; } .frame:nth-child(2) img { object-position: 50% 32%; } .frame:nth-child(3) img { object-position: 50% 46%; }
.frame.text::after { display: none; }
@media (max-width: 759px) { .frame.text span { display: none; } }
.frame.text { display: flex; align-items: flex-end; padding: 0.35rem; font: 700 0.6875rem/1.15 var(--ui); color: var(--on-ink);
  background-image: radial-gradient(rgb(23 21 26 / 0.22) 0.9px, transparent 1.1px); background-size: 5px 5px; }
.frame.text span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.strip figcaption { font: 600 0.6875rem/1.25 var(--ui); color: #17151a; padding-top: 0.125rem; display: grid; gap: 0.15rem; }
.strip figcaption .cap-hook { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 759px) { .strip figcaption .cap-hook { display: none; } }

.figure { min-width: 0; }
.big { display: inline-grid; font: 900 clamp(4.25rem, 21vw, 6rem)/0.86 var(--display); font-stretch: 96%; letter-spacing: -0.03em; margin-left: -3rem; }
.big > span { grid-area: 1 / 1; }
.big .reg { color: var(--yellow); transform: translate(0.045em, 0.035em); mix-blend-mode: var(--blend); }
.big .key { color: var(--acc); mix-blend-mode: var(--blend); }
.big-label { font-weight: 650; color: var(--ink-2); margin-top: 0.5rem; }
.big-empty { font: 800 1.5rem/1.1 var(--display); font-stretch: 90%; margin-left: -1rem; padding: 0.75rem 0.9rem; background: var(--paper);
  border: 1px dashed var(--rule-strong); max-width: 18rem; transform: rotate(-1deg); }
.meter { height: 0.75rem; margin-top: 0.625rem; border: 1px solid var(--rule-strong); border-radius: 0; background: var(--paper); overflow: hidden; max-width: 22rem; }
.meter-fill { display: block; height: 100%; background: var(--pink); background-image: radial-gradient(rgb(23 21 26 / 0.25) 0.8px, transparent 1px); background-size: 4px 4px; }
progress.meter-fill { appearance: none; -webkit-appearance: none; width: 100%; border: 0; background: transparent; color: var(--acc); }
progress.meter-fill::-webkit-progress-bar { background: transparent; }
progress.meter-fill::-webkit-progress-value { background: var(--pink); }
progress.meter-fill::-moz-progress-bar { background: var(--pink); }
.ledger { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.875rem 0 0; font-size: 0.9375rem; }
.ledger div { display: flex; gap: 0.35rem; align-items: baseline; }
.ledger dt { color: var(--ink-3); order: 2; }
.ledger dd { margin: 0; font-weight: 750; }

.why h3 { margin-bottom: 0.625rem; font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- the ticket: the engine's next move ---------- */
.ticket { --notch: 0.7rem; color: var(--on-blue); border-radius: 0; position: relative;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 4.4rem, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 4.4rem, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--notch) at 0 4.4rem, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 4.4rem, transparent 98%, #000) right / 51% 100% no-repeat; }
.ticket a { color: var(--on-blue); text-decoration-color: var(--on-blue); }
.ticket .stub { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; height: 4.4rem; padding: 1.1rem 1.25rem 0;
  background: var(--blue) radial-gradient(circle, rgb(255 255 255 / 0.9) 1.5px, transparent 1.9px) 0 100% / 9px 6px repeat-x; border-radius: 0; position: relative; overflow: hidden; }
.ticket .stub::after { content: ""; position: absolute; right: -1.75rem; top: -2rem; width: 3.75rem; height: 3.75rem; border-radius: 50%; mix-blend-mode: multiply;
  background: var(--yellow) radial-gradient(rgb(23 21 26 / 0.18) 0.9px, transparent 1.2px) 0 0 / 5px 5px; pointer-events: none; }
.ticket .ticket-body { background: var(--blue); padding: 1rem 1.25rem 1.25rem; border-radius: 0 0 6px 6px; transform-origin: 0 0; }
.ticket.torn .ticket-body { transform: translate(0.4rem, 0.9rem) rotate(2.5deg); }
@media (prefers-reduced-motion: no-preference) { .ticket .ticket-body { transition: transform var(--dur) var(--pop); } }
.ticket h2, .ticket h3 { color: var(--on-blue); }
.ticket .no { font: 800 1rem/1 var(--display); font-stretch: 80%; position: relative; z-index: 1; margin-right: 1.5rem; }
.ticket p, .ticket li { font-size: 0.9375rem; }
.ticket ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.ticket li { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid rgb(255 255 255 / 0.3); }
.ticket li:last-child { border-bottom: 0; }
.ticket li b { font-variant-numeric: tabular-nums; }
.ticket .note { font-size: 0.8125rem; margin-top: 0.75rem; }
.ticket .btn { width: 100%; }
.ticket .hooks { margin: 0 0 1rem; padding-left: 1.1rem; }
.ticket .hooks li { display: list-item; border: 0; padding: 0.15rem 0; }

@media (min-width: 760px) {
  .spread { grid-template-columns: minmax(0, 1fr) 19rem; grid-template-areas: "title title" "hero ticket" "why ticket"; align-items: start; }
  .strip { width: 8.25rem; }
  .big { margin-left: -4.5rem; }
}
@media (min-width: 1100px) {
  .spread { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 20rem; grid-template-areas: "title title title" "hero why ticket"; }
  .why { padding-top: 0.5rem; }
}

/* ---------- modules: ruled lists for density ---------- */
.module { border-top: 1px solid var(--rule-strong); padding-top: 0.875rem; }
.module + .module { margin-top: 2.25rem; }
.module-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.module-head p { color: var(--ink-3); font-size: 0.875rem; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { padding: 0.875rem 0; border-top: 1px solid var(--rule); }
.rows > li:first-child { border-top: 0; padding-top: 0.25rem; }
.row-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; }
.row-top .name { display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; font-weight: 700; }
.row-top .name .muted { font-weight: 400; font-size: 0.875rem; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.875rem; margin: 0.625rem 0 0; font-size: 0.9375rem; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.advice { margin-top: 0.625rem; font-size: 0.9375rem; padding: 0.55rem 0.75rem; border: 1px dashed var(--rule-strong); border-radius: 0; }
details summary { cursor: pointer; font-weight: 600; font-size: 0.875rem; color: var(--ink-2); margin-top: 0.5rem; width: fit-content; }
details summary:hover { color: var(--ink); }
.hooks { margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: 0.9375rem; }
.hooks li { margin: 0.2rem 0; }
.hooks .tag, .tag { color: var(--ink-3); font-size: 0.8125rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th { text-align: left; font-weight: 650; font-size: 0.8125rem; color: var(--ink-3); padding: 0 0.5rem 0.4rem 0; border-bottom: 1px solid var(--rule-strong); }
td { padding: 0.55rem 0.5rem 0.55rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; padding-right: 0; white-space: nowrap; font-weight: 700; }
.table-wrap { overflow-x: auto; }
.empty-note { color: var(--ink-2); padding: 0.875rem 1rem; border: 1px dashed var(--rule-strong); border-radius: 0; max-width: 60ch; }

.cols { display: grid; gap: 2.25rem; margin-top: 2.5rem; }
@media (min-width: 960px) { .cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } .cols > * + * { margin-top: 0; } }

.lesson { padding: 0.875rem 0; border-top: 1px solid var(--rule); display: grid; gap: 0.35rem; }
.lesson:first-child { border-top: 0; padding-top: 0.25rem; }
.lesson .sticker { justify-self: start; }
.lesson .ev { color: var(--ink-3); font-size: 0.8125rem; }

.scripts { display: grid; gap: 0.75rem; margin-top: 1rem; }
.script { background: #fdfcf8; color: #17151a; border-radius: 0; padding: 0.8rem 0.9rem; }
.script h3 { white-space: pre-line; color: #17151a; }
.script .body { margin-top: 0.35rem; white-space: pre-line; font-size: 0.9375rem; color: #3d3943; }
.script .tag { color: #5b5662; margin-top: 0.35rem; }

.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.post { border: 1px solid var(--rule-strong); background: var(--paper); padding: 0.5rem; display: grid; grid-template-columns: 3rem 1fr; gap: 0.625rem; align-items: start; }
.post .views { font: 900 1.375rem/1 var(--display); font-stretch: 70%; background: var(--pink); color: var(--on-ink); padding: 0.4rem 0.25rem; text-align: center; }
.post:first-child .views { background: var(--yellow); }
.post p { font-size: 0.875rem; line-height: 1.3; overflow-wrap: anywhere; }

/* ---------- forms as ruled modules ---------- */
.form-layout { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .form-layout { grid-template-columns: 12rem minmax(0, 1fr); align-items: start; } }
.toc { display: none; }
@media (min-width: 900px) { .toc { display: grid; position: sticky; top: 1rem; gap: 0.125rem; } }
.toc a { text-decoration: none; font-weight: 600; font-size: 0.9375rem; color: var(--ink-2); padding: 0.35rem 0.6rem; border-radius: 0; }
.toc a:hover { color: var(--ink); background: var(--paper-2); }
fieldset.module { border: 0; border-top: 1px solid var(--rule-strong); margin: 0; padding: 0.875rem 0 0.5rem; min-width: 0; }
fieldset.module + fieldset.module { margin-top: 2rem; }
fieldset.module legend { float: left; width: 100%; padding: 0; font: 800 1.375rem/1.1 var(--display); font-stretch: 112%; margin-bottom: 0.25rem; }
fieldset.module legend + * { clear: both; }
.lead { color: var(--ink-2); font-size: 0.9375rem; margin-bottom: 1.125rem; max-width: 62ch; }
.rowsets { display: grid; gap: 0.75rem; }
.rowset { display: grid; gap: 0.625rem 0.875rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); padding: 0.875rem; border: 1px dashed var(--rule-strong); border-radius: 0; }
.rowset .span { grid-column: 1 / -1; }
.rowset label { font-size: 0.8125rem; }
.savebar { position: sticky; bottom: 0; z-index: 3; background: var(--paper); border-top: 1px solid var(--rule-strong); padding: 0.75rem 0; margin-top: 1.5rem; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.secret-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: end; padding: 0.875rem 0; border-top: 1px solid var(--rule); }
.secret-row:first-of-type { border-top: 0; }
.label-line { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.35rem; }
.label-line label { margin: 0; }

.channels { display: grid; gap: 0.5rem; }
.channel { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 0.875rem; border: 1.5px solid var(--rule-strong); border-radius: 0; cursor: pointer; font-weight: 550; margin: 0; }
.channel:hover { border-color: var(--ink); }
.channel:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--yellow) 35%, var(--paper)); }
.channel .svc { margin-left: auto; color: var(--ink-3); font-size: 0.875rem; font-weight: 400; }
.step { display: flex; gap: 0.75rem; align-items: baseline; }

/* ---------- login + error: a cover ---------- */
.cover { max-width: 26rem; margin: 6vh auto 0; }
.cover-title { display: inline-grid; font: 900 clamp(3rem, 14vw, 4.75rem)/0.85 var(--display); font-stretch: 130%; letter-spacing: -0.04em; margin-bottom: 1rem; }
.cover-title > span { grid-area: 1 / 1; }
.cover-title .reg { color: var(--yellow); transform: translate(0.04em, 0.03em); mix-blend-mode: var(--blend); }
.cover-title .key { color: var(--acc); mix-blend-mode: var(--blend); }
.cover .sub { color: var(--ink-2); margin-bottom: 1.5rem; }
.cover form { border-top: 1px solid var(--rule-strong); padding-top: 1.25rem; }
.cover .btn { width: 100%; }
.cover-title { position: relative; isolation: isolate; }
.cover-title .dot { grid-area: 1 / 1; justify-self: end; align-self: start; width: 0.95em; height: 0.95em; margin: -0.12em -0.12em 0 0; border-radius: 50%; z-index: -1;
  background: var(--yellow) radial-gradient(rgb(23 21 26 / 0.14) 1px, transparent 1.3px) 0 0 / 6px 6px; mix-blend-mode: var(--blend); }
.cover .sub { position: relative; }

/* ---------- motion: one grammar, 0.4s with one overshoot ---------- */
@keyframes press { from { transform: scale(1.16) rotate(-4deg); } }
@keyframes rise { from { transform: translateY(1.25rem); } }
@keyframes settle { from { transform: translate(0.16em, 0.12em); } }
@media (prefers-reduced-motion: no-preference) {
  .sticker { animation: press var(--dur) var(--pop) backwards; animation-delay: 0.18s; }
  .sticker:nth-child(2) { animation-delay: 0.25s; } .sticker:nth-child(3) { animation-delay: 0.32s; } .sticker:nth-child(n+4) { animation-delay: 0.39s; }
  .ticket { animation: rise var(--dur) var(--pop) backwards 0.3s; }
  .big .reg, .cover-title .reg { animation: settle var(--dur) var(--pop) backwards 0.05s; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media (max-width: 520px) {
  h1 { font-size: 1.875rem; }
  .who .email, .who .btn span { display: none; }
  .brand { font-size: 1.0625rem; }
  .nav a { padding-inline: 0.5rem; }
  .nav a[href="/c/new"] { display: none; } /* the page header carries New creator on phones */
  .spread-title h2 { font-size: 1.5rem; }
}
.gap-top { margin-top: 1rem; }
.gap-bottom { margin-bottom: 1rem; }

/* ---------- phone head: compact icon actions ---------- */
@media (max-width: 759px) {
  .head.compact { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 1rem; }
  .head.compact .actions { flex-wrap: nowrap; }
  .head.compact .sub { display: none; }
  .head.compact h1 { font-size: 1.625rem; font-stretch: 100%; }
  .head .actions .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .head .actions .btn:has(.lbl) { width: 2.75rem; padding: 0; }
  .spread { gap: 1rem; }
}

/* ---------- inks below the fold ---------- */
.module { --tint: var(--pink); background: linear-gradient(var(--tint), var(--tint)) 0 0 / 100% 5px no-repeat; padding-top: 1.1rem; }
.module.ink-yellow { --tint: var(--yellow); } .module.ink-green { --tint: var(--green); } .module.ink-pink { --tint: var(--pink); }
.module-head h2 span { background: linear-gradient(transparent 72%, var(--tint) 72%, var(--tint) 100%) no-repeat; padding: 0 0.15em; }
.rows > li.row-awaiting_approval { background: color-mix(in srgb, var(--yellow) 14%, transparent); margin-inline: -0.5rem; padding-inline: 0.5rem; }
.trouble { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--rule-strong);
  border-radius: 0; background: color-mix(in srgb, var(--pink) 15%, var(--paper)); }
.trouble p { flex: 1 1 18rem; font-size: 0.9375rem; }
.clip-trouble { display: block; font-size: 0.8125rem; color: var(--ink-2); text-decoration: underline wavy var(--pink); text-underline-offset: 0.3em; }

/* ---------- brief editor ---------- */
.rowset .span2 { grid-column: 1 / -1; }
@media (min-width: 640px) { .rowset .span2 { grid-column: span 2; } }
.slots { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.slotrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.625rem; border: 1px dashed var(--rule-strong); border-radius: 0; }
.slotrow label { font-size: 0.8125rem; }
details.operator { margin-top: 2.5rem; border-top: 1px solid var(--rule-strong); }
details.operator > summary { list-style: none; cursor: pointer; padding: 0.875rem 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
  font: 800 1.25rem/1.1 var(--display); font-stretch: 112%; color: var(--ink); width: auto; margin: 0; }
details.operator > summary::-webkit-details-marker { display: none; }
details.operator > summary::before { content: "+"; font-family: var(--ui); font-weight: 700; width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center;
  border: 1px solid var(--rule-strong); border-radius: 50%; font-size: 1rem; align-self: center; }
details.operator[open] > summary::before { content: "−"; }
details.operator > summary .hint { font: 400 0.875rem/1.4 var(--ui); margin: 0; flex-basis: 100%; padding-left: 2.25rem; }
details.operator .keys { margin-top: 2rem; }

/* ---------- upload drop zone ---------- */
.dropzone { position: relative; display: grid; justify-items: center; gap: 0.35rem; text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--rule-strong);
  border-radius: 0; cursor: pointer; font-weight: 400; margin: 0; transition: background-color 0.15s ease-out;
  background: radial-gradient(rgb(23 21 26 / 0.06) 1px, transparent 1.3px) 0 0 / 7px 7px; }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone:hover, .dropzone.over { background-color: color-mix(in srgb, var(--yellow) 35%, var(--paper)); }
.dropzone:focus-within { outline: 1px solid var(--rule-strong); outline-offset: 3px; box-shadow: 0 0 0 7px var(--yellow); }
.dz-icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: #17151a; }
.dz-icon .icon { width: 1.5rem; height: 1.5rem; }
.dz-title { font: 800 1.25rem/1.15 var(--display); font-stretch: 105%; }
.filelist { list-style: none; margin: 1rem 0 0; padding: 0; }
.filelist li { display: flex; align-items: center; gap: 0.5rem 0.875rem; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.filelist .fname { font-weight: 650; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress { margin-top: 1rem; display: grid; gap: 0.35rem; }
.progress[hidden] { display: none; }
.progress progress { height: 0.75rem; border: 1px solid var(--rule-strong); border-radius: 0; overflow: hidden; }

/* ---------- finish round 2 ---------- */
.best-hook { display: none; }
.ratio .times { font-family: var(--ui); font-weight: 700; }
@media (max-width: 759px) {
  .best-hook { display: block; margin-top: 0.5rem; font: 500 0.875rem/1.35 var(--ui); color: var(--ink-2); }
  .best-hook b { color: var(--ink); font-weight: 700; }
  .head.icons .actions { flex-wrap: nowrap; }
}
@media (prefers-color-scheme: dark) {
  /* keep the wordmark's key plate solid over the yellow dot so no letter washes out */
  .cover-title .key { mix-blend-mode: normal; }
}
@media (max-width: 759px) {
  /* phones: the action comes first, the hook preview follows */
  .ticket-body:has(> form[data-tear]) { display: flex; flex-direction: column; }
  .ticket-body > form[data-tear] { order: 1; margin-top: 0.75rem; }
  .ticket-body > .hooks { order: 2; }
  .ticket-body > .note { order: 3; }
}
@media (max-width: 759px) { .head.icons h1 { font-size: 1.75rem; font-stretch: 100%; } }
@media (max-width: 759px) {
  .big { margin-left: -4.75rem; }
  /* Upload is a primary action: keep its words visible; the secondary actions stay icons */
  .head.icons .actions .btn.ink .lbl { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .head.icons .actions .btn.ink:has(.lbl) { width: auto; padding: 0 1rem 0 0.875rem; gap: 0.4rem; }
}

/* ---------- new creator: two ways in ---------- */
.choices { display: grid; gap: 2rem; }
@media (min-width: 960px) { .choices { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } }
.choice { border-top: 1px solid var(--rule-strong); padding-top: 1rem; display: grid; gap: 0.75rem; align-content: start; }
.choice p { color: var(--ink-2); max-width: 60ch; }
.choice .btn { justify-self: start; }
.choice.main { border-top-width: 3px; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.choice.main h2 { font-size: 1.75rem; }
@media (min-width: 640px) { .choice.main { grid-template-columns: 7rem minmax(0, 1fr); } }
.choice.main > div:last-child { display: grid; gap: 0.75rem; }
.choice-art { position: relative; height: 7rem; width: 7rem; }
.ink-dot { position: absolute; width: 4.25rem; height: 4.25rem; border-radius: 50%; mix-blend-mode: var(--blend);
  background-image: radial-gradient(rgb(23 21 26 / 0.16) 0.9px, transparent 1.2px); background-size: 5px 5px; }
.ink-dot.pink { background-color: var(--acc); left: 0; top: 0.4rem; }
.ink-dot.yellow { background-color: var(--yellow); left: 2.6rem; top: 0; }
.ink-dot.green { background-color: var(--green); left: 1.4rem; top: 2.6rem; }
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.9375rem; font-weight: 600; }
.facts li::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--pink); margin-right: 0.45rem; vertical-align: 0.1em; }
.legend-note { font: 600 0.875rem var(--ui); color: var(--ink-3); margin-left: 0.5rem; }
.describe textarea { min-height: 12rem; font-size: 1.0625rem; }

/* ---------- studio: numbered sheets ---------- */
.sheets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; max-width: 62rem; }
.sheet { min-width: 0; }
.sheet { border-top: 1px solid var(--rule-strong); padding-top: 0.875rem; }
.sheet.current { background: linear-gradient(var(--yellow), var(--yellow)) 0 0 / 100% 5px no-repeat; }
.sheet.later { border-top: 2px dashed var(--rule-strong); }
.sheet.later h2, .sheet.later .sheet-no { color: var(--ink-3); }
.sheet-head { display: flex; align-items: center; gap: 0.5rem 0.875rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.sheet-no { display: inline-grid; font: 900 3rem/0.85 var(--display); font-stretch: 70%; min-width: 2.25rem; }
.sheet-no > span { grid-area: 1 / 1; }
.sheet-no .reg { color: transparent; }
.sheet.current .sheet-no .reg { color: var(--yellow); transform: translate(0.06em, 0.05em); mix-blend-mode: var(--blend); }
.sheet.current .sheet-no .key { color: var(--acc); mix-blend-mode: var(--blend); }
.sheet.later .sheet-no .key { color: transparent; -webkit-text-stroke: 1.5px var(--ink-3); }
.sheet-body { padding-left: 0; }
@media (min-width: 760px) { .sheet-body { padding-left: 3.125rem; } }
.working { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; padding: 0.75rem 0; }
.ink-spin { width: 1.5rem; height: 1.5rem; border-radius: 50%; flex: none; background: var(--pink); position: relative; }
.ink-spin::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--yellow); mix-blend-mode: var(--blend); transform: translateX(0.45rem); }
@media (prefers-reduced-motion: no-preference) { .ink-spin::after { animation: drift calc(var(--dur) * 3) var(--pop) infinite alternate; } }
@keyframes drift { from { transform: translateX(0.45rem); } to { transform: translateX(-0.45rem); } }
.brief-kv { max-width: 62ch; }
.signoff { font-style: italic; }
.tags { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 0.5rem; }
.tag-sticker { font-weight: 650; font-size: 0.875rem; padding: 0.35rem 0.75rem; border: 1px solid var(--rule-strong); border-radius: 0; background: var(--paper);
  box-shadow: 0 0 0 3px #fff, 0 1px 3px rgb(23 21 26 / 0.2); transform: rotate(-0.75deg); }
.tag-sticker:nth-child(2n) { transform: rotate(1deg); border-radius: 0; }
.voices { list-style: none; margin: 0; padding: 0; }
.voice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--rule); }
.voice:first-child { border-top: 0; }
.voice.chosen { background: color-mix(in srgb, var(--green) 12%, transparent); margin-inline: -0.5rem; padding-inline: 0.5rem; }
.voice-name { font-weight: 700; min-width: 4.5rem; }
.voice audio { height: 2.5rem; flex: 1 1 14rem; max-width: 22rem; }
.face-row { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: flex-start; }
.face-print { margin: 0; background: #fdfcf8; border: 1px solid var(--rule-strong); padding: 0.5rem 0.5rem 0.4rem; transform: rotate(-1.5deg); box-shadow: var(--shadow); width: min(15rem, 60vw); }
.face-print img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.face-print figcaption { font: 600 0.75rem var(--ui); color: #17151a; padding-top: 0.3rem; }
.face-actions { display: grid; gap: 0.75rem; align-content: start; max-width: 22rem; }
.face-actions .btn { justify-self: start; }
.contact { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); max-width: 40rem; }
.contact li { display: grid; gap: 0.35rem; justify-items: start; }
.contact img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border: 1.5px solid var(--rule-strong); }
.contact li.on img { border: 1px solid var(--rule-strong); }
.looks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 10rem)); }
.looks li { display: grid; gap: 0.35rem; justify-items: start; }
.looks img, .look-blank { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border: 1px solid var(--rule-strong); display: block; }
.look-blank { border-style: dashed; border-color: var(--rule-strong); background: radial-gradient(rgb(23 21 26 / 0.07) 1px, transparent 1.3px) 0 0 / 7px 7px; }
.look-name { font-weight: 700; }
.sheet .ticket { max-width: 26rem; }

/* ---------- dashboard: a creator still in the studio ---------- */
.in-studio { display: grid; gap: 0.625rem; justify-items: start; align-content: start; }
.studio-step { font: 800 1.375rem/1.15 var(--display); font-stretch: 105%; }
.dots { list-style: none; display: flex; gap: 0.4rem; margin: 0; padding: 0; }
.dots li { width: 0.875rem; height: 0.875rem; border-radius: 50%; border: 1.5px dashed var(--ink-3); }
.dots li.on { background: var(--green); border: 1px solid var(--rule-strong); }
.dots li.here { background: var(--yellow); border: 1px solid var(--rule-strong); }
.studio-note { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin-bottom: 1.25rem; padding: 0.625rem 0.75rem; border: 1.5px dashed var(--ink); border-radius: 0; }

/* ---------- go-live kit ---------- */
.golive { max-width: 62rem; display: grid; gap: 0; }
.profile-grid { display: grid; gap: 1.25rem 2rem; }
@media (min-width: 760px) { .profile-grid { grid-template-columns: 11rem minmax(0, 1fr); align-items: start; } }
.avatar { margin: 0; display: grid; gap: 0.6rem; justify-items: center; }
.avatar img, .avatar-blank { width: 10rem; height: 10rem; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--pink), 0 0 0 7px #17151a; }
.avatar-blank { background: radial-gradient(rgb(23 21 26 / 0.08) 1px, transparent 1.3px) 0 0 / 7px 7px; border: 1px dashed var(--rule-strong); box-shadow: none; }
.avatar figcaption a { font-weight: 600; font-size: 0.9375rem; display: inline-flex; gap: 0.35rem; align-items: center; }
.profile-copy { display: grid; gap: 1rem; min-width: 0; }
.copybox { display: grid; gap: 0.3rem; min-width: 0; }
.copybox textarea { min-height: 0; resize: vertical; font-size: 1rem; line-height: 1.45; background: var(--paper); }
.copybox textarea[rows="1"] { min-height: 2.75rem; resize: none; }
.copy-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; flex-wrap: wrap; min-height: 2.25rem; }
.chars { font-size: 0.875rem; font-weight: 650; color: var(--ink-2); }
.chars.over { color: var(--ink); background: color-mix(in srgb, var(--pink) 25%, var(--paper)); padding: 0.1rem 0.45rem; border-radius: 0; text-decoration: underline wavy var(--pink); }
.btn.copied { background: var(--green); border-color: #17151a; color: #17151a; }
.bios { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .bios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.golive .module + .module { margin-top: 2.25rem; }
.pins { margin: 0.5rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; max-width: 70ch; }
.check-group { border: 0; margin: 0; padding: 0.75rem 0 0.5rem; border-top: 1px solid var(--rule); min-width: 0; }
.check-group:first-child { border-top: 0; padding-top: 0.25rem; }
.check-group legend { float: left; width: 100%; font-weight: 700; font-size: 1.0625rem; display: flex; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; align-items: baseline; margin-bottom: 0.35rem; }
.check-group legend + * { clear: both; }
.group-progress { font: 650 0.8125rem var(--ui); color: var(--ink-2); padding: 0.15rem 0.5rem; border: 1.5px dashed var(--ink-3); border-radius: 0; }
.check-group.all-done .group-progress { border-style: solid; border-color: #17151a; background: var(--green); color: #17151a; }
.check-group ul { list-style: none; margin: 0; padding: 0; }
.tick { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.6rem; align-items: start; font-weight: 400; padding: 0.45rem 0; margin: 0; cursor: pointer; max-width: 75ch; }
.tick input { margin-top: 0.2rem; }
.tick input:checked + span { color: var(--ink-3); }  /* done = quiet, never struck (struck means failed) */
.golive-ticket { max-width: 30rem; }
.ticket .btn.ghost { background: transparent; border-color: var(--on-blue); color: var(--on-blue); width: 100%; }
.ticket .btn.ghost:hover { background: rgb(255 255 255 / 0.12); }
@media print {
  .mast, .no-print, .skip, .copy-foot .btn, .crumb, .flash { display: none !important; }
  body { background: #fff; } body::after { display: none; }
  .copybox textarea { border: 1px solid #999; resize: none; }
}

/* ---------- watch before approving ---------- */
.review { margin-top: 2.5rem; }
.reel { list-style: none; margin: 0; padding: 0 0 0.5rem; display: grid; gap: 1.25rem; grid-auto-flow: column; grid-auto-columns: minmax(13.5rem, 72vw);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
@media (min-width: 760px) { .reel { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); overflow: visible; } }
.reel-item { scroll-snap-align: start; display: grid; gap: 0.45rem; align-content: start; min-width: 0; }
.phone { position: relative; aspect-ratio: 9 / 16; background: #17151a; border-radius: 0; padding: 6px; box-shadow: var(--shadow); max-width: 16rem; width: 100%; }
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; background: #000; }
.phone-blank { display: grid; place-items: center; height: 100%; padding: 1rem; text-align: center; color: #fdfcf8; font-size: 0.875rem; border-radius: 0;
  border: 1.5px dashed rgb(253 252 248 / 0.5); }
.reel-item.dropped .phone { background: transparent; border: 2px dashed var(--ink-3); box-shadow: none; }
.reel-item.dropped video { opacity: 0.35; filter: grayscale(1); }
.reel-item.dropped .r-hook, .reel-item.dropped .r-cap, .reel-item.dropped .r-meta { color: var(--ink-3); }
.dropped-stamp { position: absolute; top: 0.75rem; left: 0.75rem; }
.r-meta { font-size: 0.8125rem; font-weight: 650; color: var(--ink-2); }
.r-hook { font-weight: 700; line-height: 1.3; }
.r-cap { font-size: 0.875rem; color: var(--ink-2); overflow-wrap: anywhere; }
.r-cap b { color: var(--ink); font-weight: 650; margin-right: 0.25rem; }
.reel-item .btn { justify-self: start; }
.upload-phone { max-width: 11rem; margin-top: 0.75rem; }
.note.window { font-weight: 600; opacity: 1; }

/* ---------- posting calendar ---------- */
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1rem;
  border-top: 1px solid var(--rule); padding-top: 0.875rem; }
.month-nav { display: flex; align-items: center; gap: 0.75rem; }
.month-nav .btn { width: 2.25rem; padding: 0; }
.month-nav .flip .icon { transform: scaleX(-1); }
.month-title { font-size: 1.5rem; min-width: 11ch; text-align: center; }
.creator-filter select { min-width: 12rem; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.875rem; align-items: center; }
.legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.swatch { width: 0.9rem; height: 0.9rem; border-radius: 0; border: 1px solid var(--rule-strong); background: var(--pink); }
.swatch.ink-yellow { background: var(--yellow); } .swatch.ink-green { background: var(--green); }
.cstamp { display: inline-block; font: 700 0.6875rem/1 var(--ui); padding: 0.2rem 0.35rem; border-radius: 0; border: 1px solid var(--rule-strong); white-space: nowrap; color: var(--ink); background: var(--paper); }
.cstamp.posted { background: var(--green); border-color: #17151a; color: #17151a; }
.cstamp.failed { text-decoration: line-through 1.5px; }
.cstamp.draft { border-style: dashed; color: var(--ink-2); }
.month { width: 100%; table-layout: fixed; border-collapse: collapse; display: none; }
@media (min-width: 900px) { .month { display: table; } .agenda { display: none; } }
.month th { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--rule-strong); font-size: 0.8125rem; }
.month td { vertical-align: top; height: 7.5rem; padding: 0.35rem; border: 1px solid var(--rule); }
.month td.out { background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.month td.out .dnum, .month td.past .dnum { color: var(--ink-3); }
.month td.today { background: color-mix(in srgb, var(--yellow) 16%, var(--paper)); box-shadow: inset 0 0 0 2px var(--acc); }
.dnum { display: block; font: 800 0.9375rem/1 var(--display); font-stretch: 80%; margin-bottom: 0.3rem; }
.month td.today .dnum { display: inline-block; background: var(--acc); color: #fff; padding: 0.15rem 0.3rem; border-radius: 0; }
.entry { border-radius: 0; margin-bottom: 0.3rem; }
.entry > summary { list-style: none; cursor: pointer; display: grid; gap: 0.15rem; padding: 0.3rem 0.35rem; border-radius: 0; border: 1px solid var(--rule); background: var(--paper); }
.entry > summary::-webkit-details-marker { display: none; }
.entry > summary:hover { border-color: var(--ink); }
.entry[open] > summary { border-color: var(--ink); }
.month .entry > summary { grid-template-columns: auto 1fr; align-items: center; column-gap: 0.3rem; font-size: 0.75rem; }
.month .entry .e-line { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month .entry .e-who { grid-column: 1 / -1; font-weight: 700; }
.e-who::before { content: ""; display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 50%; border: 1px solid var(--rule-strong); margin-right: 0.3rem; vertical-align: -0.05em; background: var(--pink); }
.entry.ink-yellow .e-who::before { background: var(--yellow); } .entry.ink-green .e-who::before { background: var(--green); }
.entry.failed .e-line { text-decoration: line-through; }
.e-time { font-weight: 700; }
.e-meta { font-size: 0.8125rem; color: var(--ink-2); }
.e-detail { padding: 0.5rem 0.35rem 0.75rem; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.e-caption { white-space: pre-line; overflow-wrap: anywhere; }
.trouble-line { padding: 0.35rem 0.5rem; border: 1px solid var(--rule-strong); border-radius: 0; background: color-mix(in srgb, var(--pink) 15%, var(--paper)); }
.cal-phone { max-width: 9rem; }
.agenda { list-style: none; margin: 0; padding: 0; }
.aday { border-top: 1px solid var(--rule); padding: 0.875rem 0; }
.aday h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.aday.today h3 { display: inline-block; background: var(--acc); color: #fff; padding: 0.1rem 0.4rem; border-radius: 0; }
.agenda .entry > summary { width: 100%; box-sizing: border-box; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 0.5rem; padding: 0.55rem 0.6rem; }
.agenda .entry .e-line, .agenda .entry .e-meta, .agenda .entry .e-who { grid-column: 1 / -1; }
.agenda .entry .e-who { font-weight: 700; font-size: 0.875rem; }
.entry .cstamp { justify-self: start; }
.month td.today { background: color-mix(in srgb, var(--yellow) 9%, var(--paper)); }
@media (max-width: 520px) { .nav a { font-size: 0.875rem; padding-inline: 0.4rem; } .mast-in { gap: 0.5rem; } }

/* Calendar: moving posts. A scheduled post can be picked up; a day that can take it gets a dashed blue outline (blue = next action). */
.entry.movable > summary { cursor: grab; }
.entry.movable > summary:active { cursor: grabbing; }
.entry.dragging { opacity: 0.45; }
.month td.drop-ok { box-shadow: inset 0 0 0 2px var(--blue); outline: 2px dashed var(--blue); outline-offset: -6px; background: color-mix(in srgb, var(--blue) 8%, var(--paper)); }
.month td.moving { opacity: 0.7; }
.move-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.move-form { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: end; }
.move-form label { display: grid; gap: 0.2rem; font-size: 0.75rem; font-weight: 700; }
.move-form input { font: inherit; font-size: 0.8125rem; padding: 0.25rem 0.35rem; border: 1px solid var(--rule-strong); border-radius: 0; background: var(--paper); color: var(--ink); min-width: 0; }
.month .move-row .btn.small { font-size: 0.75rem; }

/* Real creators: third path on the new-creator page, upload options, shorts grouped under their source video. */
.choice-stack { display: grid; gap: 2rem; align-content: start; }
.choice.real { border-top-width: 3px; }
.choice .facts { margin: 0; }
.real-form .hours { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; padding: 0; margin: 0; }
.real-form .hours label { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.65rem; border: 1px solid var(--rule-strong); border-radius: 0; font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.real-form .hours input { accent-color: var(--blue); margin: 0; }
.real-form .hours label:has(input:checked) { background: var(--ink); color: var(--paper); }
.opts { display: grid; gap: 1rem; }
.mode-pick { display: grid; gap: 0.75rem; border: 0; padding: 0; margin: 0; }
@media (min-width: 720px) { .mode-pick { grid-template-columns: 1fr 1fr 1fr; } }
.mode-pick label { display: grid; gap: 0.25rem; padding: 0.85rem 1rem; border: 1.5px dashed var(--ink-3); border-radius: 0; cursor: pointer; }
.mode-pick label:has(input:checked) { border: 1px solid var(--rule-strong); background: var(--paper-2); }
.mode-pick input { accent-color: var(--blue); }
.mode-pick b { display: flex; gap: 0.4rem; align-items: center; }
.mode-pick .small { color: var(--ink-2); }
.opt-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; }
.opt-row .field { margin: 0; }
.opt-row input[type=number] { width: 5.5rem; }
.ticks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.ticks label { display: inline-flex; gap: 0.45rem; align-items: center; font-weight: 600; }
.ticks input { accent-color: var(--blue); width: 1.1rem; height: 1.1rem; }
.shorts-group { border-top: 1px solid var(--rule-strong); padding-top: 0.75rem; margin-top: 1rem; display: grid; gap: 0.75rem; }
.shorts-group > .row-top { align-items: center; }
.shorts { display: grid; gap: 1rem 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); list-style: none; padding: 0; margin: 0; }
.shorts > li { display: grid; gap: 0.4rem; align-content: start; }
.shorts > li.dropped .phone { opacity: 0.4; border-style: dashed; }
.shorts > li.dropped .r-hook { text-decoration: line-through; color: var(--ink-3); }
.shorts .phone { max-width: 12rem; }
.shorts > li { min-width: 0; }
.shorts .actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.shorts .r-meta { font-size: 0.75rem; font-weight: 700; color: var(--ink-2); }
.shorts form { margin: 0; }

/* Studio scenes: one card per scene, image first; the face card is solid, a scene without an image is dashed (state by shape). */
.scenes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; align-items: start; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.scene-card { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75rem; align-items: start; padding: 0.6rem; border: 1px solid var(--rule-strong); border-radius: 0; background: var(--paper); }
.scene-card.blank { border-style: dashed; border-color: var(--rule-strong); }
.scene-card.main { box-shadow: 4px 4px 0 var(--acc-soft); }
.scene-img img, .scene-img .look-blank { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border: 1px solid var(--rule-strong); display: grid; place-items: center; border-radius: 0; }
.scene-img .look-blank span { font: 700 0.6875rem/1.2 var(--ui); color: var(--ink-3); text-align: center; padding: 0.25rem; }
.scene-meta { display: grid; gap: 0.35rem; justify-items: start; min-width: 0; }
.scene-meta h3 { margin: 0; font-size: 1rem; }
.scene-desc { margin: 0; font-size: 0.875rem; color: var(--ink-2); overflow-wrap: anywhere; }
.scene-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: start; }
.scene-edit > summary { list-style: none; cursor: pointer; }
.scene-edit > summary::-webkit-details-marker { display: none; }
.scene-edit[open] { flex-basis: 100%; display: grid; gap: 0.5rem; }
.scene-edit .stack { display: grid; gap: 0.35rem; }
.scene-edit textarea, .scene-edit select { width: 100%; }
.btn.danger { color: var(--ink); text-decoration: underline 1px var(--down); text-underline-offset: 3px; }
.tries { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tries li { display: grid; gap: 0.2rem; justify-items: center; }
.tries img { width: 2.6rem; aspect-ratio: 9 / 16; object-fit: cover; border: 1.5px solid var(--rule-strong); border-radius: 0; }
.tries li.on img { border-color: var(--ink); outline: 2px solid var(--acc); outline-offset: 1px; }
.add-scene { display: grid; gap: 0.5rem; max-width: 40rem; }
.add-scene h3 { margin: 0; }
.add-scene .row2 { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; }
.add-scene input:not([type=checkbox]), .add-scene select, .add-scene textarea { width: 100%; }
.add-scene .btn { justify-self: start; }
@media (max-width: 40rem) { .scene-card { grid-template-columns: 6rem 1fr; } .add-scene .row2 { grid-template-columns: 1fr; } }
.upload-phone.wide { aspect-ratio: auto; max-width: 28rem; border-radius: 0; }
.upload-phone.wide video { object-fit: contain; height: auto; border-radius: 0; }
.mode-pick label > span:first-child { display: flex; gap: 0.5rem; align-items: center; }

/* Growth: one result line (pink = results), the pace as a dashed ink reference, recessive grid. */
.growth-head { display: grid; gap: 0.75rem; }
.g-headline { margin: 0; font: 700 clamp(1.1rem, 2.4vw, 1.5rem)/1.3 var(--ui); max-width: 52rem; }
.g-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 0; }
.g-figures div { border-top: 1.5px solid var(--rule-strong); padding-top: 0.35rem; }
.g-figures dt { font-size: 0.75rem; color: var(--ink-2); }
.g-figures dd { margin: 0; font: 700 1.25rem/1.2 var(--ui); font-variant-numeric: tabular-nums; }
.g-legend { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 0 0 0.5rem; font-size: 0.8125rem; }
.g-legend li { display: flex; align-items: center; gap: 0.4rem; }
.g-legend .sw { width: 1.4rem; height: 0; border-top: 3px solid var(--acc); }
.g-legend .sw.pace { border-top: 1px dashed var(--rule-strong); }
.g-chart { position: relative; margin: 0; max-width: 54rem; }
.g-chart svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
.g-chart .grid { stroke: var(--rule); stroke-width: 1; }
.g-chart .tick { fill: var(--ink-2); font: 500 11px var(--ui); font-variant-numeric: tabular-nums; }
.g-chart .today { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }
.g-chart .pace { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; }
.g-chart .actual { fill: none; stroke: var(--acc); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.g-chart .end { fill: var(--acc); stroke: var(--paper); stroke-width: 2; }
.g-chart .hover-line { stroke: var(--ink); stroke-width: 1; }
.g-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--ink); color: var(--paper); font: 600 0.75rem/1.2 var(--ui); padding: 0.3rem 0.5rem; border-radius: 0; white-space: nowrap; pointer-events: none; }
.g-table summary { cursor: pointer; font-size: 0.875rem; margin-top: 0.5rem; }
.g-table table { border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; margin-top: 0.5rem; }
.g-table th, .g-table td { padding: 0.2rem 0.75rem 0.2rem 0; text-align: left; border-bottom: 1px solid var(--rule); }
.findings { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.finding { display: grid; gap: 0.3rem; justify-items: start; padding: 0.75rem 0.9rem; border: 1px solid var(--rule-strong); border-radius: 0; }
.finding.sev-first { box-shadow: 5px 5px 0 var(--acc-soft); }
.finding.sev-know, .finding.sev-ok { border-style: dashed; border-color: var(--rule-strong); }
.finding h3 { margin: 0; font-size: 1.05rem; }
.finding p { margin: 0; }
.finding .evidence { color: var(--ink-2); font-size: 0.875rem; }
.g-forms { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; }
.inline-form label { display: grid; gap: 0.2rem; font-size: 0.75rem; font-weight: 700; }
.inline-form input, .inline-form select { font: inherit; font-size: 0.875rem; padding: 0.35rem 0.45rem; border: 1px solid var(--rule-strong); border-radius: 0; background: var(--paper); color: var(--ink); max-width: 11rem; }
.fol-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.2rem; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.fol-list li { display: flex; justify-content: space-between; max-width: 16rem; border-bottom: 1px solid var(--rule); padding: 0.15rem 0; }

/* Plan page */
.credits-pill { display: inline-block; font: 700 0.6875rem/1 var(--ui); padding: 0.2rem 0.4rem; border: 1.5px solid currentColor; border-radius: 0; margin-left: 0.25rem; font-variant-numeric: tabular-nums; }
.big-left { margin: 0; font-size: 1.1rem; } .big-left strong { font: 800 2.4rem/1 var(--display, var(--ui)); color: var(--acc); font-variant-numeric: tabular-nums; }
.plan-now { display: grid; gap: 0.75rem; }
.credit-meter { height: 0.6rem; width: 100%; border: 1px solid var(--rule-strong); border-radius: 0; overflow: hidden; } .credit-meter span { display: block; height: 100%; background: var(--pink); }
.cost-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; } .cost-table th, .cost-table td { text-align: left; padding: 0.45rem 0.75rem 0.45rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.plans { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.plan-card { display: grid; gap: 0.4rem; align-content: start; justify-items: start; padding: 1rem; border: 1px dashed var(--rule-strong); border-radius: 0; }
.plan-card.on { border: 1px solid var(--rule-strong); box-shadow: 5px 5px 0 var(--acc-soft); }
.plan-card h3 { margin: 0; } .plan-card .price { margin: 0; } .plan-card .price strong { font-size: 1.6rem; }
.plan-card .facts { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; }
@media (max-width: 520px) { .nav a[href="/plan"]:has(.credits-pill) .plan-word { display: none; } .nav a[href="/plan"] { order: -1; } }
@media (max-width: 600px) { .g-chart .tick { font-size: 21px; } .g-chart .actual { stroke-width: 5; } .g-chart .pace { stroke-width: 3.5; } .g-chart .end { r: 8; } }
.frame-choice { border: 0; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.35rem; } .frame-choice legend { font-weight: 700; font-size: 0.875rem; margin-bottom: 0.25rem; }
.frame-choice label { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.9rem; }
.auto-row, .budget-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--rule); }
.auto-row p, .budget-row p { margin: 0; font-size: 0.875rem; flex: 1 1 18rem; }
.budget-edit[open] { flex-basis: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Carousels: a horizontal strip of real slides (4:5), state by stamp */
.car-make { margin-bottom: 1rem; } .car-make > label:first-of-type input { min-width: 16rem; max-width: 28rem; }
.car-item { border-top: 1px solid var(--rule); padding: 0.9rem 0; display: grid; gap: 0.5rem; }
.car-item header { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; } .car-item h3 { margin: 0; font-size: 1rem; }
.car-strip { list-style: none; margin: 0; padding: 0 0 0.4rem; display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.car-strip li { flex: 0 0 auto; scroll-snap-align: start; }
.car-strip img { width: 9rem; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; border: 1px solid var(--rule-strong); display: block; }
.car-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: start; } .car-redo[open] { flex-basis: 100%; }
.car-redo > summary { list-style: none; cursor: pointer; } .car-redo > summary::-webkit-details-marker { display: none; }
.car-redo .stack { display: grid; gap: 0.35rem; max-width: 36rem; } .car-dropped { display: none; }

/* ---------- edit with AI ---------- */
.module.ink-blue { --tint: var(--blue); }
.edit-new label:first-of-type input { min-width: 14rem; max-width: 24rem; }
.edit-grid { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .edit-grid { grid-template-columns: minmax(14rem, 20rem) 1fr; align-items: start; } }
.edit-grid .phone { max-width: 20rem; }
.slots { display: grid; gap: 1rem; }
@media (min-width: 860px) { .slots { grid-template-columns: 2fr 1fr 1fr; align-items: start; } }
.slot h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.slot .dropzone { padding: 1.5rem 0.75rem; }
.slot-files { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.slot-files li { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-top: 1px solid var(--rule); font-size: 0.875rem; }
.slot-files .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.cuts { list-style: none; margin: 0; padding: 0; counter-reset: cut; font-size: 0.9375rem; }
.cuts li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.15rem 0.75rem; padding: 0.45rem 0; border-top: 1px solid var(--rule); }
.cuts .tc { font-variant-numeric: tabular-nums; font-weight: 700; }
.cuts .said { grid-column: 2; color: var(--ink-3); font-size: 0.875rem; overflow-wrap: anywhere; }
.edit-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: start; margin-top: 1rem; }
.edit-actions details[open] { flex-basis: 100%; }
.edit-redo form { display: grid; gap: 0.4rem; max-width: 34rem; margin-top: 0.5rem; }
/* affiliates: the affiliate's page (/affiliate) and the admin page (/plan/affiliates) */
.empty-line { color: var(--ink-2); font-size: 0.9375rem; }
.aff-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; margin-bottom: 1.5rem; color: var(--ink-2); font-size: 0.9375rem; max-width: 70ch; }
.aff-copies { display: grid; gap: 1rem; margin-top: 0.75rem; }
@media (min-width: 760px) { .aff-copies { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.aff-copies input { font: 500 0.9375rem var(--mono); width: 100%; }
.aff-disclose { margin-top: 0.9rem; font-size: 0.9375rem; color: var(--ink-2); max-width: 70ch; }
.aff-figs { margin: 0.75rem 0 0.5rem; }
.aff-figs dd { font-family: var(--mono); font-weight: 500; letter-spacing: -0.02em; }
.aff-top { margin-bottom: 2.25rem; }
.aff-scroll { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--rule); background: var(--paper); }
.aff-ptable { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.aff-ptable th[scope=row] { font-weight: 600; text-align: left; white-space: nowrap; background: none; color: var(--ink); font-size: 0.875rem; }
.aff-ptable th[scope=col] { text-align: left; } .aff-ptable th.n { text-align: right; }
.aff-ptable td { white-space: nowrap; }
.aff-ptable td.n { text-align: right; font-variant-numeric: tabular-nums; }
.mono-cell { font: 500 0.8125rem var(--mono); }
.aff-terms { margin: 0.5rem 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; color: var(--ink-2); font-size: 0.9375rem; max-width: 70ch; }
#payout .inline-form input[type=email] { max-width: 18rem; width: 100%; }
.aff-apps, .aff-due { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.aff-app, .aff-due li { background: var(--paper); border: 1px solid var(--rule); padding: 1rem; display: grid; gap: 0.75rem; }
.aff-app h3 { margin: 0; font-size: 1.0625rem; }
.aff-app-facts { margin: 0; display: grid; gap: 0.6rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.aff-app-facts .wide { grid-column: 1 / -1; }
.aff-app-facts dt { font-size: 0.75rem; color: var(--ink-3); }
.aff-app-facts dd { margin: 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.aff-app-act { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 1rem; }
.aff-edits { display: grid; margin-top: 1rem; border-top: 1px solid var(--rule); }
.aff-edit { border-bottom: 1px solid var(--rule); }
.aff-edit summary { cursor: pointer; padding: 0.7rem 0; font-weight: 600; font-size: 0.9375rem; }
.aff-edit summary .hint { display: inline; margin-left: 0.4rem; }
.aff-edit form { padding-bottom: 0.6rem; }
.aff-edit > .hint { padding-bottom: 0.9rem; overflow-wrap: anywhere; }
.aff-due-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.aff-due-top .hint { margin: 0; overflow-wrap: anywhere; }
.aff-amt { margin-left: auto; font: 500 1.25rem var(--mono); font-variant-numeric: tabular-nums; }
.aff-paid li { max-width: 24rem; }
.nowrap { white-space: nowrap; }