/* account.stanage.org and auth.stanage.org.
   Stone ground, ink, coral accent, pill buttons. The pages are
   not cards: each one is a centred column on the ground.
   Libre Caslon for text. Fragment Mono for brand names.
   Fonts are files on this origin. Nothing is fetched from a font host. */

/* swap paints the fallback first, then the file from this origin.
   The fallback faces below use size-adjust so Georgia and a system
   mono sit closer to the real files and the swap does not jump.
   The numbers are approximate. */
@font-face {
  font-family: "Libre Caslon Text Fallback";
  src: local("Georgia");
  font-weight: 400;
  font-style: normal;
  size-adjust: 94%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Libre Caslon Text Fallback";
  src: local("Georgia");
  font-weight: 700;
  font-style: normal;
  size-adjust: 94%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Libre Caslon Text Fallback";
  src: local("Georgia");
  font-weight: 400;
  font-style: italic;
  size-adjust: 94%;
  ascent-override: 92%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Libre Caslon Display Fallback";
  src: local("Georgia");
  font-weight: 400;
  font-style: normal;
  size-adjust: 90%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fragment Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("Courier New");
  font-weight: 400;
  font-style: normal;
  size-adjust: 86%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fragment Mono Fallback";
  src: local("Menlo"), local("Consolas"), local("Courier New");
  font-weight: 400;
  font-style: italic;
  size-adjust: 86%;
  ascent-override: 90%;
  descent-override: 20%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("/static/fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("/static/fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Text";
  src: url("/static/fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Display";
  src: url("/static/fonts/libre-caslon-display-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/static/fonts/fragment-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fragment Mono";
  src: url("/static/fonts/fragment-mono-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Stone ground and ink match the public site. Muted #52525a is
   about 7:1 on the ground and on white. Coral is for rings only:
   it is too light to use as small text. Danger #b42318 is about
   6.6:1 on white and about 6:1 on the error wash.
   The input line #76716b is about 4.5:1 on white and on the ground,
   so a field still shows when it sits on the page. A readonly field
   is filled with the ground, and then the line is its only edge.
   Buttons keep the lighter --line-strong. */
:root {
  --bg: #f7f6f4;
  --bg-deep: #faf4f3;
  --surface: #ffffff;
  --ink: #0a0915;
  --ink-soft: #333333;
  --muted: #52525a;
  --line: rgba(10, 9, 21, 0.08);
  --line-strong: #dfdfdf;
  --input-line: #76716b;
  --accent: #f94b25;
  --accent-soft: #fff1ee;
  --danger: #b42318;
  --danger-soft: #fdf2f0;
  --shadow-sm: 0 8px 24px #0000000a;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* A hidden control must stay hidden even when a class sets display. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; color-scheme: light; }
body {
  font-family: "Libre Caslon Text", "Libre Caslon Text Fallback", Georgia, serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
button, input, select, textarea { font-family: inherit; }
h1, .auth-title {
  font-family: "Libre Caslon Display", "Libre Caslon Display Fallback", "Libre Caslon Text", Georgia, serif;
}
h2 {
  font-family: "Libre Caslon Text", "Libre Caslon Text Fallback", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
a { text-decoration: none; color: inherit; }

/* Brand names. The logo, GO, RACK, and stanage.org.
   GO and RACK are the italic file via em. Letter-spacing is 0
   because a negative track looks uneven on this face. Mono draws
   larger than Caslon, so running text is 0.92em and a heading is
   0.82em, nudged down a hair so the baselines meet. */
.wordmark,
.site-wordmark {
  font-family: "Fragment Mono", "Fragment Mono Fallback", ui-monospace, monospace;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 0.92em;
}
.wordmark em,
.site-wordmark em { font-style: italic; font-weight: 400; }
.wordmark strong,
.site-wordmark strong,
.site-wordmark.stanageorg strong { font-weight: 400; font-style: normal; letter-spacing: 0; }
h1 .wordmark,
.auth-title .wordmark {
  font-size: 0.82em;
  letter-spacing: 0;
  position: relative;
  top: 0.06em;
}
.auth-sub .wordmark { font-size: 0.82em; letter-spacing: 0; }
.site-logo .wordmark { font-size: 1em; top: 0; }

/* Top bar. One logo, small and quiet. Sign out only when the
   account page says the person is signed in. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247, 246, 244, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-header-inner {
  max-width: 72rem;
  margin: 0 auto;
  min-height: 4rem;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.site-logo {
  font-size: 0.95rem;
  color: var(--ink);
  white-space: nowrap;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-logo:hover { color: var(--ink); }
.header-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15rem;
  color: var(--muted);
  font-size: 0.95rem;
  white-space: nowrap;
}
.header-action:hover { color: var(--ink); }

/* Page column. The footer stays at the bottom of a short page. */
.page-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.page-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem 3rem;
}
.site-footer {
  padding: 0.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The column. No white card: the words sit on the stone ground.
   Sign-in, sign-out, delete, and the error page stay narrow.
   Settings and welcome are wider. Side gutters come from the
   page, so this column has no horizontal padding of its own
   and the text shares one left edge. The vertical padding is
   the same rhythm the card used to have above and below the words. */
.auth-card {
  width: 100%;
  max-width: 26rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 2rem 0 1.75rem;
}
.auth-card.settings-card,
.auth-card.welcome-card { max-width: 36rem; }
body.privacy-page .page-main { align-items: flex-start; }
.auth-card.privacy-card { max-width: 40rem; }
.privacy-updated { color: var(--muted); font-size: 0.95rem; margin: 0 0 0.25rem; }
.privacy-card h2 { margin: 1.75rem 0 0.5rem; }
.privacy-card p { margin: 0.55rem 0 0; color: var(--ink-soft); }
.privacy-card ul { margin: 0.5rem 0 0 1.2rem; }
.privacy-card li { margin: 0.4rem 0; color: var(--ink-soft); }
.privacy-card a { text-decoration: underline; text-underline-offset: 3px; }
.privacy-card strong { color: var(--ink); }
.auth-title {
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--ink);
  text-wrap: balance;
}
.auth-title em, .auth-sub em { font-style: italic; font-weight: 400; }
.auth-sub { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.5rem; line-height: 1.55; }
.auth-sub + .auth-sub { margin-top: -0.85rem; }

/* Messages. The code sits on its own line, smaller, still AA. */
.auth-error, .auth-note {
  border-radius: 16px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  margin: 0 0 1.25rem;
  line-height: 1.45;
}
.auth-error { background: var(--danger-soft); color: var(--danger); }
.auth-note { background: var(--accent-soft); color: var(--ink); }
.auth-error-text { margin: 0; }
.auth-error-code { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.85rem; }

/* Fields. 48px tall, label tied to the input. */
.auth-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.4rem;
}
.auth-input {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--input-line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.auth-input[readonly] {
  background: var(--bg);
  color: var(--ink-soft);
}
.field-note {
  margin: -0.35rem 0 0.25rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.field-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.15rem;
}

/* Buttons. Primary is an ink pill. Secondary is an outline pill.
   Destructive is quiet red text, not a loud block. Heights are fixed
   so a label change does not move the column. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-primary:hover { background: #201e33; border-color: #201e33; color: #fff; }
.btn-secondary { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { background: var(--bg); border-color: #cfcfcf; }
.btn-block { width: 100%; }
.btn-text {
  background: none;
  border-color: transparent;
  color: var(--muted);
  min-height: 44px;
  padding: 0.4rem 0.2rem;
}
.btn-text:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.btn-danger {
  background: none;
  border-color: transparent;
  color: var(--danger);
  min-height: 44px;
  padding: 0.4rem 0.2rem;
  justify-content: flex-start;
}
.btn-danger:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-danger-outline {
  background: #fff;
  border-color: #e4c4c0;
  color: var(--danger);
}
.btn-danger-outline:hover { background: var(--danger-soft); }
.btn:disabled { cursor: not-allowed; opacity: 0.55; }
.stack-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.stack-actions .btn-block { align-self: stretch; }

/* Continue with Google. White pill, hairline border, the colour G.
   Busy keeps the same size: the mark swaps for a spinner, the label
   changes, the button does not grow. */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 48px;
  padding: 0 1.25rem;
  border-radius: 999px;
  border: 1px solid #dadce0;
  background: #fff;
  color: #1f1f1f;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.google-btn:hover { background: #f8f9fa; border-color: #c9ccd1; box-shadow: var(--shadow-sm); }
.google-btn:active { background: #f1f3f4; }
.google-btn:disabled:not(.is-busy) {
  color: #5f6368;
  background: #f8f9fa;
  border-color: #e4e4e4;
  box-shadow: none;
  cursor: not-allowed;
}
.google-btn.is-busy { cursor: progress; }
.google-btn-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.google-g, .google-spinner { position: absolute; inset: 0; }
.google-g { display: block; width: 18px; height: 18px; }
.google-spinner {
  display: none;
  box-sizing: border-box;
  border: 2px solid #dadce0;
  border-top-color: #1f1f1f;
  border-radius: 50%;
}
.google-btn.is-busy .google-g { display: none; }
.google-btn.is-busy .google-spinner {
  display: block;
  animation: google-spin 0.8s linear infinite;
}
@keyframes google-spin { to { transform: rotate(360deg); } }

/* Keyboard focus. Coral ring, 2px offset, on every control. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Settings sections. A quiet rule between them, not a pile of links. */
.section {
  margin-top: 1.6rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.section h2 { margin: 0 0 0.85rem; }
.section .auth-sub { margin-bottom: 0.9rem; }
.facts { margin: 0 0 1rem; }
.facts div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 0.75rem;
  padding: 0.45rem 0;
  font-size: 1rem;
}
.facts dt { color: var(--muted); }
.facts dd { margin: 0; text-transform: capitalize; }
.section-gap { margin-top: 0.85rem; }

/* Welcome questions. The choice is the whole row, easy to tap. */
.welcome-q { border: 0; padding: 0; margin: 0 0 1.25rem; }
.welcome-q legend {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 0.35rem;
  padding: 0;
}
.welcome-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.1rem 0;
  font-size: 1rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.welcome-option input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--ink);
  flex-shrink: 0;
}
.welcome-name { margin-top: 0.15rem; }
.welcome-skip { margin-top: 0.35rem; width: 100%; }

/* Plans. A wide column, not a card. Three options sit on the ground.
   A hairline separates them: vertical between the columns, horizontal
   when they stack. The price block keeps its height when the monthly
   and yearly figures swap, so the grid does not jump. */
.plans { width: min(56rem, 100%); }
.plans-head { margin-bottom: 1.25rem; }
.plans-current { margin: 0 0 0.75rem; color: var(--ink-soft); }
/* Space under the manage button when it sits in the page heading. */
.plans-head .btn { margin: 0 0 0.75rem; }
.bill-seg {
  display: inline-flex;
  gap: 0.35rem;
  margin: 0.25rem 0 0.4rem;
}
.bill-seg button {
  min-height: 44px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 0 1rem;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.bill-seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  margin-top: 1rem;
}
/* No fill, shadow, or radius. The first and last options meet the
   column edge, so "Plans" and "Free" share a left edge. Padding
   only keeps the words off the hairline between options. */
.plan-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 1.25rem;
}
.plan-card:first-child { padding-left: 0; }
.plan-card:last-child { padding-right: 0; }
.plan-card + .plan-card { border-left: 1px solid var(--line); }
.plan-card h2 {
  margin: 0 0 0.35rem;
  font-family: "Libre Caslon Display", "Libre Caslon Display Fallback", "Libre Caslon Text", Georgia, serif;
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}
/* The option is a column flex, which would stretch a child to the
   full column width. This pill stays only as wide as "Current plan".
   The pill is the current-plan marker. There is no outline box. */
.plan-badge {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  margin: 0 0 0.7rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.85rem;
}
.plan-offer { min-height: 4.6rem; }
.plan-copy { color: var(--ink-soft); margin: 0.35rem 0 0; }
.bill-price { margin: 0.15rem 0 0; font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.2; }
.bill-per, .bill-launch { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.95rem; }
.plan-card .btn { margin-top: auto; width: 100%; }
.plans-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-top: 1.25rem;
}

/* No motion when the person asked for none. The spinner becomes a
   still ring so the loading state is still visible. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .google-btn.is-busy .google-spinner {
    display: block;
    animation: none !important;
    border-color: #1f1f1f;
  }
}

@media (max-width: 800px) {
  .plans-grid { grid-template-columns: 1fr; }
  /* Stacked options. The hairline runs across, and the side padding
     drops so every line meets the same left edge as the heading.
     The page gutter (1.5rem, 24px) is that edge. */
  .plan-card,
  .plan-card:first-child,
  .plan-card:last-child {
    padding: 1.15rem 0;
    border-left: 0;
  }
  .plan-card:first-child { padding-top: 0; }
  .plan-card + .plan-card {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 640px) {
  /* The old card inset is gone. Header and page already inset
     1.5rem (24px on a phone). That is the left edge of the words,
     so the column adds no side padding of its own. */
  .auth-card, .auth-card.welcome-card, .auth-card.settings-card, .auth-card.privacy-card {
    padding: 1.5rem 0 1.25rem;
  }
  .auth-title { font-size: 1.7rem; }
  .page-main { padding-top: 1.75rem; }
}

/* Dark. stanage-theme.js sets data-theme on <html> before paint, from the
   shared stanage_theme cookie (.stanage.org) or the device. The ground and
   ink are the public site's Night colours, so moving between stanage.org,
   log.stanage.org and these pages keeps the same mode. Muted #a8a296 is
   about 7:1 on the ground. The Google button uses Google's own dark style. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12110e;
  --bg-deep: #171511;
  --surface: #1c1a16;
  --ink: #f4f1ea;
  --ink-soft: #ddd8cc;
  --muted: #a8a296;
  --line: rgba(244, 241, 234, 0.1);
  --line-strong: #3a362e;
  --input-line: #8a847a;
  --accent: #f2a46b;
  --accent-soft: #2a1f17;
  --danger: #f2857a;
  --danger-soft: #2c1714;
  --shadow-sm: 0 8px 24px #00000066;
}
html[data-theme="dark"] .site-header { background: rgba(18, 17, 14, 0.92); }
html[data-theme="dark"] .auth-input { background: var(--surface); }
html[data-theme="dark"] .btn-primary:hover { background: #ffffff; border-color: #ffffff; color: var(--bg); }
html[data-theme="dark"] .btn-secondary { background: var(--surface); }
html[data-theme="dark"] .btn-secondary:hover { background: var(--bg-deep); border-color: #57524a; }
html[data-theme="dark"] .btn-danger-outline { background: var(--surface); border-color: #5a2a24; }
html[data-theme="dark"] .google-btn { background: #131314; border-color: #8e918f; color: #e3e3e3; }
html[data-theme="dark"] .google-btn:hover { background: #1f1f20; border-color: #a7aaa8; }
html[data-theme="dark"] .google-btn:active { background: #28292a; }
html[data-theme="dark"] .google-btn:disabled:not(.is-busy) { background: #1f1f20; border-color: #3c3d3e; color: #8e918f; }
html[data-theme="dark"] .google-spinner { border-color: #5f6368; border-top-color: #e3e3e3; }

/* wordmark-org:begin */
/* wordmark-org: the organisation name, THESTANAGEPROJECT.
   Markup (one snippet everywhere, see docs/brand/wordmark-org.md):
     <span class="wordmark wm-org"><i>THE</i><b>STANAGE</b><i>PROJECT</i></span>
   STANAGE is bold. THE and PROJECT are italic at normal weight. Caps, no
   spaces, one colour (the colour of the text around it). Size, letter-spacing
   and font come from the surrounding .wordmark rule, so it fits any line.
   It uses <i> and <b>, not <em> and <strong>, so the older .wordmark em and
   .wordmark strong rules (accent colours, normal weight) never touch it.
   Edit docs/brand/wordmark-org.css, then run scripts/sync_wordmark_css.py. */
.wordmark.wm-org {
  text-transform: none;
  white-space: nowrap;
  font-variant-caps: normal;
  line-height: 1; /* the name never makes its line taller */
}
.wordmark.wm-org b {
  font-weight: 700;
  font-style: normal;
  letter-spacing: inherit;
  color: inherit;
}
.wordmark.wm-org i {
  font-weight: 400;
  font-style: italic;
  letter-spacing: inherit;
  line-height: 1;
  color: inherit;
}
/* wordmark-org:end */