/* html by me — the site's only stylesheet.
   ────────────────────────────────────────────────────────────────────
   The visual language is lifted from the Hi Ted, Meet Lisa site
   (site/index.html and site/html.html on that repo's origin/main): the
   same tokens, the same blurred atmosphere and film grain, the same
   white frame device, the same topnav, mono uppercase kickers, hairline
   grids, pill buttons and footer. The two sites are siblings on purpose;
   nothing here is a new look.

   One structural difference: over there each page carries its own copy
   of the token sheet because every page is standalone. Here six pages
   share one origin and one cache, so they share one stylesheet — and no
   page carries an inline <style> or an inline style attribute, because
   the service host sends `script-src 'self'` and we keep the style side
   just as strict (`style-src 'self' https://fonts.googleapis.com`).
   Anything that would have been a dynamic style is a class instead. */

/* ── tokens ─────────────────────────────────────────────────────── */
:root {
  --bg: #15160f;            /* near-black olive */
  --bg-lift: #1c1d15;
  --sage: #7a7f6c;
  --sage-deep: #4c5142;
  --cream: #ece9dd;
  --cream-dim: color-mix(in srgb, var(--cream) 62%, transparent);
  --cream-faint: color-mix(in srgb, var(--cream) 34%, transparent);
  --rust: #b0492e;
  --terracotta: #d29873;
  --frame: #ffffff;
  --hair: color-mix(in srgb, var(--cream) 16%, transparent);
  --hair-strong: color-mix(in srgb, var(--cream) 30%, transparent);
  --font-display: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --measure: 62ch;
  --pad: clamp(18px, 5vw, 64px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* The page's states are all switched with the `hidden` attribute, and
   several of the elements being switched carry a `display` of their own
   (`.idlepanel` is flex, `.working` is block). A class beats the UA sheet's
   `[hidden] { display: none }`, so this has to win outright. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Short pages — /publish in its waiting state, 404 — would otherwise
     leave the footer floating halfway up a tall window with the
     atmosphere alone underneath. The fixed-position atmosphere and
     grain are out of flow, so they are not flex items here. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1 0 auto; }
::selection { background: var(--terracotta); color: var(--bg); }

/* Visible focus everywhere, on the same terracotta ring the Lisa site
   uses for its path chooser. `:focus-visible` only, so a mouse click
   does not light the ring up. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── atmosphere: blurred blooms + film grain ────────────────────── */
.atmosphere {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(52vw 44vw at 78% 30%, color-mix(in srgb, var(--rust) 34%, transparent), transparent 62%),
    radial-gradient(40vw 36vw at 66% 60%, color-mix(in srgb, var(--terracotta) 16%, transparent), transparent 60%),
    radial-gradient(70vw 55vw at 18% 82%, color-mix(in srgb, var(--sage-deep) 52%, transparent), transparent 68%),
    radial-gradient(46vw 40vw at 8% 12%, color-mix(in srgb, var(--sage) 20%, transparent), transparent 60%),
    var(--bg);
  filter: saturate(0.92);
}
.grain {
  position: fixed; inset: -50%; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.055;
  animation: grain 9s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-2%,3%); }
  40% { transform: translate(3%,-2%); } 60% { transform: translate(-3%,-3%); }
  80% { transform: translate(2%,2%); }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ── type ───────────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.08; }
.kicker {
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream-dim);
}
.rule { width: 88px; height: 1px; background: var(--cream); opacity: 0.85; border: 0; }
a { color: inherit; }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The wordmark. html by me has no cast and no photograph — its identity
   is the three words set in the display face, the second two dropped to
   a lighter weight and the sage so "html" leads. */
.hbm { font-weight: 800; letter-spacing: -0.03em; }
.hbm .b { font-weight: 300; color: var(--terracotta); }

