/* composer.css — composer, story calendar, composer formatting
   Extracted verbatim from index.html lines 351-563 (the inline <style>).
   Design TOKENS are not here: they live in /assets/shell.css, shared with the
   document pages, exactly as before. */

/* ===================== composer ===================== */
.composer{
  padding:var(--s3) var(--s4) var(--s5);
  background:linear-gradient(to top,var(--bg) 60%,transparent);
  position:sticky;bottom:0;z-index:var(--z-sticky);
}
/* ── Full Story reader ─────────────────────────────────────────────────────────────────────── */
.reader{
  position:fixed;inset:0;z-index:var(--z-toast);background:var(--bg);
  display:flex;flex-direction:column;
}
.reader[hidden]{display:none}
.reader-bar{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);background:var(--bg-1);flex:none;
}
.reader-title{flex:1 1 auto;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reader-pdf{
  padding:8px var(--s4);border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:500;
  border:1px solid var(--line);color:var(--ink);background:var(--bg-2);flex:none;
}
.reader-pdf:hover:not(:disabled){border-color:var(--accent-line)}
.reader-pdf:disabled{opacity:.55;cursor:default}
.reader-body{
  flex:1 1 auto;overflow-y:auto;padding:var(--s6) var(--s4) var(--s7);
}
/* Chapters are prose, so they get the prose face and a reading measure. */
.reader-chapter{max-width:34rem;margin:0 auto}

/* ---- story calendar ----
   Wider measure than the reader: this is a tool with a seven-column table, not prose. */
.cal-wrap{max-width:56rem;margin:0 auto;display:flex;flex-direction:column;gap:var(--s4)}
.cal-card{
  background:var(--bg-1);border:1px solid var(--line-soft);border-radius:var(--r3);
  padding:var(--s4);
}
.cal-card h3{font-size:var(--t-md);font-weight:600;margin:0 0 var(--s3)}
.cal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s3)}
.cal-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.cal-field>span{font-size:var(--t-xs);color:var(--ink-3);letter-spacing:.03em}
.cal-field input,.cal-field select,.cal-table input,.cal-table select{
  width:100%;padding:8px var(--s3);border-radius:var(--r2);
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  font-size:var(--t-sm);font-family:inherit;
}
.cal-field input:focus,.cal-field select:focus{outline:2px solid var(--accent-line);outline-offset:1px}
.cal-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s3)}
.cal-lead{font-size:var(--t-xs);color:var(--ink-3)}
.cal-btn{
  padding:7px var(--s3);border-radius:var(--r-pill);font-size:var(--t-sm);
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  transition:.16s var(--ease);
}
.cal-btn:hover{border-color:var(--accent-line);background:var(--bg-3)}
.cal-go{border-color:var(--accent-line);color:var(--accent-2)}
.cal-note{font-size:var(--t-xs);color:var(--ink-3);line-height:1.6;margin:var(--s3) 0 0}
.cal-card .cal-note:first-of-type{margin-top:0}

/* The one thing the whole tool is for: what happens next. */
.cal-spot{
  background:linear-gradient(135deg,var(--accent-wash),var(--bg-1));
  border-color:var(--accent-line);font-size:var(--t-md);
}
.cal-spot .cal-spot-sub{display:block;margin-top:4px;color:var(--ink-2);font-size:var(--t-sm)}

/* ⚠ Shown only to someone who has an old device-local calendar (see calLegacyNotice()). It is an
   EXPLANATION, not a warning — nothing is wrong and nothing was lost, so it takes the muted ink
   rather than the alert colour, which would make a non-event look like a failure. */
.cal-legacy-note{margin:var(--s2) auto 0;max-width:44ch;color:var(--ink-2);font-size:var(--t-sm);line-height:1.5;text-wrap:pretty}

/* ⚠ The table scrolls in its OWN container. Seven columns do not fit a phone, and the page body
   must never scroll sideways. */
