/* Starling website: the shared skin. Tokens and font faces live in tokens.css (loaded first);
   the landing page adds home.css. The look is that of the original Starling landing page: a
   black ground with film grain, cream ink, Chakra Petch for headings, buttons and the small
   spaced labels, IBM Plex Sans for reading, IBM Plex Mono for numbers and notes, hairline
   borders. No third-party URLs and no inline styles anywhere (the Content-Security-Policy
   forbids both). */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
  margin: 0;
  background: var(--bg-page) radial-gradient(120% 80% at 50% 0%, #070706, #000000 58%);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; padding-top: var(--header-h); }
main:focus { outline: none; }
img, svg { max-width: 100%; height: auto; }
::selection { background: rgba(250, 248, 243, .25); }

/* The film grain over every page. Decorative; it never intercepts input.
   grain.png is a 300x300 1-bit tile (white specks on transparent, ~3 KB) built by the recipe in
   its own comment: independent 2px cells, so it repeats without a seam. */
.grain {
  position: fixed;
  inset: -60%;
  z-index: 90;
  pointer-events: none;
  opacity: .05;
  background-image: url("../img/grain.png");
  background-repeat: repeat;
  background-size: 300px 300px;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2%, 2%); }
  40% { transform: translate(2%, -1%); }
  60% { transform: translate(-1%, -2%); }
  80% { transform: translate(1%, 2%); }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: .01em;
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-3); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 600; }
h4 { font-size: var(--step-0); font-weight: 600; }
p, ul, ol, dl, table, pre { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.4em; }
strong, b { color: var(--text-primary); font-weight: 600; }

a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-color: var(--ui-border-strong);
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--text-primary); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

code, kbd {
  font-family: var(--font-mono);
  font-size: .85em;
  color: var(--text-primary);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}
kbd { border-bottom-width: 2px; white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: .92em; overflow-wrap: anywhere; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -200px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 var(--space-4);
  background: var(--button-bg);
  color: var(--button-fg);
  font: 600 .92rem/1.2 var(--font-display);
  letter-spacing: .02em;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible { top: var(--space-3); color: var(--button-fg); }

.wrap { width: min(92vw, var(--wrap)); margin-inline: auto; }
.narrow { width: min(92vw, 36rem); margin-inline: auto; }
.star-icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex: none; }

/* ---------- header ----------
   See-through at the top of a page; black glass with a hairline once the page has scrolled
   (site.js adds .scrolled). Without JavaScript it cannot know about scrolling, so it stays at
   the top of the page instead of following it. */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
}
.js .site-header { position: fixed; }
.site-header.scrolled, .site-header.menu-open {
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.header-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-4);
  min-height: calc(var(--header-h) - 1px);
  padding: 0 clamp(20px, 4vw, 44px);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  color: var(--text-primary);
  text-decoration: none;
}
.brand-wordmark { display: block; width: auto; height: 15px; }
.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0 14px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--radius-sm);
  font: 600 .8rem/1 var(--font-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; list-style: none; margin: 0; padding: 0; }
.site-nav a, .site-nav .nav-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 12px;
  color: var(--text-muted);
  font: 400 .9rem/1.2 var(--font-body);
  text-decoration: none;
  border-radius: var(--radius-sm);
  background: none;
  border: 0;
  cursor: pointer;
}
.site-nav a:hover, .site-nav .nav-button:hover { color: var(--text-primary); }
.site-nav a[aria-current="page"] { color: var(--text-primary); }
.site-nav .nav-cta {
  margin-left: 12px;
  padding: 0 16px;
  background: var(--button-bg);
  color: var(--button-fg);
  border: 1px solid var(--button-bg);
  font: 600 .92rem/1.2 var(--font-display);
  letter-spacing: .02em;
}
.site-nav .nav-cta:hover, .site-nav .nav-cta[aria-current="page"] { color: var(--button-fg); }
.site-nav .nav-cta:hover { box-shadow: 0 6px 30px var(--glow); }
.site-nav form { margin: 0; }

