/* ==========================================================================
   Two-page client brief — layout on top of proposal.css
   Images are NEVER cropped: filmstrips use a fixed height with automatic
   width, and the look grid uses natural aspect ratios in columns.
   ========================================================================== */

/* Casey 2026-08-01: "size the fonts up slightly to make things easier to read for
   older people." Bumped body copy ~10-15% across the sheet; headings were already
   generous so left mostly as-is. */
body{display:flex;justify-content:center;padding:clamp(20px,3vw,56px) clamp(16px,3.5vw,64px);
  font-size:16.5px;line-height:1.6}

/* Casey 2026-08-01: "go responsive full width — I want it super easy to read."
   No hard cap now — the sheet fills the viewport (minus the body's responsive
   padding) at any size, from a phone up to an ultrawide monitor. Readability is
   protected separately: every paragraph/subline/thesis already caps its own
   line length in ch units below, so a wider canvas means more breathing room
   and bigger imagery, not longer lines to read. */
.sheet{width:100%;max-width:none;position:relative;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line);border-radius:6px;
  padding:44px clamp(28px,4vw,72px) 40px}
.sheet::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 55% at 8% 0%, rgba(183,124,199,.16), transparent 55%),
    radial-gradient(70% 45% at 100% 100%, rgba(132,184,106,.10), transparent 60%)}
.sheet > *{position:relative;z-index:2}

/* ---- masthead ---- */
.kick{font-family:var(--mono);text-transform:uppercase;letter-spacing:.26em;font-size:12px;
  color:var(--c-1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.kick .r{color:var(--muted)}
/* ---- TYPE SYSTEM: match Gospel / the Lead Desk (Casey 2026-07-27) ----------------
   The masthead is the big chunky condensed face, exactly like the "LEADS." wordmark.
   Sublines are the SAME face, just smaller — they were italic Cormorant at muted grey,
   which is the combination Casey called hard to read. Body stays DM Sans. Cormorant is
   now reserved for ONE deliberate pull-quote per page (.thesis), used sparingly. */
/* Casey 2026-08-04, pointing at the Gospel marketing splash (addason-audits-site/
   gospel/index.html): "keep the colors of southwest college, but the typeface and
   sizing closer to this. its super easy to read." That page's headline is Barlow
   Condensed at weight 900 (not 700) with -.02em tracking — same family already in
   use here, just heavier and tighter. Applied to every headline-tier element
   (h1, zone-heading) sitewide across proposals, not just this one. */
.sheet h1{font-family:var(--heading);font-weight:900;color:var(--cream);
  letter-spacing:-.02em;text-transform:uppercase;
  font-size:clamp(46px,8vw,78px);line-height:.92;margin:16px 0 0}
.sheet h1 em{color:var(--c-1);font-style:normal}
/* Same Gospel face as the masthead, smaller — readable at a glance, no italic, and a
   brighter ink than the old muted grey. */
.subline{font-family:var(--heading);font-weight:500;font-style:normal;color:var(--cream-2);
  font-size:clamp(20px,2.6vw,27px);line-height:1.25;letter-spacing:.004em;
  margin-top:12px;max-width:52ch}
/* The one sparing use of the serif — a real pull-quote moment. Kept, but given more
   weight and full-cream ink so it carries without straining. */
.thesis{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--cream);
  font-size:clamp(22px,2.9vw,30px);line-height:1.35;margin:22px 0 0;max-width:36ch}
.thesis b{color:var(--c-3);font-weight:500}

/* ---- Status track — one-glance "where are we" strip, reused by checklist.js:
   dots for the two dynamic steps flip to .is-done when their linked checklist
   items are checked. Reusable: any proposal page can drop
   <div class="status-track"> with its own steps and data-status-step hooks. ---- */
.status-track{display:flex;flex-wrap:wrap;gap:0;margin-top:24px;padding:16px 20px;
  background:var(--ink);border:1px solid var(--line);border-radius:6px}
.status-step{display:flex;align-items:center;gap:8px;flex:1 1 auto;position:relative;
  padding-right:14px}
.status-step:not(:last-child)::after{content:"";flex:1 1 24px;height:1px;background:var(--line);
  margin:0 10px;align-self:center;order:3}
.status-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;border:1.5px solid var(--muted-d);
  background:transparent}
