/*
 * my.aiwithash.com: sign-in card and signed-in shell.
 *
 * The look is www.aiwithash.com's, so a customer crossing from the public site into their account
 * does not feel they have left: the dark indigo surfaces from that project's tailwind.config.js
 * (canvas / section / card / rail), the indigo-500 primary and slate text of its account pages,
 * Outfit for headings and Rubik for everything else.
 *
 * Both faces are the same self-hosted woff2 files the public site serves, copied from
 * www/httpdocs/assets/fonts. Outfit and Rubik are SIL Open Font License 1.1, which permits
 * redistribution and commercial use, so serving them from our own origin is licensed.
 */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/public/assets/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/public/assets/fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /*
   * The four surfaces are www's own tokens, verbatim, deepest first: canvas is the page, section
   * the band that sits on it, card the panel, rail the raised hover state. Named here as well as
   * mapped so the provenance survives the next person to open this file.
   */
  --canvas: #050510;
  --section: #0a0a1a;
  --card: #111128;
  --rail: #14142a;
  /* The inset well www uses behind inputs and code (.ak-input, .ak-token__value). */
  --well: #0a0a18;

  --ink: #f1f5f9;
  --ink-strong: #ffffff;
  --ink-soft: #94a3b8;
  --ink-faint: #64748b;
  --paper: var(--canvas);
  --surface: var(--card);
  --surface-soft: var(--rail);
  --line: #2a2a4a;
  --line-soft: rgba(99, 102, 241, 0.15);
  --line-hover: #4b4b7d;

  /* indigo-500 fills, indigo-400 for accent text, indigo-300 for hover — as www does it. */
  --accent: #6366f1;
  --accent-deep: #4f46e5;
  --accent-text: #818cf8;
  --accent-bright: #a5b4fc;
  --accent-soft: rgba(99, 102, 241, 0.12);
  --accent-line: rgba(99, 102, 241, 0.35);
  --focus-ring: #818cf8;
  --on-accent: #ffffff;

  --warn: #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.12);
  --warn-text: #fbbf24;
  --warn-line: rgba(245, 158, 11, 0.3);
  --info-soft: rgba(139, 92, 246, 0.12);
  --info-text: #c4b5fd;
  --danger-soft: rgba(239, 68, 68, 0.1);
  --danger-text: #fca5a5;
  --danger-line: rgba(239, 68, 68, 0.3);

  --shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 28px 90px rgba(0, 0, 0, 0.7);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 6px;
  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Rubik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --ease: 150ms ease;

  /* Native controls — scrollbars, the search field's clear button — must come up dark too. */
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

html {
  background: var(--paper);
}

body {
  background:
    radial-gradient(circle at 94% 4%, rgba(99, 102, 241, 0.16), transparent 24rem),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100vh;
}

/* One focus treatment everywhere: an indigo-400 ring, offset from the control so it reads on dark. */
.btn:focus-visible,
.link:focus-visible,
.avatar:focus-visible,
.topbar__brand:focus-visible,
.topbar__link:focus-visible,
.menu__link:focus-visible,
.tabs__link:focus-visible,
.pcard:focus-visible,
.back:focus-visible,
.org__current:focus-visible,
.org__option:focus-visible,
.viewas__current:focus-visible,
.viewas__option:focus-visible,
.preview-banner__exit:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------- sign-in card ---------- */

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* While a stored session is being resumed (boot.js) neither the card nor the shell is the truth
   yet, so both stay down and a quiet mark holds the page. The fade waits a beat so a fast resume
   goes straight to the dashboard without a flash of the loading state either. */
.resuming {
  display: none;
}

.is-resuming .stage,
.is-resuming .app {
  display: none;
}

.is-resuming .resuming {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--ink-faint);
  animation: resuming-in 0.3s ease 0.3s both;
}

.resuming__text {
  margin: 0;
  font-size: 0.9rem;
}

@keyframes resuming-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.card__head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 24px;
}

.card__mark {
  display: block;
  border-radius: 50%;
}

.card__eyebrow {
  margin: 0;
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
}

.step {
  margin: 0;
}

.field__label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field__input {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--ease), box-shadow var(--ease);
}

.field__input::placeholder {
  color: var(--ink-faint);
}

.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

textarea.field__input {
  border-radius: var(--radius-md);
}