@media (max-width: 900px) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav { display: none; flex-basis: 100%; margin: 0; padding-bottom: var(--space-4); }
  .js .site-nav.is-open { display: block; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); padding-top: var(--space-2); }
  .js .site-nav a, .js .site-nav .nav-button { width: 100%; padding: 0 4px; font-size: 1rem; }
  .js .site-nav .nav-cta { margin: var(--space-3) 0 0; padding: 0 16px; justify-content: center; }
  .site-nav { margin-left: 0; }
  /* no JavaScript: the links wrap under the wordmark, so the page starts lower */
  html:not(.js) .site-nav { flex-basis: 100%; padding-bottom: var(--space-2); }
  html:not(.js) .site-nav .nav-cta { margin-left: 4px; }
  html:not(.js) main { padding-top: calc(var(--header-h) + 6.5rem); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--touch);
  padding: 10px 20px;
  border: 1px solid var(--button-bg);
  border-radius: var(--radius-sm);
  background: var(--button-bg);
  color: var(--button-fg);
  font: 600 .92rem/1.25 var(--font-display);
  letter-spacing: .02em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn:hover { color: var(--button-fg); box-shadow: 0 6px 30px var(--glow); }
.btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--ui-border-strong); }
.btn-secondary:hover { color: var(--text-primary); border-color: var(--text-muted); box-shadow: none; }
.btn-danger { background: transparent; color: var(--text-error); border-color: var(--text-error); }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger-fg); box-shadow: none; }
.btn-big { min-height: 58px; padding: 14px 30px; font-size: 1.05rem; border-radius: 10px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn.is-busy { cursor: progress; }
.link-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-link);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ui-border-strong);
  text-underline-offset: .22em;
  cursor: pointer;
}
.link-button:hover { color: var(--text-primary); text-decoration-color: currentColor; }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block: var(--space-4); }
.button-row form { margin: 0; }

/* A quiet pill: the secondary links under a section (docs, guides, policies). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-secondary);
  font: 600 .8rem/1.2 var(--font-display);
  letter-spacing: .03em;
  text-decoration: none;
}
.pill:hover { color: var(--text-primary); border-color: var(--deco-faint); background: var(--soft); }
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }

/* ---------- page furniture ---------- */
.eyebrow {
  display: block;
  margin: 0 0 var(--space-4);
  font: 600 .74rem/1.5 var(--font-display);
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.lead { font-size: var(--step-1); color: var(--text-muted); max-width: 58ch; }
.muted { color: var(--text-muted); }
.small { font-size: var(--step--1); }
.page-header { padding-block: var(--space-7) var(--space-5); }
.page-header .lead { margin-bottom: 0; }
.section { padding-block: var(--space-7); }
.section + .section { border-top: 1px solid var(--line-soft); }
.section-intro { max-width: 60ch; margin-bottom: var(--space-6); }

/* ---------- notices ---------- */
.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--deco-faint);
  background: var(--bg-raised);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin-block: var(--space-4);
  color: var(--text-muted);
  font-size: .95rem;
}
.notice > :last-child { margin-bottom: 0; }
.notice-title { font: 600 1rem/1.35 var(--font-display); letter-spacing: .01em; color: var(--text-primary); margin-bottom: var(--space-1); }
.notice-warning { background: var(--bg-warning); border-left-color: var(--text-warning); color: var(--text-secondary); }
.notice-error { background: var(--bg-error); border-left-color: var(--text-error); color: var(--text-secondary); }
.notice-success { background: var(--bg-success); border-left-color: var(--text-success); color: var(--text-secondary); }
.notice form { margin: var(--space-3) 0 0; }
.flash-list { list-style: none; padding: 0; margin: var(--space-4) auto 0; }
.flash-list > li { margin: 0 0 var(--space-2); }

