/* =============================================================================
   THE FRAME — editorial design system
   Typography: Fraunces (display serif) + Inter (body sans)
   Built mobile-first; scales up generously for laptops and classroom displays.
   ============================================================================= */

/* ----------------------------- TOKENS ------------------------------------- */
:root {
  /* Paper & ink */
  --paper:        #f3efe6;
  --paper-2:      #ece6d9;
  --card:         #fbf9f4;
  --ink:          #16130d;
  --ink-soft:     #4a4339;     /* still AA on paper — used for secondary text */
  --line:         #d8d1c2;
  --line-strong:  #c2b9a6;

  --accent:       #c8401f;     /* vermillion */
  --accent-deep:  #992f15;
  --accent-tint:  #f6e2d8;

  /* Category colours (functional, paired with labels — never colour alone) */
  --cat-camera:        #1f6f8f;
  --cat-editing:       #b1492a;
  --cat-lighting:      #9a7400;
  --cat-colour:        #6a4c93;
  --cat-mise-en-scene: #2e7d54;
  --cat-performance:   #b23a64;
  --cat-symbolism:     #43448a;
  --cat-sound-image:   #0e7575;

  /* Type scale — clamp(min, fluid, max). Max values are large for big screens. */
  --fs-hero:   clamp(2.75rem, 1.5rem + 6.2vw, 6rem);
  --fs-h1:     clamp(2.1rem, 1.3rem + 3.8vw, 4rem);
  --fs-h2:     clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
  --fs-h3:     clamp(1.3rem, 1rem + 1.4vw, 2rem);
  --fs-lead:   clamp(1.15rem, 0.95rem + 1.1vw, 1.7rem);
  --fs-body:   clamp(1rem, 0.9rem + 0.5vw, 1.3rem);
  --fs-small:  clamp(0.85rem, 0.8rem + 0.3vw, 1.05rem);
  --fs-label:  clamp(0.7rem, 0.68rem + 0.2vw, 0.9rem);

  --maxw: 1400px;
  --radius: 4px;
  --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(20,16,10,.06), 0 8px 28px rgba(20,16,10,.07);
  --shadow-lg: 0 4px 12px rgba(20,16,10,.10), 0 24px 60px rgba(20,16,10,.12);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ----------------------------- RESET -------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-family: var(--serif); line-height: 1.05; margin: 0; font-weight: 600; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .75rem 1.25rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

/* --------------------------- MASTHEAD / NAV ------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243,239,230,.92);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--ink);
}
.masthead__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .9rem clamp(1rem, 4vw, 3rem);
}
.brand { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  column-gap: .6rem; align-items: center; text-decoration: none; }
.brand__mark { grid-row: 1 / 3; display: flex; align-items: center; }
.brand__mark svg { display: block; width: 2.5em; height: 2.5em; }
.brand__name { font-family: var(--serif); font-weight: 900; letter-spacing: .14em;
  font-size: clamp(1.1rem, .9rem + .7vw, 1.6rem); }
.brand__tag { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); }

.nav { display: flex; gap: clamp(.6rem, 2vw, 2rem); align-items: center; }
.nav a {
  text-decoration: none; font-weight: 600; font-size: var(--fs-small);
  letter-spacing: .02em; padding: .4rem .2rem; position: relative; white-space: nowrap;
  color: var(--ink);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .18s ease;
}
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: var(--accent-deep); }
.nav__count {
  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em;
  padding: 0 .35em; margin-left: .25em; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .78em; font-weight: 700;
}

.nav-toggle { display: none; background: none; border: 0; padding: .4rem; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .2s; }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 2px solid var(--ink);
    max-height: 0; overflow: hidden; transition: max-height .25s ease; padding: 0 clamp(1rem,4vw,3rem);
  }
  .nav.is-open { max-height: 70vh; padding-bottom: 1rem; }
  .nav a { padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
  .nav a::after { display: none; }
}

/* ------------------------------ LAYOUT ------------------------------------ */
.view { min-height: 70vh; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(2rem, 5vw, 5rem) clamp(1rem, 4vw, 3rem); }
.section-head { margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.eyebrow {
  font-size: var(--fs-label); letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-deep); margin: 0 0 .6rem;
}
.section-head h1 { font-size: var(--fs-h1); margin-bottom: .6rem; }
.section-head p { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 60ch; margin: 0; }

.footer { border-top: 2px solid var(--ink); background: var(--paper-2); margin-top: 4rem; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem clamp(1rem,4vw,3rem); }
.footer__line { font-size: var(--fs-body); margin: 0 0 .3rem; }
.footer__line strong { font-family: var(--serif); letter-spacing: .12em; }
.footer__note { font-style: italic; color: var(--ink-soft); margin: 0; font-family: var(--serif); }
.footer__credit { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 1.4rem 0 0; opacity: .75; }

/* ------------------------------- HERO ------------------------------------- */
.hero { position: relative; overflow: hidden; border-bottom: 2px solid var(--ink); background:
  radial-gradient(120% 90% at 80% -10%, var(--accent-tint), transparent 55%), var(--paper); }
/* Decorative three.js canvas layer — sits behind the text, never blocks clicks.
   If three.js is unavailable or reduced-motion is on, this stays empty and the
   paper/gradient background above shows through unchanged. */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-bg canvas { display: block; width: 100% !important; height: 100% !important; }
.hero__inner { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem,6vw,6rem) clamp(1rem,4vw,3rem) clamp(2rem,5vw,4.5rem); }
.hero__kicker {
  font-size: var(--fs-label); letter-spacing: .28em; text-transform: uppercase;
  font-weight: 700; color: var(--accent-deep);
  display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem;
}
.hero__kicker::before, .hero__kicker::after { content:""; height: 2px; flex: 1; background: var(--line-strong); max-width: 80px; }
.hero h1 { font-size: var(--fs-hero); letter-spacing: -.01em; margin-bottom: 1.2rem; font-weight: 900; }
.hero h1 em { font-style: italic; color: var(--accent); font-weight: 500; }
.hero__lead { font-size: var(--fs-lead); max-width: 46ch; color: var(--ink-soft); margin: 0 auto 2.2rem; }
.hero--center { text-align: center; }
.hero--center .hero__kicker { justify-content: center; }
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* ------------------------------ BUTTONS ----------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: var(--fs-small); letter-spacing: .02em;
  padding: .9rem 1.6rem; border-radius: var(--radius); border: 2px solid var(--ink);
  background: var(--ink); color: var(--paper); text-decoration: none;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--accent { background: var(--accent); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--sm { padding: .55rem 1rem; font-size: var(--fs-label); }
.btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }

/* --------------------------- HOME: how it works --------------------------- */
.steps { display: grid; gap: clamp(1rem, 2vw, 2rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.5vw, 2.4rem); box-shadow: var(--shadow);
}
.step__num { font-family: var(--serif); font-weight: 900; font-size: 2.4em; color: var(--accent); line-height: 1; }
.step h3 { font-size: var(--fs-h3); margin: .6rem 0 .5rem; }
.step p { margin: 0; color: var(--ink-soft); }

.manifesto { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--ink); color: var(--paper); }
.manifesto__inner { max-width: 32ch; margin: 0 auto; padding: clamp(3rem,7vw,6rem) clamp(1rem,4vw,3rem); text-align: center; }
.manifesto p { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.25; font-weight: 500; margin: 0; }
.manifesto p em { color: var(--accent); font-weight: 600; }

/* --------------------------- EFFECT FINDER -------------------------------- */
.effect-grid { display: grid; gap: clamp(.8rem, 1.6vw, 1.4rem);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.effect-card {
  text-align: left; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.2rem, 2vw, 1.8rem);
  display: flex; flex-direction: column; gap: .4rem; min-height: 150px;
  box-shadow: var(--shadow); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.effect-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
.effect-card__label { font-family: var(--serif); font-size: var(--fs-h3); font-weight: 600; }
.effect-card__tag { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; }
.effect-card__hint { color: var(--ink-soft); font-size: var(--fs-small); margin: 0; }
.effect-card__arrow { margin-top: auto; font-weight: 700; color: var(--accent); align-self: flex-end; font-size: 1.4em; }

/* Results header for finder */
.finder-result-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 1.5rem; margin-bottom: 2rem; }
.finder-result-head h1 { font-size: var(--fs-h1); }
.finder-result-head .lead { color: var(--ink-soft); font-size: var(--fs-lead); max-width: 55ch; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700;
  font-size: var(--fs-small); text-decoration: none; color: var(--accent-deep); margin-bottom: 1.2rem; }
.back-link:hover { text-decoration: underline; }