.field__input--code {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.5em;
  text-align: center;
}

/* Buttons are www's: indigo-500 fill, white label, a 6px corner, darkening to indigo-600 on hover. */
.btn {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 18px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--ease), background-color var(--ease), border-color var(--ease), color var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn--ghost {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.btn--ghost:hover {
  color: var(--accent-text);
  background: var(--surface);
  border-color: var(--accent-text);
}

.btn--inline {
  display: inline-block;
  width: auto;
}

.link {
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-text);
  background: none;
  border: 0;
  cursor: pointer;
  text-underline-offset: 2px;
}

.link:hover {
  text-decoration: underline;
}

.link:disabled {
  color: var(--ink-faint);
  cursor: default;
  text-decoration: none;
}

.link--block {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.hint {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.hint--lead {
  margin: 0 0 14px;
  font-size: 0.84rem;
}

.hint__strong {
  color: var(--ink);
  font-weight: 600;
}

.message {
  margin: 10px 0 0;
  font-size: 0.8rem;
  font-weight: 500;
}

.message--error {
  color: var(--danger-text);
}

.message--info {
  color: var(--accent-text);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- signed-in shell ---------- */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 78px;
  padding: 12px clamp(18px, 3vw, 42px);
  background: rgba(10, 10, 26, 0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}

.topbar__brand .card__mark {
  border-radius: 50%;
}

.search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 460px;
  margin: 0 0 0 auto;
}

.search__input {
  flex: 1;
  min-width: 0;
  background: rgba(10, 10, 24, 0.78);
}

.search__go {
  flex: none;
  width: auto;
  margin-top: 0;
}

.topbar__end {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  background: rgba(10, 10, 24, 0.78);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: transform var(--ease), border-color var(--ease), color var(--ease);
}

.topbar__link:hover {
  transform: translateY(-1px);
  color: var(--accent-text);
  border-color: var(--accent-text);
}

.account {
  position: relative;
}

/* The avatar is the brand mark: an indigo disc with the initials set in Outfit. */
.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--on-accent);
  background: var(--accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--ease);
}

.avatar:hover {
  transform: translateY(-1px);
}

.account__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 270px;
  max-width: calc(100vw - 32px);
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}

.account__name,
.account__email {
  margin: 0;
  overflow-wrap: anywhere;
}

.account__name {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
}

.account__email {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.search-message {
  margin: 0;
  padding: 10px clamp(18px, 3vw, 42px);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--warn-text);
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn-line);
}

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
}

.side {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 30px 0 30px clamp(18px, 3vw, 42px);
}

.side .notice {
  margin: 0 18px 0 0;
}

/* ---------- organisation selector ---------- */

.org {
  position: relative;
  padding-right: 18px;
}

/* The brand block: a tracked indigo eyebrow over a disc and the organisation's name in Outfit. */
.org__label {
  margin: 0 0 10px;
  color: var(--accent-text);
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.org__switch {
  position: relative;
}

.org__current {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px 10px 10px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: border-color var(--ease), box-shadow var(--ease);
}

button.org__current {
  cursor: pointer;
}

button.org__current:hover,
.org__current.is-open {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.org__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.org__text {
  display: block;
  flex: 1;
  min-width: 0;
}

.org__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.org__hint {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

/* The chevron is a rotated corner that flips when the list opens. */
.org__caret {
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 4px 0;
  color: var(--accent-text);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease, margin 160ms ease;
}

.org__current.is-open .org__caret {
  margin: 4px 4px 0 0;
  transform: rotate(225deg);
}

.org__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 25;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}

.org__option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--ease);
}

.org__option .org__mark {
  width: 34px;
  height: 34px;
  font-size: 0.78rem;
  color: var(--accent-text);
  background: var(--accent-soft);
}

.org__option .org__name {
  font-size: 0.98rem;
}

.org__option:hover {
  background: var(--surface-soft);
}

.org__option[aria-current='true'] {
  background: var(--accent-soft);
}

.org__option[aria-current='true'] .org__mark {
  color: var(--on-accent);
  background: var(--accent);
}

/* ---------- user switcher (staff preview) ---------- */

/*
 * Sits directly under the organisation selector and borrows its shape, so the pair read as one
 * control: who you are looking at, and who you are looking as. Amber throughout, never indigo —
 * indigo is the ordinary state of this account, and previewing is not ordinary.
 */