.draft-banner {
  background: var(--bg-warning);
  border-block: 1px solid var(--text-warning);
  color: var(--text-primary);
  padding-block: var(--space-3);
  margin-top: var(--header-h);
}
.draft-banner p { margin: 0; font-size: .95rem; }
.draft-banner + main { padding-top: 0; }
mark.placeholder {
  background: var(--mark-bg);
  color: var(--mark-fg);
  font-family: var(--font-mono);
  font-size: .85em;
  padding: 0 .3em;
  border-radius: 3px;
}

/* ---------- cards: plans, panels, stats ---------- */
.plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-block: var(--space-5); }
ul.plans { list-style: none; padding: 0; }
.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
  padding: 24px;
}
.plan.is-current { border-color: var(--ui-border-strong); }
.plan h2, .plan h3 { font-size: 1.06rem; font-weight: 600; margin: 0; }
.plan-price { margin: 6px 0 0; font: 700 var(--step-5)/1 var(--font-display); letter-spacing: .01em; color: var(--text-primary); }
.plan-price .per { font: 400 .74rem/1 var(--font-mono); letter-spacing: .04em; color: var(--text-faint); }
/* A plan whose name is also its price (Free) prints the word once, in this line. The line the
   name would have filled is kept empty so prices and allowances stay level across the cards. */
.plan-price-only { margin-top: calc(1.06rem * 1.65 + 6px); }
.plan-allowance { margin: 0; color: var(--text-secondary); }
.plan ul { margin-block: var(--space-2); color: var(--text-muted); font-size: .92rem; }
.plan-action { margin-top: auto; padding-top: var(--space-3); }
.plan-action form { margin: 0; }
.plan-action .btn { width: 100%; }
.badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border-radius: 6px;
  padding: 4px 8px;
  font: 700 .64rem/1.2 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%);
  padding: clamp(20px, 3.2vw, 32px);
  margin-block: var(--space-5);
}
.panel > :last-child { margin-bottom: 0; }
.panel h2 { font-size: var(--step-2); font-weight: 600; }