.status-step.is-done .status-dot{background:var(--accent);border-color:var(--accent)}
.status-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-d);white-space:nowrap}
.status-step.is-done .status-label{color:var(--cream-2)}
/* ALLOW-ROOT-EDIT — additive class, lanes.mjs --check clear, no other session in this file.
   .is-now — the step the project sits on right now. Ringed, not filled, so it reads as
   "open" beside the solid done dots. Purely additive: existing pages are unaffected. */
.status-step.is-now .status-dot{background:transparent;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
.status-step.is-now .status-label{color:var(--accent)}
@media(prefers-reduced-motion:no-preference){
  .status-step.is-now .status-dot{animation:statusPulse 2.4s ease-in-out infinite}
  @keyframes statusPulse{
    0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent)}
    50%    {box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 8%,transparent)}
  }
}
@media(max-width:820px){
  .status-track{flex-direction:column;gap:10px;padding:16px 18px}
  .status-step:not(:last-child)::after{display:none}
}

/* ---- filmstrip: fixed height, natural width — for bands where row count
   doesn't matter (variable image counts, e.g. brand-kit reference rows) ---- */
.band{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap;align-items:flex-start}
.band figure{margin:0;flex:0 0 auto}
.band img,.band video{height:150px;width:auto;max-width:100%;display:block;border-radius:3px;
  background:var(--ink);object-fit:cover}

/* Casey 2026-08-01: "I want symmetry" — flex-wrap's natural image widths made the
   6-image hero band split 4-then-2 depending on viewport (each photo wraps at its
   own width, not a fixed column count). A real grid guarantees complete, even rows
   at any size: 3x2 on desktop, 2x3 on mobile — always symmetric. */
.band[data-band="hero"]{display:grid;grid-template-columns:repeat(3,1fr)}
.band[data-band="hero"] figure{flex:none}
/* Casey 2026-08-04: "if its horizontal its 16:9 crop" — was 4:3 (chosen only for the
   grid-symmetry fix), corrected to 16:9 to match the standing rule. */
.band[data-band="hero"] img,.band[data-band="hero"] video{width:100%;height:100%;
  aspect-ratio:16/9;object-fit:cover}

/* "Southwestern today" (and any other small reference band) — few images that
   don't fill the now-full-width sheet; center them instead of hugging the left
   edge like the flex default. Also forces 16:9 via CSS for these specific images:
   they're hosted on swc.edu (third-party WordPress), not Cloudinary, so there's no
   delivery-transform option — this is the documented exception, not a silent skip. */
.band[data-band="swc"]{justify-content:center}
.band[data-band="swc"] img{aspect-ratio:16/9;width:auto;object-fit:cover}

.band-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-d);margin-top:9px}

/* ---- three colour-coded cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:24px 0 0;border-radius:4px;overflow:hidden}
.cards.cards-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--ink);padding:22px 20px}
.card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  display:block;margin-bottom:9px}
.card.a .k{color:var(--c-2)} .card.b .k{color:var(--c-3)} .card.c .k{color:var(--c-1)}
/* Card subheads ("What comes back") join the Gospel face too — same family as the
   masthead, small and uppercase, so every heading level reads as one system. */
.card h3{font-family:var(--heading);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;color:var(--cream);font-size:22px;
  line-height:1.05;margin-bottom:9px}
.card ul{list-style:none;font-size:15px;line-height:1.55}
.card li{padding-left:14px;position:relative;margin-top:5px;color:var(--cream-2)}
.card li b{color:var(--cream)}
.card li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%}
.card.a li::before{background:var(--c-2)}
.card.b li::before{background:var(--c-3)}
.card.c li::before{background:var(--c-1)}

