/* RSVP By - a stationery desk: cream envelope paper, navy fountain-pen ink, an airmail stripe under the header,
 * perforated stamps in six faded postal colours, vermilion postmarks. Verdicts: vermilion (clash), ochre (gaps),
 * pine (ready). */
:root {
  --bg: #f4ecdd; --panel: #fffaf1; --paper: #fbf3e4; --ink: #1d2340; --muted: #585c70; --line: #e2d4b8;
  --navy: #1f3a68; --navy-ink: #ffffff; --red: #b3302a; --red-ink: #ffffff; --ochre: #8a5a00; --pine: #23634a;
  --red-bg: #f9e2dd; --ochre-bg: #f8ecd2; --pine-bg: #dff0e6; --blue-bg: #e4ebf5;
  --st0: #f3d9d4; --st1: #dbe8d6; --st2: #d6e3f0; --st3: #f3e7bf; --st4: #e4dbef; --st5: #f6dcc4;
  --st-ink: #1d2340; --pm: rgba(179, 48, 42, 0.62);
  --shadow: 0 1px 2px rgba(29, 35, 64, 0.08), 0 6px 18px rgba(29, 35, 64, 0.07);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Gill Sans", "Gill Sans MT", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display: "Baskerville", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}
:root[data-theme="dark"] {
  --bg: #12142a; --panel: #1b1e38; --paper: #222645; --ink: #ece6d8; --muted: #a9a9bd; --line: #343a5e;
  --navy: #2b4c85; --navy-ink: #ffffff; --red: #ff8a7a; --red-ink: #2a0d0a; --ochre: #f2c063; --pine: #7fd4a8;
  --red-bg: #3e2024; --ochre-bg: #3a2f17; --pine-bg: #173528; --blue-bg: #22304f;
  --st0: #4a2f35; --st1: #2f4636; --st2: #2c3d57; --st3: #4a4128; --st4: #3d3352; --st5: #4d3829;
  --st-ink: #f3ecdc; --pm: rgba(255, 138, 122, 0.7);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); }
a { color: var(--navy); }
:root[data-theme="dark"] a { color: #9fc0f5; }
.hidden { display: none !important; }
.small { font-size: 0.86rem; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
h1, h2, h3 { font-family: var(--display); line-height: 1.2; overflow-wrap: anywhere; }

/* Header with an airmail stripe */
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--navy); color: var(--navy-ink); flex-wrap: wrap; position: relative; border-bottom: 7px solid transparent; border-image: repeating-linear-gradient(-45deg, #c8372d 0 12px, #fffaf1 12px 20px, #1f3a68 20px 32px, #fffaf1 32px 40px) 7; }
.bar .back { color: var(--navy-ink); text-decoration: none; font-size: 0.9rem; opacity: 0.9; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 1.2rem; }
.logo { width: 30px; height: 30px; }
.lg-env { fill: #fffaf1; }
.lg-flap { fill: none; stroke: #1f3a68; stroke-width: 1.6; stroke-linejoin: round; }
.lg-stamp { fill: #c8372d; }
.session { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 0.88rem; cursor: pointer; text-decoration: none; }
.bar .pill { border-color: rgba(255, 255, 255, 0.45); background: transparent; color: var(--navy-ink); }
.bar .pill.solid { background: #fffaf1; color: #1f3a68; border-color: #fffaf1; }
.pill.solid { background: var(--navy); color: var(--navy-ink); border-color: var(--navy); }
.pill.ghost { cursor: default; }
.pill.tiny { padding: 3px 10px; font-size: 0.8rem; }
.pill:disabled { opacity: 0.5; cursor: not-allowed; }

main { max-width: 1140px; margin: 0 auto; padding: 0 16px 40px; }
.hero { padding: 28px 0 12px; }
.kicker { margin: 0; color: var(--red); font-weight: 700; font-size: 0.84rem; letter-spacing: 0.05em; text-transform: uppercase; }
.hero h1 { font-size: clamp(2.2rem, 7vw, 3.6rem); margin: 4px 0 8px; color: var(--navy); font-style: italic; letter-spacing: -0.01em; }
:root[data-theme="dark"] .hero h1 { color: #c9d8f5; }
.lede { max-width: 740px; margin: 0 0 14px; font-size: 1.05rem; }
.samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 0.88rem; cursor: pointer; box-shadow: 2px 2px 0 var(--line); }
.chip.on { background: var(--navy); color: var(--navy-ink); border-color: var(--navy); box-shadow: 2px 2px 0 var(--red); }

.layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.partybox { grid-column: 1; grid-row: 1; }
.sheetbox { grid-column: 2; grid-row: 1 / span 3; }
.verdictbox { grid-column: 1; grid-row: 2; }
.askbox { grid-column: 1; grid-row: 3; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 16px; box-shadow: var(--shadow); margin-top: 16px; min-width: 0; }
.layout .panel { margin-top: 0; }
.ph { margin: 0 0 10px; font-size: 1.25rem; display: flex; align-items: center; gap: 8px; }
.num-tag { display: inline-grid; place-items: center; width: 26px; height: 30px; background: var(--red); color: var(--red-ink); font: 700 0.9rem var(--sans); flex: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.lbl { display: block; font-weight: 600; font-size: 0.9rem; margin: 10px 0 4px; }
input[type="text"], textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; font: inherit; font-size: 0.95rem; background: var(--paper); color: var(--ink); }
textarea { resize: vertical; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sheet-head .ph { margin-bottom: 4px; }

/* The stamp sheet. A dotted border in the panel colour over the stamp colour reads as perforations. */
.sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px; margin-top: 10px; padding: 10px; background: var(--paper); border: 1px dashed var(--line); }
.stamp { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 128px; padding: 10px 10px 8px; border: 6px dotted var(--paper); background: var(--st0); color: var(--st-ink); box-shadow: inset 0 0 0 2px rgba(29, 35, 64, 0.22); cursor: text; transition: transform 0.15s; }
:root[data-theme="dark"] .stamp { box-shadow: inset 0 0 0 2px rgba(243, 236, 220, 0.2); }
.stamp.s1 { background: var(--st1); } .stamp.s2 { background: var(--st2); } .stamp.s3 { background: var(--st3); } .stamp.s4 { background: var(--st4); } .stamp.s5 { background: var(--st5); }
.stamp.on { transform: rotate(-0.6deg); }
.stamp:nth-child(2n).on { transform: rotate(0.5deg); }
.stamp.blank-ess { filter: saturate(0.35); box-shadow: inset 0 0 0 2px var(--red); }
.stamp.clash { box-shadow: inset 0 0 0 3px var(--red); }
.stamp.clash::after { content: "clash"; position: absolute; left: 6px; bottom: 4px; font: 700 0.66rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; background: var(--red); color: var(--red-ink); padding: 1px 6px; border-radius: 3px; }
.st-top { display: flex; align-items: center; gap: 6px; position: relative; z-index: 2; padding-right: 58px; }
.st-glyph { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 0.78rem var(--display); flex: none; }
.st-l { font: 700 0.9rem var(--display); cursor: pointer; }
.st-star { color: var(--red); font: 700 1rem var(--sans); margin-left: -3px; }
:root[data-theme="dark"] .stamp .st-star { color: #ffb3a8; }
.stamp .st-in { position: relative; z-index: 2; width: 100%; min-width: 0; border: 0; border-bottom: 1.5px solid rgba(29, 35, 64, 0.35); border-radius: 0; background: rgba(255, 255, 255, 0.55); color: #1d2340; padding: 6px 6px; font: inherit; font-size: 0.92rem; }
:root[data-theme="dark"] .stamp .st-in { background: rgba(10, 12, 28, 0.5); color: #f3ecdc; border-bottom-color: rgba(243, 236, 220, 0.4); color-scheme: dark; }
.stamp .st-in:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
:root[data-theme="dark"] .stamp .st-in:focus { outline-color: #9fc0f5; }
.st-said { position: relative; z-index: 2; font-size: 0.78rem; line-height: 1.3; min-height: 1em; }
.st-said.ask { font-style: italic; opacity: 0.85; }
.st-said.ask::before { content: "\201C"; } .st-said.ask::after { content: "\201D"; }
.stamp.clash .st-said { padding-bottom: 16px; }
.pm { position: absolute; top: -8px; right: -34px; width: 100px; height: 50px; transform: rotate(-12deg); opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 1; }
.stamp.on .pm { opacity: 1; }
.pm-ring { fill: none; stroke: var(--pm); stroke-width: 2; }
.pm-ring.thin { stroke-width: 1; }
.pm-t { fill: var(--pm); font: 700 8.5px var(--sans); letter-spacing: 0.04em; }
.pm-wave { fill: none; stroke: var(--pm); stroke-width: 1.6; }

/* The verdict envelope */
.env { display: flex; gap: 12px; padding: 12px; background: var(--paper); border: 6px solid transparent; border-image: repeating-linear-gradient(-45deg, #c8372d 0 10px, transparent 10px 16px, #1f3a68 16px 26px, transparent 26px 32px) 6; flex-wrap: wrap; }
.env-l { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; min-width: 0; }
.env-r { display: grid; grid-template-columns: repeat(3, auto); gap: 10px; align-items: end; }
.env-r div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.env-r b { font: 700 1.5rem var(--display); line-height: 1; }
.env-r span { font-size: 0.72rem; color: var(--muted); max-width: 70px; line-height: 1.2; }
.badge { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 3px; font: 700 0.86rem var(--sans); letter-spacing: 0.03em; text-transform: uppercase; background: var(--blue-bg); color: var(--ink); border: 2px solid currentColor; }
.badge.v-clash { background: var(--red-bg); color: var(--red); }
.badge.v-gaps { background: var(--ochre-bg); color: var(--ochre); }
.badge.v-ready { background: var(--pine-bg); color: var(--pine); }
.clashlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.clashlist li { font-size: 0.9rem; padding: 6px 10px; border-left: 4px solid var(--red); background: var(--red-bg); }
.flags, .recon { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 6px; }
.flags li { font-size: 0.88rem; display: flex; gap: 8px; align-items: baseline; }
.lv { flex: none; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 3px; padding: 1px 6px; background: var(--blue-bg); color: var(--ink); }
.lv-fix .lv { background: var(--red-bg); color: var(--red); }
.lv-warn .lv { background: var(--ochre-bg); color: var(--ochre); }

.go { display: block; width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 4px; background: var(--red); color: var(--red-ink); font: 700 1.05rem var(--sans); letter-spacing: 0.02em; cursor: pointer; box-shadow: 3px 3px 0 var(--navy); }
.go:disabled { opacity: 0.5; cursor: not-allowed; }
.meter { margin: 8px 0 0; }
.note { font-size: 0.88rem; background: var(--blue-bg); border-radius: 4px; padding: 8px 10px; margin: 10px 0 0; }
.note.warn { background: var(--ochre-bg); }
.gate { font-size: 0.88rem; background: var(--ochre-bg); border-radius: 4px; padding: 8px 10px; }
.gate .pill { margin-top: 6px; }

.progress h3 { margin-top: 0; }
.steps { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.step { color: var(--muted); font-size: 0.92rem; }
.step.active { color: var(--ink); font-weight: 600; }
.step.done { color: var(--pine); }
.step-ic { display: inline-block; width: 16px; font-family: var(--mono); }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; font: 0.82rem var(--mono); max-height: 360px; overflow: auto; }

/* The reply */
.res-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.res-head h2 { margin: 0; font-size: 1.5rem; }
.summary { font-size: 1.02rem; }
.result h3 { font-size: 1.1rem; margin: 20px 0 8px; }
.rclash { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rc { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-left: 4px solid var(--red); background: var(--red-bg); }
.rc-fix { font-size: 0.9rem; }
.rgaps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rg { display: flex; gap: 10px; align-items: flex-start; }
.rg-stamp { flex: none; width: 82px; min-height: 64px; display: grid; place-items: center; text-align: center; padding: 4px; border: 4px dotted var(--panel); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--red); font: 700 0.76rem var(--display); color: var(--ink); }
.rg-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rg-q { font-style: italic; }
.rg-fill { font-size: 0.86rem; color: var(--muted); }
.envelope { margin: 22px 0 6px; padding: 26px 18px 18px; background: linear-gradient(160deg, var(--st2), var(--st0)); border-radius: 4px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.envelope::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 22px; background: linear-gradient(to bottom right, transparent 49%, rgba(29, 35, 64, 0.12) 50%, transparent 51%) left / 50% 100% no-repeat, linear-gradient(to bottom left, transparent 49%, rgba(29, 35, 64, 0.12) 50%, transparent 51%) right / 50% 100% no-repeat; }
.inv-card { width: min(560px, 100%); background: var(--panel); color: var(--ink); padding: 22px 22px 18px; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(29, 35, 64, 0.18); text-align: center; }
.inv-kick { margin: 0; font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.result .inv-h { font-size: clamp(1.4rem, 4.5vw, 1.9rem); margin: 6px 0 10px; font-style: italic; color: var(--navy); }
:root[data-theme="dark"] .result .inv-h { color: #c9d8f5; }
.inv-b { margin: 0 0 14px; }
.inv-d { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; text-align: left; margin: 0 auto 12px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.inv-d dt { font: 700 0.78rem var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.inv-d dd { margin: 0; overflow-wrap: anywhere; }
.inv-r { margin: 6px 0 0; font-weight: 700; color: var(--red); }
.bubble-wrap { display: flex; flex-direction: column; align-items: flex-start; }
.bubble { max-width: 520px; margin: 0 0 8px; padding: 10px 14px; border-radius: 18px 18px 18px 4px; background: var(--navy); color: var(--navy-ink); }
.faq { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.fq { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: var(--paper); border-left: 4px solid var(--pine); }
.fq.open { border-left-color: var(--ochre); }
.fq-a { font-size: 0.92rem; }
.recon li { font-size: 0.88rem; padding: 6px 10px; border-radius: 4px; background: var(--blue-bg); }
.recon li.warn { background: var(--ochre-bg); }
.none { color: var(--muted); font-style: italic; list-style: none; }
.cardrow { display: flex; flex-wrap: wrap; gap: 8px; }
.envelope .cardrow { justify-content: center; }
.changed { margin: 14px 0 12px; padding-top: 12px; border-top: 1px dashed var(--line, rgba(29, 35, 64, 0.25)); }
.changed h3 { margin: 0 0 4px; }
.changed .bubble { white-space: pre-line; }
.exports h3, .history h3 { margin-top: 0; }
.hlist { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.hrow { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.hinfo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.hinfo b { overflow-wrap: anywhere; }

.foot { max-width: 1140px; margin: 0 auto; padding: 16px 16px 40px; color: var(--muted); font-size: 0.86rem; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 50; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--panel); padding: 10px 14px; border-radius: 6px; font-size: 0.9rem; box-shadow: var(--shadow); transition: opacity 0.5s; }
.toast.err { background: var(--red); color: var(--red-ink); }
.toast a { color: inherit; font-weight: 700; }
.toast.gone { opacity: 0; }

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .partybox, .sheetbox, .verdictbox, .askbox { grid-column: 1; grid-row: auto; }
}
@media (max-width: 560px) {
  .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px; gap: 4px; }
  .stamp { min-height: 120px; padding: 8px 6px 6px; border-width: 5px; }
  .st-top { padding-right: 40px; }
  .pm { right: -44px; }
  .stamp .st-in { font-size: 0.86rem; padding: 5px 3px; }
  .env-r { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .inv-card { padding: 18px 14px 14px; }
  .inv-d { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .inv-d dd { margin-bottom: 6px; }
  .hrow { flex-wrap: wrap; }
}