/* ----------------------------- TOOLBAR ------------------------------------ */
.toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 2rem; }
.search {
  flex: 1 1 280px; display: flex; align-items: center; gap: .6rem;
  background: var(--card); border: 2px solid var(--line-strong); border-radius: var(--radius);
  padding: .65rem 1rem;
}
.search:focus-within { border-color: var(--accent); }
.search input { flex: 1; border: 0; background: transparent; font-size: var(--fs-body); color: var(--ink); }
.search input:focus { outline: none; }
.search__icon { color: var(--ink-soft); font-size: 1.2em; }

.filter-group { display: flex; flex-direction: column; gap: .35rem; }
.filter-group__label { font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: .4rem .9rem; font-size: var(--fs-small); font-weight: 600;
  transition: .14s; display: inline-flex; align-items: center; gap: .4rem;
}
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip__dot { width: .7em; height: .7em; border-radius: 50%; background: var(--dot, var(--accent)); }
.chip.is-active .chip__dot { outline: 2px solid var(--paper); }

.result-count { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 1.2rem; font-weight: 600; }
.result-count strong { color: var(--ink); }

/* --------------------------- TECHNIQUE CARDS ------------------------------ */
.card-grid { display: grid; gap: clamp(1rem, 2vw, 1.8rem);
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.tcard {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .14s ease, box-shadow .14s ease;
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tcard__media {
  aspect-ratio: 16 / 9; background: var(--paper-2); position: relative;
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.tcard__media img { width: 100%; height: 100%; object-fit: cover; }
.tcard__placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; color: var(--ink-soft);
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(0,0,0,.025) 12px 24px),
    var(--cat-color, var(--paper-2));
}
.tcard__placeholder .ph-icon { font-size: 2em; opacity: .55; }
.tcard__placeholder .ph-text { font-size: var(--fs-label); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.cat-stripe { position: absolute; top: 0; left: 0; bottom: 0; width: 6px; background: var(--cat-color, var(--accent)); }

.tcard__body { padding: clamp(1.1rem, 2vw, 1.6rem); display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.tcard__tags { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tag {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .04em;
  padding: .25rem .6rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem;
}
.tag--cat { color: #fff; background: var(--cat-color, var(--ink)); }
.tag--diff { border: 1.5px solid var(--line-strong); color: var(--ink); background: transparent; }
.tag--diff .dot { width: .6em; height: .6em; border-radius: 50%; }
.diff-easy .dot { background: #2e7d54; } .diff-moderate .dot { background: #c08a00; } .diff-advanced .dot { background: #b1492a; }

.tcard__name { font-size: var(--fs-h3); }
.tcard__blurb { color: var(--ink-soft); margin: 0; }

.tcard__rows { display: flex; flex-direction: column; gap: .55rem; margin-top: .2rem; }
.trow { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; font-size: var(--fs-small); }
.trow__k { font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--accent-deep); white-space: nowrap; padding-top: .15em; }
.trow__v { margin: 0; color: var(--ink); }

.tcard__foot { margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--line); display: flex; gap: .6rem; }
.tcard__foot .btn { flex: 1; justify-content: center; }

details.tcard__more { margin-top: .2rem; }
details.tcard__more > summary {
  cursor: pointer; font-weight: 700; font-size: var(--fs-small); color: var(--accent-deep);
  list-style: none; display: inline-flex; align-items: center; gap: .4rem; padding: .2rem 0;
}
details.tcard__more > summary::-webkit-details-marker { display: none; }
details.tcard__more > summary::before { content: "+"; font-size: 1.2em; line-height: 1; }
details.tcard__more[open] > summary::before { content: "–"; }
details.tcard__more .more-body { padding-top: .6rem; display: flex; flex-direction: column; gap: .55rem; }

.related-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.related-links a { font-size: var(--fs-small); text-decoration: none; color: var(--cat-camera);
  border-bottom: 1px dotted currentColor; font-weight: 600; }
.related-links a:hover { color: var(--accent-deep); }

.empty {
  text-align: center; padding: 4rem 1rem; color: var(--ink-soft); border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg); background: var(--card);
}
.empty h3 { font-size: var(--fs-h3); color: var(--ink); margin-bottom: .5rem; }

/* --------------------------- COMBINATIONS --------------------------------- */
.combo-grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
@media (max-width: 520px) { .combo-grid { grid-template-columns: 1fr; } }
.combo {
  background: var(--card); border: 1px solid var(--line); border-left: 8px solid var(--accent);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.5vw, 2.2rem); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 1rem;
}
.combo__name { font-size: var(--fs-h2); }
.combo__summary { font-size: var(--fs-lead); color: var(--ink-soft); font-style: italic; font-family: var(--serif); margin: 0; }
.combo__stack { display: flex; flex-wrap: wrap; gap: .5rem; }
.combo__pill {
  display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: var(--fs-small);
  background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: .4rem .8rem;
}
.combo__pill .chip__dot { width: .7em; height: .7em; }
.combo__plus { align-self: center; font-weight: 800; color: var(--accent); }
.combo__note { margin: 0; color: var(--ink); }
.combo__foot { margin-top: auto; }

/* ------------------------------ GALLERY ----------------------------------- */
.gallery-note {
  background: var(--accent-tint); border: 1px solid var(--accent); border-radius: var(--radius-lg);
  padding: clamp(1.2rem,2.5vw,1.8rem); margin-bottom: 2.5rem;
}
.gallery-note h3 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.gallery-note p { margin: 0; color: var(--ink); }
.gallery-note code { background: rgba(0,0,0,.07); padding: .1em .45em; border-radius: 4px; font-size: .9em; }
.gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gframe {
  aspect-ratio: 16/9; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--card); position: relative;
}
.gframe img { width: 100%; height: 100%; object-fit: cover; }
.gframe figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .7rem;
  background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font-size: var(--fs-small); font-weight: 600; }

