/* ------------------------------------------------------------------ *
 * PDF Tools — styles
 * ------------------------------------------------------------------ */

/* Type
 * ----
 * Familjen Grotesk (SIL Open Font License, vendor/fonts/OFL.txt), served
 * from this origin like every other asset: no font CDN, so nothing
 * leaves the browser even to draw the page. One variable file per
 * script range covers weights 400–700. */

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/familjen-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../vendor/fonts/familjen-grotesk-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;
}

/* Theme
 * -----
 * theme-boot.js resolves the stored preference (system | light | dark)
 * and writes data-theme="light" or "dark" on <html> before first paint,
 * so there is no flash of the wrong theme. `color-scheme` makes native
 * controls — range, checkbox, colour picker, scrollbars — follow along.
 *
 * --page is the page itself; --surface is anything raised on it;
 * --bg is a recessed well (rows, counts, trays); --fill is a control's
 * resting background (search field, Menu, secondary pills).
 *
 * The media query below is only a fallback for the no-JS case; with
 * scripting on, data-theme is always present and wins. */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  --page: #ffffff;
  --surface: #ffffff;
  --bg: #f7f6f9;
  --fill: #f4f3f7;
  --glass: rgb(255 255 255 / 94%);
  --ink: #15131a;
  --ink-soft: #55515e;
  --ink-muted: #4a4652;
  --ink-faint: #8b8794;
  --line: #eceaf0;
  --line-strong: #e4e2e9;
  --accent: #6e56cf;
  --accent-ink: #ffffff;
  --accent-soft: #f1eefb;
  --primary: #15131a;
  --primary-ink: #ffffff;
  --danger: #ce2c31;
  --ok: #30a46c;
  --ok-ink: #1e7a4c;
  --ok-soft: #e8f6ee;
  --warn: #8a5a00;
  --warn-bg: #fff8e1;
  --inverse: #15131a;
  --inverse-raised: #24212b;
  --inverse-soft: #d7d4de;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgb(21 19 26 / 5%), 0 8px 24px rgb(21 19 26 / 6%);
  --shadow-lift: 0 2px 6px rgb(21 19 26 / 8%), 0 18px 40px rgb(21 19 26 / 12%);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page: #111015;
  --surface: #1a1820;
  --bg: #141219;
  --fill: #25222d;
  --glass: rgb(17 16 21 / 90%);
  --ink: #f2f0f6;
  --ink-soft: #b4b0bd;
  --ink-muted: #c3bfcc;
  --ink-faint: #8b8794;
  --line: #2d2a35;
  --line-strong: #34303d;
  --accent: #a594f9;
  --accent-ink: #15131a;
  --accent-soft: #262040;
  --primary: #f2f0f6;
  --primary-ink: #15131a;
  --danger: #ff6b5e;
  --ok: #3fc07f;
  --ok-ink: #4cc38a;
  --ok-soft: #132a1f;
  --warn: #e8bd6a;
  --warn-bg: #2a2313;
  --inverse: #1d1a24;
  --inverse-raised: #2a2633;
  --inverse-soft: #d7d4de;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
  --shadow-lift: 0 2px 6px rgb(0 0 0 / 50%), 0 18px 40px rgb(0 0 0 / 45%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --page: #111015;
    --surface: #1a1820;
    --bg: #141219;
    --fill: #25222d;
    --glass: rgb(17 16 21 / 90%);
    --ink: #f2f0f6;
    --ink-soft: #b4b0bd;
    --ink-muted: #c3bfcc;
    --ink-faint: #8b8794;
    --line: #2d2a35;
    --line-strong: #34303d;
    --accent: #a594f9;
    --accent-ink: #15131a;
    --accent-soft: #262040;
    --primary: #f2f0f6;
    --primary-ink: #15131a;
    --danger: #ff6b5e;
    --ok: #3fc07f;
    --ok-ink: #4cc38a;
    --ok-soft: #132a1f;
    --warn: #e8bd6a;
    --warn-bg: #2a2313;
    --inverse: #1d1a24;
    --inverse-raised: #2a2633;
    --inverse-soft: #d7d4de;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px rgb(0 0 0 / 30%);
    --shadow-lift: 0 2px 6px rgb(0 0 0 / 50%), 0 18px 40px rgb(0 0 0 / 45%);
  }
}

/* Layout constants shared by the header, the page and the footer. */
:root {
  --font: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --wrap: 1320px;
  --gutter: clamp(16px, 3vw, 32px);
  --header-h: 64px;
  --section-gap: clamp(64px, 8vw, 112px);
}

/* Category colours: --cc is the category's text colour, --cdot its
   marker, --ct its tint, --cc-ink text on a solid --cc. */
.cat--all {
  --cc: var(--ink);
  --cdot: var(--ink);
  --ct: var(--fill);
  --cc-ink: var(--page);
}

.cat--organise {
  --cc: #c62a2f;
  --cdot: #e5484d;
  --ct: #ffedee;
  --cc-ink: #ffffff;
}

.cat--convert {
  --cc: #0d63b8;
  --cdot: #0090ff;
  --ct: #e8f4ff;
  --cc-ink: #ffffff;
}

.cat--edit {
  --cc: #5842b5;
  --cdot: #6e56cf;
  --ct: #f1eefb;
  --cc-ink: #ffffff;
}

:root[data-theme="dark"] .cat--organise {
  --cc: #ff9592;
  --ct: #3b1219;
  --cc-ink: #15131a;
}

:root[data-theme="dark"] .cat--convert {
  --cc: #70b8ff;
  --ct: #0d2847;
  --cc-ink: #15131a;
}

:root[data-theme="dark"] .cat--edit {
  --cc: #baa7ff;
  --ct: #291f43;
  --cc-ink: #15131a;
}

* {
  box-sizing: border-box;
}

/* Anything scrolled into view — a jump, a focused control, a zoomed
   page — lands below the sticky header rather than under it. */
html {
  scroll-padding-top: var(--header-h);
}

/* A class with `display` set beats the UA rule for [hidden], and most
   elements here carry one. Make the attribute authoritative. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Form controls don't inherit the page font on their own. */
button,
input,
select,
textarea {
  font-family: inherit;
}

a {
  color: var(--accent);
}

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

/* main is focus target on route change; never show a ring for that */
main:focus {
  outline: none;
}