.cal-tablewrap{overflow-x:auto;margin:0 calc(-1 * var(--s2))}
.cal-table{border-collapse:collapse;width:100%;min-width:44rem;font-size:var(--t-sm)}
.cal-table th{
  text-align:left;font-weight:500;font-size:var(--t-xs);color:var(--ink-3);
  padding:var(--s2);border-bottom:1px solid var(--line);white-space:nowrap;
}
.cal-table td{padding:var(--s2);border-bottom:1px solid var(--line-soft);vertical-align:middle}
.cal-table tr:last-child td{border-bottom:0}
/* Ages line up in columns, so the digits must too. */
.cal-age{font-variant-numeric:tabular-nums;white-space:nowrap}
.cal-est{
  font-size:var(--t-xs);color:var(--warn);border:1px solid currentColor;
  border-radius:var(--r-pill);padding:0 6px;margin-left:6px;
}
.cal-del{color:var(--bad);padding:4px 8px;border-radius:var(--r2);font-size:var(--t-xs)}
.cal-del:hover{background:color-mix(in srgb, var(--bad) 12%, transparent)}
.cal-parents{color:var(--ink-3);font-size:var(--t-xs)}
.cal-empty{padding:var(--s4);color:var(--ink-3);font-size:var(--t-sm)}
.cal-due{
  margin-top:var(--s3);padding:var(--s3);border-radius:var(--r2);
  background:var(--bg-2);border:1px solid var(--line-soft);font-size:var(--t-sm);
}
.cal-due.warn{border-color:var(--warn);color:var(--warn)}
.reader-chapter h2{
  font-family:var(--font-ui);font-size:var(--t-sm);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s5);
}
.reader-chapter p{
  font-family:var(--font-msg);font-size:var(--t-lg);line-height:1.72;
  margin:0 0 var(--s4);
}
.reader-chapter img{width:100%;border-radius:var(--r2);margin:0 0 var(--s5)}
.reader-gen{
  display:block;margin:0 0 var(--s5);padding:8px var(--s4);border-radius:var(--r-pill);
  font-size:var(--t-sm);border:1px dashed var(--line-2);color:var(--ink-2);background:none;
}
.reader-gen:hover:not(:disabled){border-color:var(--accent-line);color:var(--ink)}
.reader-gen:disabled{opacity:.7;cursor:default;border-style:solid}
.reader-empty{max-width:34rem;margin:0 auto;color:var(--ink-2);text-align:center}
.reader-foot{
  display:flex;align-items:center;justify-content:center;gap:var(--s4);
  padding:var(--s3) var(--s4);border-top:1px solid var(--line);background:var(--bg-1);flex:none;
}
.reader-foot[hidden]{display:none}
.reader-nav{
  padding:7px var(--s4);border-radius:var(--r-pill);font-size:var(--t-sm);
  border:1px solid var(--line);color:var(--ink-2);background:var(--bg-2);
}
.reader-nav:disabled{opacity:.4;cursor:default}
.reader-page{font-size:var(--t-sm);color:var(--ink-3);font-variant-numeric:tabular-nums}

/* The gallery strip, shown at the end of the story rather than as a separate screen. */
.gallery{max-width:34rem;margin:var(--s7) auto 0;border-top:1px solid var(--line);padding-top:var(--s5)}
.gallery h3{font-size:var(--t-sm);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
            color:var(--ink-3);margin:0 0 var(--s4)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s3)}
.gallery-thumb{padding:0;border:0;background:none;cursor:zoom-in;text-align:left}
.gallery-thumb img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r1);display:block}
.gallery-thumb span{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s1)}

.lightbox{
  position:fixed;inset:0;z-index:calc(var(--z-toast) + 1);background:rgba(0,0,0,.9);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--s4);
  padding:var(--s5);
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(92vw,700px);max-height:78vh;border-radius:var(--r2)}
.lb-close{position:absolute;top:var(--s4);right:var(--s4)}
.lb-caption{color:var(--ink-2);font-size:var(--t-sm)}

/* Chapter actions. Sits under the box because the box is still used — Revision and Continue
   read whatever was typed, so hiding the composer (as v1 does) takes away the thing they act on. */
.cw-actions{
  max-width:720px;margin:var(--s2) auto 0;
  display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end;
}
.cw-actions[hidden]{display:none}   /* flex beats the UA [hidden] rule without this */
.cw-act{
  padding:7px var(--s4);border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:500;
  border:1px solid var(--line);color:var(--ink-2);background:var(--bg-2);
  transition:.18s var(--ease);
}
.cw-act:hover:not(:disabled){border-color:var(--accent-line);color:var(--ink)}
.cw-act:disabled{opacity:.5;cursor:default}
/* Accept is the one that commits a chapter, so it is the only one that looks like a commitment. */
.cw-accept{background:var(--accent-solid);border-color:var(--accent-solid);color:var(--accent-ink)}
.cw-accept:hover:not(:disabled){background:var(--accent);color:var(--accent-ink)}

