/* envelope.css — correomona's own layer over Fiesta 1.1.0.

   Linked after tokens.css and theme.css, so it wins the ties it should.
   It overrides Fiesta's tokens rather than its rules wherever a token
   exists, and adds the few parts Fiesta has no name for: the masthead,
   the stamp, the postmark, the home page's envelope. Not Fiesta's file,
   so vendored_test.go does not pin it.

   The look is a mid-century envelope, kept quiet: paper and ink for the
   palette (a night-blue envelope in the dark), an airmail edge, a
   perforated stamp for the mark, a postmark on the home page, and a
   book serif for headings. Body text stays Fiesta's.

   Rules this file keeps:
   - Every colour that carries text is gated at 4.5:1 against the ground
     it sits on, in both schemes; a control edge at 3:1. The airmail
     stripes and the marks are decoration and carry nothing.
   - Every colour is one light-dark() pair, as Fiesta's are.
   - It fetches nothing: system font stacks only, no url().
   - Nothing moves for a reader who asks for reduced motion.
   - No style attribute anywhere, because the CSP drops them: a grid
     card names its columns here, by class. */

:root {
  /* Paper and ink. */
  --rst-bg: light-dark(#f6f1e6, #0e1526);
  --rst-surface: light-dark(#fffdf8, #151f35);
  --rst-surface-2: light-dark(#f1ebdd, #1a2540);
  --rst-line: light-dark(#e4dccb, #283655);
  --rst-line-strong: light-dark(#857d6f, #73809f);
  --rst-header-rule: var(--rst-line);
  --rst-text: light-dark(#1d1b17, #efe9dc);
  --rst-text-muted: light-dark(#544e44, #b6ae9e);
  --rst-text-faint: light-dark(#686155, #9d9586);

  /* Airmail blue does what Fiesta's cobalt did: links, focus, the
     primary button. The fills are set outright rather than derived,
     so the white label's contrast is a number checked once. */
  --rst-accent: light-dark(#234aa3, #a3bcff);
  --rst-accent-fill: light-dark(#2a52b0, #3561d0);
  --rst-accent-fill-hover: light-dark(#23479b, #2d55b8);
  --rst-accent-fill-edge: light-dark(#1b3a80, #24459a);
  --rst-accent-fill-edge-hover: light-dark(#173270, #1f3c88);
  --rst-on-accent: light-dark(#ffffff, #0e1526);

  /* Controls on paper rather than on Fiesta's neutral white and black. */
  --rst-control-face: var(--rst-surface);
  --rst-control-face-hover: light-dark(#f8f3e8, #1b2741);
  --rst-control-face-press: light-dark(#ece4d3, #202d4b);
  --rst-control-border: light-dark(#d6cdbb, #34436a);
  --rst-summary-face: var(--rst-surface);
  --rst-summary-face-hover: light-dark(#f8f3e8, #1b2741);
  --rst-summary-edge: light-dark(#d6cdbb, #34436a);
  --rst-ghost-face-hover: var(--rst-surface-2);
  --rst-nav-current-bg: var(--rst-surface);
  --rst-nav-current-fg: var(--rst-text);

  /* The envelope's own. */
  --cm-air-red: light-dark(#c0392b, #e0675e);
  --cm-air-blue: light-dark(#234aa3, #7f9ce8);
  --cm-ink: light-dark(#234aa3, #a3bcff);
  --cm-stamp-paper: light-dark(#fffdf8, #efe9dc);
  --cm-stamp-face: light-dark(#b8382c, #b8382c);
  --cm-stamp-ink: #fff6e6;
  --cm-airmail: repeating-linear-gradient(135deg,
    var(--cm-air-red) 0 11px, var(--rst-surface) 11px 17px,
    var(--cm-air-blue) 17px 28px, var(--rst-surface) 28px 34px);
  --cm-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Charter, "Bitstream Charter", Georgia, serif;
  --cm-typewriter: "American Typewriter", "Courier Prime", "Courier 10 Pitch", "Courier New", ui-monospace, monospace;
}

/* --- Type ----------------------------------------------------------- */

[rst-page-header] h1,
[rst-box-head] h2,
[rst-empty-title],
[rst-signin-door] h1,
[rst-signin-pitch],
.cm-envelope h1,
.cm-lede {
  font-family: var(--cm-serif);
  letter-spacing: 0;
}
[rst-page-header] h1 { font-size: 1.625rem; font-weight: 600; }
[rst-box-head] h2 { font-size: 1.0625rem; font-weight: 600; }
[rst-empty-title] { font-weight: 600; }
[rst-signin-door] h1 { font-size: 1.5rem; }
[rst-signin-pitch] { font-weight: 500; }

/* A plain link in running text is airmail blue, like Fiesta's own;
   :where() keeps it below every Fiesta rule that styles a link. */
:where(main) :where(p, dd, li) > a:where(:not([rst-btn])) { color: var(--rst-accent); text-underline-offset: 0.15em; }

/* --- The airmail edge ------------------------------------------------- */

/* Every column page carries a thin airmail band across the top. */
body:not([rst-stage])::before {
  background: var(--cm-airmail);
  block-size: 5px;
  content: "";
  display: block;
}

/* A stage card is the envelope itself: an airmail border all round. */
[rst-signin],
.cm-envelope {
  background: linear-gradient(var(--rst-surface), var(--rst-surface)) padding-box, var(--cm-airmail) border-box;
  border: 6px solid transparent;
  border-radius: 5px;
}

/* --- The stamp -------------------------------------------------------- */

/* A perforated edge: a grid of holes over the whole stamp, kept only
   in its paper margin (the content box is masked in whole), with the
   holes centred on the edge so each one bites a half-circle out. */
.cm-stamp {
  --cm-perf: 5px;
  block-size: 2.2rem;
  display: inline-block;
  filter: drop-shadow(0 0 0.5px light-dark(rgba(70, 50, 20, 0.55), rgba(0, 0, 0, 0.6))) drop-shadow(0 1px 1.5px light-dark(rgba(70, 50, 20, 0.2), rgba(0, 0, 0, 0.45)));
  flex: none;
  inline-size: 1.85rem;
  rotate: -3deg;
}
.cm-stamp-paper {
  background: var(--cm-stamp-paper);
  block-size: 100%;
  box-sizing: border-box;
  display: block;
  inline-size: 100%;
  mask:
    radial-gradient(circle at center, #0000 calc(var(--cm-perf) * 0.34), #000 calc(var(--cm-perf) * 0.38))
      calc(var(--cm-perf) / -2) calc(var(--cm-perf) / -2) / var(--cm-perf) var(--cm-perf) round,
    linear-gradient(#000 0 0) content-box;
  padding: calc(var(--cm-perf) * 0.6);
}
.cm-stamp svg { block-size: 100%; display: block; inline-size: 100%; }
.cm-stamp-face { fill: var(--cm-stamp-face); }
.cm-stamp-frame,
.cm-stamp-glyph,
.cm-stamp-wave {
  fill: none;
  stroke: var(--cm-stamp-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}
.cm-stamp-frame { opacity: 0.55; stroke-width: 0.8; }

[rst-signin-mark] { block-size: 3.6rem; inline-size: 3rem; }
[rst-signin-mark] > .cm-stamp { --cm-perf: 6px; block-size: 100%; inline-size: 100%; }
[rst-signin-name] { color: var(--rst-text); font-family: var(--cm-serif); font-size: 1.25rem; }

/* --- The postmark ----------------------------------------------------- */

.cm-postmark { display: block; overflow: visible; }
.cm-postmark circle,
.cm-postmark-wave {
  fill: none;
  stroke: var(--cm-ink);
  stroke-linecap: round;
  stroke-width: 1.8;
}
.cm-postmark circle,
.cm-postmark-wave,
.cm-postmark text { opacity: 0.6; }
.cm-postmark-arc { fill: none; stroke: none; }
.cm-postmark text {
  fill: var(--cm-ink);
  font-family: var(--cm-typewriter);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

/* --- The masthead (column pages) -------------------------------------- */

.cm-masthead {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: var(--rst-sp-4);
  justify-content: space-between;
  margin: 0 auto;
  max-width: 64rem;
  padding: var(--rst-sp-4) var(--rst-sp-4) 0;
}
.cm-masthead + [rst-page] { padding-block-start: var(--rst-sp-5); }
.cm-brand {
  align-items: center;
  border-radius: var(--rst-radius-sm);
  color: var(--rst-text);
  display: inline-flex;
  font-family: var(--cm-serif);
  font-size: 1.1875rem;
  font-weight: 600;
  gap: 0.7rem;
  min-block-size: var(--rst-target);
  text-decoration: none;
}
.cm-brand:hover .cm-brand-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* --- Stage pages ------------------------------------------------------ */

/* The backdrop's wavy lines read as cancellation marks in postmark ink. */
[rst-stage-art-lines] { stroke: color-mix(in srgb, var(--cm-ink) 16%, var(--rst-bg)); }
[rst-stage-art-glow] { fill: color-mix(in srgb, var(--cm-air-red) 9%, var(--rst-bg)); }

/* A subscriber's public pages: the card without the brand side. */
[rst-signin].cm-solo { grid-template-columns: minmax(0, 1fr); max-inline-size: 34rem; }

/* The words somebody is agreeing to, set apart like a quoted line.
   By id: the consent tests read that paragraph by its exact markup. */
#consent-wording {
  border-inline-start: 3px solid var(--cm-air-red);
  font-family: var(--cm-serif);
  font-size: 1.0625rem;
  font-style: italic;
  padding-inline-start: var(--rst-sp-3);
}

/* Three airmail dots while a team is set up; still for reduced motion. */
.cm-wait { display: flex; gap: 0.45rem; }
.cm-wait span {
  animation: cm-wait 1.4s ease-in-out infinite;
  background: var(--cm-air-red);
  block-size: 0.5rem;
  border-radius: 50%;
  inline-size: 0.5rem;
  opacity: 0.35;
}
.cm-wait span:nth-child(2) { animation-delay: 0.2s; background: var(--cm-air-blue); }
.cm-wait span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cm-wait { 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cm-wait span { animation: none; opacity: 0.7; }
}

/* --- The home page ---------------------------------------------------- */

.cm-envelope {
  box-shadow: var(--rst-shadow-pop);
  box-sizing: border-box;
  margin-block-end: var(--rst-sp-5);
  padding: var(--rst-sp-5);
  position: relative;
}
.cm-envelope-marks {
  display: flex;
  justify-content: flex-end;
  margin-block-end: var(--rst-sp-2);
  position: relative;
}
.cm-envelope-marks .cm-stamp { --cm-perf: 7px; block-size: 4.6rem; inline-size: 3.85rem; rotate: 3deg; }
.cm-envelope-marks .cm-postmark { inline-size: 9rem; inset-block-start: 1.1rem; inset-inline-end: 1.4rem; position: absolute; }
.cm-envelope h1 {
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 var(--rst-sp-3);
}
.cm-lede {
  color: var(--rst-text);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  line-height: 1.3;
  margin: 0 0 var(--rst-sp-4);
  max-inline-size: 30ch;
  text-wrap: balance;
}
.cm-envelope p { max-inline-size: 38rem; }
.cm-envelope > :last-child { margin-block-end: 0; }

.cm-doors { display: grid; gap: 0 var(--rst-sp-5); }
.cm-doors [rst-box] > p:last-child { margin-block-end: 0; }

@media (min-width: 48rem) {
  .cm-envelope { padding: var(--rst-sp-6) calc(var(--rst-sp-6) + 0.5rem); }
  .cm-envelope-marks { inset-block-start: var(--rst-sp-5); inset-inline-end: var(--rst-sp-5); margin: 0; position: absolute; }
  .cm-envelope-marks .cm-stamp { block-size: 5.4rem; inline-size: 4.5rem; }
  .cm-envelope-marks .cm-postmark { inline-size: 11.5rem; inset-block-start: 1.6rem; inset-inline-end: 1.9rem; }
  .cm-envelope h1, .cm-lede { padding-inline-end: 12rem; }
  .cm-lede { max-inline-size: none; padding-inline-end: 14rem; }
  .cm-doors { align-items: start; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* --- Column screens --------------------------------------------------- */

/* Long addresses wrap rather than run under the next cell. */
[rst-lrow] > .rst-nm, [rst-detail] dd { min-inline-size: 0; overflow-wrap: anywhere; }
/* A box head's action drops under its heading when there is no room. */
[rst-box-head] { flex-wrap: wrap; row-gap: var(--rst-sp-2); }
/* On a phone a record's facts stack, label over value. */
@media (max-width: 40rem) {
  [rst-detail] { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  [rst-detail] dd + dt { margin-block-start: var(--rst-sp-3); }
}

/* A card with no row menu gives its phone row two columns, not
   Fiesta's three, so a long address keeps the room the menu would take. */
@media (pointer: coarse), (max-width: 40rem) {
  :is(.cm-subscribers, .cm-campaigns, .cm-teams, .cm-journal, .cm-skipped, .cm-sources) > [rst-lrow] { grid-template-columns: minmax(0, 1fr) auto; }
  .cm-invites > [rst-lrow] { grid-template-columns: minmax(0, 1fr) auto auto; }
}

/* A campaign's state, directly under its header. */
.cm-state { margin: calc(-1 * var(--rst-sp-3)) 0 var(--rst-sp-4); }

/* A box that holds a screen's next step, nothing else. */
.cm-next [rst-form-foot] { border: 0; margin: 0; padding: 0; }
.cm-next > form + form { margin-block-start: var(--rst-sp-3); }

.cm-signout { margin-block-start: var(--rst-sp-4); }

/* A message body, typed on ruled paper. */
.cm-letter pre {
  background: repeating-linear-gradient(to bottom, transparent 0 calc(1.6em - 1px), color-mix(in srgb, var(--rst-line) 65%, transparent) calc(1.6em - 1px) 1.6em);
  background-attachment: local;
  font-family: var(--cm-typewriter);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.cm-letter-note { color: var(--rst-text-muted); font-size: var(--rst-fs-sm); }

/* A secret shown once: typed, on a dashed slip. */
.cm-key pre {
  background: var(--rst-surface-2);
  border: 1.5px dashed var(--rst-line-strong);
  border-radius: var(--rst-radius-sm);
  font-family: var(--cm-typewriter);
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.375rem);
  letter-spacing: 0.06em;
  margin: 0;
  overflow-wrap: anywhere;
  padding: var(--rst-sp-3) var(--rst-sp-4);
  white-space: pre-wrap;
}
.cm-key pre + p { margin-block-end: 0; overflow-wrap: anywhere; }

/* The role form in a member's row. Its label is for a screen reader:
   the column head already says Role to everyone else. */
.cm-role { align-items: center; display: flex; flex-wrap: wrap; gap: var(--rst-sp-2); margin: 0; }
.cm-role [rst-field] { flex: 0 0 auto; margin: 0; }
.cm-role [rst-field-label] {
  block-size: 1px; clip-path: inset(50%); inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap;
}
.cm-members [rst-btn~="danger"] { justify-self: end; }
/* On a phone a member's row stacks: the address across the top, then
   the role and the Remove link side by side. */
@media (pointer: coarse), (max-width: 40rem) {
  .cm-members > [rst-lrow] { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--rst-sp-2); }
  .cm-members > [rst-lrow]:not([rst-lrow~="head"]) > .rst-nm { grid-column: 1 / -1; }
}

/* The import's six readings as two rows of three (three of two on a
   phone), rather than five and a straggler. */
.cm-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-plan > [rst-stat]:nth-child(2n + 1) { border-inline-start: 0; }
.cm-plan > [rst-stat]:nth-child(n + 3) { border-block-start: 1px solid var(--rst-line); }
@media (min-width: 40rem) {
  .cm-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cm-plan > [rst-stat]:nth-child(2n + 1) { border-inline-start: 1px solid var(--rst-line); }
  .cm-plan > [rst-stat]:nth-child(3n + 1) { border-inline-start: 0; }
  .cm-plan > [rst-stat]:nth-child(n + 3) { border-block-start: 0; }
  .cm-plan > [rst-stat]:nth-child(n + 4) { border-block-start: 1px solid var(--rst-line); }
}

/* Each grid card names its own columns, every one a fixed share: each
   row is its own grid, so an auto column would size to its own row and
   the columns would not line up. On a phone Fiesta's own three-column
   row takes over, and rst-m-hide cells drop out. */
.cm-index { --rst-cols: minmax(0, 1fr); }
.cm-lists { --rst-cols: minmax(0, 2fr) minmax(0, 1fr); }
.cm-campaigns { --rst-cols: minmax(0, 1fr) 7.5rem 10.5rem; }
.cm-subscribers { --rst-cols: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) 6.5rem 7.5rem; }
.cm-sources { --rst-cols: minmax(0, 2.4fr) minmax(0, 1fr) 6.5rem 5.5rem; }
.cm-members { --rst-cols: minmax(0, 1.5fr) 15rem minmax(0, 1fr) 5.5rem; }
.cm-invites { --rst-cols: minmax(0, 2fr) 5rem 6.5rem 7rem 5.5rem; }
.cm-teams { --rst-cols: minmax(0, 1.4fr) minmax(0, 1.4fr) 6.5rem 7rem; }
.cm-journal { --rst-cols: 9rem minmax(0, 1fr) 10.5rem; }
.cm-skipped { --rst-cols: 4.5rem minmax(0, 1fr); }

/* --- Forced colours --------------------------------------------------- */

@media (forced-colors: active) {
  body:not([rst-stage])::before { display: none; }
  [rst-signin], .cm-envelope { background: Canvas; border: 1px solid CanvasText; }
}

/* What a row list hides on a phone (Fiesta's .rst-m-hide, below 800px)
   comes back as a quiet line under the row's name, so nothing about a
   subscriber, a source or a team is out of reach on a small screen. */
.cm-m-only { display: none; }
@media (max-width: 800px) {
  .cm-m-only { display: block; }
}