/* ── topbar ─────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px var(--pad);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.wordmark { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wordmark a { text-decoration: none; display: flex; align-items: center; }
/* The MonoMind mark, painted as a CSS mask so its colour comes from the
   surrounding text — which is the point of the `currentColor` fill an
   <img> could not resolve (it would paint black on this background).
   Derived from Logo_blue.svg: fill switched to currentColor, the missing
   viewBox restored so it scales. Do not re-add a hardcoded fill.

   It is inlined rather than fetched, and that is load-bearing. A mask
   loaded by URL has to be same-origin, and /publish can legitimately be
   running in an OPAQUE origin — a copy opened from inside a sandboxed
   page inherits the sandbox — where nothing is same-origin and the
   fetch is refused with a console error on a page whose whole job at
   that moment is to explain calmly what went wrong. A data: URI is
   fetched from nowhere, so it cannot be refused. */
.mm-mark {
  display: block; flex: none; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%20width=%22512%22%20height=%22512%22%3E%20%3Cpath%20fill=%22currentColor%22%20d=%22M0%200%20C21.12%200%2042.24%200%2064%200%20C64.33%209.24%2064.66%2018.48%2065%2028%20C67.31%2028.825%2069.62%2029.65%2072%2030.5%20C80.67855394%2033.70320466%2088.83987436%2037.66197192%2097%2042%20C98.13824219%2042.59296875%2099.27648437%2043.1859375%20100.44921875%2043.796875%20C114.11283709%2051.2237895%20126.32645153%2060.78564509%20138%2071%20C138.33%2053.51%20138.66%2036.02%20139%2018%20C147.41726708%2018%20155.23771035%2018.11320702%20163.5%2019.1875%20C165.04349121%2019.38714355%20165.04349121%2019.38714355%20166.61816406%2019.59082031%20C209.08178959%2025.42223064%20247.55036699%2043.98420048%20278.48925781%2073.55664062%20C279.51252583%2074.53426838%20280.54069027%2075.50679224%20281.57324219%2076.47460938%20C316.21868127%20109.03500379%20337.95056536%20156.61339058%20341%20204%20C341%20209.28%20341%20214.56%20341%20220%20C319.88%20220%20298.76%20220%20277%20220%20C276.34%20213.07%20275.68%20206.14%20275%20199%20C274.38439297%20195.37078182%20273.77803562%20191.97121696%20272.875%20188.4375%20C272.66327148%20187.58655762%20272.45154297%20186.73561523%20272.23339844%20185.85888672%20C266.69864116%20164.72016184%20256.75707174%20146.80424072%20243%20130%20C242.33226562%20129.17757812%20241.66453125%20128.35515625%20240.9765625%20127.5078125%20C235.93066496%20121.55571295%20230.17510386%20116.74552502%20224%20112%20C223.10023438%20111.30777344%20222.20046875%20110.61554688%20221.2734375%20109.90234375%20C203.20851766%2096.39269908%20177.88565782%2083.53645418%20154.625%2083.9375%20C153.42875%2083.958125%20152.2325%2083.97875%20151%2084%20C151.58265625%2084.66902344%20152.1653125%2085.33804688%20152.765625%2086.02734375%20C185.07129092%20123.86967253%20203%20170.1014647%20203%20220%20C181.88%20220%20160.76%20220%20139%20220%20C138.01%20211.75%20137.02%20203.5%20136%20195%20C129.68082068%20166.91475858%20117.85438519%20144.07221923%2098%20123%20C97.45085937%20122.39800781%2096.90171875%20121.79601562%2096.3359375%20121.17578125%20C86.97145584%20111.2807994%2075.80572295%20104.7461274%2064%2098%20C64%20138.26%2064%20178.52%2064%20220%20C42.88%20220%2021.76%20220%200%20220%20C0%20147.4%200%2074.8%200%200%20Z%22%20transform=%22translate(74,141)%22/%3E%20%3Cpath%20fill=%22currentColor%22%20d=%22M0%200%20C6.93122125%202.33191353%2011.59348712%206.73609933%2015%2013.15234375%20C17.3325015%2019.79450622%2017.26381755%2027.06296996%2014.3125%2033.5%20C10.66303794%2039.55276634%205.78715496%2043.90906429%20-1%2046%20C-7.43466397%2046.85737784%20-13.48798557%2046.74360867%20-19.18359375%2043.40234375%20C-24.96806721%2038.93648145%20-29.37878226%2033.62316781%20-30.37109375%2026.23828125%20C-30.53935564%2018.82486011%20-29.62715748%2012.97497629%20-25%207%20C-17.06174054%200.27985277%20-10.33089416%20-1.10531813%200%200%20Z%22%20transform=%22translate(450,315)%22/%3E%20%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20512%20512%22%20width=%22512%22%20height=%22512%22%3E%20%3Cpath%20fill=%22currentColor%22%20d=%22M0%200%20C21.12%200%2042.24%200%2064%200%20C64.33%209.24%2064.66%2018.48%2065%2028%20C67.31%2028.825%2069.62%2029.65%2072%2030.5%20C80.67855394%2033.70320466%2088.83987436%2037.66197192%2097%2042%20C98.13824219%2042.59296875%2099.27648437%2043.1859375%20100.44921875%2043.796875%20C114.11283709%2051.2237895%20126.32645153%2060.78564509%20138%2071%20C138.33%2053.51%20138.66%2036.02%20139%2018%20C147.41726708%2018%20155.23771035%2018.11320702%20163.5%2019.1875%20C165.04349121%2019.38714355%20165.04349121%2019.38714355%20166.61816406%2019.59082031%20C209.08178959%2025.42223064%20247.55036699%2043.98420048%20278.48925781%2073.55664062%20C279.51252583%2074.53426838%20280.54069027%2075.50679224%20281.57324219%2076.47460938%20C316.21868127%20109.03500379%20337.95056536%20156.61339058%20341%20204%20C341%20209.28%20341%20214.56%20341%20220%20C319.88%20220%20298.76%20220%20277%20220%20C276.34%20213.07%20275.68%20206.14%20275%20199%20C274.38439297%20195.37078182%20273.77803562%20191.97121696%20272.875%20188.4375%20C272.66327148%20187.58655762%20272.45154297%20186.73561523%20272.23339844%20185.85888672%20C266.69864116%20164.72016184%20256.75707174%20146.80424072%20243%20130%20C242.33226562%20129.17757812%20241.66453125%20128.35515625%20240.9765625%20127.5078125%20C235.93066496%20121.55571295%20230.17510386%20116.74552502%20224%20112%20C223.10023438%20111.30777344%20222.20046875%20110.61554688%20221.2734375%20109.90234375%20C203.20851766%2096.39269908%20177.88565782%2083.53645418%20154.625%2083.9375%20C153.42875%2083.958125%20152.2325%2083.97875%20151%2084%20C151.58265625%2084.66902344%20152.1653125%2085.33804688%20152.765625%2086.02734375%20C185.07129092%20123.86967253%20203%20170.1014647%20203%20220%20C181.88%20220%20160.76%20220%20139%20220%20C138.01%20211.75%20137.02%20203.5%20136%20195%20C129.68082068%20166.91475858%20117.85438519%20144.07221923%2098%20123%20C97.45085937%20122.39800781%2096.90171875%20121.79601562%2096.3359375%20121.17578125%20C86.97145584%20111.2807994%2075.80572295%20104.7461274%2064%2098%20C64%20138.26%2064%20178.52%2064%20220%20C42.88%20220%2021.76%20220%200%20220%20C0%20147.4%200%2074.8%200%200%20Z%22%20transform=%22translate(74,141)%22/%3E%20%3Cpath%20fill=%22currentColor%22%20d=%22M0%200%20C6.93122125%202.33191353%2011.59348712%206.73609933%2015%2013.15234375%20C17.3325015%2019.79450622%2017.26381755%2027.06296996%2014.3125%2033.5%20C10.66303794%2039.55276634%205.78715496%2043.90906429%20-1%2046%20C-7.43466397%2046.85737784%20-13.48798557%2046.74360867%20-19.18359375%2043.40234375%20C-24.96806721%2038.93648145%20-29.37878226%2033.62316781%20-30.37109375%2026.23828125%20C-30.53935564%2018.82486011%20-29.62715748%2012.97497629%20-25%207%20C-17.06174054%200.27985277%20-10.33089416%20-1.10531813%200%200%20Z%22%20transform=%22translate(450,315)%22/%3E%20%3C/svg%3E") center / contain no-repeat;
}
.wordmark .mm-mark { width: 30px; height: 30px; color: var(--cream); }
.wordmark .name {
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream); white-space: nowrap;
}
.topnav { display: flex; align-items: center; gap: clamp(10px, 3vw, 32px); }
.topnav a {
  font-size: 13px; text-decoration: none; color: var(--cream-dim);
  transition: color 200ms var(--ease);
}
.topnav a:hover { color: var(--cream); }
@media (max-width: 760px) { .topnav a { display: none; } }
@media (max-width: 420px) {
  .wordmark .name { letter-spacing: 0.12em; }
}