.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin-block: var(--space-4); }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-block: var(--space-4); }
.stat { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent); padding: 16px 18px; }
.stat dt { font: 400 .74rem/1.4 var(--font-mono); letter-spacing: .04em; color: var(--text-faint); margin-bottom: 6px; text-wrap: balance; }
.stat dd { margin: 0; font: 600 var(--step-2)/1.25 var(--font-display); letter-spacing: .01em; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat dd .unit { font: 400 var(--step--1)/1 var(--font-body); color: var(--text-muted); }

/* ---------- faq ---------- */
.faq { max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 2px;
  cursor: pointer;
  list-style: none;
  font: 600 1.02rem/1.4 var(--font-display);
  letter-spacing: .01em;
  color: var(--text-secondary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--text-primary); }
.faq summary::after { content: "+"; flex: none; font: 400 1.05rem/1 var(--font-mono); color: var(--deco-faint); }
.faq details[open] summary { color: var(--text-primary); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { max-width: 66ch; color: var(--text-muted); font-size: .95rem; padding: 0 2px; }
.faq details > :last-child { padding-bottom: 20px; margin-bottom: 0; }

/* ---------- sidebar layouts (docs, account, admin) ---------- */
.layout-sidebar { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); padding-block: var(--space-6) var(--space-8); }
.sidenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sidenav a {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
}
.sidenav a:hover { color: var(--text-primary); background: var(--soft); }
.sidenav a[aria-current="page"] { color: var(--text-primary); background: var(--bg-raised); border-color: var(--ui-border-strong); }
.sidenav-title { font: 600 .74rem/1.5 var(--font-display); letter-spacing: .42em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 var(--space-3); }
@media (min-width: 960px) {
  .layout-sidebar { grid-template-columns: 232px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); }
  .sidenav { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
  .sidenav ul { display: block; }
  .sidenav li { margin-bottom: 2px; }
  .sidenav a { min-height: 38px; padding: 0 12px; border-color: transparent; border-radius: 6px; }
  .sidenav a[aria-current="page"] { border-color: transparent; background: var(--soft); box-shadow: inset 2px 0 0 var(--text-primary); }
}
.content > h1 { margin-bottom: var(--space-3); }
.prose { max-width: 74ch; }
.prose h2 { margin-top: var(--space-7); padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 1.5rem; }
.prose h3 { margin-top: var(--space-6); font-size: 1.1rem; }
.prose li { margin-block: 5px; }
.prose > .lead { margin-bottom: var(--space-6); padding-bottom: 28px; border-bottom: 1px solid var(--line); max-width: 64ch; }
.prose > .lead + h2 { margin-top: var(--space-6); }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: .9rem; }
.pager a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--text-muted); text-decoration: none; }
.pager a:hover { color: var(--text-primary); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin-block: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 0; }
caption { text-align: left; padding: var(--space-3) 14px; color: var(--text-muted); caption-side: top; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
th { color: var(--text-primary); font-weight: 600; font-size: .85rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--space-4); max-width: 32rem; margin-block: var(--space-4); }
.form.wide { max-width: 44rem; }
.field { display: grid; gap: 6px; }
.field label, .label { font: 600 .92rem/1.4 var(--font-display); letter-spacing: .02em; color: var(--text-primary); }
.hint { color: var(--text-muted); font-size: var(--step--1); margin: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
}
input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover, input[type="number"]:hover, input[type="search"]:hover, textarea:hover, select:hover { border-color: var(--text-muted); }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus, select:focus { border-color: var(--text-primary); }
textarea { min-height: 6rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:-webkit-autofill { -webkit-text-fill-color: var(--text-primary); box-shadow: 0 0 0 100px var(--bg-raised) inset; caret-color: var(--text-primary); }
[aria-invalid="true"] { border-color: var(--text-error) !important; border-width: 2px !important; }
.field-error { color: var(--text-error); font-weight: 600; font-size: .92rem; margin: 0; }
.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--touch); }
.checkbox input { flex: none; width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--text-primary); }
.checkbox label { font: 400 1rem/1.65 var(--font-body); letter-spacing: 0; color: var(--text-secondary); padding-block: 1px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin: 0; }
legend { padding: 0 var(--space-2); font: 600 .92rem/1.4 var(--font-display); letter-spacing: .02em; color: var(--text-primary); }
.error-summary {
  border: 1px solid var(--text-error);
  border-left-width: 3px;
  background: var(--bg-error);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  color: var(--text-primary);
}
.error-summary:focus { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
.error-summary-title { font: 600 1rem/1.35 var(--font-display); letter-spacing: .01em; margin: 0 0 var(--space-1); }
.error-summary ul { margin: 0; padding-left: 1.2em; }
.error-summary a { color: var(--text-error); text-decoration-color: currentColor; }
.form-footer { color: var(--text-muted); margin-bottom: var(--space-2); }
.form-footer a { display: inline-flex; align-items: center; min-height: var(--touch); }

/* ---------- account ---------- */
.meter { margin-block: var(--space-3) var(--space-4); }
.meter-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--text-primary); font-weight: 600; }
.meter-bar { display: block; width: 100%; height: 10px; border-radius: 999px; overflow: hidden; border: 1px solid var(--ui-border-strong); }
.meter-track { fill: var(--bg-raised); }
.meter-fill { fill: var(--ui-meter-fill); }
.meter-fill.is-high { fill: var(--text-warning); }
.meter-fill.is-full { fill: var(--text-error); }
.definition-list { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: var(--space-2) var(--space-5); }
.definition-list dt { color: var(--text-muted); }
.definition-list dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
@media (max-width: 480px) { .definition-list { grid-template-columns: minmax(0, 1fr); gap: 0; } .definition-list dd { margin-bottom: var(--space-3); } }
.item-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.item-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.item-list .item-main { min-width: 0; flex: 1 1 16rem; }
.item-list .item-main > * { margin: 0; }
.item-title { font: 600 1.02rem/1.4 var(--font-display); letter-spacing: .01em; color: var(--text-primary); }
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.copy-status { color: var(--text-success); font-size: var(--step--1); min-height: 1.5em; }

