/* Lolo dashboard, in Loren's NONLINEAR look (nonlinear.lorenhogue.com/hire).
   Mobile-first, no framework, no inline styles (strict CSP). Fonts are self-hosted under
   /static/fonts (docs/architecture.md, "Web fonts"): Libre Caslon Condensed for headings, Archivo for
   everything else. Light only, like her site. */

/* ------------------------------------------------------------------ fonts */

/* Libre Caslon Condensed (SIL OFL 1.1) is a variable font: one file per style and subset
   covers weights 400-700. It replaced the licensed heading font on 2026-11-11 (no usage fees). */
@font-face {
  font-family: "Libre Caslon Condensed";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/libre-caslon-condensed-latin-af9ae475.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Caslon Condensed";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/libre-caslon-condensed-latin-ext-38eac54c.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Caslon Condensed";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/libre-caslon-condensed-italic-latin-0ed32be8.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Caslon Condensed";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/libre-caslon-condensed-italic-latin-ext-d474050e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo is a variable font: one file per subset covers every weight used here (400-700). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-7150c0ec.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext-a999e009.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */

:root {
  /* Loren's palette, as named on her site. */
  --cream: #F5EEDC;
  --sand: #ECE0C6;
  --espresso: #33211C;
  --powder: #CFE1E2;
  --powder2: #BBD4D6;
  --butter: #EFDB8A;
  --gold: #B8924F;
  --denim: #3D5A6B;
  --body: #5A4A3C;
  --line: #E2D4B8;
  --serif: "Libre Caslon Condensed", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* Derived for the app. Contrast on cream / card: espresso 13:1, body 7.3:1, denim 6.3:1,
     gold-ink 5.4:1, ok 5.4:1, stop 5.5:1. Plain gold (2.5:1) is for rules and fills only. */
  --white: #FFFDF8;
  --card: #FFFBF0;
  --tint: #F1E7D2;
  --gold-ink: #7A5B24;
  --field-line: #9C8462;
  --ok: #3F6640;
  --ok-tint: #E6EBDA;
  --sched-tint: #E2EDEE;
  --stop: #A2392A;
  --stop-tint: #F6E1D9;
  --wait-tint: #F5EACB;

  /* The names the templates' classes were built on, mapped onto her palette. */
  --paper: var(--cream);
  --ink: var(--espresso);
  --muted: var(--body);
  --go: var(--espresso);
  --go-ink: var(--white);
  --marker: var(--butter);
  --marker-ink: var(--espresso);
  --focus: var(--denim);
  --seg-instagram: var(--espresso);
  --seg-tiktok: var(--gold);
  --seg-youtube: var(--denim);
  --track: var(--sand);
  --radius: 14px;
  --font: var(--sans);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--cream); }

/* A column, so the footer sits at the bottom of short pages. */
body {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--espresso);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
body > main { flex: 1 0 auto; }

/* Her hero wash: butter top left, powder top right, a little gold low in the middle, fading
   into cream. Sits behind everything at the top of every page. */
body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 46rem;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(245, 238, 220, 0) 45%, var(--cream) 100%),
    radial-gradient(ellipse 60% 55% at 12% 18%, rgba(239, 219, 138, 0.62) 0, rgba(239, 219, 138, 0) 70%),
    radial-gradient(ellipse 55% 60% at 88% 26%, rgba(207, 225, 226, 0.9) 0, rgba(207, 225, 226, 0) 70%),
    radial-gradient(ellipse 45% 40% at 55% 78%, rgba(184, 146, 79, 0.22) 0, rgba(184, 146, 79, 0) 70%),
    radial-gradient(ellipse 50% 50% at 35% 62%, rgba(187, 212, 214, 0.35) 0, rgba(187, 212, 214, 0) 70%);
}

/* Her film grain, very faint. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: var(--espresso);
  text-decoration-color: rgba(51, 33, 28, 0.4);
  text-underline-offset: 4px;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { margin: 0 0 0.5rem; color: var(--espresso); }
h1, h2 { font-family: var(--serif); letter-spacing: -0.01em; }
h1 { font-weight: 700; font-size: clamp(2.35rem, 9vw, 3.4rem); line-height: 1.02; }
h2 { font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
h3 {
  font: 600 0.75rem/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--denim);
}
p { margin: 0 0 0.75rem; color: var(--body); }
li { color: var(--body); }
strong, b { color: var(--espresso); font-weight: 600; }

.it, em { font-style: italic; }
h1 .it { font-family: var(--serif); }

/* Read by screen readers, not shown (the Today page's h1). */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--card); padding: 0.5rem 1rem; }
.skip:focus { left: 0.5rem; z-index: 200; }

/* Small uppercase label with wide tracking (her ".lab"). */
.eyebrow {
  margin: 0 0 0.85rem;
  font: 600 0.75rem/1.5 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--denim);
}
.eyebrow a { color: inherit; text-decoration-color: rgba(61, 90, 107, 0.45); }

/* ------------------------------------------------------------------ chrome */

.topbar {
  border-bottom: 1px solid var(--line);
  background: rgba(245, 238, 220, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) 1.25rem 0;
  min-height: 3.75rem;
}

/* "Lolo" as written, not all caps (Andrew, 2026-11-11). */
.wordmark {
  font: 700 1.625rem/1 var(--serif);
  letter-spacing: 0.01em;
  color: var(--espresso);
  text-decoration: none;
  padding: 1.3rem 0;
}

