/* ============================================================
   THE LIMINAL LABYRINTH -- civic document
   ------------------------------------------------------------
   The piece interrogates authority, so it borrows the look of
   authority: a numbered paper on security-tinted stock, ruled,
   filed and referenced. Every reference code on screen is the
   author's own from the source vault, not decoration.
   ============================================================ */

:root {
  /* Security-tinted document stock -- the faint green cast that
     official paper carries so it cannot be cleanly photocopied. */
  --stock:      #F2F4EF;
  --stock-2:    #E8EBE3;
  --ink:        #16181A;
  --ink-2:      #454A44;
  --ink-3:      #6E7369;
  --rule:       #C7CCC0;
  --rule-soft:  #DDE1D8;
  --stamp:      #8C2F26;
  --stamp-soft: #F0E2DF;
  --recorded:   #2F5E52;

  --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --sheet: 660px;
}

/* Carbon copy: the same document, duplicated onto dark stock.
   The paper is the default; a reader whose system asks for dark gets the
   carbon unless they have said otherwise, and an explicit choice always wins. */
@media (prefers-color-scheme: dark) {
  body:not(.paper) {
    --stock:      #14161A;
    --stock-2:    #1B1E23;
    --ink:        #E7E9E3;
    --ink-2:      #B3B8AF;
    --ink-3:      #7E857A;
    --rule:       #333941;
    --rule-soft:  #262B31;
    --stamp:      #D2695C;
    --stamp-soft: #2A1A18;
    --recorded:   #7FB3A1;
  }
}

body.carbon {
  --stock:      #14161A;
  --stock-2:    #1B1E23;
  --ink:        #E7E9E3;
  --ink-2:      #B3B8AF;
  --ink-3:      #7E857A;
  --rule:       #333941;
  --rule-soft:  #262B31;
  --stamp:      #D2695C;
  --stamp-soft: #2A1A18;
  --recorded:   #7FB3A1;
}

* { box-sizing: border-box; }

/* The base size lives on the root, because everything below is sized in rem.
   Setting it on body instead leaves rem resolving against html's 16px, so the
   reading size silently becomes whatever the browser default was. */
html { font-size: 19px; }