.icon-btn__glyph {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

body.is-locked {
  overflow: hidden;
}

.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

/* ------------------------------ skip link -------------------------- */

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 1200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

/* ------------------------------ topbar ---------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 400;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: var(--wrap);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand__mark {
  display: grid;
  grid-template-columns: 13px 13px;
  gap: 3px;
}

.brand__mark span {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: #e5484d;
}

.brand__mark span:nth-child(2) {
  background: #ffc53d;
}

.brand__mark span:nth-child(3) {
  background: #0090ff;
}

.brand__mark span:nth-child(4) {
  background: #30a46c;
}

.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.nav__list {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.nav__link:hover {
  background: var(--ct);
  color: var(--cc);
}

.nav__link:focus-visible {
  outline: 2px solid var(--cc);
  outline-offset: 2px;
}

/* Still used by the account menu's trigger. */
.nav__chevron {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.18s ease;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

.topbar__claim {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok-ink);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.topbar__claim .dot {
  width: 7px;
  height: 7px;
}

.account-slot {
  display: flex;
  align-items: center;
  gap: 16px;
}

.signin {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

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

.signup {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.signup:hover {
  color: var(--primary-ink);
  background: color-mix(in srgb, var(--primary) 82%, var(--accent));
}

.signin:focus-visible,
.signup:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 999px;
}

/* ------------------------------ Menu ------------------------------ */

.menu-btn {
  display: none;
  margin-left: auto;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font: 600 15px var(--font);
  cursor: pointer;
}

.menu-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__link {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ct);
  color: var(--cc);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}

.menu__link:focus-visible {
  outline: 2px solid var(--cc);
  outline-offset: 2px;
}

.menu__account {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.menu__btn {
  display: grid;
  place-items: center;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font: 600 16px var(--font);
  text-decoration: none;
  cursor: pointer;
}

.menu__btn--dark {
  background: var(--primary);
  color: var(--primary-ink);
}

.menu__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.menu__who {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 600;
}

.menu__whoname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu__theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
}

/* Below 900px the header is the brand and the Menu button. */
@media (max-width: 899px) {
  .nav,
  .topbar__right {
    display: none;
  }

  .menu-btn {
    display: block;
  }
}

@media (min-width: 900px) {
  .menu {
    display: none !important;
  }
}

/* The privacy claim goes first when the bar gets busy: the same promise
   is on the landing page and in the footer. */
@media (max-width: 1099px) {
  .topbar__claim {
    display: none;
  }
}

/* ------------------------- theme switcher ------------------------- */

.theme {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--fill);
  border-radius: 999px;
}

.theme__btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}

.theme__btn:hover {
  color: var(--ink);
}

.theme__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow);
}

.theme__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.menu__theme .theme__btn {
  width: 40px;
  height: 40px;
}

/* ------------------------------- views ---------------------------- */

main {
  flex: 1;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px) var(--gutter) 0;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

/* -------------------------------- home ---------------------------- */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
}

.hero__text {
  flex: 1 1 420px;
}

.hero__title {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}

.hero__accent {
  color: var(--accent);
}

.hero__sub {
  margin: 12px 0 0;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.4vw, 18px);
  text-wrap: pretty;
}

/* ---------------------------- tool search -------------------------- */

.toolsearch {
  flex: 1 1 400px;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 8px 0 20px;
  border: 2px solid var(--fill);
  border-radius: 18px;
  background: var(--fill);
  transition: border-color 0.15s;
}

/* The field's own outline is off; the whole box shows focus instead. */
.toolsearch:focus-within {
  border-color: var(--accent);
}

.toolsearch__icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toolsearch__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  /* 16px or more keeps iOS from zooming the viewport on focus */
  font: 500 17px var(--font);
}

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

.toolsearch__input::-webkit-search-cancel-button {
  display: none;
}

.toolsearch__clear {
  flex: none;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-soft);
  font: 600 14px var(--font);
  cursor: pointer;
}

.toolsearch__clear:hover {
  color: var(--ink);
}

.toolsearch__clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----------------------------- popular ----------------------------- */

.popular {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
}

.popular > li {
  display: flex;
}

.pop {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: clamp(150px, 15vw, 190px);
  padding: clamp(16px, 2vw, 24px);
  border-radius: 22px;
  background: var(--c);
  color: var(--on);
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
}

.pop:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -12px rgb(21 19 26 / 35%);
}

.pop:focus-visible {
  outline: 3px solid var(--c);
  outline-offset: 3px;
}

.pop__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.pop__code {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
}

.pop__tag {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgb(0 0 0 / 22%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pop__name {
  display: block;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pop__short {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.35;
}

/* ------------------------------- chips ----------------------------- */

/* Stays under the header while the list scrolls. Spans the gutters so
   cards never show at its edges. */
.cats {
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  margin: 20px calc(-1 * var(--gutter)) 0;
  padding: 12px var(--gutter);
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.chips {
  display: flex;
  gap: 8px;
  /* Room for the focus ring inside the scroller. */
  margin: -3px;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ct);
  color: var(--cc);
  font: 600 15px var(--font);
  white-space: nowrap;
  cursor: pointer;
}

.chip__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cdot);
}

.chip__count {
  font-size: 12px;
  opacity: 0.75;
}

.chip[aria-pressed="true"] {
  background: var(--cc);
  color: var(--cc-ink);
}

.chip[aria-pressed="true"] .chip__dot {
  background: currentColor;
}

.chip:focus-visible {
  outline: 2px solid var(--cc);
  outline-offset: 2px;
}

/* ------------------------------ groups ----------------------------- */

.group {
  padding-top: clamp(20px, 3vw, 32px);
  /* Clear the sticky chips too (the header is in scroll-padding). */
  scroll-margin-top: 70px;
}

.group__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.group__title {
  margin: 0;
  color: var(--cc);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.group__blurb {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap: clamp(10px, 1.2vw, 14px);
  margin-top: 14px;
}

/* --c tile colour, --t tint, --on ink on the tile: set per tool. */
.card {
  --tint: var(--t);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 168px;
  padding: 16px;
  border: 2px solid var(--tint);
  border-radius: 20px;
  background: var(--tint);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.18s, border-color 0.18s;
}

:root[data-theme="dark"] .card {
  --tint: color-mix(in srgb, var(--c) 13%, var(--surface));
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--c);
}

.card:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 3px;
  border-color: var(--c);
}