/* On a phone the nav is its own row that scrolls sideways; its right edge fades so the
   cut-off link reads as "more this way". */
.nav {
  order: 3;
  flex-basis: calc(100% + 2.5rem);
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 -1.25rem;
  padding: 0 2.5rem 0 1.25rem;
  border-top: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.9rem;
  border-bottom: 2px solid transparent;
  color: var(--body);
  font: 600 0.75rem/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a:hover { color: var(--espresso); }
.nav a[aria-current="page"] { color: var(--espresso); border-bottom-color: var(--gold); }

.signout, .topbar-cta { margin-left: auto; }
.signout .link { font-size: 0.875rem; font-weight: 500; }

.page { width: 100%; max-width: 48rem; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }

.footer { border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.25rem 1.25rem 2.5rem;
}
.footer p { margin: 0; }
.footer .fn {
  font: 600 0.6875rem/1.5 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.footer nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; flex-basis: 100%; }
.footer a { color: var(--body); font-size: 0.875rem; }

.flash-region { width: 100%; max-width: 48rem; margin: 0 auto; padding: 0 1.25rem; }
.flash-region:not(:empty) { padding-top: 1rem; }
.flash {
  margin: 0.5rem 0;
  padding: 0.85rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--denim);
  background: var(--card);
  color: var(--espresso);
}
.flash-error { border-color: var(--stop); border-left-color: var(--stop); color: var(--stop); }
.flash-error strong { color: inherit; }
/* A refusal an htmx action swapped in stays in view while she scrolls (the button she tapped
   may be far down a long form, like a carousel slide's). The next action clears it. */
.flash-region:has(.flash-error) { position: sticky; top: 0.5rem; z-index: 70; }
.flash-region:has(.flash-error) .flash { box-shadow: 0 8px 24px rgba(51, 33, 28, 0.16); }

/* ------------------------------------------------------------------ building blocks */

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.25rem;
  margin: 0 0 1.25rem;
}
.panel > h2:first-child { margin-bottom: 0.75rem; }
.narrow { max-width: 32rem; margin-left: auto; margin-right: auto; }
.panel.narrow { padding: 2rem 1.5rem; }
.panel.narrow h1 { font-size: clamp(2.1rem, 8vw, 2.75rem); margin-bottom: 0.9rem; }
.page-head { margin: 0.25rem 0 1.75rem; }
.page-head h1 { margin-bottom: 0.75rem; }
.page-head > p:not(.eyebrow, .meta) { max-width: 60ch; font-size: 1.0625rem; }

.fine { color: var(--body); font-size: 0.875rem; }
.empty { color: var(--body); }
p.empty.panel { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--espresso); }
.notice { color: var(--ok); font-weight: 600; }
.num { font-variant-numeric: tabular-nums; }
.strong { font-weight: 700; color: var(--espresso); }
code { font-size: 0.875em; overflow-wrap: anywhere; color: var(--espresso); }

/* Buttons: her espresso button (Archivo 700, uppercase, tracked) for the main action; an
   outlined one for the rest. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.4rem;
  border: 1.5px solid var(--espresso);
  border-radius: 4px;
  background: transparent;
  color: var(--espresso);
  font: 700 0.75rem/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.btn:hover:not(:disabled) { background: var(--espresso); color: var(--white); transform: translateY(-2px); }
.btn-go {
  background: var(--espresso);
  border-color: var(--espresso);
  color: var(--white);
  font-size: 0.8125rem;
  padding: 1.0625rem 2.125rem;
}
.btn-go:hover:not(:disabled) { background: var(--denim); border-color: var(--denim); }
.btn-stop { border-color: var(--stop); color: var(--stop); }
.btn-stop:hover:not(:disabled) { background: var(--stop); border-color: var(--stop); color: var(--white); }
.btn-quiet { border-color: rgba(51, 33, 28, 0.3); }
.btn-small { min-height: 40px; padding: 0.65rem 1.25rem; font-size: 0.6875rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Secondary actions: underlined small text, like her "Meet the team" link. */
.link {
  background: none;
  border: 0;
  padding: 0.25rem 0;
  min-height: 44px;
  color: var(--espresso);
  font: 500 0.9375rem/1.4 var(--sans);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(51, 33, 28, 0.45);
  text-underline-offset: 4px;
}
.link:hover { text-decoration-color: currentColor; }
.link-stop { color: var(--stop); text-decoration-color: rgba(162, 57, 42, 0.5); }

.stack { display: grid; gap: 0.45rem; }
/* Grid children default to min-width: auto, so one wide control (a date-and-time field's own
   width) would stretch a whole queue card's column past its edge on a phone. */
.stack > *, .actions > *, .stack fieldset > * { min-width: 0; }
.stack .btn { justify-self: start; margin-top: 0.6rem; }
.stack fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.stack legend {
  padding: 0;
  margin-bottom: 0.25rem;
  font: 600 0.75rem/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--denim);
}
.stack .fine, .stack > .field-error { margin: 0; }
.check { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; font-weight: 400; color: var(--espresso); }
.check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--espresso); flex: none; }
.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }

label { font-weight: 600; font-size: 0.9375rem; color: var(--espresso); }
.stack > label:not(.check) { margin-top: 0.5rem; }
.stack > label:first-of-type { margin-top: 0; }
input[type="text"], input[type="email"], input[type="url"], input[type="number"],
input:not([type]), input[type="datetime-local"], select, textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--field-line);
  border-radius: 4px;
  background: var(--white);
  color: var(--espresso);
  font: 16px/1.4 var(--sans); /* 16px stops iOS zooming into fields */
}
input::placeholder, textarea::placeholder { color: #7D6D59; }
input[type="file"] { font: 15px/1.4 var(--sans); color: var(--body); max-width: 100%; }
input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--espresso);
  border-radius: 4px;
  background: var(--white);
  color: var(--espresso);
  font: 700 0.6875rem/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.inline select { width: auto; }