.viewas {
  position: relative;
  padding-right: 18px;
  margin-top: -12px;
}

.viewas__label {
  margin: 0 0 8px;
  color: var(--warn-text);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.viewas__switch {
  position: relative;
}

.viewas__current {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  color: var(--ink);
  text-align: left;
  background: var(--surface);
  border: 1px dashed var(--line-hover);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--ease), background-color var(--ease);
}

.viewas__current:hover,
.viewas__current.is-open {
  border-color: var(--warn);
}

.viewas__current.is-previewing {
  color: var(--warn-text);
  background: var(--warn-soft);
  border-style: solid;
  border-color: var(--warn-line);
}

.viewas__current .org__caret {
  color: var(--warn-text);
}

.viewas__current.is-open .org__caret {
  margin: 4px 4px 0 0;
  transform: rotate(225deg);
}

.viewas__text {
  display: block;
  flex: 1;
  min-width: 0;
}

.viewas__name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.viewas__hint {
  display: block;
  margin-top: 1px;
  color: var(--ink-soft);
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

.viewas__current.is-previewing .viewas__hint {
  color: var(--warn-text);
}

.viewas__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 24;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
}

.viewas__list .notice {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.78rem;
}

.viewas__list .notice + .viewas__options,
.viewas__list .notice + .notice {
  margin-top: 8px;
}

.viewas__status {
  margin: 0;
  padding: 10px 12px;
  color: var(--ink-faint);
  font-size: 0.78rem;
}

.viewas__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
}

.viewas__option:hover {
  background: var(--surface-soft);
}

.viewas__option[aria-current='true'] {
  background: var(--warn-soft);
  color: var(--warn-text);
}

.viewas__option:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* "Back to myself" is the way out, so it leads and is set apart from the people below it. */
.viewas__option--self {
  margin-bottom: 8px;
  padding-bottom: 12px;
  color: var(--warn-text);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
}

.viewas__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--warn-text);
  background: var(--warn-soft);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ---------- viewing-as banner ---------- */

/*
 * Full width, directly under the top bar, and amber against an indigo page: the one thing on screen
 * that cannot be mistaken for the ordinary account. It stays put while the shell is previewing.
 */
.preview-banner {
  position: sticky;
  top: 78px;
  z-index: 19;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  padding: 12px clamp(18px, 3vw, 42px);
  color: var(--warn-text);
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn-line);
  backdrop-filter: blur(14px);
}

.preview-banner__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  min-width: 0;
  font-size: 0.86rem;
}

.preview-banner__flag {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.preview-banner__who {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-strong);
  overflow-wrap: anywhere;
}

.preview-banner__role {
  padding: 2px 9px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(245, 158, 11, 0.18);
  border-radius: 999px;
}

.preview-banner__exit {
  min-height: 34px;
  margin-left: auto;
  padding: 0 14px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--canvas);
  background: var(--warn-text);
  border: 1px solid var(--warn-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--ease), background-color var(--ease);
}

.preview-banner__exit:hover {
  transform: translateY(-1px);
  background: var(--warn);
}

.preview-banner__exit:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

/* The shell itself reads as borrowed: an amber edge where the top bar meets the page. */
.app.is-previewing .topbar {
  border-bottom: 3px solid var(--warn);
}

/* Every "you cannot write this" note belongs to the preview, so it wears the preview's colour
   rather than the page's indigo — and amber, not red: nothing has gone wrong. */
.notice[data-readonly='preview'] {
  color: var(--warn-text);
  background: var(--warn-soft);
  border-color: var(--warn-line);
}

/* ---------- menu ---------- */

.menu__section + .menu__section {
  margin-top: 22px;
}