.card__code {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--c);
  color: var(--on);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.card__name {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.card__blurb {
  margin: 3px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.4;
  text-wrap: pretty;
}

/* ---------------------------- no results --------------------------- */

.noresults {
  margin-top: 24px;
  padding: 28px;
  border-radius: 22px;
  background: var(--warn-bg);
}

.noresults__title {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.noresults__body {
  margin: 6px 0 0;
  max-width: 60ch;
  color: var(--ink-muted);
}

.noresults__btn {
  margin-top: 18px;
  height: 46px;
  padding: 0 20px;
}

/* ------------------------- landing sections ------------------------ */

.section__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.section__intro {
  margin: 8px 0 0;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 17px;
  text-wrap: pretty;
}

.how,
.limits,
.questions {
  padding-top: var(--section-gap);
  scroll-margin-top: 16px;
}

/* ----------------------------- how it works ------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.step {
  --c: #e5484d;
  --t: #ffedee;
  padding: 22px;
  border-radius: 22px;
  background: var(--t);
}

.step:nth-child(2) {
  --c: #0090ff;
  --t: #e8f4ff;
}

.step:nth-child(3) {
  --c: #6e56cf;
  --t: #f1eefb;
}

.step:nth-child(4) {
  --c: #30a46c;
  --t: #e8f6ee;
}

:root[data-theme="dark"] .step {
  background: color-mix(in srgb, var(--c) 13%, var(--surface));
}

.step__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
}

.step__title {
  margin: 18px 0 0;
  font-size: 19px;
  font-weight: 700;
}

.step__body {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 15px;
  text-wrap: pretty;
}

/* ------------------------------ privacy ---------------------------- */

.local {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 36px 64px;
  margin-top: var(--section-gap);
  padding: clamp(28px, 5vw, 64px);
  border-radius: clamp(22px, 3vw, 32px);
  background: var(--inverse);
  color: #ffffff;
  /* Clear the sticky chips too (the header is in scroll-padding). */
  scroll-margin-top: 84px;
}

:root[data-theme="dark"] .local {
  border: 1px solid var(--line-strong);
}

.local__tag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: #ffc53d;
  color: #15131a;
  font-size: 13px;
  font-weight: 600;
}

.local__title {
  margin: 18px 0 0;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-wrap: balance;
}

.local__text p {
  margin: 14px 0 0;
  max-width: 52ch;
  color: var(--inverse-soft);
  font-size: 17px;
  text-wrap: pretty;
}

.local__title + p {
  margin-top: 20px;
}

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-self: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fact {
  --c: #ff6369;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 20px;
  background: var(--inverse-raised);
}

.fact:nth-child(2) {
  --c: #ffc53d;
}

.fact:nth-child(3) {
  --c: #3db9ff;
}

.fact:nth-child(4) {
  --c: #4cc38a;
}

.fact__value {
  display: block;
  color: var(--c);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fact__label {
  display: block;
  margin-top: 10px;
  color: var(--inverse-soft);
  font-size: 14px;
}

/* -------------------------------- gaps ----------------------------- */

.limits__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 10px;
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.limit {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--bg);
  font-size: 15px;
}

:root[data-theme="dark"] .limit {
  background: var(--surface);
}

.limit__name {
  font-weight: 700;
}

.limit__why {
  color: var(--ink-soft);
}

/* -------------------------------- faq ------------------------------ */

.questions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 64px;
}

.questions .section__title {
  flex: 1 1 260px;
}

.faq {
  flex: 3 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq__item {
  border-radius: 16px;
  background: var(--bg);
  transition: background 0.15s;
}

:root[data-theme="dark"] .faq__item {
  background: var(--surface);
}

.faq__item.is-open {
  background: var(--accent-soft);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 16px 20px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--ink);
  font: 600 17px var(--font);
  text-align: left;
  cursor: pointer;
}

.faq__q:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.faq__sign {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-size: 18px;
}

:root[data-theme="dark"] .faq__sign {
  background: var(--fill);
}

.faq__a p {
  margin: 0;
  padding: 0 64px 18px 20px;
  color: var(--ink-muted);
  font-size: 16px;
  text-wrap: pretty;
}

@media (max-width: 560px) {
  .faq__a p {
    padding-right: 20px;
  }
}

/* -------------------------------- tool ---------------------------- */