/* ── language switch ─────────────────────────────────────────────
   Three instant languages and nothing else, so this is the Lisa site's
   dropdown without its machine-translated tail: same pill, same panel,
   same hand-written dictionary — see assets/i18n.js. */
.lang { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--cream-dim); background: transparent;
  border: 1px solid var(--hair-strong); border-radius: 9999px; padding: 8px 14px;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { color: var(--cream); border-color: var(--cream); }
.lang-panel[hidden] { display: none; }
.lang-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 220px; display: flex; flex-direction: column; padding: 6px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hair-strong); box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.lang-panel button {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left; cursor: pointer; background: transparent; border: 0;
  font-family: var(--font-display); font-size: 13.5px; color: var(--cream-dim);
  padding: 9px 10px; border-radius: 8px;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.lang-panel button:hover { background: color-mix(in srgb, var(--cream) 8%, transparent); color: var(--cream); }
.lang-panel button[aria-selected="true"] { color: var(--terracotta); }
.lang-panel button .code { font-family: var(--font-mono); font-size: 10px; color: var(--cream-faint); }

/* ── hero ─────────────────────────────────────────────────────────
   The hero is laid out in named areas rather than two stacked columns,
   because the reading order changes at the breakpoint: on a wide screen
   the frame sits beside the copy, and on a phone it has to come STRAIGHT
   after the one-line statement — the frame is the primary action, and it
   cannot be a screen further down behind a paragraph. */
.hero-band { padding: clamp(32px, 6vh, 104px) var(--pad) clamp(44px, 7vh, 96px); }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  column-gap: clamp(32px, 5vw, 72px);
  grid-template-areas:
    ".       art"
    "kicker  art"
    "title   art"
    "rule    art"
    "tagline art"
    "sub     art"
    "cta     art"
    ".       art";
  /* The frame spans every row, and when it is taller than the copy the
     spare height has to go SOMEWHERE. Two empty `1fr` rows take it, one
     above and one below, which centres the copy against the frame while
     leaving the gaps between the real rows exactly as authored. Without
     them the surplus is shared out between the lines, and the space
     under the rule silently grows on whichever page has less copy. */
  grid-template-rows: 1fr auto auto auto auto auto auto 1fr;
}
.hero > .kicker  { grid-area: kicker; }
.hero > h1       { grid-area: title; }
.hero > .rule    { grid-area: rule; }
.hero > .tagline { grid-area: tagline; }
.hero > .hero-art { grid-area: art; align-self: center; min-width: 0; }
.hero > .sub     { grid-area: sub; }
.hero > .cta-row { grid-area: cta; }
.hero h1 { font-size: clamp(38px, 6.6vw, 84px); color: var(--cream); }
.hero .rule { margin: 24px 0; }
.hero .tagline {
  font-size: clamp(14px, 1.6vw, 18px); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream-dim); line-height: 1.8;
  max-width: 40ch;
}
.hero .tagline strong { color: var(--cream); font-weight: 700; }
.hero .sub { margin-top: 22px; color: var(--cream-dim); max-width: 48ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "kicker" "title" "rule" "tagline" "art" "sub" "cta";
  }
  .hero > .hero-art { margin-top: 24px; }
}