body {
  margin: 0;
  padding: 0 20px 90px;
  background: var(--stock);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#content { max-width: var(--sheet); margin: 0 auto; }

/* ---------- the docket: what this screen is, and where it is filed ---------- */
.docket {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 28px 0 10px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.docket .ref { color: var(--stamp); white-space: nowrap; }

/* ---------- the question ---------- */
.question {
  font-size: 1.34rem;
  line-height: 1.58;
  color: var(--ink);
  margin: 42px 0 40px;
  max-width: 34em;
  text-wrap: pretty;
  white-space: normal;
}
.question strong { font-weight: 600; }

/* ---------- the answers: a ballot ---------- */
.choices { display: flex; flex-direction: column; border-top: 1px solid var(--rule-soft); }

.choices button {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 18px;
  align-items: start;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 18px 6px 18px 4px;
  font-family: var(--serif);
  font-size: 1.06rem;
  line-height: 1.45;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
/* the tick box */
.choices button::before {
  content: "";
  width: 20px; height: 20px;
  margin-top: .18em;
  border: 1.5px solid var(--rule);
  background: var(--stock-2);
  transition: border-color .14s ease;
}
.choices button:hover { background: var(--stock-2); color: var(--ink); }
.choices button:hover::before { border-color: var(--stamp); }
.choices button:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }
.choices button:active::before {
  border-color: var(--stamp);
  box-shadow: inset 0 0 0 3px var(--stamp);
}

/* ---------- footer: filing, not chrome ---------- */
.back-link { margin-top: 26px; }
.back-link button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.back-link button:hover { color: var(--stamp); border-color: var(--stamp); }

/* ---------- title page ---------- */
.cover { padding: 9vh 0 0; }
.cover h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.7rem, 8vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0 0 20px;
  text-wrap: balance;
}

/* Fig. 1 -- a document has figures, and this one is the graph itself. */
.figure { margin: 46px 0 52px; }
.figure-plate { display: block; width: 100%; }
.figure-caption {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

/* What the reader is actually left with -- the cover said nothing about
   this, which is a strange omission on a page asking for two hours. */
.payoff { margin: 0 0 50px; }
.payoff h2 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
  margin: 0 0 22px; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.payoff-grid { display: grid; gap: 30px; }
.payoff-grid h3 {
  font-family: var(--serif); font-weight: 600; font-size: 1.06rem;
  margin: 0 0 7px; line-height: 1.35;
}
.payoff-grid p { margin: 0; color: var(--ink-2); font-size: 1rem; max-width: 36em; }

/* Credit belongs at the foot of a document, not above its title. */
.colophon {
  margin-top: 52px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); line-height: 2;
}
.cover .standfirst {
  font-size: 1.18rem; color: var(--ink-2); max-width: 33em; margin: 0 0 40px;
}
.cover .spec {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0 0 40px;
}
.cover .spec div {
  display: grid; grid-template-columns: 12em 1fr; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: .98rem; color: var(--ink-2);
}
.cover .spec div:last-child { border-bottom: 0; }
.cover .spec dt {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}
.cover .spec dd { margin: 0; }
.cover .notice {
  font-size: .96rem; color: var(--ink-2);
  border-left: 2px solid var(--stamp); padding: 2px 0 2px 18px; margin: 0 0 42px;
  max-width: 34em;
}
.cover .routes { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); }
.enter-button {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline;
  width: 100%; text-align: left; background: transparent;
  border: 0; border-bottom: 1px solid var(--rule);
  padding: 22px 4px; cursor: pointer;
  font-family: var(--serif); font-size: 1.16rem; color: var(--ink);
  transition: background .14s ease, padding-left .14s ease;
}
.enter-button span {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.enter-button:hover { background: var(--stock-2); padding-left: 14px; }
.enter-button:hover span { color: var(--stamp); }
.enter-button:focus-visible { outline: 2px solid var(--stamp); outline-offset: -2px; }

/* ---------- progress: a count, not a bar ---------- */
.progress-bar { display: none !important; }
.filing {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--stock);
  border-top: 1px solid var(--rule);
  padding: 9px 20px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; justify-content: space-between; gap: 16px;
  max-width: 100%;
}
.filing .inner {
  max-width: var(--sheet); margin: 0 auto; width: 100%;
  display: flex; justify-content: space-between; gap: 16px;
}
.filing b { color: var(--ink-2); font-weight: 500; }

/* ---------- the stamp: applied once, at the end ---------- */
.stamp {
  display: inline-block;
  margin: 40px 0 0;
  padding: 12px 20px;
  border: 2px solid var(--stamp);
  color: var(--stamp);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase;
  transform: rotate(-2.5deg);
  opacity: .9;
}