/* ---------- admin ---------- */
.health-ok { color: var(--text-success); font-weight: 600; }
.health-bad { color: var(--text-error); font-weight: 600; }
.health-warn { color: var(--text-warning); font-weight: 600; }
.filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-block: var(--space-4); }
.filter-form .field { flex: 1 1 16rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 34px 0 44px; color: var(--text-faint); font-size: .85rem; margin-top: var(--space-8); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.footer-brand { display: inline-flex; align-items: center; gap: 11px; min-height: var(--touch); color: var(--text-primary); text-decoration: none; }
.footer-brand .star-icon { width: 15px; height: 15px; }
.footer-brand img { display: block; width: auto; height: 10px; opacity: .9; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; padding: 0; margin: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--text-faint); text-decoration: none; }
.footer-links a:hover, .footer-links a[aria-current="page"] { color: var(--text-primary); }
.disclaimer { flex-basis: 100%; max-width: 78ch; margin: 0; }

/* ---------- motion, contrast modes, print ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .grain { animation: grain 9s steps(6) infinite; }
  .site-header { transition: background-color .4s, border-color .4s; }
  a, .site-nav a, .site-nav .nav-button, .sidenav a, .pill, .footer-links a, .faq summary { transition: color .25s, background-color .25s, border-color .25s, text-decoration-color .25s; }
  .btn, .site-nav .nav-cta { transition: transform .3s var(--ease), box-shadow .3s, color .25s, background-color .25s, border-color .25s; }
  .btn:hover:not([disabled]), .site-nav .nav-cta:hover { transform: translateY(-1px); }
  .faq summary::after { transition: transform .3s var(--ease); }
  input, textarea, select { transition: border-color .25s; }
}
/* The grain is the only endless animation on most pages. js/site.js sets html.anim-paused while
   the tab is in the background, so it costs nothing when nobody is looking. */
html.anim-paused .grain { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .grain { animation: none !important; }
}
@media (forced-colors: active) {
  .grain { display: none; }
  .btn, .nav-toggle, .sidenav a, .pill { border: 2px solid ButtonText; }
  .meter-bar { border-color: CanvasText; }
  .meter-track { fill: Canvas; }
  .meter-fill, .meter-fill.is-high, .meter-fill.is-full { fill: Highlight; }
  mark.placeholder { forced-color-adjust: none; }
}
@media print {
  .site-header, .site-footer, .skip-link, .sidenav, .button-row, .grain { display: none; }
  body { background: #ffffff; color: #000000; }
  main { padding-top: 0; }
  h1, h2, h3, h4, strong, b, a { color: #000000; }
}

/* ---------- single-task pages ----------
   Sign in, sign up, reset a password, confirm an email, approve a connection, the checkout
   return, an error. One decision per page, so the page is one card on an empty ground. The
   card is only a skin on the .narrow wrapper those pages already use. */
body.single main { padding-bottom: var(--space-8); }
body.single .narrow {
  width: min(92vw, 34rem);
  margin-top: clamp(var(--space-5), 6vh, var(--space-8));
  padding: clamp(22px, 4.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 58%), var(--bg-surface);
}
body.single .page-header { padding-block: 0 var(--space-5); }
body.single .page-header .lead { font-size: var(--step-0); }
body.single .form { max-width: none; margin-block: 0; }
body.single .narrow > :last-child { margin-bottom: 0; }
body.single .form + .form-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
body.single .form-footer + .form-footer { margin-top: calc(var(--space-2) * -1); }
/* Error and result pages: the links under the message read as a row of quiet pills. */
body.single .page-header .eyebrow { margin-bottom: var(--space-3); }
body.single .button-row { margin-bottom: 0; }
@media (max-width: 480px) {
  body.single .button-row .btn, body.single .button-row form { width: 100%; }
  body.single .button-row .btn { width: 100%; }
}

/* ---------- empty states ----------
   A list or table with nothing in it says so in its own box, so the page does not look broken. */
.empty {
  margin-block: var(--space-4);
  padding: clamp(22px, 4vw, 38px);
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--text-muted);
  text-align: center;
}
.empty > :last-child { margin-bottom: 0; }
.empty-title {
  margin: 0 0 var(--space-2);
  font: 600 1.02rem/1.4 var(--font-display);
  letter-spacing: .01em;
  color: var(--text-primary);
}
.empty .pill-row { justify-content: center; margin-top: var(--space-4); }

/* ---------- stat cards ----------
   The label may take one line or three; the value still sits on the same line across a row. */
/* 138px is chosen so two cards still fit inside a panel on a 375px screen (a 92vw wrap less
   the panel's padding leaves about 305px), which reads better than a single tall stack. */
.stats, .kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr)); }
.stat { display: flex; flex-direction: column; gap: 8px; }
.stat dt { margin-bottom: 0; }
.stat dd { margin-top: auto; }
/* A value that is words or a date, not a number: display size, not headline size. */
.stat-text dd { font-size: var(--step-1); line-height: 1.35; }