/* ── the white frame ─────────────────────────────────────────────
   On the Hi Ted, Meet Lisa site the frame holds a photograph. Here it
   holds the route a file takes: on `/` a depiction of it, and on
   `/publish` the real thing — waiting, nothing arrived, a document to
   confirm, a live link, a deleted one. Exactly one of those panels is
   on screen at a time. Nothing in the frame is a drop target: there is
   no way to put a file into this site by hand, on any page. */
.frame-plate {
  border: 10px solid var(--frame); background: #101109;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  padding: clamp(18px, 3.2vw, 34px);
}
/* The frame is the border; the panels inside it are plain content. */
.frame-plate > .doccard,
.frame-plate > .result { border: 0; background: none; padding: 0; margin: 0; }
.frame-plate p strong { color: var(--cream); font-weight: 700; }
.frame-caption {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream-faint);
}

/* ── the depiction on `/` ────────────────────────────────────────
   Deliberately not made of buttons. Nothing on the front page is
   pressable, because publishing starts in the document, not here —
   anything that looked like a control would be a lie. The two chips
   are the menu items as they are actually written, which is why they
   stay in Latin script in every language. */
.demo { display: flex; flex-direction: column; gap: 13px; }
.demo-step { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; color: var(--cream-dim); }
.demo-n { font-family: var(--font-mono); font-size: 11px; color: var(--terracotta); flex: none; }
.demo-chip {
  display: inline-block; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.06em; color: var(--cream); white-space: nowrap;
  border: 1px solid var(--hair-strong); border-radius: 9999px; padding: 2px 10px;
}
.demo-out { margin-top: 5px; padding-top: 18px; border-top: 1px solid var(--hair); }
.demo-eg {
  display: block; margin-bottom: 9px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cream-faint);
}
.demo-url {
  font-family: var(--font-mono); font-size: 13px; color: var(--cream);
  border: 1px solid var(--hair-strong); background: #101109;
  padding: 12px 14px; overflow-wrap: anywhere;
}
.demo-life { margin-top: 12px; font-size: 13px; color: var(--cream-dim); }