/* ------------------------------ PLANNER ----------------------------------- */
.planner-layout { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (max-width: 900px) { .planner-layout { grid-template-columns: 1fr; } }

.plan-pick { display: flex; flex-direction: column; gap: .6rem; }
.pick-row {
  display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); transition: .12s;
}
.pick-row:hover { border-color: var(--line-strong); }
.pick-row.is-picked { border-color: var(--accent); background: var(--accent-tint); }
.pick-row__check { width: 1.6em; height: 1.6em; border-radius: 5px; border: 2px solid var(--line-strong);
  display: grid; place-items: center; flex: none; font-weight: 800; color: #fff; }
.pick-row.is-picked .pick-row__check { background: var(--accent); border-color: var(--accent); }
.pick-row__main { flex: 1; min-width: 0; }
.pick-row__name { font-weight: 700; font-family: var(--serif); font-size: var(--fs-h3); }
.pick-row__meta { font-size: var(--fs-small); color: var(--ink-soft); }
.pick-row__cat { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.plan-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 1rem;
  background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: clamp(1.4rem,2.5vw,2rem); }
.plan-side h2 { color: var(--paper); font-size: var(--fs-h2); }
.plan-side__count { font-size: var(--fs-small); color: #d8cfc0; }
.plan-side__count strong { color: var(--accent); font-size: 1.6em; font-family: var(--serif); }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.plan-list li { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: rgba(255,255,255,.07);
  border-radius: var(--radius); border-left: 4px solid var(--cat-color, var(--accent)); }
.plan-list li span { flex: 1; font-weight: 600; }
.plan-list li button { background: none; border: 0; color: #e7b3a3; font-size: 1.3em; line-height: 1; padding: 0 .2rem; }
.plan-list li button:hover { color: #fff; }
.plan-empty { color: #cabfb0; font-style: italic; font-family: var(--serif); }
.plan-side__actions { display: flex; flex-direction: column; gap: .6rem; margin-top: .4rem; }
.plan-side__actions .btn { justify-content: center; }
.plan-side__actions .btn--ghost { color: var(--paper); border-color: var(--paper); }
.plan-side__actions .btn--ghost:hover { background: var(--paper); color: var(--ink); }
.plan-hint { font-size: var(--fs-small); color: #cabfb0; margin: 0; }

textarea.plan-summary {
  width: 100%; min-height: 220px; font-family: var(--sans); font-size: var(--fs-small); line-height: 1.5;
  padding: 1rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--card);
  color: var(--ink); resize: vertical; margin-top: 1rem;
}

.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(150%);
  background: var(--ink); color: var(--paper); padding: .9rem 1.6rem; border-radius: 999px;
  font-weight: 700; box-shadow: var(--shadow-lg); transition: transform .3s ease; z-index: 80;
}
.toast.is-show { transform: translateX(-50%) translateY(0); }

/* Add-to-plan button states */
.btn--inplan { background: var(--cat-mise-en-scene); border-color: var(--cat-mise-en-scene); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}