/* ---------- utility ---------- */
.copyright {
  max-width: var(--sheet); margin: 60px auto 0; padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.copyright a { color: var(--ink-3); }
.copyright a:hover { color: var(--stamp); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media (max-width: 560px) {
  html { font-size: 18px; }
  body { padding: 0 16px 76px; }
  .question { font-size: 1.24rem; margin: 32px 0 30px; }
  .cover .spec div { grid-template-columns: 1fr; gap: 4px; }
  .figure { margin: 34px 0 40px; }
  .payoff-grid { gap: 26px; }
  .docket { flex-direction: column; gap: 4px; }
}

/* ---------- contents overlay ---------- */
.info-modal {
  position: fixed; inset: 0; z-index: 50;
  background: var(--stock);
  overflow-y: auto;
  padding: 0 20px 80px;
}
.info-modal-content { max-width: var(--sheet); margin: 0 auto; padding-top: 26px; position: relative; }
.info-modal-content h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.3rem;
  margin: 34px 0 8px; letter-spacing: -.01em;
}
.info-modal-content p { color: var(--ink-2); margin: 0; max-width: 34em; font-size: 1.02rem; }
.info-modal-content .enter-button { margin-top: 44px; border-top: 1px solid var(--rule); }
.close-info {
  position: absolute; top: 22px; right: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 1.3rem; color: var(--ink-3); line-height: 1;
}
.close-info:hover { color: var(--stamp); }

/* ---------- filed controls ---------- */
.controls {
  max-width: var(--sheet); margin: 44px auto 0; padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  display: flex; gap: 26px; flex-wrap: wrap;
}
.controls button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.controls button:hover { color: var(--stamp); border-color: var(--stamp); }

/* ---------- resume dialogue ---------- */
.load-modal { display: none; position: fixed; inset: 0; z-index: 60; background: var(--stock); overflow-y: auto; }
.load-modal.show { display: block; }
.load-modal-content { max-width: var(--sheet); margin: 0 auto; padding: 26px 20px 60px; }
.load-modal-header { display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.load-modal-header h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin: 0; }
.close-modal { background: none; border: 0; cursor: pointer; font-family: var(--mono);
  font-size: 1.1rem; color: var(--ink-3); }
.close-modal:hover { color: var(--stamp); }
.load-modal-body p { color: var(--ink-2); margin: 22px 0 14px; }
#load-code-input {
  width: 100%; min-height: 130px; padding: 14px;
  background: var(--stock-2); border: 1px solid var(--rule); border-radius: 0;
  font-family: var(--mono); font-size: .78rem; line-height: 1.6; color: var(--ink);
  resize: vertical;
}
#load-code-input:focus { outline: 2px solid var(--stamp); outline-offset: -1px; }
.load-buttons { display: flex; gap: 22px; margin-top: 18px; }
.load-btn, .cancel-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; border-bottom: 1px solid var(--rule);
}
.load-btn { color: var(--stamp); border-color: var(--stamp); }
.cancel-btn { color: var(--ink-3); }
.load-error { margin-top: 14px; color: var(--stamp); font-size: .92rem; }

/* ---------- save block on each screen ---------- */
.save-options, .enhanced-save {
  margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rule-soft);
  display: flex; gap: 24px; flex-wrap: wrap; align-items: center;
}
.quick-save-btn, .share-btn, .save-code button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule);
}
.quick-save-btn:hover, .share-btn:hover { color: var(--stamp); border-color: var(--stamp); }
.save-hint { font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }
.save-notification {
  position: fixed; bottom: 46px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--stock);
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 10px 18px; z-index: 70;
}

/* ---------- while the text is being fetched ---------- */
.loading-screen {
  position: fixed; inset: 0; background: var(--stock); z-index: 90;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s ease;
}
.loading-screen.fade-out { opacity: 0; }
.loader-content { max-width: var(--sheet); width: 100%; padding: 0 20px; }
.loader-content h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 0 0 8px;
}
.loader-spinner { display: none; }
.loader-status, .loader-percent, .loader-size {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px;
}
.loader-progress { height: 1px; background: var(--rule); margin: 16px 0; }
.loader-progress-bar { height: 100%; background: var(--stamp); width: 0; transition: width .3s ease; }
.error-message { color: var(--stamp); margin: 14px 0; }
.retry-btn, .fallback-btn {
  background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 0;
  margin-right: 22px; cursor: pointer;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.error-suggestions { color: var(--ink-3); font-size: .92rem; }


@media (min-width: 720px) {
  .payoff-grid { grid-template-columns: 1fr 1fr; gap: 34px 40px; }
  .payoff-grid div:first-child { grid-column: 1 / -1; }
}

/* ---------- record of examination ---------- */
.record {
  margin-top: 46px; padding-top: 20px; border-top: 1px solid var(--rule);
}
.record h3 {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin: 0 0 8px;
}
.record p { margin: 0 0 18px; color: var(--ink-2); font-size: 1rem; }
.record-plate {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule); background: var(--stock-2);
}
.record-save {
  display: inline-block; margin-top: 18px;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stamp); text-decoration: none;
  border-bottom: 1px solid var(--stamp); padding-bottom: 2px;
}
.record-save:hover { color: var(--ink); border-color: var(--ink); }
.record-save:focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; }