/* ── /publish: waiting, and nothing arrived ──────────────────────
   Two whole states of the frame rather than a strip over a drop zone,
   because there is no drop zone to sit over any more: with no sender
   there is genuinely nothing for a visitor to do on this page. */
.waitpanel { display: flex; flex-direction: column; gap: 8px; }
.waitpanel h2 {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracotta);
}
.waitpanel p { font-size: 14px; color: var(--cream-dim); max-width: 46ch; }
.idlepanel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.idlepanel h2 { font-size: clamp(19px, 2.2vw, 25px); }
.idlepanel p { color: var(--cream-dim); font-size: 14.5px; max-width: 46ch; }
.idlepanel .btn { margin-top: 6px; }

/* ── buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  text-decoration: none; border-radius: 9999px; padding: 15px 28px;
  cursor: pointer; border: 1px solid transparent;
  transition: transform 240ms var(--ease), background 200ms var(--ease),
              border-color 200ms var(--ease), color 200ms var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--cream); color: #1c1d15; }
.btn-primary:hover { background: #ffffff; }
.btn-ghost { border-color: var(--hair-strong); color: var(--cream); background: transparent; }
.btn-ghost:hover { border-color: var(--cream); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
/* Publish stays disabled for a moment after a document arrives from an
   opener, so it cannot be pressed before it has been read. The sweep
   says the wait is deliberate and finite; the global reduced-motion
   rule flattens it to nothing, and the wait itself — which is the
   safety property — is unaffected either way. */
.btn.arming {
  background-image: linear-gradient(90deg, transparent, rgba(210, 152, 115, 0.55), transparent);
  background-size: 45% 100%; background-repeat: no-repeat;
  animation: sweep 1.2s linear 1;
}
.btn-small { font-size: 13px; padding: 10px 20px; }
/* Delete is the one irreversible control on the site, and it sits in a
   panel whose whole mood is "this worked". It is tinted, never
   pre-selected, and never the first thing focus lands on. */