/* ---- price bar ---- */
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.bar .price{font-family:var(--heading);font-weight:600;color:var(--cream);font-size:44px;line-height:1}
.bar .price small{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--c-2);display:block;margin-bottom:4px}
.bar .note{font-size:14.5px;color:var(--muted);max-width:46ch}

/* ---- page two ---- */
.page-two{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--c-1);display:block;margin-bottom:10px}
.page-two h2{font-family:var(--heading);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;font-size:clamp(24px,3.4vw,32px);line-height:1;color:var(--cream);margin:0 0 12px}
.page-two p{font-size:16px;color:var(--cream-2);max-width:58ch}
.page-two p + p{margin-top:12px}

/* ---- Zone heading — Casey 2026-08-04: "make the for neil and for casey fonts much
   bigger. the same as gospel is." Now matches the page H1 scale exactly (same clamp
   as .sheet h1 — "The Work of <em>Becoming</em>"), not just the same font family, so
   it reads at true masthead size wherever it breaks up the page. Reusable: wrap any
   block of content in a section labeled this way on any future proposal page. ---- */
h2.zone-heading{font-family:var(--heading);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(46px,8vw,78px);line-height:.92;color:var(--cream);
  margin:64px 0 28px;padding-top:40px;border-top:2px solid var(--line)}
h2.zone-heading:first-child{margin-top:0;padding-top:0;border-top:0}
h2.zone-heading em{color:var(--c-1);font-style:normal}

.split{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:start}

/* uncropped look grid — natural aspect ratios, two columns */
.look{columns:2;column-gap:8px}
.look figure{margin:0 0 8px;break-inside:avoid}
.look img,.look video{width:100%;height:auto;display:block;border-radius:3px;background:var(--ink)}

.asks-block{margin-top:30px}
.asks-block .asks{columns:2;column-gap:36px;margin-top:4px}
.asks-block .asks li{break-inside:avoid}
.mini-tl{margin-top:4px}
.mini-tl > div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:15px}
.mini-tl b{color:var(--c-3);font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:400}
.mini-tl span{color:var(--cream-2)}

/* Craft-standard chips — a quiet mastery signal, standing element per Casey 2026-08-26:
   "prove a little bit of our mastery by letting the client know what the standards are...
   adds to our mastery and prestige." Subtle by design — plain-English facts, no jargon
   dump, no section of its own. Reusable across every proposal, not just one client. */
.craft-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.craft-chips span{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line);
  border-radius:99px; padding:5px 12px; white-space:nowrap}

.asks{margin-left:17px;font-size:15.5px;color:var(--cream-2);line-height:1.6}
.asks li{margin-top:6px}
.asks b{color:var(--cream)}
ul.asks{list-style:none;margin-left:0}
ul.asks.checklist li{margin-left:0}

/* ---- Producer's Plan — Casey 2026-08-04: "youre my producer... i want this to be
   an established template moving forward for all projects." Reusable component: any
   proposal page can drop a <div class="producer-plan"> with its own <div class="phase">
   blocks and inherit this look. Distinct from .asks (the client's checklist) — this is
   Casey's own staged list, so it reads as a timeline, not a numbered ask. ---- */
.producer-plan{margin-top:14px;border-left:2px solid var(--line);padding-left:22px}
.producer-plan .phase{padding:14px 0}
.producer-plan .phase:not(:last-child){border-bottom:1px solid var(--line)}
.producer-plan .phase-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-3);display:block;margin-bottom:8px}
.producer-plan .phase p{font-size:15px;color:var(--cream-2);line-height:1.6;margin:0;max-width:64ch}
.producer-plan .phase ul{margin:0;list-style:none;max-width:64ch}
.producer-plan .phase li{font-size:15px;line-height:1.7;color:var(--cream-2);
  padding-left:16px;position:relative;margin-top:4px}