.composer-inner{
  max-width:720px;margin:0 auto;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r4);
  padding:var(--s2) var(--s2) var(--s2) var(--s4);
  display:flex;align-items:flex-end;gap:var(--s2);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.composer-inner:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-wash)}

/* ---- composer formatting ----
   Desktop: inline, immediately left of the textarea. Mobile: its own line above it (see the
   860px rule). Same markup, reordered — not two copies. */
/* ⚠ THE 11px IS DERIVED, NOT EYEBALLED. Measured 2026-08-17: the buttons sat 9px low.
   Both the bar and the textarea are bottom-aligned in .composer-inner, but the textarea carries
   12px of its own bottom padding, so its last LINE of text floats 12px above the shared bottom
   edge while the buttons sat flush against it.
       textarea line-height 24px, button 26px  ->  the button overhangs the line by 1px a side
       so the offset that centres it on that line is 12 - 1 = 11px
   ⭐ Expressed against the LAST line on purpose: it stays correct when the composer grows to
   several lines, because the last line is always 12px off the bottom. */
.fmt-bar{display:flex;gap:2px;flex:none;align-self:flex-end;padding-bottom:11px}
.fmt-btn{
  width:26px;height:26px;border-radius:var(--r2);color:var(--ink-3);
  font-size:var(--t-sm);line-height:1;transition:.16s var(--ease);
}
.fmt-btn:hover{background:var(--bg-3);color:var(--ink)}
.fmt-btn b,.fmt-btn i,.fmt-btn u{font-size:13px}
/* ⚠ Hidden while the composer is disabled (roleplay setup, memorial intake) — formatting controls
   above a box you cannot type in are three buttons that do nothing. */
.composer.is-locked .fmt-bar{display:none}
.composer textarea{
  flex:1;background:none;border:0;color:var(--ink);resize:none;
  /* 🔴 16px IS NOT A STYLE CHOICE. iOS Safari auto-zooms the page whenever a focused text field
     is under 16px, and it does not zoom back out — you end up typing into a chat that has
     silently scaled itself. v1 hit this and fixed it the same way (style.css:131), with the body
     still at 15px.
     ⛔ Do NOT "fix" it with user-scalable=no / maximum-scale=1 on the viewport. That also works,
     by taking pinch-zoom away from everyone who needs it. v1 has neither, deliberately. */
  font:400 16px/1.5 var(--font-ui);padding:var(--s3) 0;max-height:160px;
}
.composer textarea:focus{outline:none}
.composer textarea::placeholder{color:var(--ink-4)}
.send{
  width:38px;height:38px;border-radius:var(--r-pill);flex:none;
  background:var(--accent-solid);color:#fff;display:grid;place-items:center;
  transition:transform .14s var(--ease),background .16s var(--ease);
  /* ⚠ SAME DERIVATION AS .fmt-bar, different number because the button is a different size.
     Bottom-aligned in .composer-inner, but the textarea's last line floats 12px above that shared
     edge, so a flush button sits low — measured at 5px.
         textarea line-height 24px, button 38px  ->  overhangs the line by (38-24)/2 = 7px a side
         so the offset that centres it on that line is 12 - 7 = 5px
     ⭐ Anchored to the LAST line, so it stays centred as the composer grows. */
  margin-bottom:5px;
}
.send:hover{background:var(--accent);transform:scale(1.05)}
.send:active{transform:scale(.96)}
.send svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* The appearance field on a calendar row — the manual looks editor (2026-08-28).
   ⚠ Sits UNDER the name inside the same cell rather than in its own column: the table is already
   seven columns wide, and this work exists because people wanted the calendar on a phone. */
.cal-look {
  display: block;
  width: 100%;
  margin-top: 4px;
  font: inherit;
  font-size: .82rem;
  padding: 3px 6px;
  border: 1px solid var(--line, #2b303a);
  border-radius: 6px;
  background: var(--raised, #22223b);
  color: inherit;
}
.cal-look::placeholder { opacity: .55; }
.cal-look:focus-visible { outline: 2px solid var(--accent, #22C55E); outline-offset: 1px; }

/* The one-off notice that calendars moved server-side. ⚠ Remove once the release has aged out. */
.cal-note--sync { opacity: .8; margin: 0 0 8px; }