textarea { resize: vertical; }
[aria-invalid="true"] { border-color: var(--stop); }
.field-error { color: var(--stop); margin: 0; font-weight: 500; }

/* Chips: her "Works with" pill. Status chips take a quiet tint of their state. */
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: 0.15rem 0.65rem;
  border-radius: 100px;
  border: 1px solid rgba(51, 33, 28, 0.28);
  background: var(--white);
  color: var(--espresso);
  font: 600 0.75rem/1.2 var(--sans);
  white-space: nowrap;
}
.pill-outlier { background: var(--butter); border-color: rgba(51, 33, 28, 0.35); }
.pill-signal { background: var(--powder); border-color: rgba(61, 90, 107, 0.45); color: var(--denim); }
.pill-approved, .pill-posted, .pill-uploaded, .pill-ready, .pill-done {
  background: var(--ok-tint); border-color: rgba(63, 102, 64, 0.55); color: var(--ok);
}
.pill-scheduled, .pill-published, .pill-emailed {
  background: var(--sched-tint); border-color: rgba(61, 90, 107, 0.55); color: var(--denim);
}
.pill-rejected, .pill-failed, .pill-not_sent, .pill-unusable, .pill-expired, .pill-email_failed {
  background: var(--stop-tint); border-color: rgba(162, 57, 42, 0.55); color: var(--stop);
}
.pill-checking, .pill-uploading, .pill-running, .pill-queued, .pill-preparing,
.pill-transcribing, .pill-sending, .pill-fetching, .pill-email_pending, .pill-email_sending {
  background: var(--wait-tint); border-color: rgba(122, 91, 36, 0.5); color: var(--gold-ink);
}
.badge {
  margin-left: 0.35rem;
  padding: 0.1rem 0.55rem;
  border-radius: 100px;
  background: var(--butter);
  color: var(--espresso);
  font-size: 0.8125rem;
  font-weight: 700;
}

.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
}
.row:first-child { border-top: 0; padding-top: 0.25rem; }
.row-main { flex: 1; min-width: 0; display: grid; gap: 0.1rem; overflow-wrap: anywhere; color: var(--espresso); }
.row-main > a { font-weight: 500; }
.row-off .row-main a { color: var(--body); }
.row form { flex: none; }
.row > .btn, .row form .btn { min-height: 40px; padding: 0.6rem 0.85rem; font-size: 0.6875rem; }

/* Two forms in one panel (Higgsfield's Soul and cap, the watchlist and its list). */
form + form.stack, form.stack + form, form.stack + div { margin-top: 1.5rem; }
.row .num.strong { font: 400 1.35rem/1 var(--serif); }

/* ------------------------------------------------------------------ landing */

.hero { padding: 2.5rem 0 2rem; }
.hero h1 { font-size: clamp(2.6rem, 11vw, 4.6rem); line-height: 1.04; max-width: 16ch; margin: 0 0 1.25rem; }
.lede { font-size: 1.1875rem; color: var(--body); max-width: 40ch; }
.hero .cta { margin-top: 1.75rem; }
/* "Works with Claude / ChatGPT": the same row as on Loren's NONLINEAR pages (.wbadge/.wpill),
   above the sign-in button. Its own class names, so the status .pill chips are untouched. */
.works-with { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.works-with-label {
  font: 700 11px/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso);
  opacity: 0.75;
}
.wpill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(51, 33, 28, 0.3);
  border-radius: 100px;
  background: #FFFDF8;
  color: var(--espresso);
  font: 600 13px/1 var(--sans);
}
.wpill img { display: block; width: auto; height: 16px; }
.works-with + .cta { margin-top: 1.25rem; }

/* The landing page uses the topbar's full width, so the photo can sit beside the text. */
.page-wide { max-width: 1180px; }
/* Her hero photo, framed: a cream mat with an espresso hairline, and a gold line offset to the
   lower right (behind the mat). Cropped 4:5 and served as WebP at 480 and 864 px wide.
   Phones and tablets: above the title, about 62% of the viewport wide (Andrew, 2026-11-11).
   Desktop: beside the text, like her NONLINEAR hero. */
.hero { display: flex; flex-direction: column; }
.page-wide .hero { padding-top: 1rem; }
.hero-photo {
  order: -1;
  position: relative;
  width: min(62vw, 20rem);
  margin: 0 10px 2.25rem 0;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: 10px -10px -10px 10px;
  border: 1px solid var(--gold);
  border-radius: 14px;
}
.hero-photo .mat {
  position: relative;
  display: block;
  padding: 6px;
  background: var(--white);
  border: 1px solid rgba(51, 33, 28, 0.3);
  border-radius: 14px;
}
.hero-photo img { display: block; width: 100%; height: auto; border-radius: 9px; }
@media (min-width: 40rem) {
  /* Line the hero up with the wordmark: the same side padding as the top bar. */
  .page.page-wide { padding-left: 2.625rem; padding-right: 2.625rem; }
}
@media (min-width: 56rem) {
  .hero { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 50px; align-items: center; }
  .page-wide .hero { padding-top: 4rem; }
  .hero-photo { order: 0; width: 100%; max-width: 26rem; margin: 0 14px 14px auto; }
  .hero-photo::before { inset: 14px -14px -14px 14px; border-radius: 16px; }
  .hero-photo .mat { padding: 8px; border-radius: 16px; }
}