.producer-plan .phase li::before{content:"";position:absolute;left:0;top:9px;
  width:4px;height:4px;border-radius:50%;background:var(--c-3)}
@media(max-width:820px){.producer-plan{padding-left:16px}}

/* ---- Notes — persistent per-proposal scratch pad (Casey 2026-08-04): "a little
   notes section... give me one too." Backed by Supabase (notes.js), so it survives
   reload and syncs between web and mobile — not localStorage, which is per-device.
   Reusable: any proposal page can drop a .notes-grid with two [data-note-author]
   textareas and pick up autosave + the same look. ---- */
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.note-box{display:flex;flex-direction:column;background:var(--ink);border:1px solid var(--line);
  border-radius:6px;padding:16px 18px}
.note-box label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-2);margin-bottom:10px}
.note-box textarea{background:transparent;border:none;resize:vertical;min-height:120px;
  color:var(--cream-2);font-family:var(--body);font-size:15px;line-height:1.6;outline:none;
  width:100%;padding:0}
.note-box textarea::placeholder{color:var(--muted-d)}
.note-status{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-d);margin-top:8px;min-height:14px;display:block}
@media(max-width:820px){.notes-grid{grid-template-columns:1fr}}

/* ---- Checklist — clickable, persisted (checklist.js). Overlays on top of
   .asks (Neil's list) and .producer-plan ul (Casey's phases) rather than
   replacing their layout, so both keep their existing look. Checking a
   [data-check-by="client"] item is what fires the email-Casey trigger. ---- */
ul.checklist{list-style:none;margin-left:0}
ul.checklist li{margin-top:6px}
.checklist label{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.checklist input[type="checkbox"]{appearance:none;flex:0 0 auto;width:18px;height:18px;margin-top:2px;
  border:1.5px solid var(--muted-d);border-radius:4px;background:transparent;cursor:pointer;
  position:relative;transition:border-color .15s,background .15s}
.checklist input[type="checkbox"]:hover{border-color:var(--accent)}
.checklist input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.checklist input[type="checkbox"]:checked::after{content:"";position:absolute;left:5px;top:1px;
  width:5px;height:9px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.checklist li.is-checked span{color:var(--muted-d);text-decoration:line-through;text-decoration-color:var(--line)}
.checklist li.is-checked b{color:var(--muted-d)}
/* ul.checklist always renders its own checkbox marker — cancel whichever
   ancestor's bullet/dot/padding scheme (.cell, .producer-plan .phase, .asks)
   would otherwise double up with it. */
ul.checklist li{padding-left:0 !important}
ul.checklist li::before{display:none !important}

/* ---- Share view — Casey 2026-08-04: "a clean 'forward to my team' button/link."
   ?share=1 in the URL adds html.sharing (set synchronously by an inline script in
   <head>, before paint, so there's no flash of the full page). Anything marked
   data-share-hide — Casey-internal sections like Producer's Plan — disappears;
   everything else (the pitch itself, Neil's checklist, the conversation) stays. ---- */
.share-toggle{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-1);
  background:none;border:1px solid var(--line);border-radius:4px;padding:6px 12px;
  cursor:pointer;transition:border-color .15s;margin-right:8px}
.share-toggle:hover{border-color:var(--c-1)}
/* FLIPPED 2026-08-20. This used to be opt-IN: the page showed Casey's internal blocks to
   everyone, and ?share=1 hid them. But the plain URL is the one clients actually have —
   Casey emailed https://addasonphoto.com/proposals/southwestern-college/ straight to Neil —
   so the protection only applied to a link nobody was using, and Neil could read the
   Producer's Plan, the call sheet button and Casey's private notes. Same shape as the
   client-Gospel leak the same day: a guard that defends the path not taken.
   Now: hidden for everyone, and Casey unlocks his own view with ?casey=1, which the
   detector remembers per-device in localStorage. Failing closed is the whole point. */
/* REVERTED 2026-08-20. Hiding Casey's own sections by default meant HE opened his own
   proposal page and found the For Casey block gone, with no way back except a query string he
   had to remember. Protecting the page from a client at the cost of taking it away from its
   owner is the wrong trade — he is the one who opens this URL every day.
   So the plain URL is CASEY'S view again. The separation is by LINK, not by default:
     · Brent gets the call sheet URL, which carries no financials at all;
     · Neil gets ?share=1, which hides the producer plan and Casey's notes.
   ?casey=0 still forces the client view so Casey can check what they see. */
html.clientview [data-share-hide]{display:none !important}
/* Kept so any existing ?share=1 link still behaves — it is simply the default now. */
html.sharing [data-share-hide]{display:none !important}
html.sharing .share-toggle{display:none}

/* ---- No-pricing view — Casey 2026-08-11: "no financial transparency" for a link
   shared with a second shooter. Independent of html.sharing above — either mode
   can run alone or combined (?share=1&nomoney=1). Hides anything marked
   data-hide-finance: the price bar, the deposit status step, the deposit
   checklist line, and the $ mention inside the conversation log. ---- */
html.nomoney [data-hide-finance]{display:none !important}
html.nomoney .share-toggle{display:none}

.fine{font-size:13.5px;color:var(--muted);margin-top:28px;padding-top:18px;
  border-top:1px solid var(--line);max-width:none}
.fine b{color:var(--cream-2)}

/* Reference-doc cards — a brand kit or shot list, thumbnail + label, opens the
   file. Shared across any brief; not Southwestern-specific. */
/* Casey 2026-08-01: "make those a little bit smaller, the thumbnails, because
   they look kinda ugly" — repeat(3,1fr) stretched each card to a third of the
   now-full-bleed sheet, blowing a ~500px source thumbnail up past its native
   resolution. Fixed small tiles instead — sharp at any container width, and
   wrap naturally rather than filling the row. */
.kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,150px));
  justify-content:start;gap:12px;margin-top:14px}