.btn-danger.btn-ghost { border-color: color-mix(in srgb, var(--rust) 60%, transparent); color: var(--terracotta); }
.btn-danger.btn-ghost:hover { border-color: var(--terracotta); background: color-mix(in srgb, var(--rust) 14%, transparent); }
.btn-danger.btn-primary { background: var(--rust); color: #fff; }
.btn-danger.btn-primary:hover { background: #c2502f; }

/* ── shared section shell ───────────────────────────────────────── */
section { padding: clamp(52px, 9vh, 120px) var(--pad); }
.shell { max-width: 1280px; margin: 0 auto; }
/* Narrow column, but anchored to the same left gutter as every wide
   section — the way the Lisa site's `.section-head` sits inside its
   shell. A centred column here would not line up with the footer. */
.shell-narrow { max-width: 780px; margin-left: 0; margin-right: auto; }
.section-head { max-width: var(--measure); margin-bottom: clamp(30px, 5vh, 56px); }
.section-head h2 { font-size: clamp(28px, 4vw, 46px); margin: 14px 0 18px; }
.section-head p { color: var(--cream-dim); }
.band { border-top: 1px solid var(--hair); }
.band-lift { background: color-mix(in srgb, var(--bg-lift) 55%, transparent); }
.note { margin-top: 24px; font-size: 13.5px; color: var(--cream-faint); max-width: var(--measure); }

/* the received document */
.doccard {
  border: 1px solid var(--hair-strong); background: #101109;
  padding: clamp(20px, 3vw, 32px); margin-top: 22px;
}
/* Not uppercased, unlike the other mono kickers on the site: this line
   can carry the literal origin of whoever sent the document, and a
   visitor deciding whether to trust it must see it exactly as it is. */
.doccard .from { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--terracotta); overflow-wrap: anywhere; }
.doccard .title { font-size: clamp(17px, 2.2vw, 22px); margin: 10px 0 4px; overflow-wrap: anywhere; }
.doccard .facts { font-family: var(--font-mono); font-size: 12px; color: var(--cream-dim); display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.doccard .notice { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--cream-dim); }

/* forms */
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; max-width: 460px; }
.field label { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-dim); }
.field .help { font-size: 13px; color: var(--cream-faint); }
input[type="text"], input[type="url"], input[type="email"], textarea, select {
  font-family: var(--font-display); font-size: 15px; color: var(--cream);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  border: 1px solid var(--hair-strong); padding: 12px 14px; width: 100%;
}
textarea { min-height: 130px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--cream-faint); }
.form-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* status / result */
.status { margin-top: 18px; font-size: 14.5px; }
.status:empty { margin-top: 0; }
/* Inside the frame the status is the component's own live region, so it
   sits under the panel it belongs to rather than floating below the
   card as stray text. */
.frame-plate .status { margin-top: 16px; font-size: 13.5px; }
.status .err { color: var(--terracotta); }
.status .ok { color: var(--cream); }
.working {
  display: block; height: 2px; margin-top: 16px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--terracotta), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: sweep 1.1s linear infinite;
}
@keyframes sweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) {
  .working { animation: none; background-size: 100% 100%; opacity: 0.5; }
}