.back {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

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

/* The tool's colour tile from the home page, beside its name. */
.tool__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.tool__code {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 17px;
  background: var(--c);
  color: var(--on);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.tool__name {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.tool__blurb {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 70ch;
  text-wrap: pretty;
}

@media (max-width: 560px) {
  .tool__head {
    align-items: flex-start;
  }

  .tool__code {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    font-size: 19px;
  }
}

.tool__note {
  margin: 0 0 20px;
  padding: 11px 14px;
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  max-width: 80ch;
}

.dropzone {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 40px 24px;
  background: var(--surface);
  border: 2px dashed var(--line);
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.dropzone:hover,
.dropzone:focus-visible,
.dropzone.is-over {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.dropzone__icon {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dropzone__main {
  font-size: 18px;
  font-weight: 620;
}

.dropzone__hint {
  color: var(--ink-faint);
  font-size: 14px;
}

/* ------------------------------- work ----------------------------- */

.work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
  margin-top: 24px;
}

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

.work__main {
  min-width: 0;
}

.work__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.work__count {
  margin: 0;
  font-size: 18px;
}

.work__actions {
  display: flex;
  gap: 6px;
}

/* file rows */

.files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.frow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.frow[draggable="true"] {
  cursor: grab;
}

.frow__grip {
  color: var(--ink-faint);
  cursor: grab;
  flex: none;
}

.frow__index {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11.5px;
  font-weight: 650;
  flex: none;
}

.frow__main {
  flex: 1;
  min-width: 0;
}

.frow__name {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frow__meta {
  font-size: 12px;
  color: var(--ink-faint);
}

/* tiles (pages and images) */

.tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.tile {
  position: relative;
  padding: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: grab;
  transition: box-shadow 0.15s, opacity 0.15s;
}

.tile:hover {
  box-shadow: var(--shadow-lift);
}

.tile.is-dragging {
  opacity: 0.4;
}

.tile.is-target,
.frow.is-target {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Flex, not grid: an auto grid row grows to the image, so the image's
   max-height: 100% would never bite and tall pages spilled out. */
.tile__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin-bottom: 7px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tile__thumb img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  transition: transform 0.2s ease;
}

.tile__name {
  font-size: 12px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The thumbnail carries a transform, which creates a stacking context
   and would otherwise paint over these controls. */
.tile__index {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 5px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11.5px;
  font-weight: 650;
}

.tile__tools {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 5px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.tile:hover .tile__tools,
.tile:focus-within .tile__tools {
  opacity: 1;
}

.icon-btn {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  flex: none;
}

.icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.icon-btn--danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.icon-btn--round {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  box-shadow: var(--shadow);
}

/* file cards: one per document, with an action rail beside the grid */

.fileboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

.tiles--files {
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  border-radius: var(--radius);
}

.work.is-over .tiles--files {
  outline: 2px dashed var(--accent);
  outline-offset: 8px;
}

.tiles--files .tile__thumb {
  height: 200px;
}

.tile__meta {
  font-size: 11.5px;
  color: var(--ink-faint);
}

.tile__nopreview {
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* Touch screens have no hover to reveal the card actions. */
@media (hover: none) {
  .tiles--files .tile__tools {
    opacity: 1;
  }
}

.spinner.spinner--sm {
  width: 22px;
  height: 22px;
  margin: 0;
  border-width: 2px;
}

/* Above the cards' own controls, so its tooltips are never covered. */
.rail {
  position: sticky;
  z-index: 3;
  top: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.rail__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color 0.14s, color 0.14s, filter 0.14s;
}

.rail__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.rail__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.rail__btn--add {
  width: 50px;
  height: 50px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
}

.rail__btn--add:hover {
  color: var(--accent-ink);
  filter: brightness(1.08);
}

.rail__icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rail__btn--add .rail__icon {
  width: 24px;
  height: 24px;
  stroke-width: 2.4;
}

.rail__badge {
  position: absolute;
  top: -5px;
  left: -5px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
  border-radius: 999px;
  background: var(--ink);
  color: var(--surface);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}

.rail__tip {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 0.12s;
}

.rail__tip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  border: 5px solid transparent;
  border-left-color: var(--ink);
  transform: translateY(-50%);
}

.rail__btn:hover .rail__tip,
.rail__btn:focus-visible .rail__tip {
  opacity: 1;
}

@media (max-width: 560px) {
  .fileboard {
    grid-template-columns: minmax(0, 1fr);
  }
  .tiles--files {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
  }
  .tiles--files .tile__thumb {
    height: 160px;
  }
  .rail {
    position: static;
    order: -1;
    flex-direction: row;
    justify-content: flex-end;
  }
  .rail__tip {
    display: none;
  }
}

/* ------------------------------ viewer ---------------------------- */

.viewer {
  width: min(920px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.viewer::backdrop {
  background: rgb(8 10 16 / 60%);
}

.viewer__inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 34px);
}

.viewer__head,
.viewer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
}

.viewer__head {
  border-bottom: 1px solid var(--line);
}

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

.viewer__title {
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer__stage {
  position: relative;
  flex: 1;
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--bg);
  overflow: auto;
}

.viewer__stage img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 190px);
  background: #fff;
  box-shadow: var(--shadow);
  transition: opacity 0.15s;
}

.viewer__stage .spinner {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
}

.viewer__stage.is-loading .spinner {
  display: block;
}

.viewer__stage.is-loading img {
  opacity: 0.35;
}

.viewer__page {
  font-size: 13.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------------------------- page view ---------------------------- */

/* One page at a time with a floating paging/zoom bar: Crop, Edit, Forms. */

.pageview {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 9%, var(--bg));
  overflow: hidden;
}

/* Auto margins centre a small page and still let a big one scroll. */
.pageview__stage {
  display: flex;
  height: clamp(420px, calc(100vh - 230px), 980px);
  padding: 24px 24px 84px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.pageview__sheet {
  position: relative;
  flex: none;
  margin: auto;
  background: #fff;
  box-shadow: var(--shadow-lift);
}

.pageview__page {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  transition: opacity 0.15s;
}

.pageview.is-loading .pageview__page {
  opacity: 0.7;
}

.pageview__overlay {
  position: absolute;
  inset: 0;
}

/* The toolbar is dark in both themes, like a viewer's controls. */
.pageview__bar {
  position: absolute;
  bottom: 14px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgb(28 31 39 / 94%);
  color: #fff;
  box-shadow: var(--shadow-lift);
  transform: translateX(-50%);
}

.pageview__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.pageview__btn:hover:not(:disabled) {
  background: rgb(255 255 255 / 12%);
}

.pageview__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pageview__btn:focus-visible,
.pageview__pageinput:focus-visible {
  outline: 2px solid #8fb0ff;
  outline-offset: 1px;
}

.pageview__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pageview__pageinput {
  width: 46px;
  padding: 5px 6px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 6px;
  background: rgb(255 255 255 / 8%);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  text-align: center;
  appearance: textfield;
}

.pageview__pageinput::-webkit-inner-spin-button,
.pageview__pageinput::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

.pageview__of {
  margin: 0 4px 0 5px;
  font-size: 13.5px;
  color: rgb(255 255 255 / 75%);
  white-space: nowrap;
}

.pageview__zoom {
  min-width: 54px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgb(255 255 255 / 8%);
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pageview__sep {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: rgb(255 255 255 / 20%);
}

@media (max-width: 560px) {
  .pageview__stage {
    padding: 14px 14px 76px;
  }
  .pageview__bar {
    gap: 0;
    padding: 4px;
  }
  .pageview__btn {
    width: 28px;
  }
  .pageview__pageinput {
    width: 38px;
  }
  .pageview__zoom {
    min-width: 46px;
    padding: 5px 4px;
  }
  .pageview__sep {
    margin: 0 3px;
  }
}

/* ------------------------------- crop ------------------------------ */

/* touch-action lets a finger draw the area rather than scroll. */
.cropboard__veil {
  cursor: crosshair;
  touch-action: none;
}

.cropboard__dim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.cropboard__hole {
  position: absolute;
  box-shadow: 0 0 0 100vmax rgb(10 12 20 / 45%);
}

.cropboard__box {
  position: absolute;
  cursor: move;
}

.cropboard.is-whole .cropboard__hole {
  box-shadow: none;
}

.cropboard.is-whole .cropboard__box {
  cursor: crosshair;
}

.cropboard__box::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 2px solid var(--accent);
  pointer-events: none;
}

.cropboard__box:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 5px;
}

.cropboard__handle {
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
  transform: translate(-50%, -50%);
}

/* A bigger target than the dot. */
.cropboard__handle::before {
  content: "";
  position: absolute;
  inset: -9px;
}

.cropboard__handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.cropboard__handle--nw { left: 0; top: 0; cursor: nwse-resize; }
.cropboard__handle--n { left: 50%; top: 0; cursor: ns-resize; }
.cropboard__handle--ne { left: 100%; top: 0; cursor: nesw-resize; }
.cropboard__handle--e { left: 100%; top: 50%; cursor: ew-resize; }
.cropboard__handle--se { left: 100%; top: 100%; cursor: nwse-resize; }
.cropboard__handle--s { left: 50%; top: 100%; cursor: ns-resize; }
.cropboard__handle--sw { left: 0; top: 100%; cursor: nesw-resize; }
.cropboard__handle--w { left: 0; top: 50%; cursor: ew-resize; }

/* ------------------------------- edit ------------------------------ */

.editboard {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.edtools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.edtool {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 58px;
  min-height: 48px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}

.edtool svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edtool:hover:not(:disabled) {
  background: var(--bg);
  color: var(--ink);
}

.edtool[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

.edtool:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.edtool:disabled {
  opacity: 0.4;
  cursor: default;
}

.edtool--icon {
  min-width: 44px;
}

.edtools__sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 4px;
  background: var(--line);
}

/* Drawing tools own the page; Select leaves scrolling to the finger. */
.edlayer {
  touch-action: none;
}

.editboard[data-tool="select"] .edlayer {
  touch-action: pan-x pan-y;
}

.editboard[data-tool="text"] .edlayer {
  cursor: text;
}

.editboard:is([data-tool="freehand"], [data-tool="line"], [data-tool="rect"], [data-tool="ellipse"]) .edlayer {
  cursor: crosshair;
}

.edobj {
  position: absolute;
  touch-action: none;
}

.editboard[data-tool="select"] .edobj {
  cursor: move;
}

.edobj img,
.edobj svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.edobj.is-selected,
.edobj:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.edobj:focus:not(:focus-visible):not(.is-selected) {
  outline: none;
}

.edobj--draft {
  pointer-events: none;
}

.edtext {
  min-width: 0.5em;
  white-space: pre;
  outline: none;
}

.edobj.is-editing {
  outline: 2px dashed var(--accent);
  cursor: text;
}

.edhandle {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
  transform: translate(-50%, -50%);
}

.edhandle::before {
  content: "";
  position: absolute;
  inset: -9px;
}

.edhandle--nw { left: 0; top: 0; cursor: nwse-resize; }
.edhandle--ne { left: 100%; top: 0; cursor: nesw-resize; }
.edhandle--se { left: 100%; top: 100%; cursor: nwse-resize; }
.edhandle--sw { left: 0; top: 100%; cursor: nesw-resize; }
.edhandle--p1,
.edhandle--p2 { cursor: grab; }

.edpanel {
  margin-bottom: 4px;
}

.edpanel__lead {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.edpanel__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 650;
}

.edpanel__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.edpanel__text {
  resize: vertical;
  min-height: 64px;
}

.edpanel__toggles {
  display: flex;
  gap: 6px;
}

.edtoggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.edtoggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.edtoggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.edswitch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.edswitch .colour {
  width: 64px;
}

.edswitch .colour:disabled {
  opacity: 0.4;
}

.edlist {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 4px;
}

.edlist__item {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edlist__item:hover {
  border-color: var(--accent);
}

.edlist__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.edpanel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}

.edpanel__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.edpanel__actions svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 560px) {
  .edtool {
    min-width: 44px;
    padding: 4px;
  }
  .edtool__label {
    font-size: 10.5px;
  }
}

/* ------------------------------- forms ----------------------------- */

.fmmodes {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.fmmode {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.fmmode[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.fmmode:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.fmtools {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Fill mode scrolls under a finger like any page. */
.formboard[data-mode="fill"] .edlayer {
  touch-action: auto;
}

/* The page is white in either theme, so its controls are too. */
.fmctl {
  position: absolute;
  display: flex;
  color-scheme: light;
}

.fmctl__input {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0.3em;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 2px;
  background: rgb(219 234 254 / 70%);
  color: #111;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.1;
}

textarea.fmctl__input {
  resize: none;
  padding-top: 0.2em;
}

.fmctl--checkbox .fmctl__input,
.fmctl--radio .fmctl__input {
  padding: 0;
  accent-color: var(--accent);
}

.fmctl__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: rgb(219 234 254 / 92%);
}

.fmctl.is-required .fmctl__input {
  border-color: var(--accent);
  border-width: 1.5px;
}

.fmctl.is-invalid .fmctl__input {
  border: 2px solid var(--danger);
  background: rgb(254 226 226 / 85%);
}

.fmctl__unsupported {
  display: grid;
  place-items: center;
  width: 100%;
  border: 1px dashed var(--ink-faint);
  font-size: 10px;
  color: #555;
  background: rgb(255 255 255 / 60%);
}

.fmbox {
  position: absolute;
  border: 1.5px dashed color-mix(in srgb, var(--ink-soft) 70%, transparent);
  background: rgb(148 163 184 / 14%);
}

.fmbox.is-new {
  border-style: solid;
  border-color: var(--accent);
  background: rgb(47 109 246 / 10%);
}

.fmbox--radio {
  border-radius: 999px;
}

.formboard[data-tool="select"] .fmbox.is-new {
  cursor: move;
}

.fmbox.is-selected,
.fmbox:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fmbox:focus:not(:focus-visible):not(.is-selected) {
  outline: none;
}

.fmbox--draft {
  border-style: solid;
  border-color: var(--accent);
  pointer-events: none;
}

.fmbox__name {
  position: absolute;
  bottom: calc(100% + 2px);
  left: -1px;
  max-width: 220px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--surface);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.formboard:is([data-tool="text"], [data-tool="checkbox"], [data-tool="radio"], [data-tool="dropdown"]) .edlayer {
  cursor: crosshair;
}

.edlist__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.edlist__item:disabled {
  opacity: 0.5;
  cursor: default;
}

.edlist__meta {
  font-size: 11.5px;
  color: var(--ink-faint);
}

.fmcheck {
  margin: 4px 0 14px;
  font-size: 13.5px;
}

.fmerrors {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 2px solid var(--danger);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.fmerrors:focus {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.fmerrors__title {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--danger);
}

.fmerrors__list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
}

.fmoptions {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.fmoptions__row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

/* -------------------------------- scan ----------------------------- */

#scanner-slot {
  margin-bottom: 8px;
}

.scanner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Grid items with an aspect-ratio don't stretch on their own. */
.scanner__view {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-height: 62vh;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: #12151c;
  overflow: hidden;
}

.scanner__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scanner:not(.is-live) .scanner__video {
  visibility: hidden;
}

.scanner__idle {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  color: #e5e7eb;
  text-align: center;
}

.scanner__idle svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.scanner__lead {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 600;
}

.scanner__small {
  margin: 0;
  font-size: 13px;
  color: #b8bfcc;
}

.scanner__message {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #fff1f0;
  color: #9f1d14;
  font-size: 13.5px;
}

/* A brief white flash confirms a capture. */
.scanner.is-flash .scanner__view::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  animation: scanner-flash 0.25s ease-out forwards;
  pointer-events: none;
}

@keyframes scanner-flash {
  from { opacity: 0.8; }
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .scanner.is-flash .scanner__view::after {
    animation-duration: 0.01s;
  }
}

.scanner__controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}

.scanner__shutter {
  align-self: center;
  width: 76px;
  height: 76px;
  border: 5px solid var(--accent-soft);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-lift);
  cursor: pointer;
  transition: transform 0.1s;
}

.scanner__shutter:active {
  transform: scale(0.94);
}

.scanner__shutter:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .scanner {
    grid-template-columns: minmax(0, 1fr);
  }
  .scanner__controls {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
}

/* the corner editor */

.adjust {
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.adjust::backdrop {
  background: rgb(8 10 16 / 65%);
}

.adjust__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 18px;
  padding: 16px;
  overflow: auto;
}

.adjust__stage {
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: #12151c;
}

.adjust__frame {
  position: relative;
  touch-action: none;
}

.adjust__picture {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 240px);
}

.adjust__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.adjust__shade {
  fill: rgb(0 0 0 / 45%);
}

.adjust__outline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

.adjust__handle {
  position: absolute;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 1px 4px rgb(0 0 0 / 45%);
  cursor: grab;
  transform: translate(-50%, -50%);
}

.adjust__handle::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.adjust__handle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.adjust__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adjust__filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  background: var(--bg);
  border-radius: 10px;
}

.adjust__preview {
  margin: 4px 0 0;
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.adjust__preview canvas {
  max-width: 100%;
  max-height: 220px;
  background: #fff;
  box-shadow: var(--shadow);
}

.adjust__preview figcaption {
  font-size: 12px;
  color: var(--ink-faint);
}

@media (max-width: 760px) {
  .adjust__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .adjust__picture {
    max-height: 52vh;
  }
}

/* ------------------------------- split ----------------------------- */

/* panel: Range / Pages / Size */

.modetabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.modetabs__item {
  position: relative;
}

.modetabs__item + .modetabs__item {
  border-left: 1px solid var(--line);
}

.modetabs__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.modetabs__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 13px 6px 11px;
  color: var(--ink-faint);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 0.14s, color 0.14s;
}

.modetabs__face:hover {
  color: var(--ink);
}

.modetabs__icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modetabs__item input:checked + .modetabs__face {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.modetabs__item input:focus-visible + .modetabs__face {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.modetabs__note {
  margin-top: -4px;
  font-size: 11px;
  font-weight: 600;
}

/* Modes: full-width rows with a title and a sentence each. */
.modes {
  display: grid;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.modes__item {
  position: relative;
}

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

.modes__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.modes__face {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 42px 13px 13px;
  cursor: pointer;
  transition: background 0.14s;
}

.modes__face:hover {
  background: var(--bg);
}

.modes__icon {
  flex: none;
  width: 34px;
  height: 34px;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modes__text {
  display: grid;
  gap: 3px;
}

.modes__title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.modes__desc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.modes__item input:checked + .modes__face {
  background: var(--accent-soft);
}

.modes__item input:checked + .modes__face .modes__title {
  color: var(--accent);
}

.modes__item input:checked + .modes__face .modes__icon {
  stroke: var(--accent);
}

.modes__item input:checked + .modes__face::after {
  content: "✓" / "";
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  transform: translateY(-50%);
}

.modes__item input:focus-visible + .modes__face {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Tiles: the same choices as separate cards. */
.modetabs--cards {
  grid-template-columns: none;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 8px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.modetabs--cards .modetabs__item + .modetabs__item {
  border-left: 0;
}

.modetabs--cards .modetabs__face {
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: center;
}

.modetabs--cards .modetabs__icon {
  width: 26px;
  height: 26px;
}

.modetabs--cards .modetabs__item input:checked + .modetabs__face {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* panel: custom ranges */

.rangelist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rangeitem {
  padding: 9px 11px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: background 0.14s, border-color 0.14s;
}

.rangeitem.is-active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.rangeitem__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
  margin-bottom: 7px;
}

.rangeitem__title {
  font-size: 13.5px;
  font-weight: 650;
}

.rangeitem__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rangefield {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}

.rangefield:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.rangefield__caption {
  display: grid;
  place-items: center;
  padding: 0 8px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.rangefield__input {
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rangefield__input:focus {
  outline: none;
}

.btn.rangelist__add {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  border-color: var(--accent);
  color: var(--accent);
}

.btn.rangelist__add:hover {
  background: var(--accent-soft);
}

.rangelist__icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.optnote {
  margin: 0 0 17px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-soft);
}

.optnote:empty {
  display: none;
}

/* board: one dashed box per output file */

.rangeboxes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 22px;
}

.rangebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.rangebox--link {
  cursor: pointer;
}

.rangebox__label {
  font-size: 13.5px;
  color: var(--ink-soft);
}

.rangebox__pages {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1.5px dashed var(--ink-faint);
  border-radius: var(--radius-sm);
  transition: border-color 0.14s, background 0.14s;
}

.rangebox.is-active .rangebox__label {
  color: var(--accent);
  font-weight: 600;
}

.rangebox.is-active .rangebox__pages {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.rangebox__gap {
  color: var(--ink-faint);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 2px;
}

.pagecard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 10px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: opacity 0.14s, border-color 0.14s;
}

.pagecard__thumb {
  display: grid;
  place-items: center;
  width: 112px;
  height: 146px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
}

.pagecard__thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 0 0 1px var(--line);
}

.pagecard__num {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* board: pick pages */

.pagepicker {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  justify-items: center;
  gap: 14px;
}

.pagepick {
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.pagepick:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.pagepick .pagecard:not(.is-chosen) {
  opacity: 0.55;
}

.pagepick:hover .pagecard {
  opacity: 1;
}

.pagecard.is-chosen {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}

.pagecard.is-chosen::after {
  content: "✓" / "";
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* board: pages to remove — each in a dashed box, removed ones crossed out */

.pagepicker--remove {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
}

.pagepicker--remove li {
  justify-self: stretch;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 1.5px dashed var(--ink-faint);
  border-radius: var(--radius-sm);
}

.pagepicker--remove .pagepick .pagecard:not(.is-chosen) {
  opacity: 1;
}

.pagepicker--remove .pagecard.is-chosen {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.pagepicker--remove .pagecard.is-chosen .pagecard__thumb,
.pagepicker--remove .pagecard.is-chosen .pagecard__num {
  opacity: 0.35;
}

.pagepicker--remove .pagecard.is-chosen::after,
.pagepicker--remove .pagepick:hover .pagecard::after {
  content: "✕" / "";
  inset: 0 0 26px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--danger);
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
}

.pagepicker--remove .pagepick:hover .pagecard:not(.is-chosen)::after {
  position: absolute;
  display: grid;
  place-items: center;
  opacity: 0.35;
}

.panel__total {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ink-soft);
}

.panel__total strong {
  color: var(--ink);
}

@media (max-width: 560px) {
  .pagecard__thumb {
    width: 84px;
    height: 110px;
  }
  .pagepicker.pagepicker--remove {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 10px;
  }
  .pagepicker--remove li {
    padding: 7px;
  }
  .rangebox__pages {
    gap: 8px;
    padding: 10px;
  }
  .pagepicker {
    grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
  }
}

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

/* Clears the sticky top bar. */
.panel {
  position: sticky;
  top: 84px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

@media (max-width: 920px) {
  .panel {
    position: static;
  }
}

.panel__title {
  margin: 0 0 16px;
  font-size: 17px;
}

.panel__hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 11px 13px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  line-height: 1.5;
}

.panel__hint svg {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field {
  margin-bottom: 17px;
}

.field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 620;
}

.field__help {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.segmented {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--bg);
  border-radius: 10px;
}

.segmented__item {
  flex: 1;
  position: relative;
  text-align: center;
}

.segmented__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented__item span {
  display: block;
  padding: 7px 3px;
  border-radius: 7px;
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.segmented__item input:checked + span {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow);
}

.segmented__item input:focus-visible + span {
  outline: 2px solid var(--accent);
}

.input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  cursor: pointer;
}

.check input {
  margin: 3px 0 0;
  accent-color: var(--accent);
}

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

.range {
  flex: 1;
  accent-color: var(--accent);
}

.rangerow__value {
  min-width: 34px;
  text-align: right;
  font-size: 13px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.colour {
  width: 100%;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  cursor: pointer;
}

.radios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.radios .check {
  align-items: center;
}

.radios .check input {
  margin: 0;
}

.panel__reset {
  display: block;
  margin: -4px 0 10px auto;
  font-size: 13.5px;
}

.turnall {
  display: grid;
  gap: 10px;
}

.turnall__btn {
  display: flex;
  align-items: stretch;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color 0.14s, color 0.14s;
}

.turnall__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.turnall__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.turnall__icon {
  display: grid;
  place-items: center;
  width: 46px;
  background: var(--accent);
  color: var(--accent-ink);
}

.turnall__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.turnall__text {
  display: flex;
  align-items: center;
  padding: 12px 14px;
}

.cta-hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  text-align: center;
}

/* ------------------------------ buttons --------------------------- */

.btn {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--primary);
  color: var(--primary-ink);
}

.btn--primary:hover {
  background: color-mix(in srgb, var(--primary) 82%, var(--accent));
}

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

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

.btn--danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.btn--block {
  display: block;
  width: 100%;
  padding: 13px 18px;
  font-size: 16px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --------------------------- busy / done -------------------------- */

.busy,
.done {
  max-width: 560px;
  margin: 48px auto;
  text-align: center;
}

.spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 20px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 2.4s;
  }
  .card:hover,
  .pop:hover {
    transform: none;
  }
}

.busy__title,
.done__title {
  margin: 0 0 6px;
  font-size: 23px;
  letter-spacing: -0.02em;
}

.busy__detail,
.done__detail {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 14.5px;
  min-height: 1.4em;
}

.progress {
  height: 7px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.progress__bar {
  width: 0;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.done__icon {
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  fill: none;
  stroke: var(--ok);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.done__actions {
  display: flex;
  gap: 9px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}

.result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.result__main {
  flex: 1;
  min-width: 0;
}

.result__name {
  display: block;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result__meta {
  display: block;
  font-size: 12px;
  color: var(--ink-faint);
}

.result__more {
  padding: 8px;
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
}

.text-preview {
  margin-top: 18px;
  padding: 14px;
  max-height: 320px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.done__note {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}

.error {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
  font-size: 13.5px;
}

/* ------------------------------ footer ---------------------------- */

.footer {
  margin-top: var(--section-gap);
  background: var(--bg);
}

:root[data-theme="dark"] .footer {
  border-top: 1px solid var(--line);
}

.footer__map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 32px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 48px var(--gutter) 28px;
}

.footer__coltitle {
  margin: 0;
  color: var(--cc, var(--ink));
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-size: 15px;
}

.footer__list a {
  color: var(--ink);
  text-decoration: none;
}

.footer__list a:hover {
  color: var(--accent);
}

.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 20px var(--gutter) 32px;
  border-top: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 13px;
}

.footer__base p {
  margin: 0;
}

.footer__base a {
  color: inherit;
}

.footer__base a:hover {
  color: var(--accent);
}

/* ================================================================== *
 * Account: header menu, auth forms, account page
 * ================================================================== */

.btn--sm {
  padding: 7px 12px;
  font-size: 13px;
}

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

.usermenu {
  position: relative;
}

.usermenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 5px 12px 5px 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.14s;
}

.usermenu__trigger:hover {
  border-color: var(--accent);
}

.usermenu__trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.usermenu__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.usermenu__trigger[aria-expanded="true"] .nav__chevron {
  transform: rotate(180deg);
}

.usermenu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 320;
  width: 252px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.usermenu__head {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}

.usermenu__headname {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
}

.usermenu__headmeta {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}

.usermenu__list {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.usermenu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.usermenu__item:hover,
.usermenu__item:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.usermenu__item--danger {
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.usermenu__item--danger:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

.usermenu__icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------- auth pages -------------------------- */

.authpage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: start;
  max-width: 940px;
  margin: 24px auto 0;
}

@media (max-width: 860px) {
  .authpage {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

.authcard {
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.authcard__title {
  margin: 0 0 8px;
  font-size: 25px;
  letter-spacing: -0.02em;
}

.authcard__sub {
  margin: 0 0 22px;
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.authcard__alt {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
}

.authform {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ------------------------------- fields ---------------------------- */

.authfield {
  margin-bottom: 16px;
}

.authfield__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

.authfield__req {
  margin-left: 3px;
  color: var(--danger);
}

.authfield__wrap {
  position: relative;
  display: flex;
}

.authfield__input {
  width: 100%;
  /* 16px avoids the iOS focus zoom */
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.authfield__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

.authfield.is-invalid .authfield__input {
  border-color: var(--danger);
}

.authfield__reveal {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
}

.authfield__reveal:hover {
  color: var(--ink);
}

.authfield__reveal:focus-visible {
  outline: 2px solid var(--accent);
}

.authfield__revealicon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.authfield__reveal[aria-pressed="true"] {
  color: var(--accent);
}

.authfield__hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.45;
}

.authfield__error {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 550;
  color: var(--danger);
}

/* ---------------------------- error summary ------------------------ */

.authsummary {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.authsummary:focus {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.authsummary__title {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--danger);
}

.authsummary__list {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
}

.authsummary__list a {
  color: var(--danger);
}

/* ---------------------------- strength meter ----------------------- */

.strength {
  margin: -8px 0 16px;
}

.strength__track {
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.strength__fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--danger);
  transition: width 0.2s ease, background 0.2s ease;
}

.strength__fill[data-score="2"] {
  background: var(--warn);
}

.strength__fill[data-score="3"],
.strength__fill[data-score="4"] {
  background: var(--ok);
}

.strength__label {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* ------------------------------- notes ----------------------------- */

.authnote {
  display: flex;
  gap: 10px;
  margin: 4px 0 20px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
}

.authnote p {
  margin: 0;
}

.authnote--warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.authnote__icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------- aside ----------------------------- */

.authaside {
  padding: 26px;
  background: var(--accent-soft);
  border-radius: var(--radius);
}

.authaside__title {
  margin: 0 0 16px;
  font-size: 16px;
}

.authaside__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.authaside__list li {
  display: flex;
  gap: 11px;
}

.authaside__list strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px;
}

.authaside__list p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.authaside__tick {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 3px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------- account page -------------------------- */

.account {
  max-width: 760px;
  margin: 0 auto;
}

.account__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.account__avatar {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 19px;
  font-weight: 700;
}

.account__name {
  margin: 0;
  font-size: 25px;
  letter-spacing: -0.02em;
}

.account__meta {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.panel--account {
  position: static;
  margin-bottom: 18px;
}

.account__subtitle {
  margin: 0 0 14px;
  font-size: 15px;
}

.account__hint {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.account__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.account__form .authfield {
  width: 100%;
}

.account__form--divided {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.account__status {
  margin: 10px 0 0;
  min-height: 1.3em;
  font-size: 13px;
  color: var(--ok);
}

.account__actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.prefrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.prefrow__label {
  font-size: 14px;
  color: var(--ink-soft);
}

.prefrow .input {
  width: auto;
  min-width: 150px;
}

.account__prefs .check {
  margin-top: 16px;
}

/* ------------------------------ presets ---------------------------- */

.presetlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.presetlist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.presetlist__item > div {
  flex: 1;
  min-width: 0;
}

.presetlist__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.presetlist__meta {
  display: block;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.presetbar {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.presetbar__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 620;
}

.presetbar .input {
  margin-bottom: 10px;
}

.presetbar__hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* ------------------------------ activity --------------------------- */

.activity {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}

.activity__icon {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.activity__tool {
  display: block;
  font-size: 14px;
  font-weight: 550;
}

.activity__meta {
  display: block;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------- danger zone -------------------------- */

.danger {
  margin-top: 24px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 6%, transparent);
}

.danger__title {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--danger);
}

.danger__body {
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.btn--danger-solid {
  background: var(--danger);
  color: #fff;
}

.btn--danger-solid:hover {
  filter: brightness(1.08);
}

/* Header controls must never wrap their own label. */
.btn,
.usermenu__trigger {
  white-space: nowrap;
}

/* ------------------------------ banner ----------------------------- */

.site-banner {
  padding: 0 24px;
  margin-top: 12px;
}

.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 12px 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.45;
}

.banner--warn {
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  color: var(--ink);
}

.banner--ok {
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}

.banner--info {
  background: var(--accent-soft);
}

.banner__icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--warn);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.banner__text {
  flex: 1;
  margin: 0;
  min-width: 0;
}

.banner__action {
  flex: none;
  font-weight: 600;
}

.banner__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

.banner__close:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.banner__close:focus-visible {
  outline: 2px solid var(--accent);
}

.banner__closeicon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (max-width: 680px) {
  .site-banner {
    padding: 0 14px;
  }

  .banner {
    flex-wrap: wrap;
  }

  .banner__icon {
    display: none;
  }
}

/* --------------------------- auth extras --------------------------- */

.authfield__opt {
  font-weight: 450;
  color: var(--ink-faint);
}

.authrow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  width: 100%;
}

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

.authform__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: -4px 0 18px;
  font-size: 14px;
}

.authform__link {
  font-size: 14px;
  font-weight: 600;
}

.authform__fine {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
  line-height: 1.5;
  text-align: center;
}

.authcard--message {
  text-align: left;
}

.authcard__icon {
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
  padding: 7px;
  border-radius: 50%;
  background: var(--accent-soft);
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.authcard--ok .authcard__icon {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  stroke: var(--ok);
}

.authcard--warn .authcard__icon {
  background: var(--warn-bg);
  stroke: var(--warn);
}

.authcard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* ------------------------------ notices ---------------------------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
  background: var(--accent-soft);
}

.notice p {
  flex: 1;
  margin: 0;
}

.notice--ok {
  background: color-mix(in srgb, var(--ok) 12%, var(--surface));
}

.notice--warn {
  background: var(--warn-bg);
}

.notice__icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notice--ok .notice__icon {
  stroke: var(--ok);
}

.notice--warn .notice__icon {
  stroke: var(--warn);
}

/* ------------------------------- badges ---------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.badge--ok {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok);
}

.badge--warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.badge--bad {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
}

/* --------------------------- account extras ------------------------ */

.account__head {
  flex-wrap: wrap;
}

.account__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.account__console {
  margin-left: auto;
}

.account__nav {
  position: sticky;
  top: 72px;
  z-index: 5;
  margin: 0 0 18px;
  padding: 6px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.account__nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.account__navlink {
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.account__navlink:hover,
.account__navlink:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}

.panel--account {
  /* The header is already in scroll-padding; this clears the sticky
     section links. */
  scroll-margin-top: 76px;
}

.panel--account .panel__title:focus {
  outline: none;
}

.account__status[data-tone="error"] {
  color: var(--danger);
}

.account__status[data-tone="muted"] {
  color: var(--ink-faint);
}

.emailrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.emailrow > div {
  flex: 1;
  min-width: 0;
}

.emailrow__icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.emailrow__address {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.emailrow__state {
  display: block;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.signins {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
}

.signins__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}

.signins__item > div {
  flex: 1;
  min-width: 0;
}

.signins__device {
  display: block;
  font-size: 14px;
  font-weight: 550;
}

.signins__meta {
  display: block;
  font-size: 12.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.activity__loading,
.activity__empty {
  padding: 8px 2px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.danger .account__form {
  margin-top: 4px;
}

/* Links styled as buttons (Sign in, Sign up, "Use", message-card
   actions) should look like buttons, not underlined text. */
a.btn {
  text-decoration: none;
}