/* ---------- wide tables ----------
   A table wider than its column scrolls inside its own box. The box is a labelled region in the
   tab order (role=region tabindex=0 in the markup), so it needs a focus ring of its own; the
   cream edge shadows appear only while there is more table in that direction, with no JavaScript.
   site.js adds .can-scroll when it measures an overflow, which shows the written hint. */
.table-wrap {
  overscroll-behavior-x: contain;
  background:
    linear-gradient(to right, var(--bg-page), rgba(0, 0, 0, 0)) 0 0 / 28px 100% no-repeat local,
    linear-gradient(to left, var(--bg-page), rgba(0, 0, 0, 0)) 100% 0 / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--glow), rgba(0, 0, 0, 0)) 0 0 / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--glow), rgba(0, 0, 0, 0)) 100% 0 / 16px 100% no-repeat scroll;
}
.table-wrap:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.table-scroll-hint {
  display: none;
  margin: calc(var(--space-2) * -1) 0 var(--space-4);
  color: var(--text-faint);
  font: 400 var(--step--1)/1.5 var(--font-mono);
  letter-spacing: .02em;
}
.table-scroll-hint.is-on { display: block; }
/* Only the columns that are unreadable when broken refuse to wrap: figures, timestamps and
   machine values such as grant_credits or evt_1Abc. Everything else, including the prose
   tables in the documentation and the legal pages, wraps as before, because forcing every
   heading onto one line pushed a docs table 30px past its box on a phone and offered a scroll
   that led almost nowhere. These tables already scroll sideways, so a wider column is the
   cheaper trade than a stamp split over five lines. */
th.num, .table-wrap td.when, .table-wrap th.when { white-space: nowrap; }
.table-wrap td.mono { white-space: nowrap; overflow-wrap: normal; }

/* ---------- a button that is waiting for the server ----------
   site.js adds .is-busy on submit and leaves the button enabled, so its name and value still
   post. Without JavaScript nothing changes and the form still works. The ring is drawn over
   the label rather than beside it, so the button does not change size at the moment it is
   pressed. --btn-ink is the label's colour, which the ring has to name itself because the
   label's own colour is turned off while it waits. */
.btn { --btn-ink: var(--button-fg); }
.btn-secondary { --btn-ink: var(--text-primary); }
.btn-danger { --btn-ink: var(--text-error); }
.btn.is-busy { position: relative; color: transparent; cursor: progress; }
.btn.is-busy::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid var(--btn-ink);
  border-top-color: transparent;
  border-radius: 50%;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  .btn.is-busy::before { animation: btn-spin .8s linear infinite; }
}

/* ---------- dense sections (owner dashboard) ----------
   The dashboard stacks plain <section>s rather than cards: a hairline and a wider gap keep them
   apart without boxing every figure in. */