.result { border: 1px solid var(--terracotta); background: color-mix(in srgb, var(--terracotta) 7%, #101109); padding: clamp(20px, 3vw, 32px); margin-top: 24px; }
/* Focus lands here when a link is published, so the ring has to be
   visible — but in cream, or it doubles up with the terracotta border
   and reads as a rendering fault rather than a focus indicator. */
.result:focus-visible { outline-color: var(--cream); outline-offset: 5px; }
.frame-plate .result:focus-visible { outline-offset: 2px; }
.result h3 { font-size: clamp(19px, 2.4vw, 24px); margin-bottom: 14px; }
.linkrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.linkbox {
  flex: 1 1 200px; min-width: 0; font-family: var(--font-mono); font-size: 13px;
  border: 1px solid var(--hair-strong); background: #101109; padding: 13px 15px;
  color: var(--cream); overflow-wrap: anywhere;
}
.expiry { margin-top: 14px; font-size: 14px; color: var(--cream-dim); }
/* Removal. The update key that makes this work is in a JS variable and
   nowhere else — never on screen, so there is nothing here to style but
   the sentence that says what happens when this tab closes. */
.removal { margin-top: 20px; border-top: 1px solid var(--hair); padding-top: 16px; }
.removal p { font-size: 13.5px; color: var(--cream-dim); max-width: 60ch; }
.removal .form-actions { margin-top: 14px; align-items: center; }
.removal .confirm-q { flex: 1 1 100%; color: var(--cream); font-size: 14px; }
.warnlist { margin-top: 16px; padding-left: 18px; font-size: 13.5px; color: var(--terracotta); }

/* ── the three-step track ───────────────────────────────────────── */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (max-width: 880px) { .flow { grid-template-columns: 1fr; } }
.flow-step { background: var(--bg); padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 10px; }
.flow-step .n { font-family: var(--font-mono); font-size: 12px; color: var(--terracotta); }
.flow-step h3 { font-size: 17px; }
.flow-step p { font-size: 13.5px; color: var(--cream-dim); flex: 1; }

/* ── the plain-language list ────────────────────────────────────── */
.getlist { list-style: none; display: flex; flex-direction: column; gap: 16px; max-width: var(--measure); }
.getlist li { display: flex; gap: 12px; font-size: 15px; color: var(--cream-dim); }
.getlist li::before { content: "—"; color: var(--terracotta); flex: none; }
.getlist b { color: var(--cream); font-weight: 700; }
.getlist a { color: var(--cream); text-underline-offset: 4px; }

/* ── the one copy button (the published link) ───────────────────── */
.copybtn {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  background: var(--cream); color: #1c1d15; border: 0; border-radius: 9999px;
  padding: 7px 16px; cursor: pointer; transition: background 200ms var(--ease);
}
.linkrow .copybtn { font-size: 13px; padding: 12px 22px; }
.copybtn:hover { background: #fff; }
.copybtn.done { background: var(--terracotta); color: #fff; }

/* ── prose pages (terms / privacy / report) ─────────────────────── */
.page-head { padding: clamp(44px, 8vh, 88px) var(--pad) 0; }
.page-head .shell-narrow h1 { font-size: clamp(32px, 5vw, 56px); margin: 14px 0 16px; }
.page-head .shell-narrow p { color: var(--cream-dim); }
.draftflag {
  display: inline-block; margin-bottom: 20px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--terracotta);
  border: 1px solid var(--terracotta); border-radius: 9999px; padding: 7px 15px;
}
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(21px, 2.6vw, 27px); margin: 44px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--cream-dim); margin-bottom: 14px; }
.prose ul { margin: 0 0 16px 20px; color: var(--cream-dim); }
.prose li { margin-bottom: 9px; }
.prose a { color: var(--cream); text-underline-offset: 4px; }
.prose .last { margin-top: 44px; font-size: 13px; color: var(--cream-faint); }

/* ── footer ─────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--hair); padding: 44px var(--pad) 60px; }
.foot { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px 24px; align-items: center; justify-content: space-between; }
.foot .left { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.foot .mm-mark { width: 24px; height: 24px; color: var(--cream-faint); }
.foot .left:hover .mm-mark { color: var(--cream); }
.foot span, .foot a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-faint); text-decoration: none; }
.foot a:hover { color: var(--cream); }
.foot .links { display: flex; flex-wrap: wrap; gap: 16px 24px; }

/* ── 404 ────────────────────────────────────────────────────────── */
.mid { min-height: 62vh; display: flex; align-items: center; padding: clamp(48px, 10vh, 120px) var(--pad); }
.mid .shell-narrow h1 { font-size: clamp(34px, 6vw, 64px); margin: 14px 0 18px; }
.mid .shell-narrow p { color: var(--cream-dim); max-width: 46ch; }