/* ------------------------------------------------------------------ dashboard goal */

.goal { padding: 0.25rem 0 2rem; }
.goal-title {
  margin: 0 0 1rem;
  font: 600 0.75rem/1.5 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--denim);
}
.goal-total { margin: 0; color: var(--espresso); }
.goal-total .num {
  font: 700 clamp(4rem, 19vw, 6.75rem)/0.95 var(--serif);
  letter-spacing: -0.02em;
}
.goal-target { margin: 0.6rem 0 1rem; font-weight: 600; color: var(--espresso); }
.goal-bar { display: block; width: 100%; height: 14px; border-radius: 100px; overflow: hidden; }
.goal-track { fill: var(--track); }
.seg-instagram { fill: var(--seg-instagram); }
.seg-tiktok { fill: var(--seg-tiktok); }
.seg-youtube { fill: var(--seg-youtube); }
.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; padding: 0; margin: 0.9rem 0 0.75rem; }
.legend li { color: var(--espresso); font-size: 0.9375rem; }
.legend .num { font-weight: 600; }
.swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: 0; }
.swatch-instagram { background: var(--seg-instagram); }
.swatch-tiktok { background: var(--seg-tiktok); }
.swatch-youtube { background: var(--seg-youtube); }

/* Today's brief reads like her pull quote. */
.brief {
  list-style: none;
  margin: 0;
  padding: 0.15rem 0 0.15rem 1rem;
  border-left: 2px solid var(--espresso);
  display: grid;
  gap: 0.5rem;
}
.brief li { font: italic 400 1.2rem/1.35 var(--serif); color: var(--espresso); }

.counts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; padding: 0; margin: 1.1rem 0 0; }
.counts li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  font: 600 0.6875rem/1.4 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body);
}
.counts .num { font: 400 1.75rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--espresso); }

/* ------------------------------------------------------------------ checklist */

/* Lolo's to-dos: a small gold diamond (they clear themselves, nothing to tick); a task gets
   the real tick box below, on Today as on the Checklist tab. */
.todos .row { align-items: center; }
.todo-mark { flex: none; width: 0.55rem; height: 0.55rem; transform: rotate(45deg); background: var(--gold); }
.todo-approve .todo-mark { background: var(--espresso); }
/* On Today both share one list: the diamond sits centred in the tick box's column, so the
   text lines up. */
.todos-today .todo-mark { margin: 0 0.425rem 0 0.5rem; }
.todos-today .tick { margin-right: -0.675rem; }
.todos-today .counts { margin: 0 0 1rem; }
.todos-today > p:last-child { margin: 1rem 0 0; }
.carried { color: var(--gold-ink); font-weight: 600; }

.plan-platform { margin: 1.1rem 0 0.25rem; }
.panel > h2 + .plan-platform { margin-top: 0; }
.plan .row { align-items: center; }
.plan-time { flex: none; width: 4.6rem; color: var(--espresso); font-weight: 600; font-size: 0.9375rem; }
.row-off .plan-time { color: var(--body); }

.tasks .row { align-items: flex-start; }
.upcoming-title { margin: 1.75rem 0 0.25rem; }
.upcoming-day { margin: 1rem 0 0.15rem; font: 600 0.9375rem/1.4 var(--sans); color: var(--espresso); }
.task-title { color: var(--espresso); font-weight: 500; }
.task-notes { white-space: pre-line; }
.task-done .task-title { color: var(--body); text-decoration: line-through; text-decoration-color: rgba(90, 74, 60, 0.5); }

