:root {
  --paper: #f4efe3;
  --paper-2: #ece3d0;
  --ink: #241d17;
  --ink-soft: #5b4f42;
  --rule: #d8ccb4;
  --accent: #7c2d2d; /* oxblood */
  --accent-soft: #9a4a3f;
  --gold: #9c7a3c;
  --shadow: rgba(40, 29, 20, 0.14);
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background-color: var(--paper);
  /* Seamless procedural parchment: an inline SVG feTurbulence grain (top layer,
     semi-transparent) over a two-tone cream vignette. The grain uses
     stitchTiles="stitch" so it tiles perfectly by construction; the vignette
     fades between two opaque creams (never the transparent-black keyword) so it
     shows real depth with no muddy grey edge. No photo, no watermark, no seams. */
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23n%29%22%20opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(125% 100% at 50% 22%, #fffdf3 0%, #b08a44 100%);
  background-repeat: repeat, no-repeat;
  background-size: 220px 220px, auto;
  background-attachment: fixed, fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 40px;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------- masthead ---------- */
.masthead {
  border-bottom: 2px solid var(--ink);
  margin-bottom: 22px;
  padding: 30px 0 18px;
}
.masthead-inner { text-align: center; }
.masthead h1 {
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: 0.06em;
  font-weight: 700;
  font-variant: small-caps;
}
.masthead .sub {
  margin: 8px auto 0;
  max-width: 640px;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 15.5px;
}

/* ---------- layout ---------- */
.stage {
  display: flex;
  justify-content: center;
  flex: 1;
  min-height: 0;
}

/* ---------- chat ---------- */
.chat {
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  width: 100%;
  max-width: 760px; /* comfortable single-column reading measure */
}
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px 10px;
}
.msg { margin: 0 0 22px; }
.msg .who {
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.msg.user .who { color: var(--accent); }
.bubble {
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 13px 16px;
  background: #fbf8f0;
  box-shadow: 0 1px 0 var(--shadow);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.msg.user .bubble {
  background: var(--paper-2);
  border-color: #cbbb9c;
}
.msg.assistant .bubble { border-left: 3px solid var(--gold); }
.bubble .cite {
  color: var(--accent);
  font-style: italic;
  font-size: 0.94em;
}
.bubble.thinking { color: var(--ink-soft); font-style: italic; }
.cursor {
  display: inline-block;
  width: 8px;
  margin-left: 1px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { opacity: 0; } }

/* ---------- reference list (appended under an answer) ---------- */
.references {
  margin: 9px 2px 0;
  padding-top: 8px;
  border-top: 1px dotted var(--rule);
  font-size: 13px;
  color: var(--ink-soft);
}
.references-label {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 11.5px;
  margin-bottom: 4px;
}
.references ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.references li {
  margin: 2px 0;
  line-height: 1.35;
}
.references .ref {
  color: var(--accent);
  font-style: italic;
}
.references .title {
  color: var(--ink-soft);
}

/* ---------- composer ---------- */
.composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.composer textarea {
  flex: 1;
  resize: none;
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink);
  background: #fbf8f0;
  border: 1px solid #cbbb9c;
  border-radius: 3px;
  padding: 11px 13px;
  max-height: 180px;
}
.composer textarea:focus {
  outline: none;
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 2px rgba(124, 45, 45, 0.12);
}
.composer button {
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 16px;
  color: #f6efe0;
  background: var(--accent);
  border: 1px solid #611f1f;
  border-radius: 3px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.15s;
}
.composer button:hover { background: var(--accent-soft); }
.composer button:disabled { opacity: 0.5; cursor: default; }

/* ---------- grounding sidebar ---------- */
.grounding {
  border-left: 1px solid var(--rule);
  padding-left: 22px;
}
@media (max-width: 820px) {
  .grounding { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
}
.grounding h2 {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 17px;
  margin: 2px 0 10px;
}
.grounding-note {
  color: var(--ink-soft);
  font-size: 13.5px;
  font-style: italic;
  margin: 0 0 14px;
}
.method-tag {
  display: inline-block;
  font-size: 11px;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px 7px;
  margin-bottom: 12px;
}
.sources { list-style: none; margin: 0; padding: 0; }
.sources li {
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fbf8f0;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.sources li.kind-digression { border-left: 3px solid var(--gold); }
.sources .kind-label {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.sources li.kind-digression .kind-label { color: var(--gold); }
.sources .ref {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.sources .title {
  color: var(--ink-soft);
  font-style: italic;
  font-size: 12.5px;
}
.sources .snippet {
  color: var(--ink);
  font-size: 13.5px;
  margin-top: 5px;
  line-height: 1.4;
}

/* ---------- feedback footer ---------- */
.app-footer {
  text-align: center;
  padding: 22px 0 4px;
  margin-top: 8px;
  border-top: 1px solid var(--rule);
}
.feedback-btn {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 3px;
}
.feedback-btn:hover { color: var(--accent); text-decoration: underline; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--ink);
  color: #f6efe0;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  z-index: 60;
  max-width: 90vw;
  text-align: center;
}

/* ---------- password gate ---------- */
.gate {
  position: fixed;
  inset: 0;
  background: rgba(30, 22, 15, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
/* The `hidden` attribute must beat `.gate { display: flex }`, or setting
   gate.hidden = true won't actually hide the overlay. */
.gate[hidden] {
  display: none;
}
.gate-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 28px 26px;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  text-align: center;
}
.gate-card h2 { margin: 0 0 8px; font-variant: small-caps; letter-spacing: 0.05em; }
.gate-card p { color: var(--ink-soft); font-style: italic; margin: 0 0 16px; }
.gate-card input {
  width: 100%;
  font-family: var(--serif);
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid #cbbb9c;
  border-radius: 3px;
  background: #fbf8f0;
  margin-bottom: 12px;
}
.gate-card input:focus { outline: none; border-color: var(--accent-soft); }
.gate-card button {
  font-family: var(--serif);
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 16px;
  color: #f6efe0;
  background: var(--accent);
  border: none;
  border-radius: 3px;
  padding: 10px 26px;
  cursor: pointer;
}
.gate-error { color: var(--accent) !important; font-style: normal !important; margin-top: -6px !important; }

/* ---------- reference links (into the reading page) ---------- */
.references a.ref { text-decoration: none; }
.references a.ref:hover { text-decoration: underline; }

/* ---------- masthead link + verse answers ---------- */
.masthead .sub a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.masthead .sub a:hover { text-decoration: underline; }
.bubble.verse {
  font-style: normal;
  white-space: pre-wrap;
  line-height: 1.4;
}

/* ---------- reading page (read.html): full text of plays + sonnets ---------- */
/* The global reset sets body { height: 100% } for the chat layout; let the
   reading page grow to its full content height instead. */
body.reading { height: auto; min-height: 100%; }

.rd-masthead {
  border-bottom: 2px solid var(--ink);
  padding: 34px 20px 20px;
  text-align: center;
}
.rd-mast-inner { max-width: 760px; margin: 0 auto; }
.rd-eyebrow { margin: 0 0 6px; font-variant: small-caps; letter-spacing: 0.05em; font-size: 14px; }
.rd-eyebrow a { color: var(--accent); text-decoration: none; }
.rd-eyebrow a:hover { text-decoration: underline; }
.rd-masthead h1 {
  margin: 0;
  font-size: clamp(28px, 5vw, 44px);
  font-variant: small-caps;
  letter-spacing: 0.05em;
}
.rd-sub { margin: 8px 0 0; color: var(--ink-soft); font-style: italic; font-size: 15px; }

.rd-contents {
  max-width: 760px;
  margin: 30px auto;
  padding: 0 20px;
}
.rd-contents h2 {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
}
.rd-toc {
  columns: 2;
  column-gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 620px) { .rd-toc { columns: 1; } }
.rd-toc li { margin: 3px 0; break-inside: avoid; }
.rd-toc a { color: var(--accent); text-decoration: none; }
.rd-toc a:hover { text-decoration: underline; }

.rd-play {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 20px 10px;
}
.rd-play-title {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: clamp(24px, 4vw, 34px);
  margin: 40px 0 18px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 10px;
  scroll-margin-top: 20px;
}
.rd-act {
  text-align: center;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin: 36px 0 4px;
}
.rd-scene {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin: 22px 0 12px;
  scroll-margin-top: 24px; /* clear of nothing sticky here, but keeps targets tidy */
}
.rd-scene:target { background: rgba(214, 178, 92, 0.28); border-radius: 2px; }
.rd-stage {
  font-style: italic;
  color: var(--ink-soft);
  margin: 10px 0;
  padding-left: 1.4em;
}
.rd-speech {
  margin: 0 0 12px;
}
.rd-speaker {
  display: block;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 13px;
  color: var(--ink-soft);
}
.rd-line { display: block; }
.rd-verse {
  margin: 0;
  line-height: 1.5;
}
.rd-sonnet { max-width: 520px; margin: 26px auto; }
.rd-sonnet .rd-scene { text-align: center; }
.rd-sonnet:target .rd-scene { background: rgba(214, 178, 92, 0.28); border-radius: 2px; }
.rd-top { text-align: center; margin: 30px 0 10px; }
.rd-top a { color: var(--ink-soft); text-decoration: none; font-variant: small-caps; font-size: 13px; }
.rd-top a:hover { color: var(--accent); }

/* ---------- "Enter …" button (secondary, beside Ask) + picker ---------- */
/* The button sits inside .composer, so it inherits the Ask button's size for a
   matching height; these overrides give it a secondary (outline) look so Ask
   stays the primary action. */
.composer .enter-btn {
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  transition: background 0.15s;
}
.composer .enter-btn:hover { background: rgba(124, 45, 45, 0.08); }
.entering {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px 10px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-soft);
  background: var(--paper-2);
  border: 1px solid #cbbb9c;
  border-radius: 3px;
  padding: 4px 6px 4px 10px;
}
.entering-clear {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 2px;
}
.entering-clear:hover { background: rgba(124, 45, 45, 0.1); }

.picker {
  position: fixed;
  inset: 0;
  background: rgba(30, 22, 15, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 55;
}
.picker[hidden] { display: none; }
.picker-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  width: 100%;
  max-width: 460px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  padding: 20px 20px 12px;
}
.picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.picker-head h2 {
  margin: 0;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 20px;
}
.picker-close {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 3px;
}
.picker-close:hover { color: var(--accent); }
.picker-search {
  font-family: var(--serif);
  font-size: 15.5px;
  padding: 9px 12px;
  margin: 12px 0 10px;
  border: 1px solid #cbbb9c;
  border-radius: 3px;
  background: #fbf8f0;
}
.picker-search:focus { outline: none; border-color: var(--accent-soft); }
.picker-list {
  overflow-y: auto;
  padding-right: 4px;
}
.picker-group { margin-bottom: 12px; }
.picker-play {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-size: 12.5px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  margin-bottom: 4px;
}
.picker-item {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  background: none;
  border: none;
  border-radius: 3px;
  padding: 6px 10px;
  cursor: pointer;
}
.picker-item:hover { background: var(--paper-2); color: var(--accent); }
.picker-empty {
  color: var(--ink-soft);
  font-style: italic;
  padding: 12px 4px;
}

/* ---------- "Enter …" waiting indicator ---------- */
.bubble.thinking .enter-name {
  font-variant: small-caps;
  letter-spacing: 0.05em;
  font-style: normal;
  color: var(--accent);
}