.kit-card{display:flex;flex-direction:column;background:var(--ink-2);border:1px solid var(--line);
  border-radius:6px;overflow:hidden;text-decoration:none;transition:border-color .15s,transform .15s}
.kit-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.kit-card img{width:100%;aspect-ratio:4/3;object-fit:contain;object-position:center;
  background:var(--ink-3);display:block}
.kit-t{font-size:14.5px;color:var(--cream);font-weight:600;padding:10px 12px 0}
.kit-s{font-size:13px;color:var(--muted);padding:2px 12px 12px;line-height:1.4}

/* Drill-down — a client-safe expandable section, styled to match .callout so it
   reads as part of the family rather than a raw browser <details> element. */
.kit-drill{margin-top:28px;padding:18px 22px;background:var(--ink);border:1px solid var(--line);
  border-radius:5px}
.kit-drill summary{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.kit-drill summary::-webkit-details-marker{display:none}
.kit-drill summary::before{content:"+";font-family:var(--heading);font-size:15px;line-height:1;
  width:16px;text-align:center}
.kit-drill[open] summary::before{content:"–"}
.kit-drill[open] summary{margin-bottom:4px}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:22px;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted)}
.foot b{color:var(--cream);font-family:var(--serif);font-style:italic;font-size:18px;letter-spacing:0}
.foot .c{color:var(--c-1)}
.foot a{color:var(--c-1);text-decoration:none}

/* Wide laptop/desktop — the canvas is wider now, so give the filmstrip and mood
   grid more room instead of stretching 2 columns thin across the extra width. */
@media(min-width:1100px){
  .band img,.band video{height:190px}
  .look{columns:3}
}

/* Ultrawide — the sheet has no max-width now, so past ~1700px give the mood
   grid a 4th column and a taller filmstrip instead of just widening 3 columns
   into oversized tiles. */