.menu__heading {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__status {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/*
 * Muted bold labels that turn indigo, with an amber bar on the current item. The bar runs down the
 * left edge here, so those corners stay square; only the right is rounded.
 */
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-right: 18px;
  padding: 9px 14px 9px 13px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: color var(--ease), background-color var(--ease), border-color var(--ease);
}

.menu__link:hover {
  color: var(--accent-text);
  background: rgba(99, 102, 241, 0.08);
}

.menu__link.is-active {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-left-color: var(--warn);
}

.menu__count {
  min-width: 22px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  color: var(--warn-text);
  background: var(--warn-soft);
  border-radius: 999px;
}

/* ---------- main panel ---------- */

.content {
  min-width: 0;
  max-width: 1180px;
  padding: 44px clamp(18px, 3vw, 42px) 80px;
}

.view__head {
  margin-bottom: 8px;
}

/* The document hero: the organisation in indigo Outfit above a large, tightly set Outfit title. */
.view__eyebrow {
  margin: 0 0 0.3em;
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.view__title {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.view__lead {
  max-width: 640px;
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.notice {
  margin: 24px 0 0;
  padding: 16px 20px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.notice--loading {
  padding: 0;
  color: var(--ink-faint);
  background: none;
  border: 0;
}

/*
 * The one loading indicator (app.js loading()/spinner()). The block stays invisible for its first
 * 150ms, so an answer that comes back quickly never flashes a spinner. The words are for screen
 * readers; the reduced-motion rules at the end of this file show them beside a still ring instead.
 */
.loading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  color: var(--ink-faint);
  font-size: 0.86rem;
  animation: loading-in 200ms ease 150ms both;
}

.loading__spinner {
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--line);
  border-top-color: var(--accent-text);
  border-radius: 50%;
  animation: loading-spin 0.8s linear infinite;
}

.loading__text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes loading-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes loading-spin {
  to { transform: rotate(360deg); }
}

.notice--empty {
  padding: 40px 28px;
  text-align: center;
  background: transparent;
  border-style: dashed;
}

.notice--unavailable {
  color: var(--warn-text);
  background: var(--warn-soft);
  border-color: var(--warn-line);
}

.notice--not-found,
.notice--error {
  color: var(--danger-text);
  background: var(--danger-soft);
  border-color: var(--danger-line);
}

.notice--info {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.side .notice--unavailable,
.side .notice--error,
.side .notice--not-found {
  padding: 12px 14px;
  font-size: 0.8rem;
}

/* Admin placeholder: a deliberately empty, clearly drawn box. */
.placeholder {
  display: grid;
  place-items: center;
  min-height: 260px;
  margin-top: 32px;
  padding: 32px;
  background: rgba(17, 17, 40, 0.55);
  border: 2px dashed var(--line-hover);
  border-radius: var(--radius-md);
}

.placeholder__label {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.back::before {
  content: '\2190';
}

.back:hover {
  text-decoration: underline;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 18px 0 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Metadata pills: uppercase, tracked, tinted by state against the dark card. */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border-radius: 999px;
}

.badge--issued,
.badge--draft {
  color: var(--warn-text);
  background: var(--warn-soft);
}

.badge--accepted,
.badge--signed,
.badge--included {
  color: var(--accent-text);
  background: var(--accent-soft);
}

.badge--withdrawn,
.badge--expired {
  color: var(--danger-text);
  background: var(--danger-soft);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr));
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

/* Cards are www's .ak-section: the card surface, an indigo hairline, a 12px radius, Outfit title. */
.pcard,
.doc,
.review,
.acceptance,
.question,
.summary {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.pcard {
  display: block;
  height: 100%;
  padding: 22px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}

.pcard:hover {
  border-color: var(--line-hover);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.pcard__title {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
}

.pcard .meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

/* Tabs: underlined labels with an amber bar on the current one. */
/* The hairline is an inset shadow, not a border, so the active bar can overlay it from inside the
   box: anything past the padding edge counts as overflow and summoned a vertical scrollbar.
   Tabs that don't fit a narrow screen swipe sideways, with no scrollbar drawn over them. */
.tabs {
  display: flex;
  gap: 4px;
  margin: 30px 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: inset 0 -1px 0 var(--line);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs__link {
  position: relative;
  flex: 0 0 auto;
  padding: 14px 15px 13px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-decoration: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--ease);
}

.tabs__link::after {
  content: '';
  position: absolute;
  right: 15px;
  bottom: 0;
  left: 15px;
  height: 3px;
  background: transparent;
  border-radius: 3px 3px 0 0;
  transition: background-color var(--ease);
}

.tabs__link:hover,
.tabs__link.is-active {
  color: var(--accent-text);
}

.tabs__link.is-active::after {
  background: var(--warn);
}

/* display:none, not a visually-hidden clip, so screen readers hear one label per tab. */
.tabs__label--short {
  display: none;
}

.tabpanel {
  margin-top: 32px;
}

.tabpanel > .notice:first-child {
  margin: 0 0 24px;
}

/* ---------- Markdown rendered from the API ---------- */

.prose {
  max-width: 72ch;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  margin: 1.6em 0 0.5em;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink-strong);
}

.prose h1 {
  font-size: 2rem;
}

.prose h2 {
  font-size: 1.6rem;
}

.prose h3,
.prose h4 {
  font-size: 1.2rem;
  font-weight: 600;
}

.prose a {
  color: var(--accent-text);
  font-weight: 500;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li + li {
  margin-top: 4px;
}

.prose code {
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--info-text);
  background: var(--well);
  border-radius: 5px;
}

.prose pre {
  padding: 14px 16px;
  overflow-x: auto;
  background: var(--well);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

.prose pre code {
  padding: 0;
  color: inherit;
  background: none;
}

/* A straight bar gets straight corners. */
.prose blockquote {
  margin: 1.2em 0;
  padding: 10px 18px;
  color: var(--ink-soft);
  background: var(--warn-soft);
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Wide tables scroll inside themselves so the page never scrolls sideways. */
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  font-size: 0.88rem;
  border-collapse: collapse;
}

.prose th,
.prose td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.prose th {
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prose img {
  max-width: 100%;
  height: auto;
}

.prose--plain {
  white-space: pre-wrap;
}

/* ---------- Terms ---------- */

.doc {
  padding: 24px;
}

.doc + .doc {
  margin-top: 16px;
}

.doc__title {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
}

.doc__body {
  margin-top: 18px;
  padding-top: 16px;
  font-size: 0.92rem;
  border-top: 1px solid var(--line-soft);
}

.doc__download {
  margin-top: 18px;
}

.doc__download .btn {
  margin-top: 0;
}

/* Heads the Read tab and each terms document's paper, so the gap belongs below it rather than above. */
.doc__download--lead {
  margin: 0 0 24px;
}

/* In a terms card it follows the status and sign hint rather than the tab bar, so it needs its own gap above. */
.doc .doc__download--lead {
  margin-top: 16px;
}

/* ---------- Authorise ---------- */

/* .btn is built for <button>, which centres its label itself; a link needs flex to do the same and
   loses the underline so it reads as the one action on the card. */
.authorise__link {
  display: inline-flex;
  align-items: center;
  margin-top: 20px;
  text-decoration: none;
}

.authorise__link:hover {
  color: var(--on-accent);
}

/* ---------- Document paper ---------- */

/* Ash wants the proposal and the terms to read as documents, so their rendered text sits on a
   white sheet. Every colour .prose takes from the dark theme is overridden here. The sheet uses two
   classes to outrank .prose and .doc__body; the element rules tie with .prose's, so this block must
   stay after them. */
.prose.doc-paper {
  max-width: 820px;
  padding: 44px 52px;
  font-size: 1rem;
  color: #111;
  background: #fff;
  border: 1px solid #d4d4d8;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.doc-paper h1,
.doc-paper h2,
.doc-paper h3,
.doc-paper h4,
.doc-paper h5,
.doc-paper h6 {
  color: #111;
}

.doc-paper a {
  color: #1d4ed8;
  text-decoration: underline;
}

.doc-paper code {
  color: #111;
  background: #f1f1f4;
}

.doc-paper pre {
  color: #111;
  background: #f6f6f8;
  border-color: #e4e4e7;
}

/* Keeps the inherited square left corners; only the colours change to suit white. */
.doc-paper blockquote {
  color: #333;
  background: #f6f6f8;
  border-left-color: #a1a1aa;
}

.doc-paper th,
.doc-paper td {
  border-bottom-color: #d4d4d8;
}

.doc-paper th {
  color: #111;
  background: #f4f4f5;
}

.doc-paper hr {
  margin: 2em 0;
  border: 0;
  border-top: 1px solid #d4d4d8;
}

@media (max-width: 719px) {
  .prose.doc-paper {
    padding: 24px 18px;
  }
}

/* ---------- Make your choices ---------- */

.choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
  align-items: start;
}

.choices__form > .notice:first-child {
  margin: 0 0 24px;
}

.part + .part {
  margin-top: 36px;
}

/* Section heading: an Outfit title over a hairline rule. */
.part__title {
  margin: 0;
  padding-bottom: 12px;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  border-bottom: 1px solid var(--line);
}

.part__summary {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.group {
  min-width: 0;
  margin: 16px 0 0;
  padding: 10px 20px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.group__legend {
  padding: 3px 10px;
  color: var(--accent-text);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent-soft);
  border-radius: 999px;
}

.group > .hint {
  margin: 4px 0;
}

.choice {
  padding: 16px 0;
  border-top: 1px solid var(--line-soft);
}

.part > .choice {
  padding: 18px 20px;
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.group > .hint + .choice,
.group > .group__legend + .choice {
  border-top: 0;
}

.choice__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.choice__control {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.choice__input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.choice__input:disabled,
.choice__input:disabled + .choice__title {
  cursor: default;
}

.choice__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-strong);
}

.choice__price {
  margin: 8px 0 0;
  padding: 0 0 0 28px;
  font-size: 0.84rem;
  color: var(--ink-soft);
  list-style: none;
}

.choice__price li:first-child {
  color: var(--accent-text);
  font-weight: 600;
}

.choice__text,
.choice__caveat,
.choice__subhead,
.choice > .hint {
  padding-left: 28px;
}

.choice__text,
.choice__caveat {
  margin-top: 6px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.choice__caveat {
  color: var(--ink-faint);
}

.choice__subhead {
  margin: 12px 0 0;
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The price panel carries the weight of a hero statistic: the one figure that matters. */
.summary {
  position: sticky;
  top: 102px;
  padding: 22px;
  border-color: var(--accent-line);
  box-shadow: var(--shadow);
  transition: border-color var(--ease);
}

.summary__title {
  margin: 0;
  color: var(--accent-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.summary__figures {
  transition: opacity var(--ease);
}

.summary.is-pending .summary__figures {
  opacity: 0.5;
}

.summary.is-stale {
  border-color: var(--danger-line);
  border-style: dashed;
}

.summary.is-stale .summary__figures {
  opacity: 0.6;
}

.summary.is-stale .summary__figures::before {
  content: 'Out of date';
  display: inline-flex;
  margin-top: 12px;
  padding: 3px 10px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--danger-text);
  background: var(--danger-soft);
  border-radius: 999px;
}

.summary__status {
  margin: 12px 0 0;
  font-size: 0.82rem;
  font-weight: 500;
}

.summary__status p {
  margin: 0;
}

.summary__status .btn {
  min-height: 34px;
  margin-top: 8px;
  padding: 0 14px;
  font-size: 0.78rem;
}

/*
 * Out of the flow, in the title row: in the flow it pushed the figures down for every price update
 * and let them jump back when the answer came. Held back 150ms like the other loading states.
 */
.summary__status--pending {
  position: absolute;
  top: 18px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--accent-text);
  animation: loading-in 200ms ease 150ms both;
}

.summary__status--pending .loading__spinner {
  width: 16px;
  height: 16px;
}

.summary__status--error {
  color: var(--danger-text);
}

.summary__table {
  width: 100%;
  margin-top: 14px;
  font-size: 0.84rem;
  border-collapse: collapse;
}

.summary__table th {
  padding: 7px 8px 7px 0;
  font-weight: 500;
  text-align: left;
  vertical-align: top;
  color: var(--ink);
}

.summary__amount {
  padding: 7px 0;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.summary__lines tr + tr th,
.summary__lines tr + tr td {
  border-top: 1px solid var(--line-soft);
}

.summary__detail {
  display: block;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.summary__totals {
  border-top: 1px solid var(--line);
}

.summary__total th,
.summary__total td {
  padding-top: 10px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-text);
}

.summary__total .summary__detail {
  font-family: var(--font-ui);
  font-weight: 500;
}

.summary__total--indicative th,
.summary__total--indicative td {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---------- Ask Ash anything ---------- */

.thread__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.question {
  padding: 20px 22px;
}

.question + .question {
  margin-top: 14px;
}

.question__body {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.question .meta {
  margin-top: 8px;
  font-size: 0.74rem;
}

.answer {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 12px;
}

.ask {
  max-width: 640px;
  margin-top: 28px;
}

.ask__input {
  min-height: 110px;
  resize: vertical;
}

/* ---------- Book a call ---------- */

/* Sits above the thread so it is seen before a long question history pushes it off screen. */
.book {
  max-width: 640px;
  margin-bottom: 28px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.book__title {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}

.book__upcoming,
.book__done {
  margin: 14px 0 0;
  padding: 10px 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
}

.book .notice[data-readonly='preview'] {
  margin-top: 14px;
}

/* Open, the toggle reads "Cancel", so it steps back to a secondary button and leaves
   "Confirm booking" as the one filled button in the section. */
.book.is-open .book__toggle {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.book.is-open .book__toggle:hover {
  color: var(--accent-text);
  border-color: var(--accent-text);
}

/* The script opens and closes the panel with .is-open; closed, only the button shows. */
.book:not(.is-open) .book__panel {
  display: none;
}

.book__panel {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}

.book__times-set,
.book__contact {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.book__times-set {
  margin-top: 18px;
}

/* A legend's default side padding knocks its label 2px right of the other labels in the panel. */
.book__times-set > legend,
.book__contact > legend {
  padding: 0;
}

.book__days,
.book__times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Days and times share one chip look so the two steps read as one picker. */
.book__day,
.book__slot-time {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  font: inherit;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink);
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}

.book__day {
  flex: none;
}

.book__day:hover,
.book__slot:hover .book__slot-time {
  border-color: var(--line-hover);
}

.book__day[aria-pressed='true'],
.book__slot-input:checked + .book__slot-time {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

.book__day:focus-visible,
.book__slot-input:focus-visible + .book__slot-time {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.book__slot {
  position: relative;
  cursor: pointer;
}

/* The native radio stays in the page for keyboard and screen readers; the time beside it is what shows. */
.book__slot-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* With no times to pick there is nothing to book, so the rest of the form goes too. While the
   first answer is out the rest waits as well, so the whole form arrives in one paint. */
.book__panel--empty .book__fields,
.book__panel--loading .book__fields {
  display: none;
}

.book__when {
  position: relative;
}

/* Sits where the picker will, with the height of the day label and one row of day chips, so the
   picker takes over the spinner's space rather than growing out of a thin line. */
.book__notice {
  margin: 0;
}

.book__notice.notice--loading {
  min-height: 72px;
}

/* A refresh keeps the old picker underneath, dimmed and out of reach, with the spinner over it. */
.book__when.is-refreshing .book__days,
.book__when.is-refreshing .book__times-set {
  opacity: 0.35;
  pointer-events: none;
}

.book__notice--over.notice--loading {
  position: absolute;
  inset: 0;
  justify-content: center;
  min-height: 0;
}

.book__fields {
  margin-top: 22px;
}

.book__contact-option {
  padding: 6px 0;
}

.book__contact-title {
  font-size: 0.92rem;
  color: var(--ink);
}

.book__phone,
.book__goals-field {
  margin-top: 16px;
}

.book__goals {
  min-height: 80px;
  resize: vertical;
}

/* ---------- Agree and Sign ---------- */

.review,
.acceptance {
  padding: 24px;
}

/* The accepted record is tinted indigo throughout — the settled, agreed state. */
.acceptance {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

.acceptance .section__title {
  color: var(--accent-text);
}

.section__title {
  margin: 0;
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.section__subtitle {
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.facts {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 0 18px;
  margin: 16px 0 0;
  font-size: 0.9rem;
}

.facts dt,
.facts dd {
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.facts dt {
  color: var(--ink-soft);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.plain-list {
  margin: 0;
  padding-left: 1.1em;
}

/* The signing form sits in the same tinted panel as the accepted record. */
.sign {
  max-width: 600px;
  margin-top: 24px;
  padding: 22px 24px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-md);
}

.sign .field__input {
  background: var(--well);
}

.confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  cursor: pointer;
}

.confirm__input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

/* Purchase order numbers sit above the signature, each carrying its own inline error. */
.po {
  margin-bottom: 18px;
}

.po .hint,
.po .message {
  margin-top: 6px;
}

.field__input.is-invalid,
.field__input.is-invalid:focus {
  border-color: var(--danger-line);
}

/* A conditional document as signed: its own heading, file and paper inside the accepted record. */
.signed-terms {
  margin-top: 24px;
}

.signed-terms .doc__download--lead {
  margin: 12px 0 0;
}

/* ---------- Adobe Sign ---------- */

/* How to sign sits above the signing panel as a choice group, at the panel's width. */
.sign-method {
  max-width: 600px;
  margin-top: 24px;
  padding-bottom: 10px;
}

.sign-method__option {
  padding: 10px 0;
}

/* The script marks which route is chosen; each route shows only its own controls. */
.sign--adobe .sign__onpage,
.sign:not(.sign--adobe) .sign__adobe {
  display: none;
}

.sign__adobe-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
}

.pending__lead {
  margin: 10px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}

.request-docs {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.request-docs__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 0;
  font-size: 0.9rem;
  border-top: 1px solid var(--line-soft);
}

.request-docs__item .doc__download,
.pending__cancel .btn,
.acceptance__method + .doc__download .btn {
  margin-top: 0;
}

.pending__cancel {
  margin-top: 22px;
}

/* The second press withdraws the request, so the armed button reads as the destructive one. */
.btn--ghost.is-armed,
.btn--ghost.is-armed:hover {
  color: var(--danger-text);
  background: var(--danger-soft);
  border-color: var(--danger-line);
}

.upload .field__label {
  margin-top: 16px;
}

.field__input--file {
  padding: 9px 12px;
}

.acceptance__method {
  margin: 8px 0 0;
  font-weight: 600;
  color: var(--ink);
}

.acceptance__method + .doc__download {
  margin-top: 12px;
}

/* ---------- responsive ---------- */

@media (max-width: 959px) {
  .choices {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Relative rather than static: it no longer sticks, but the pending line still sits inside it. */
  .summary {
    position: relative;
  }
}

@media (max-width: 719px) {
  .tabs__label--full {
    display: none;
  }

  .tabs__label--short {
    display: inline;
  }

  .topbar {
    position: static;
    flex-wrap: wrap;
    gap: 10px 12px;
    min-height: 0;
    padding: 12px 16px;
  }

  .topbar__brand {
    font-size: 1.1rem;
  }

  .topbar__end {
    margin-left: auto;
  }

  .search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    margin: 0;
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .side {
    gap: 14px;
    padding: 18px 0 0;
    border-bottom: 1px solid var(--line);
  }

  .org {
    padding: 0 16px;
  }

  /* The top bar stops sticking at this width, so the banner sticks to the page instead. */
  .preview-banner {
    top: 0;
    padding: 10px 16px;
  }

  .viewas {
    margin-top: -6px;
    padding: 0 16px;
  }

  .side .notice {
    margin: 0 16px 14px;
  }

  /* Exactly a menu link's height (its padding, bottom bar and one line), so the content under the
     row stays put when the items replace the spinner. */
  .menu__status {
    box-sizing: border-box;
    min-height: calc(25px + 0.86rem * 1.55);
    padding: 0 16px;
  }

  /* One scrolling row on narrow screens; the accent bar moves to the bottom edge. */
  .menu {
    display: flex;
    overflow-x: auto;
    padding: 0 6px;
    scrollbar-width: thin;
  }

  .menu__section,
  .menu__list {
    display: flex;
  }

  .menu__section + .menu__section {
    margin-top: 0;
  }

  .menu__heading {
    display: none;
  }

  .menu__link {
    margin-right: 0;
    padding: 12px 11px 10px;
    white-space: nowrap;
    border-left: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
  }

  .menu__link.is-active {
    background: transparent;
    border-bottom-color: var(--warn);
  }

  .content {
    padding: 28px 16px 56px;
  }

  .view__eyebrow {
    font-size: 0.92rem;
  }

  .view__title {
    font-size: 2.35rem;
  }

  .facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .facts dt {
    padding-bottom: 0;
  }

  .facts dd {
    padding-top: 4px;
    border-top: 0;
  }

  .review,
  .acceptance,
  .doc,
  .sign {
    padding: 18px;
  }

  .part > .choice,
  .group {
    padding-right: 14px;
    padding-left: 14px;
  }

  .placeholder {
    min-height: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  /* No fade: a zero-length animation still honours the 150ms delay, so a quick answer still never flashes it. */
  .loading,
  .summary__status--pending {
    animation-duration: 0s;
  }

  /* A still ring cannot say "working" on its own, so it is drawn whole and the words show beside it. */
  .loading__spinner {
    animation: none;
    border-color: var(--accent-line);
  }

  .loading__text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

.is-hidden {
  display: none;
}