.content > section:not(.panel) + section:not(.panel) {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-soft);
}
.content > section:not(.panel) > h2:first-child { margin-bottom: var(--space-4); }
.content > h2 { margin-top: var(--space-7); }
.content > h2 + p { margin-top: calc(var(--space-2) * -1); }

/* ---------- account and admin detail ---------- */
.item-list .item-main .muted { margin-top: 4px; }
.item-list form { margin: 0; }
@media (max-width: 480px) {
  .item-list > li { align-items: flex-start; }
}
.definition-list dd .muted { color: var(--text-muted); }
.panel > .form:last-child, .panel > form:last-child { margin-bottom: 0; }
.panel h3 { margin-top: var(--space-6); }
.panel h3:first-of-type { margin-top: var(--space-4); }
.panel > p:first-of-type + .form { margin-top: var(--space-4); }

/* ---------- local time ----------
   A date restated in the reader's own zone reads as an ordinary date: no underline, no marker.
   Only two things change. It never breaks across lines, and site.js puts the UTC wording and
   the zone name in its title, so anyone comparing the page with the extension can see why they
   agree. (Some dates are the same in both zones and are left alone; decorating only the others
   would look like a mistake.) */
time[data-local-date], time[data-local-datetime] { white-space: nowrap; }

/* ---------- print ----------
   The account and billing pages are the ones people print or save as a PDF, and the screen
   palette is cream ink on black: on paper every figure came out invisible. Rather than chase
   each rule, the whole palette is restated for paper once, so anything built from the tokens
   comes out black on white without knowing about print at all. */
@media print {
  :root {
    --bg-page: #ffffff;
    --bg-surface: #ffffff;
    --bg-raised: #ffffff;
    --bg-input: #ffffff;
    --bg-warning: #ffffff;
    --bg-error: #ffffff;
    --bg-success: #ffffff;
    --text-primary: #000000;
    --text-secondary: #1c1c1c;
    --text-muted: #3f3f3f;
    --text-faint: #4f4f4f;
    --text-link: #000000;
    --text-error: #8c0d16;
    --text-success: #145c33;
    --text-warning: #6b4a00;
    --line: #cccccc;
    --line-soft: #dddddd;
    --deco-faint: #767676;
    --ui-border-strong: #8a8a8a;
    --ui-meter-fill: #333333;
    --soft: transparent;
    --glow: transparent;
    --button-bg: #ffffff;
    --button-fg: #000000;
  }
  .draft-banner, .notice form, .flash-region, .pager, .table-scroll-hint { display: none; }
  .panel, .stat, .plan, .table-wrap, .empty, .notice, section { break-inside: avoid; }
  .panel, .stat, .plan, .empty, .notice, body { background: #ffffff; }
  .table-wrap { overflow: visible; background: #ffffff; }
  .meter-track { fill: #eeeeee; }
  .meter-fill, .meter-fill.is-high, .meter-fill.is-full { fill: #333333; }
  a[href^="/"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #4f4f4f; }
  .site-nav a::after, .footer-links a::after, .sidenav a::after, .pill::after { content: none; }
}

/* ---------- forced colors ---------- */
@media (forced-colors: active) {
  /* The wordmark is a white-on-transparent image, and an image keeps its own colours in a
     forced-colours theme: on a light one it vanished into the page. A black plate behind it
     is readable under both the light and the dark high-contrast themes. */
  .brand-wordmark, .footer-brand img {
    forced-color-adjust: none;
    box-sizing: content-box;
    background: #000000;
    padding: 4px 7px;
    border-radius: 3px;
  }
  .empty { border: 1px dashed CanvasText; }
  .table-wrap { background: none; border: 1px solid CanvasText; }
  body.single .narrow { border: 1px solid CanvasText; }
  .btn.is-busy { color: ButtonText; }
  .btn.is-busy::before { border-color: ButtonText; border-top-color: transparent; }
}