@media(min-width:1700px){
  .band img,.band video{height:230px}
  .look{columns:4}
}

@media(max-width:820px){
  .cards,.split,.cards.cards-2{grid-template-columns:1fr}
  .split{gap:26px}
  .sheet{padding:32px 26px}
  .band img,.band video{height:120px}
  .band[data-band="hero"]{grid-template-columns:repeat(2,1fr)}
  .asks-block .asks{columns:1}

  /* "The feeling I'm after" — bleed near-full-width and center on mobile,
     instead of sitting squeezed inside the sheet's side padding. */
  .look-col{margin-left:-26px;margin-right:-26px;text-align:center}
  .look-col .eyebrow{padding:0 26px}
  .look-col .band-note{padding:0 26px}
  .look{padding:0 10px;column-gap:6px;text-align:left}
}

@media print{
  body{padding:0;display:block}
  .sheet{border:0;border-radius:0;max-width:none;padding:0}
  .sheet::before{display:none}
  .page-two{break-before:page;border-top:0;margin-top:0;padding-top:0}
  .edit-bar,.edit-tag{display:none !important}
  .kit-grid{display:none}
}

/* ---- The conversation log ------------------------------------------------
   Client-visible record of what was actually said, rendered from
   data/lead-crm/proposals.json by scripts/proposal-log.mjs. Casey's entries
   sit flush left; the client's are inset and accented so the exchange reads
   at a glance without either side looking like an afterthought. */
.conv{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.conv-intro{font-size:14.5px;color:var(--muted);margin:0 0 16px;max-width:62ch}
.conv-log{display:flex;flex-direction:column;gap:2px}
.conv-row{display:grid;grid-template-columns:78px 1fr;gap:16px;padding:11px 0 11px 14px;
  border-left:2px solid var(--line);align-items:baseline}
.conv-row.them{border-left-color:var(--c-1);background:rgba(255,255,255,.022)}
.conv-when{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-d);white-space:nowrap}
.conv-row.them .conv-when{color:var(--c-1)}
.conv-who{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-d);display:block;margin-bottom:3px}
.conv-row.them .conv-who{color:var(--c-1)}
.conv-row p{font-size:15px;line-height:1.55;color:var(--cream-2);margin:0;max-width:66ch}

@media(max-width:820px){
  .conv-row{grid-template-columns:1fr;gap:2px}
}

/* ---- Lightbox — click any reference/mood image to expand ---- */
.zoomable{cursor:zoom-in}
.lightbox-overlay{position:fixed;inset:0;background:rgba(10,8,12,.94);z-index:999;
  display:none;align-items:center;justify-content:center;padding:48px;cursor:zoom-out}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img,.lightbox-overlay video{max-width:100%;max-height:100%;
  border-radius:5px;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.lightbox-close{position:absolute;top:22px;right:30px;color:var(--cream);font-family:var(--mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;opacity:.7;z-index:2}
.lightbox-close:hover{opacity:1}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);color:var(--cream);
  font-size:44px;line-height:1;cursor:pointer;opacity:.55;padding:12px 18px;user-select:none;z-index:2}
.lightbox-nav:hover{opacity:1}
.lightbox-prev{left:8px}
.lightbox-next{right:8px}
@media(max-width:640px){.lightbox-nav{font-size:32px;padding:8px 12px}}

/* Scheduler link inside a checklist item. Sits on the client's own line so the
   action is where the ask is, not buried in a footer. stopPropagation on the
   anchor keeps a click from toggling the checkbox it lives inside. */
.sched-link{
  display:inline-block;margin-left:6px;white-space:nowrap;
  font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold,#c8a84b);
  border-bottom:1px solid rgba(200,168,75,.45);text-decoration:none;
  transition:color .2s,border-color .2s;
}
.sched-link:hover{color:#e8cf82;border-color:#e8cf82}