/* The tick: a 44px target around a 1.4rem box; ticked, her espresso with a cream check. */
.tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -0.55rem 0 -0.55rem -0.6rem; padding: 0;
  border: 0; background: none; cursor: pointer;
}
.tick::before {
  content: "";
  width: 1.4rem; height: 1.4rem;
  border: 1.5px solid var(--espresso); border-radius: 4px; background: var(--white);
  transition: background 0.2s ease;
}
.tick:hover::before { background: var(--tint); }
.tick-done::before, .tick-done:hover::before {
  background: var(--espresso) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.6l3.1 3L12.8 4.6' fill='none' stroke='%23FFFDF8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

/* ------------------------------------------------------------------ queue items */

.items { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.item {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem;
}
.item:not(:has(.item-preview)) { grid-template-columns: 1fr; }
.item-approved, .item-posted { box-shadow: inset 0 3px 0 var(--ok); }
.item-scheduled { box-shadow: inset 0 3px 0 var(--denim); }
.item-failed, .item-rejected { box-shadow: inset 0 3px 0 var(--stop); }
.item-preview {
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, var(--sand) 0 8px, var(--tint) 8px 16px);
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  padding: 0.4rem;
  font: 600 0.625rem/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body);
}
.item-media { padding: 0; background: var(--espresso); overflow: hidden; }
.item-media video, .item-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.frames { margin: 0.75rem 0 0; }
.frames img { display: block; width: 100%; max-width: 24rem; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.frames figcaption { margin-top: 0.3rem; }
.repost-media { margin: 0.75rem 0; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.slides { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.4rem; counter-reset: slide; }
.slides img { display: block; width: 4.5rem; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.item-body { min-width: 0; }
.item-body > h2 { font-size: 1.55rem; margin-bottom: 0.4rem; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; color: var(--body); font-size: 0.875rem; }

.fields { margin: 0.75rem 0; }
.fields dt {
  margin-top: 0.85rem;
  font: 600 0.6875rem/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--denim);
}
.fields dt:first-child { margin-top: 0; }
.fields dt .link { min-height: 0; margin-left: 0.4rem; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; }
.fields dd { margin: 0.2rem 0 0; overflow-wrap: anywhere; color: var(--espresso); }
.caption { white-space: pre-wrap; }
.dm-copy { display: block; white-space: pre-wrap; }

.publish { border-top: 1px solid var(--line); margin-top: 0.9rem; padding-top: 0.85rem; }
.publish h3 { color: var(--gold-ink); }
.publish ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.publish ul.states { list-style: none; padding-left: 0; gap: 0.5rem; }
.publish li { overflow-wrap: anywhere; color: var(--espresso); }
.publish li .pill { margin-right: 0.25rem; }
.post-email .actions-row { margin-top: 0.4rem; }
.post-email details { flex: 1 1 100%; }
/* Highlights: her butter as a highlighter. */
mark { background: var(--marker); color: var(--marker-ink); padding: 0.05em 0.3em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.actions { display: grid; gap: 0.25rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.actions > form .btn { width: 100%; }
.blocked { margin: 0; color: var(--stop); font-size: 0.9rem; font-weight: 500; }
.decided { margin: 1rem 0 0; font: italic 400 1.15rem/1.35 var(--serif); color: var(--espresso); }

details { border-top: 1px solid var(--line); }
summary {
  cursor: pointer;
  list-style: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font: 700 0.75rem/1.3 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--espresso);
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; font: 400 1.35rem/1 var(--serif); color: var(--gold-ink); }
details[open] > summary::after { content: "\2212"; }
details[open] > summary { margin-bottom: 0.25rem; }
details > form, details > p { padding-bottom: 1rem; }

.downloads { list-style: none; padding: 0; margin: 0.75rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ------------------------------------------------------------------ settings */

.mode {
  padding: 0.85rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ok);
  background: var(--tint);
  color: var(--espresso);
}
.mode-live { border-left-color: var(--stop); }
.mode-draft { border-left-color: var(--gold); }
.mode-dry_run { border-left-color: var(--denim); }
.user-code {
  margin: 0.25rem 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px dashed #CDBFA2;
  border-radius: 10px;
  background: var(--sand);
  font: 700 1.9rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.14em;
  color: var(--espresso);
  text-align: center;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ uploads */

.uploads { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.75rem; }
.upload { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.75rem; align-items: center; }
.upload-name { font-weight: 600; color: var(--espresso); overflow-wrap: anywhere; }
.upload progress { grid-column: 1 / -1; width: 100%; height: 0.5rem; accent-color: var(--espresso); }
.upload-done .upload-status { color: var(--ok); }
.upload-failed .upload-status { color: var(--stop); }

/* ------------------------------------------------------------------ reposts */

.filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.25rem; }
.filters a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 1rem;
  border-radius: 100px;
  border: 1px solid rgba(51, 33, 28, 0.3);
  background: var(--white);
  color: var(--espresso);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}
.filters a[aria-current="page"] { background: var(--espresso); border-color: var(--espresso); color: var(--white); }
.reel-views { display: grid; min-width: 3.5rem; text-align: right; }
.reel-views .fine { font: 600 0.625rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.preview { overflow-wrap: anywhere; }
.hint { font-size: 0.875rem; padding-left: 0.6rem; border-left: 3px solid var(--gold); color: var(--body); }
.original-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; color: var(--espresso); }
.ig-fetch { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

/* ------------------------------------------------------------------ images (HF1) */

.generations { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.generation { border-top: 1px solid var(--line); padding-top: 1rem; }
.generation:first-child { border-top: 0; padding-top: 0; }
.generation-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; color: var(--espresso); }
.generation-head strong { font: 400 1.3rem/1.2 var(--serif); }
.prompt { margin: 0.5rem 0; font: italic 400 1.1rem/1.4 var(--serif); color: var(--espresso); overflow-wrap: anywhere; }
.image-grid { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 1rem 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.generations + .fine { margin-top: 1.25rem; }
.image-cell { display: grid; gap: 0.45rem; align-content: start; }
.image-cell img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line);
  background: var(--sand); }
.image-cell .btn { min-height: 40px; padding: 0.5rem 0.8rem; font-size: 0.6875rem; }
/* "Use in carousel" (1330): a toggle. Pressed, it fills espresso with a check, and the image
   takes her butter marker ring and a "Picked for carousel" chip. */
.image-cell > form { margin: 0; }
.image-cell .btn-pick { width: 100%; }
.btn-pick[aria-pressed="true"] { background: var(--espresso); color: var(--white); }
.btn-pick[aria-pressed="true"]::before { content: "\2713"; }
.btn-pick[aria-pressed="true"]:hover:not(:disabled) { background: var(--denim); border-color: var(--denim); }
.image-cell.is-picked img { border-color: var(--espresso); box-shadow: 0 0 0 3px var(--butter); }
.pill-picked { justify-self: start; background: var(--butter); border-color: rgba(51, 33, 28, 0.35); }

/* ------------------------------------------------------------------ brand kit */

/* Swatches are inline SVG: the colour is the rect's fill attribute, which the strict CSP
   (no inline styles) allows. */
.swatches { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1rem 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.brand-swatch { display: grid; gap: 0.2rem; align-content: start; overflow-wrap: anywhere; }
.brand-swatch .fine { margin: 0; }
.swatch-chip { width: 100%; max-width: 4.5rem; height: auto; aspect-ratio: 1 / 1; }
.swatch-chip rect { stroke: rgba(51, 33, 28, 0.25); stroke-width: 1; }
.swatch-name { font-weight: 600; color: var(--espresso); }
.stack fieldset.colour-row { padding: 0.75rem 0; border-top: 1px solid var(--line); gap: 0.35rem; }
.colour-field { display: grid; gap: 0.2rem; min-width: 0; }
.colour-field label { font-size: 0.875rem; }
/* Font previews: the class comes from /brand/fonts.css (one @font-face per font). */
.font-name { font-size: 1.5rem; line-height: 1.2; color: var(--espresso); }
.font-sample { font-size: 1.05rem; line-height: 1.4; color: var(--espresso); }
.logo-preview { margin: 0 0 0.75rem; display: grid; gap: 0.5rem; justify-items: start; }
.logo-preview img { max-width: min(100%, 16rem); max-height: 10rem; height: auto;
  padding: 0.75rem; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.voice-kind { margin-top: 1rem; }

@media (min-width: 40rem) {
  .stack fieldset.colour-row { grid-template-columns: 2fr 1.2fr 1.4fr; column-gap: 0.75rem; }
  .stack fieldset.colour-row legend { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ playbook */

.slide-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.slide-plan li { padding: 0.85rem 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; color: var(--espresso); }
.slide-plan li:first-child { border-top: 0; padding-top: 0.25rem; }
.slide-plan p { margin: 0.3rem 0 0; }
.slide-plan .slide-role { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.slide-number { font: 400 1.35rem/1 var(--serif); color: var(--gold-ink); min-width: 1.5rem; }
.tag-list { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.examples { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.4rem; overflow-wrap: anywhere; }
.stack fieldset.slide-fields { margin-top: 0.75rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ carousels (1340) */

/* The slide grounds of design spec section 3.1 (the slides' own colours, not the app's). */
.ground-cream { background: #F3EDDB; }
.ground-cream-warm { background: #F4ECE0; }
.ground-espresso { background: #33211B; }
.ground-espresso-deep { background: #24120C; }
.ground-wash { background: linear-gradient(135deg, #EFDEA8 0%, #ECE3CA 45%, #DDE2DE 100%); }
.ground-ink-deep { background: linear-gradient(180deg, #1C0E0B 0%, #120904 100%); }
.ground-neutral { background: #EAEBF0; }
.ground-photo { background: linear-gradient(160deg, #8C7A68 0%, #4F3E37 60%, #2F1F1A 100%); }

/* The list. */
.carousel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.carousel-row { display: grid; grid-template-columns: 4.25rem 1fr; gap: 1rem; align-items: start;
  padding: 1rem 0; border-top: 1px solid var(--line); }
.carousel-row:first-child { border-top: 0; padding-top: 0.25rem; }
.carousel-thumb { display: block; text-decoration: none; }
.carousel-thumb img, .mock-tile { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.mock-tile { display: flex; align-items: flex-end; padding: 0.4rem; font: 400 1.4rem/1 var(--serif);
  color: rgba(51, 33, 28, 0.55); }
.mock-tile.ground-espresso, .mock-tile.ground-ink-deep { color: rgba(240, 236, 216, 0.7); }
.carousel-row-main { min-width: 0; display: grid; gap: 0.15rem; }
.carousel-row-title { font: 400 1.35rem/1.15 var(--serif); color: var(--espresso); overflow-wrap: anywhere; }
.carousel-row .meta { margin: 0.25rem 0 0; }
.carousel-row .fine { margin: 0; }

/* A slide in the editor: the rendered JPEG, or a sketch in its ground with its words. Sizes
   inside the sketch follow its width (container units), so it reads the same at any size. */
.face { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 6px; background: var(--sand); container-type: inline-size;
  box-shadow: 0 1px 0 rgba(51, 33, 28, 0.08), 0 6px 18px rgba(51, 33, 28, 0.10); }
.face-tall { aspect-ratio: 9 / 16; }
.face-large, .face-medium { border-radius: 10px; }
.face-render { display: block; width: 100%; height: 100%; object-fit: cover; }
.mock { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 16cqw 8cqw 12cqw; color: #2E1E18; text-align: left; }
.mock-v-start { justify-content: flex-start; }
.mock-v-center { justify-content: center; }
.mock-h-center { text-align: center; }
.mock-dark { color: #F0ECD8; }
.mock-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mock.ground-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(51, 33, 27, 0) 38%, rgba(51, 33, 27, 0.55) 60%, rgba(51, 33, 27, 0.93) 100%); }
.mock-header { position: absolute; z-index: 1; top: 6cqw; left: 8cqw; right: 8cqw; display: flex;
  justify-content: space-between; gap: 4cqw; font: 600 2.6cqw/1 var(--sans); letter-spacing: 0.2em;
  text-transform: uppercase; color: #3D5A6B; }
.mock-dark .mock-header { color: rgba(240, 236, 216, 0.85); }
.mock-words { position: relative; z-index: 1; display: grid; gap: 3cqw; }
.mock-text { font: 400 10.5cqw/0.98 var(--serif); letter-spacing: -0.01em; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; }
.mock-sub { font: 500 4cqw/1.35 var(--sans); opacity: 0.85; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.mock-number { position: absolute; z-index: 1; right: 8cqw; bottom: 6cqw; font: 500 2.8cqw/1 var(--sans);
  letter-spacing: 0.15em; opacity: 0.7; }

/* The editor. Every save swaps the whole editor in place; without this, the browser's scroll
   anchoring jumps the page (to the foot) instead of leaving her where she was. */
.carousel-editor { overflow-anchor: none; }
.editor-head { margin-bottom: 1.25rem; }
.editor-head h1 { overflow-wrap: anywhere; }
.render-status { margin: 0 0 1rem; padding: 0.8rem 1rem; border: 1px solid var(--line);
  border-left: 3px solid var(--gold); border-radius: 10px; background: var(--card);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1rem; }
.render-status > * { margin: 0; }
.render-status .render-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  flex: 1 1 18rem; color: var(--espresso); }
.render-status form { margin-left: auto; }
.render-status > p:not(.render-line), .render-status details { flex-basis: 100%; }
.render-ready, .render-submitted { border-left-color: var(--ok); }
.render-failed { border-left-color: var(--stop); }
.render-rendering { border-left-color: var(--denim); }
.render-status details { border-top: 0; }
.render-status details ul { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; }
.pill-draft { background: var(--tint); }

.look-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.25rem; margin: 0 0 1rem; }
.look-bar .filters { margin: 0; }
.theme-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.look-label { font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--denim); margin-right: 0.25rem; }
.btn-theme { min-height: 2.25rem; padding: 0.4rem 0.8rem; border-radius: 100px; border-color: rgba(51, 33, 28, 0.3);
  letter-spacing: 0.06em; }
.btn-theme[aria-pressed="true"] { background: var(--espresso); border-color: var(--espresso); color: var(--white); }

/* The slide strip: scrolls sideways on a phone, wraps on wider screens. */
.strip-wrap { margin: 0 -1.25rem 1.25rem; overflow-x: auto; scrollbar-width: thin; }
.slide-strip { list-style: none; margin: 0; padding: 0.35rem 1.25rem 0.75rem; display: flex; gap: 0.6rem;
  align-items: stretch; }
.strip-item { flex: none; width: 6.75rem; }
.strip-link { display: grid; gap: 0.45rem; padding: 4px; border-radius: 9px; border: 2px solid transparent;
  color: var(--espresso); text-decoration: none; }
.strip-link:hover .face { box-shadow: 0 0 0 2px var(--gold); }
.strip-item.is-selected .strip-link { border-color: var(--espresso); background: var(--card); }
.strip-caption { font: 600 0.625rem/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--body); overflow-wrap: anywhere; }
.strip-num { font: 400 1rem/1 var(--serif); letter-spacing: 0; color: var(--gold-ink); margin-right: 0.2rem; }
.strip-flag { justify-self: start; padding: 0.15rem 0.45rem; border-radius: 100px; background: var(--stop);
  color: var(--white); font: 600 0.625rem/1.3 var(--sans); letter-spacing: 0.04em; }
.slide-notes { margin: 0 0 1rem; padding: 0.6rem 0.8rem 0.6rem 1.6rem; border-left: 3px solid var(--stop);
  border-radius: 8px; background: var(--card); font-size: 0.875rem; }
.slide-notes li + li { margin-top: 0.3rem; }
.fit-notes { flex-basis: 100%; }
.fit-notes ul { margin: 0.25rem 0 0; padding-left: 1.1rem; font-size: 0.875rem; }
.strip-add { width: 9.5rem; padding: 0.75rem; border: 1.5px dashed var(--field-line); border-radius: 10px;
  display: grid; align-content: center; }
.strip-add .stack .btn { margin-top: 0.25rem; }
.strip-add label { font-size: 0.8125rem; }

.editor-grid { display: grid; gap: 1.25rem; align-items: start; }
.editor-preview { min-width: 0; }
.slide-preview { display: grid; gap: 0.6rem; justify-items: center; }
.slide-preview > .face { max-width: 24rem; }
.slide-preview > .face-tall { max-width: 18rem; }
.preview-note { margin: 0; text-align: center; }
.preview-empty { padding: 3rem 1rem; text-align: center; font-family: var(--serif); font-style: italic; }
.cover-faces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
.cover-faces li { display: grid; gap: 0.35rem; }
.aspect-offer { display: grid; gap: 0.35rem; justify-items: center; text-align: center; }
.aspect-offer p { margin: 0; }

.slide-panel-head { display: grid; gap: 0.5rem; margin-bottom: 0.75rem; }
.slide-panel-head h2 { margin: 0; }
.slide-actions form { margin: 0; }
.slide-actions .btn { min-height: 40px; padding: 0.55rem 0.9rem; font-size: 0.6875rem; }
.slide-form .form-actions { margin-top: 0.75rem; }
.slide-form .form-actions .btn { margin-top: 0; }
.slide-fields { gap: 0.45rem; }
.field-pair { display: grid; gap: 0.45rem 0.9rem; }
.stack fieldset.field-pair { gap: 0.45rem 0.9rem; }
.field-pair > .stack > label { margin-top: 0.5rem; }
.rows-fields .row-fields { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; padding: 0.75rem 0;
  border-top: 1px solid var(--line); }
.rows-fields .row-fields .slide-number { padding-top: 0.6rem; }
.reads-as { margin: 0.15rem 0 0.25rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--tint);
  font: 400 1.25rem/1.2 var(--serif); color: var(--espresso); overflow-wrap: anywhere; }
.reads-as .fine { font-family: var(--sans); margin-right: 0.35rem; }
.em-accent { font-style: italic; color: var(--denim); }
.em-chip { background: var(--powder); border-radius: 4px; padding: 0 0.2em; }
.em-swash { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px;
  text-underline-offset: 4px; }
.em-strong { font-weight: 700; }

/* Background: colour chips, or one of her photos (shown once "A photo" is chosen; browsers
   without :has() always show the photos). */
.stack fieldset.bg-picker { margin-top: 0.75rem; padding-top: 0.85rem; border-top: 1px solid var(--line); gap: 0.6rem; }
.ground-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.35rem 0.75rem; }
.ground-option { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 500; font-size: 0.875rem; }
.ground-option input { margin: 0; accent-color: var(--espresso); flex: none; }
.ground-chip { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid rgba(51, 33, 28, 0.3); }
.bg-picker:has(.ground-options input[value="photo"]:not(:checked)) .photo-fields { display: none; }
.photo-fields { display: grid; gap: 0.5rem; }
.photo-fields > .fine, .photo-fields > .empty { margin: 0; }
.photo-picker { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); }
.photo-option { position: relative; display: grid; gap: 0.25rem; cursor: pointer; font-weight: 400; }
.photo-option input { position: absolute; top: 0.4rem; left: 0.4rem; margin: 0; width: 1.15rem; height: 1.15rem;
  accent-color: var(--espresso); }
.photo-option img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--line); background: var(--sand); }
.photo-option:has(input:checked) img { border-color: var(--espresso); box-shadow: 0 0 0 3px var(--butter); }
.photo-option .fine { font-size: 0.75rem; line-height: 1.3; }
.stack fieldset.proof-fields, .stack fieldset.rows-fields { margin-top: 0.75rem; padding-top: 0.85rem;
  border-top: 1px solid var(--line); }
.stack fieldset.cover-variant { padding: 1rem 0; border-top: 1px solid var(--line); }
.stack fieldset.cover-variant:first-of-type { border-top: 0; padding-top: 0; }

.send-panel .stack fieldset { margin-top: 0.5rem; }
.send-state { display: grid; gap: 0.35rem; }
.send-state .fine { margin: 0.5rem 0 0; }
.sent-cards { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.sent-cards li { color: var(--espresso); }
.sent-cards ul { margin: 0.25rem 0 0; padding-left: 1.1rem; }
.picks-actions { margin: 0.25rem 0 0.5rem; }
.picks-actions form { margin: 0; }

@media (min-width: 40rem) {
  .field-pair { grid-template-columns: 1fr 1fr; }
  .stack fieldset.field-pair legend { grid-column: 1 / -1; }
  .carousel-row { grid-template-columns: 5.5rem 1fr; }
  .strip-wrap { margin: 0 0 1.5rem; overflow: visible; }
  .slide-strip { flex-wrap: wrap; padding: 0.35rem 0 0; }
}

@media (min-width: 60rem) {
  .editor-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem; }
  .editor-preview { position: sticky; top: 1rem; }
  .slide-preview > .face { max-width: none; }
  .slide-preview > .face-tall { max-width: 20rem; }
  .slide-panel-head { grid-template-columns: auto 1fr; align-items: center; }
  .slide-actions { justify-content: flex-end; }
}

@media (min-width: 75rem) {
  .editor-preview { top: 7.5rem; } /* below the sticky top bar (about 6.3rem) */
}

/* ------------------------------------------------------------------ policy */

.draft-banner {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  background: var(--butter);
  color: var(--espresso);
}
.draft-banner strong { font: 700 0.6875rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }

/* ------------------------------------------------------------------ wider screens */

@media (min-width: 40rem) {
  .topbar-inner { padding: env(safe-area-inset-top) 2.625rem 0; gap: 0 2.25rem; }
  .wordmark { padding: 0.95rem 0; }
  /* Wider than a phone, the nav is still its own row under the wordmark and Sign out, but it
     never scrolls (a mouse wheel can't move it sideways, so links past the edge were out of
     reach): all twelve links show, on one line from about 1180px and wrapping onto a second
     below that. */
  .nav {
    flex-basis: calc(100% + 5.25rem); flex-wrap: wrap; gap: 0 1.35rem;
    margin: 0 -2.625rem; padding: 0 2.625rem; overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .nav a { min-height: 2.75rem; }
  .page { padding: 3rem 2rem 4rem; }
  .flash-region { padding: 0 2rem; }
  .footer-inner { padding: 2.5rem 2.625rem 3rem; }
  .footer nav { flex-basis: auto; }
  .panel { padding: 1.75rem; }
  .panel.narrow { padding: 2.75rem 2.5rem; }
  .item { grid-template-columns: 7.5rem 1fr; gap: 1.5rem; padding: 1.5rem; }
  .actions > form .btn { width: auto; }
  .hero { padding: 4rem 0 3rem; }
}

/* The bar stays put while scrolling only once the nav fits on one line under it (thirteen
   links since Carousels: a little tighter, so they still fit in the bar's 1180px). */
@media (min-width: 75rem) {
  .topbar { position: sticky; top: 0; z-index: 60; }
  .nav { gap: 0 1rem; }
  .nav a { letter-spacing: 0.12em; }
}

@media (hover: none) {
  .btn:hover:not(:disabled) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .btn:hover:not(:disabled) { transform: none; }
}