/* YokaiJobs styles. UI round 1: design tokens, header and footer from the Paper file
   "YokaiJobs" (page Design; the Home, Resources and Form states artboards). Light only.
   Values are Paper's own. Mobile layouts, hover states and motion (UI round 4) are designed
   in code within Paper's tokens (owner's rule change); see the end of the file. */

/* ---------- Font: Geist (OFL, assets/fonts/OFL.txt), self-hosted ----------
   From the official vercel/geist-font release, subset to Latin, punctuation and ₹ € £ $,
   weights 400–600 (the ones Paper uses). How to rebuild it: docs/fonts.md. */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin-400-600.b4e1715248.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens (Paper names) ---------- */
:root {
  /* Colour: Tailwind neutral greys, violet accent, black alpha steps. */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-200: #E5E5E5;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A1A1A1;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0A0A0A;
  --color-violet-50: #F5F3FF;
  --color-violet-100: #EDE9FE;
  --color-violet-200: #DDD6FF;
  --color-violet-300: #C4B4FF;
  --color-violet-400: #A684FF;
  --color-violet-500: #8E51FF;
  --color-violet-600: #7F22FE;
  --color-violet-700: #7008E7;
  --color-violet-800: #5D0EC0;
  --color-violet-900: #4D179A;
  --color-violet-950: #2F0D68;
  /* Status colours (Paper tokens; UI round 3: errors, success, resource tags). */
  --color-red-50: #FEF2F2;
  --color-red-500: #FB2C36;
  --color-red-600: #E7000B;
  --color-emerald-50: #ECFDF5;
  --color-emerald-500: #00BC7D;
  --color-emerald-600: #009966;
  --color-emerald-700: #007A55;
  --color-amber-50: #FFFBEB;
  --color-amber-500: #FD9A00;
  --color-amber-600: #E17100;
  --color-amber-700: #BB4D00;
  --color-amber-900: #7B3306;
  --color-alpha-black-alpha-2: rgb(24 24 27 / 2%);
  --color-alpha-black-alpha-4: rgb(24 24 27 / 4%);
  --color-alpha-black-alpha-6: rgb(24 24 27 / 6%);
  --color-alpha-black-alpha-8: rgb(24 24 27 / 8%);
  --color-alpha-black-alpha-10: rgb(24 24 27 / 10%);
  --color-alpha-black-alpha-12: rgb(24 24 27 / 12%);
  --color-alpha-black-alpha-16: rgb(24 24 27 / 16%);
  --color-alpha-black-alpha-24: rgb(24 24 27 / 24%);
  --color-alpha-black-alpha-40: rgb(24 24 27 / 40%);
  --color-alpha-black-alpha-56: rgb(24 24 27 / 56%);
  --color-alpha-black-alpha-64: rgb(24 24 27 / 64%);
  --color-alpha-black-alpha-72: rgb(24 24 27 / 72%);
  --color-alpha-black-alpha-80: rgb(24 24 27 / 80%);
  --color-alpha-black-alpha-88: rgb(24 24 27 / 88%);
  /* Paper's footer background (a literal in Paper, not one of its tokens). */
  --color-surface-footer: #FCFCFC;

  /* Type */
  --font-family-sans: "Geist", system-ui, sans-serif;
  --font-family-mono: "Geist Mono", ui-monospace, monospace;
  --font-size-xxs: 12px;
  --font-size-xs: 13px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-size-5xl: 48px;
  --font-size-6xl: 60px;
  --font-size-7xl: 72px;
  --font-size-8xl: 96px;
  --font-size-9xl: 128px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-tracking-tighter: -0.8px;
  --font-tracking-tight: -0.4px;
  --font-tracking-normal: 0px;
  --font-tracking-wide: 0.4px;
  --font-tracking-wider: 0.8px;
  --font-tracking-widest: 1.6px;
  /* The tracking Paper uses on 14px body text (a literal in Paper). */
  --font-tracking-text: -0.005em;
  --font-leading-3: 12px;
  --font-leading-4: 16px;
  --font-leading-5: 20px;
  --font-leading-6: 24px;
  --font-leading-7: 28px;
  --font-leading-8: 32px;
  --font-leading-9: 36px;
  --font-leading-10: 40px;

  /* Spacing */
  --spacing-0: 0px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-2-5: 10px;
  --spacing-3: 12px;
  --spacing-3-5: 14px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  --spacing-36: 144px;
  --spacing-40: 160px;

  /* Layout: Paper's content column. */
  --container-content: 800px;

  /* Radii */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-base: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-full: 9999px;

  /* Borders */
  --border-subtle: 1px solid var(--color-alpha-black-alpha-8);
  --border-field: 1px solid var(--color-alpha-black-alpha-10);

  /* Focus ring: Paper's focused input (Form states), on every focusable element. */
  --focus-ring: 0 0 0 1px var(--color-neutral-800), 0 0 0 3px color-mix(in srgb, var(--color-violet-600) 20%, transparent);
}

/* ---------- Base ---------- */
body {
  margin: 0;
  background-color: var(--color-white);
  font-family: var(--font-family-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ---------- Header (Paper: Home / Navbar) ---------- */
.site-header {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 64px;
  background-color: var(--color-white);
  overflow-wrap: anywhere;
}
/* "Skip to content" (accessibility pass, 2026-10-29): off screen until focused, then a
   primary button in the top-left corner over the header. */
.skip-link {
  position: absolute;
  top: var(--spacing-3);
  left: var(--spacing-3);
  z-index: 100;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-50);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--spacing-6)));
}
.skip-link:focus-visible {
  transform: none;
  box-shadow: var(--focus-ring);
}
main:focus {
  outline: none;
}
.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: var(--container-content);
  max-width: 100%;
}
.site-header-start {
  display: flex;
  align-items: center;
  /* Paper's 16px, widened a little (owner, UI round 4 fixes). */
  gap: var(--spacing-6);
}
.logo {
  display: flex;
}
.logo img,
.logo .logo-svg {
  display: block;
  width: 146.4375px;
  height: 30px;
}
/* The inline SVG logo takes its colour from here (Paper: neutral-950 in the header,
   neutral-800 in the footer). The PNG fallback is always #0A0A0A. */
.site-header .logo {
  color: var(--color-neutral-950);
}
.site-footer .logo {
  color: var(--color-neutral-800);
}
/* The ghost's eyes are shapes on its body (src/layout.ts splitGhost), filled with the
   background behind the logo so they read as the original holes. */
.logo-ghost-eye {
  fill: var(--color-white);
}
.site-footer .logo-ghost-eye {
  fill: var(--color-surface-footer);
}

/* Floating ghost on logo hover (header and footer; designed in code, UI round 4 exception).
   ghost.js adds .is-floating on pointer enter and removes it at the end of a loop after the
   pointer leaves, so every part comes back to rest. One 2.4s loop shared by all parts: the
   ghost bobs and tilts, its tail sways (a skew from the eyes down), the eyes glance right,
   then left, and blink once. Transform only; lengths are the logo's viewBox units (about
   0.19px each at 30px tall). Fine pointers with motion allowed only. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .logo .logo-svg {
    overflow: visible;
  }
  .logo-ghost,
  .logo-ghost-body,
  .logo-ghost-eyes,
  .logo-ghost-eye {
    transform-box: fill-box;
  }
  .logo-ghost {
    transform-origin: 50% 50%;
  }
  .logo-ghost-body {
    transform-origin: 50% 35%;
  }
  .logo-ghost-eye {
    transform-origin: 50% 50%;
  }
  .logo.is-floating .logo-ghost {
    animation: ghost-float 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .logo.is-floating .logo-ghost-body {
    animation: ghost-tail 2.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .logo.is-floating .logo-ghost-eyes {
    animation: ghost-glance 2.4s cubic-bezier(0.32, 0.72, 0, 1) infinite;
  }
  .logo.is-floating .logo-ghost-eye {
    animation: ghost-blink 2.4s linear infinite;
  }
}
@keyframes ghost-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-14px) rotate(-4deg); }
  50% { transform: translateY(-5px) rotate(1.5deg); }
  75% { transform: translateY(-16px) rotate(-2.5deg); }
}
@keyframes ghost-tail {
  0%, 100% { transform: skewX(0deg); }
  20% { transform: skewX(7deg); }
  45% { transform: skewX(-5deg); }
  70% { transform: skewX(6deg); }
  90% { transform: skewX(-2deg); }
}
@keyframes ghost-glance {
  0%, 8% { transform: translate(0, 0); }
  20%, 40% { transform: translate(6px, -1px); }
  55%, 75% { transform: translate(-5px, 1px); }
  90%, 100% { transform: translate(0, 0); }
}
@keyframes ghost-blink {
  0%, 46%, 54%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
}
.nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  box-sizing: border-box;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-lg);
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
  text-decoration: none;
}
.nav-link[aria-current] {
  color: var(--color-neutral-800);
  background-image: linear-gradient(in oklab 180deg, var(--color-alpha-black-alpha-4) 0%, var(--color-alpha-black-alpha-6) 100%);
}

/* Primary button (Paper: "Get job alerts"). */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-0-5);
  min-height: 28px;
  box-sizing: border-box;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-lg);
  background-image: linear-gradient(in oklab 180deg, var(--color-neutral-800) 0%, var(--color-neutral-900) 100%);
  box-shadow: 0 0 0 1px var(--color-neutral-800), 0 1px 3px var(--color-neutral-600);
  color: var(--color-neutral-50);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
  text-decoration: none;
  white-space: nowrap;
}
.button-primary > span {
  padding-inline: var(--spacing-0-5);
}
.button-primary .icon {
  flex-shrink: 0;
}
.button-primary:focus-visible {
  box-shadow: 0 0 0 1px var(--color-neutral-800), 0 1px 3px var(--color-neutral-600), var(--focus-ring);
}

/* ---------- Footer (Paper: Home / Breakpoint=Desktop) ---------- */
.site-footer {
  display: flex;
  justify-content: center;
  padding: var(--spacing-20) var(--spacing-12) var(--spacing-16);
  background-color: var(--color-surface-footer);
  overflow-wrap: anywhere;
}
.site-footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  width: var(--container-content);
  max-width: 100%;
}
.site-footer p,
.site-footer a,
.site-footer [data-link-pending] {
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
  text-decoration: none;
}
.site-footer p {
  margin: 0;
}
.footer-top {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-10);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
  flex-shrink: 0;
  width: 280px;
}
/* Paper's animation slot above the © line: the flower field (design round, owner;
   site/assets/meadow.js). A mask fades its top, sides and ground into the footer. */
.footer-slot {
  height: 134px;
  margin-bottom: calc(var(--spacing-3) - var(--spacing-12));
}
.footer-art {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%, #000 92%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 50%, #000 92%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
/* The live count, after Paper's 16px icon box holding an 8px violet-500 dot. */
.footer-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
}
.footer-status::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-violet-500);
}
.footer-columns {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-6);
  flex: 1 1 800px;
  min-width: 0;
}
.footer-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex: 1 1 182px;
  min-width: 0;
}
.footer-column h2 {
  margin: 0;
  color: var(--color-neutral-800);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.footer-column ul,
.footer-bottom ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-column li,
.footer-bottom li {
  display: flex;
}
.footer-column ul {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-3);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom ul {
  gap: var(--spacing-6);
}

/* ---------- Mobile header and footer (Paper: Mobile Reference, owner, 2026-10-29) ----------
   Header on one row: the logo's ghost mark (the link keeps aria-label "YokaiJobs"), Jobs (and
   Resources) with the desktop spacing, and "Get job alerts". Measured (Geist is self-hosted):
   mark 30, Jobs 53, Resources 88, "Get job alerts" 125, "Get alerts" 102, 32px of gutter and
   the gaps. With Resources the row needs 352px, so below 380 the nav tightens (16px back)
   and below 352 the button reads "Get alerts"; without it the row needs 256px. Below 320px the button is the bell
   alone, its words kept for screen readers. Footer: brand block on top, the link groups in
   two columns, then the flowers and the legal links over the © line. No horizontal scroll
   at 320px. Breakpoint: Paper's sm (640px). */
@media (max-width: 640px) {
  .site-header {
    padding-inline: var(--spacing-4);
  }
  .site-header-inner {
    gap: var(--spacing-3);
  }
  .site-header-start {
    gap: var(--spacing-2);
    min-width: 0;
  }
  .button-alerts {
    flex-shrink: 0;
  }
  /* Only the ghost mark: the 30px mark of the 146px logo, the rest clipped. */
  .site-header .logo {
    width: 30px;
  }
  .site-header .logo img,
  .site-header .logo .logo-svg {
    flex-shrink: 0;
    /* A little room above and below for the floating ghost. */
    clip-path: inset(-4px calc(100% - 30px) -4px 0);
  }
}
@media (max-width: 351px) {
  .site-header:has([data-resources-link]) .button-alerts-job {
    display: none;
  }
}
@media (max-width: 379px) {
  .site-header:has([data-resources-link]) .nav {
    gap: var(--spacing-1);
  }
  .site-header:has([data-resources-link]) .nav-link {
    padding-inline: var(--spacing-2);
  }
}
@media (max-width: 319px) {
  .button-alerts {
    width: 28px;
    padding-inline: 0;
  }
  .button-alerts-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (max-width: 640px) {
  .site-footer {
    padding: var(--spacing-16) var(--spacing-4) var(--spacing-10);
  }
  .footer-top {
    flex-direction: column;
    gap: var(--spacing-10);
  }
  .footer-brand {
    width: auto;
    max-width: 280px;
  }
  .footer-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-6);
    flex: none;
    width: 100%;
  }
  /* The legal links sit centred above the © line. */
  .footer-bottom {
    flex-direction: column-reverse;
    align-items: center;
    gap: var(--spacing-6);
  }
  .footer-bottom p {
    align-self: stretch;
  }
}

/* ---------- Behaviour (round 13; not look) ---------- */

/* The honeypot field stays in the form for bots but off-screen for people (and screen readers: aria-hidden). */
.hp { position: absolute; left: -10000px; }

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

/* ---------- UI round 2: home and list pages (Paper: Home, Home / Search,
   Home / Empty State, Dropdowns). Values are Paper's; hover states, the row's arrow and the
   mobile layout are UI round 4's (end of file). ---------- */
:root {
  /* Paper literals used on these pages (not Paper tokens). */
  --color-search-placeholder: var(--color-neutral-500);
  --color-kbd-text: #5E5F6E;
  --color-pop-secondary: var(--color-neutral-500);
  --color-switch-off-track: #FAFAFA;
  --color-switch-off-thumb: #D4D4D8;
  --color-alpha-white-alpha-0: rgb(255 255 255 / 0%);
  --color-alpha-white-alpha-10: rgb(255 255 255 / 10%);
  --color-alpha-white-alpha-16: rgb(255 255 255 / 16%);
  --color-alpha-white-alpha-88: rgb(255 255 255 / 88%);
  /* Paper's chip (filters, the current page). */
  --chip-fill: linear-gradient(in oklab 180deg, var(--color-alpha-white-alpha-10) 0%, var(--color-alpha-white-alpha-0) 67.7%);
  --chip-shadow: inset 0 -0.25px 0 var(--color-alpha-black-alpha-8), inset 0 1px 0 var(--color-alpha-white-alpha-16), 0 1px 2px -2px var(--color-alpha-black-alpha-4), 0 2px 3px -2px var(--color-alpha-black-alpha-4);
  /* Paper's dropdown surface. */
  --pop-shadow: inset 0 1px 0 #FFFFFF26, 0 4px 6px -4px var(--color-alpha-black-alpha-8), 0 10px 15px -4px var(--color-alpha-black-alpha-6);
}

/* The content column: Paper's 800px, with a 16px gutter on narrow screens. */
.hero,
.list-tools,
.list,
.related,
.browse,
.faq-section {
  box-sizing: border-box;
  width: min(var(--container-content), 100% - 2 * var(--spacing-4));
  margin-inline: auto;
}

/* ---------- Hero (Paper: Home / Hero) ---------- */
.hero {
  padding-top: var(--spacing-20);
}
.hero-title,
.section-title {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--spacing-4);
  background-image: linear-gradient(in oklab 180deg, var(--color-alpha-black-alpha-88) 0%, var(--color-neutral-900) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.64px;
  line-height: var(--font-leading-10);
}
.hero-text {
  width: 55%;
  margin: 0;
  color: var(--color-neutral-600);
  font-size: var(--font-size-base);
  line-height: var(--font-leading-6);
  text-wrap: pretty;
}
.hero-text + .hero-text {
  margin-top: var(--spacing-2);
}
/* ---------- Landing pages (round 17; Paper has no landing template, so designed in code
   from Paper's tokens to match the home hero): the breadcrumb as one muted line above the
   H1, the H1 in the hero title style and the intro in the hero subtext style. ---------- */
.breadcrumb {
  margin-bottom: var(--spacing-4);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.breadcrumb li {
  display: flex;
  align-items: center;
  min-width: 0;
}
.breadcrumb li + li::before {
  content: "/";
  padding-inline: var(--spacing-2);
  color: var(--color-neutral-300);
}
.breadcrumb a {
  border-radius: var(--radius-xs);
  color: inherit;
  text-decoration: none;
}
.breadcrumb [aria-current] {
  color: var(--color-neutral-700);
}
/* The intro's last line ("Updated <date>") is a quiet note under the facts. */
.hero-landing .hero-text:last-child:not(:first-of-type) {
  margin-top: var(--spacing-3);
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
/* No search bar on landing pages: the list sits one section gap under the hero. */
.hero-landing + .list {
  padding-top: var(--spacing-12);
}

/* ---------- Search and filter bar (Paper: Home / Hero, Filter actions) ---------- */
.list-tools {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-top: var(--spacing-20);
}
.search {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  padding: var(--spacing-3);
  border-radius: var(--radius-base);
  background-color: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-alpha-black-alpha-10), 0 1px 5px -4px var(--color-alpha-black-alpha-16), 0 2px 5px var(--color-alpha-black-alpha-4);
}
.search:focus-within {
  box-shadow: 0 1px 5px -4px var(--color-alpha-black-alpha-16), 0 2px 5px var(--color-alpha-black-alpha-4), var(--focus-ring);
}
.search > .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-neutral-400);
}
.search-input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-neutral-800);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
  -webkit-appearance: none;
  appearance: none;
}
.search-input::placeholder {
  color: var(--color-search-placeholder);
  opacity: 1;
}
.search-input:focus-visible,
.pop-search-input:focus-visible,
.salary-range:focus-visible {
  box-shadow: none;
}
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.kbd {
  display: flex;
  flex-shrink: 0;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-alpha-black-alpha-12), 0 1px 0 var(--color-alpha-black-alpha-24);
  color: var(--color-kbd-text);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-3);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}
.chips {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
}
.filter {
  position: relative;
  flex-shrink: 0;
}
.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  margin: 0;
  padding: var(--spacing-1) var(--spacing-2);
  border: 0.5px dashed var(--color-alpha-black-alpha-16);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  background-image: var(--chip-fill);
  background-origin: border-box;
  box-shadow: var(--chip-shadow);
  color: var(--color-neutral-500);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
  white-space: nowrap;
  cursor: pointer;
}
.chip-solid {
  padding-right: 6px;
  border-style: solid;
}
.chip .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-neutral-400);
}
.chip-label {
  display: flex;
  align-items: center;
  padding-inline: var(--spacing-0-5);
}
.chip-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 20px;
  min-height: 20px;
  padding-inline: var(--spacing-1);
  border-radius: var(--radius-sm);
  background-color: var(--color-alpha-black-alpha-4);
  box-shadow: inset 0 -1px 0 var(--color-alpha-black-alpha-8), inset 0 1px 0 var(--color-alpha-white-alpha-16);
  color: var(--color-neutral-600);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-4);
}
/* Open (Paper: Filter bar — open dropdown under chip): a solid border. No fill (owner,
   2026-10-29: the chip keeps its background open, hovered and with a count). */
.chip[aria-expanded="true"] {
  border-style: solid;
}
/* list.js eases the chip's width while its count badge comes or goes (owner, 2026-10-29). */
.chip {
  position: relative;
}
.chip.chip-sizing {
  justify-content: flex-start;
  overflow: clip;
  transition: width var(--dur-layout) var(--spring-layout), transform var(--duration-press) var(--ease-out);
}
.chip-badge {
  transition: opacity 160ms ease, transform var(--dur-pop) var(--spring-pop);
}
.chip-badge.badge-enter {
  opacity: 0;
  transform: scale(0.5);
  transition: none;
}
.chip-badge.badge-leave {
  position: absolute;
  opacity: 0;
  transform: scale(0.5);
  transition-duration: 120ms;
}
.chip:focus-visible {
  box-shadow: var(--chip-shadow), var(--focus-ring);
}

/* ---------- Dropdowns (Paper: Dropdowns) ---------- */
.pop {
  position: absolute;
  /* Paper: 8px under the chip, left edges aligned (the sort menu right-aligned), over the list. */
  top: calc(100% + var(--spacing-2));
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 224px;
  overflow: clip;
  border: 1px solid var(--color-alpha-black-alpha-6);
  border-radius: var(--radius-xl);
  background-color: var(--color-alpha-white-alpha-88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--pop-shadow);
  overflow-wrap: anywhere;
}
.pop-wide {
  width: 331px;
}
.pop-end {
  left: auto;
  right: 0;
}
.pop-items {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--spacing-1);
}
.pop-items-next {
  padding-top: 0;
}
/* The Location list's height before it scrolls. */
.pop-scroll {
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pop-label {
  margin: 0;
  padding: var(--spacing-1) var(--spacing-2);
  color: var(--color-neutral-500);
  font-size: var(--font-size-xxs);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-4);
}
/* Alert limits (owner, 2026-10-30; designed in code within Paper's tokens): why a search
   can't be used, in the 16px gap under the search box so the list never moves, and the
   Location dropdown's 30-country note. */
.search {
  position: relative;
}
.search-note {
  position: absolute;
  top: 100%;
  left: var(--spacing-3);
  right: var(--spacing-3);
  margin: 0;
  overflow: hidden;
  color: var(--color-neutral-600);
  font-size: var(--font-size-xs);
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pop-limit {
  margin: 0;
  padding: 6px var(--spacing-3) 0;
  color: var(--color-neutral-600);
  font-size: var(--font-size-xs);
  line-height: 16px;
}
.pop-none {
  margin: 0;
  padding: 6px var(--spacing-2);
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: 6px var(--spacing-3) 6px var(--spacing-2);
  border-radius: var(--radius-lg);
  color: var(--color-neutral-800);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
  cursor: pointer;
}
.opt.is-disabled {
  opacity: 0.6;
  cursor: default;
}
.opt-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.opt-box,
.opt-radio {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.opt-box::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: var(--radius-sm);
  background-color: var(--color-alpha-black-alpha-6);
  box-shadow: 0 0 0 1px #00000014;
}
/* The tick (design round, from the owner's checkbox reference): hidden by opacity and
   scale, and drawn in by its stroke (pathLength 1) when ticked; the motion block times it. */
.opt-check {
  position: relative;
  width: 16px;
  height: 16px;
  color: var(--color-white);
  opacity: 0;
  transform: scale(0.5);
}
.opt-check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.opt-input:checked + .opt-box::before {
  background-color: var(--color-violet-600);
  box-shadow: 0 1px 2px var(--color-violet-400), 0 0 0 1px var(--color-violet-500);
}
.opt-input:checked + .opt-box .opt-check,
.check-input:checked + .check-box .opt-check {
  opacity: 1;
  transform: none;
}
.opt-input:checked + .opt-box .opt-check path,
.check-input:checked + .check-box .opt-check path {
  stroke-dashoffset: 0;
}
.opt-radio::before {
  content: "";
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-alpha-black-alpha-8);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  box-shadow: 0 1px 2px -0.5px #16191D0A;
}
.opt-input:checked + .opt-radio::before {
  border-color: var(--color-alpha-black-alpha-10);
  background-color: var(--color-violet-500);
  background-image: radial-gradient(circle, var(--color-white) 0 3px, transparent 3.5px);
  box-shadow: inset 0 -1px 0 var(--color-alpha-black-alpha-8), 0 1px 2px -0.5px var(--color-alpha-black-alpha-4);
}
.opt-input:focus-visible + .opt-box::before,
.opt-input:focus-visible + .opt-radio::before {
  box-shadow: var(--focus-ring);
}
.opt-label {
  flex: 1;
  min-width: 0;
}
.opt-count {
  flex-shrink: 0;
  color: var(--color-neutral-500);
  text-align: right;
}
.pop-search {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--spacing-3);
  border-bottom: 0.5px solid var(--color-alpha-black-alpha-8);
}
.pop-search-input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-neutral-800);
  font: inherit;
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-5);
  -webkit-appearance: none;
  appearance: none;
}
.pop-search-input::placeholder {
  color: var(--color-neutral-500);
  opacity: 1;
}
.pop-search:focus-within {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--color-violet-600) 20%, transparent);
}
.pop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-1);
  min-height: 32px;
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
  border-top: 0.5px solid var(--color-alpha-black-alpha-8);
}
.pop-actions {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
}
.pop-found + .pop-actions {
  flex: none;
}
.pop-found {
  flex-shrink: 0;
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.pop-clear {
  margin: 0;
  padding: 0 var(--spacing-0-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-pop-secondary);
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
  cursor: pointer;
}
.pop-done {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 0;
  padding: var(--spacing-0-5) var(--spacing-2);
  border: 0;
  border-radius: var(--radius-lg);
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-50);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
  cursor: pointer;
}

/* Salary (Paper: Salary Not Set, Salary Set). */
.pop-salary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4) var(--spacing-3);
}
.salary-head,
.salary-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.salary-value {
  color: var(--color-neutral-800);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.salary-unit {
  color: var(--color-neutral-400);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.salary-scale {
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.salary-range {
  --fill: 0%;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.salary-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 16px;
  background: linear-gradient(var(--color-violet-600), var(--color-violet-600)) 1px 50% / max(0px, calc(var(--fill) - 2px)) 4px no-repeat, var(--color-alpha-black-alpha-6);
}
.salary-range::-moz-range-track {
  height: 6px;
  border-radius: 16px;
  background-color: var(--color-alpha-black-alpha-6);
}
.salary-range::-moz-range-progress {
  height: 4px;
  border-radius: 16px;
  background-color: var(--color-violet-600);
}
.salary-range::-webkit-slider-thumb {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border: 1px solid #0000001A;
  border-radius: 16px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px -2px #0000000F, 0 4px 12px -1px #0000000F;
  -webkit-appearance: none;
  appearance: none;
}
.salary-range::-moz-range-thumb {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid #0000001A;
  border-radius: 16px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px -2px #0000000F, 0 4px 12px -1px #0000000F;
}
.salary-range:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--focus-ring);
}
.salary-range:focus-visible::-moz-range-thumb {
  box-shadow: var(--focus-ring);
}
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2-5);
  margin-top: var(--spacing-3);
  cursor: pointer;
}
.switch {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 40px;
  height: 20px;
  margin: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-switch-off-track);
  box-shadow: 0 1px 2px #0000001F, 0 0 0 1px #00000014;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background-color: var(--color-switch-off-thumb);
  box-shadow: 0 1px 2px -1px #00000014, 0 1px 3px #00000014;
}
.switch:checked {
  background-color: var(--color-violet-500);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-violet-500) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-violet-600) 20%, transparent);
}
.switch:checked::before {
  left: 22px;
  background-color: var(--color-white);
}
/* Off until a minimum is set (Paper: Salary Not Set), whatever the stored setting. */
.switch:disabled,
.switch:disabled:checked {
  background-color: var(--color-switch-off-track);
  box-shadow: 0 1px 2px #0000001F, 0 0 0 1px #00000014;
  opacity: 0.7;
  cursor: default;
}
.switch:disabled::before {
  left: 4px;
  background-color: var(--color-switch-off-thumb);
}
.switch:focus-visible {
  box-shadow: var(--focus-ring);
}
.switch-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing-1);
}
.switch-label {
  color: var(--color-neutral-800);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
}
.switch-note {
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}

/* ---------- Count line (Paper: Home / Search, Item) ---------- */
.list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-top: var(--spacing-6);
}
.count-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  height: 20px;
  /* Paper: 4px between the count line and the first row. */
  margin-bottom: calc(var(--spacing-1) - var(--spacing-4));
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
  white-space: nowrap;
  scroll-margin-top: var(--spacing-4);
}
.count-line p {
  display: flex;
  align-items: center;
  margin: 0;
}
#filters-applied {
  white-space: pre;
}
.link-button {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-neutral-800);
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.alerts-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  border-radius: var(--radius-sm);
  color: var(--color-violet-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
  text-decoration: none;
}
.alerts-link .icon {
  flex-shrink: 0;
}

/* ---------- Job rows (Paper: Jobs Row) ---------- */
.jobs {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jobs:empty {
  display: none;
}
/* No separators between rows (owner, UI round 2 review; Paper has them). */
.job {
  display: flex;
  flex-direction: column;
}
/* The row bleeds 12px past the column (Paper's 824px frame), so its hover background does too. */
.job-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin-inline: calc(-1 * var(--spacing-3));
  padding: var(--spacing-5) var(--spacing-3);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.job-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--spacing-11);
  height: var(--spacing-11);
  border-radius: var(--radius-base);
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-600);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.job-main,
.job-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
}
.job-main {
  flex: 1 1 342px;
}
.job-side {
  flex: 0 1 auto;
  align-items: flex-end;
  max-width: 40%;
  text-align: right;
}
.job-title-line {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 0;
}
.job-title,
.job-meta,
.salary,
.added {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.job-title {
  min-width: 0;
  color: var(--color-neutral-800);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 20px;
  padding-inline: 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-4);
}
.tag-new {
  background-color: var(--color-violet-100);
  color: var(--color-violet-800);
}
/* Worldwide (Paper: Job row — Worldwide tag): only when the location is Remote anywhere. */
.tag-worldwide {
  box-shadow: inset 0 0 0 1px var(--color-alpha-black-alpha-12);
  color: var(--color-neutral-500);
}
/* The arrow that fades in on hover and focus (UI round 4, end of file). */
.job-arrow {
  flex-shrink: 0;
  color: var(--color-neutral-400);
  opacity: 0;
}
.job-link:focus-visible .job-arrow {
  opacity: 1;
}
.job-meta {
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.salary {
  color: var(--color-neutral-900);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
/* A listed salary stands out (neutral-900, medium; owner, UI round 4 fixes); "Salary not listed" stays muted. */
.salary.muted {
  color: var(--color-neutral-500);
  font-weight: var(--font-weight-normal);
}
.added {
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}

/* ---------- Empty state (Paper: Home / Empty State) ---------- */
.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
.empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 384px;
  max-width: 100%;
  padding: var(--spacing-6);
  text-align: center;
}
.empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-500);
}
.empty-title {
  margin: var(--spacing-4) 0 var(--spacing-1);
  color: var(--color-neutral-800);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-6);
}
.empty-text {
  margin: 0 0 var(--spacing-4);
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.empty .button-primary {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.empty .alerts-link {
  margin-top: var(--spacing-3);
}

/* ---------- Pager (Paper: Home / Row) ---------- */
.pager-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  min-height: 32px;
}
.pager-showing {
  flex-shrink: 0;
  margin: 0;
  color: var(--color-neutral-600);
  font-size: var(--font-size-xs);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.pager-full,
.pager-compact {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pager-full li {
  display: flex;
}
.page-arrow,
.page-num,
.page-step,
.pager .gap {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--spacing-8);
  height: var(--spacing-8);
  border-radius: var(--radius-lg);
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
  text-decoration: none;
}
.page-num {
  padding-inline: 6px;
}
.page-arrow,
.page-step {
  color: var(--color-neutral-700);
}
.page-arrow.off,
.page-step.off {
  color: var(--color-neutral-400);
}
.page-num.current {
  border: 0.5px solid var(--color-alpha-black-alpha-16);
  background-color: var(--color-white);
  background-image: var(--chip-fill);
  background-origin: border-box;
  box-shadow: var(--chip-shadow);
  color: var(--color-neutral-800);
}
.page-step {
  gap: var(--spacing-1);
  padding-inline: var(--spacing-2);
}
.page-of {
  padding-inline: var(--spacing-2);
  color: var(--color-neutral-600);
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-5);
}
.pager-compact {
  display: none;
}

/* Related lists on landing pages (round 17, designed in code like the landing hero): a small
   heading in the footer's group style and the links in the footer's muted link style. */
.related {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}
.related h2 {
  margin: 0;
  color: var(--color-neutral-900);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.related ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-3) var(--spacing-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.related a {
  border-radius: var(--radius-xs);
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
  text-decoration: none;
}

/* ---------- /browse/ (owner, 2026-10-29) ----------
   Every landing page as muted link lists under quiet group headings, in the related links'
   style (Paper's tokens): three columns on desktop, one on phones. */
.browse {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  padding-top: var(--spacing-12);
  padding-bottom: var(--spacing-16);
}
.browse-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.browse h2 {
  margin: 0;
  color: var(--color-neutral-900);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.browse ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-3) var(--spacing-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.browse a {
  border-radius: var(--radius-xs);
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .browse a:hover {
    color: var(--color-neutral-900);
  }
}
@media (max-width: 640px) {
  .browse ul {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .browse a {
    display: flex;
    align-items: center;
    min-height: var(--hit);
  }
}

/* ---------- FAQ section (Paper: Home / Common questions) ---------- */
.faq-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-14);
}
.faq-section .section-title {
  margin: 0;
  font-size: var(--font-size-3xl);
  line-height: var(--font-leading-9);
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
/* Under the six home questions (owner, round 17 review): the link to every question on
   /faq/, a back link (.back-link) pointing forward, under the list where the eye ends. */
.faq-all {
  width: fit-content;
}
.faq-item {
  border-radius: var(--radius-xl);
  background-color: var(--color-alpha-black-alpha-4);
}
.faq-item[open] {
  background-color: var(--color-white);
  box-shadow: 0 1px 2px -1px var(--color-alpha-black-alpha-6), 0 1px 3px var(--color-alpha-black-alpha-6);
  outline: 1px solid var(--color-alpha-black-alpha-10);
}
.faq-item summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-xl);
  color: var(--color-neutral-800);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-6);
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-q {
  flex: 1;
  min-width: 0;
}
.faq-item .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
/* One "+" that turns into Paper's "×" (design round, the owner's icon-morph reference): a
   45° turn, timed in the motion block; the colour changes at once. */
.faq-icon {
  color: var(--color-neutral-500);
}
.faq-item[open] .faq-icon {
  color: var(--color-neutral-800);
  transform: rotate(45deg);
}
/* Paper: 12px under the question, 16px at the bottom. Round 17: the 12px is the open
   question's own bottom padding (it eases from 16 to 12 as the answer opens), and the
   answer's padding sits on an inner box so the height animation can clip it. */
.faq-item {
  --faq-pad: var(--spacing-4);
  --faq-pad-open: var(--spacing-3);
}
.faq-item[open] summary {
  padding-bottom: var(--faq-pad-open);
}
.faq-a-inner {
  padding: 0 var(--spacing-5) var(--spacing-4);
}
.faq-a {
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.faq-a p {
  max-width: 560px;
  margin: 0;
}
.faq-a p + p {
  margin-top: var(--spacing-2);
}
/* Links in answers (Paper's answer has none). */
.faq-a a {
  border-radius: var(--radius-xs);
  color: inherit;
  text-decoration: underline;
}

/* ---------- Mobile, UI round 2 (finished in UI round 4) ----------
   Chips scroll sideways, dropdowns open as bottom sheets, rows stack, the pager becomes
   "‹ Prev  Page 2 of N  Next ›". No horizontal scroll at 360px. */
@media (max-width: 640px) {
  .hero {
    padding-top: var(--spacing-12);
  }
  .hero-title {
    font-size: var(--font-size-3xl);
    line-height: var(--font-leading-9);
  }
  .hero-text {
    width: auto;
  }
  .list-tools {
    padding-top: var(--spacing-10);
  }
  /* The chip row (sort included) scrolls sideways under the search box. */
  .filter-bar {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-inline: calc(-1 * var(--spacing-4));
    padding: 2px var(--spacing-4);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar {
    display: none;
  }
  .filter {
    position: static;
  }
  /* Dropdowns as bottom sheets over a dimmed page. */
  .pop,
  .pop-wide {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    width: auto;
    max-height: 80vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background-color: var(--color-white);
    overflow-y: auto;
  }
  .pop-scroll {
    max-height: none;
  }
  /* The dimmed page (round 17: a real element, list.js, so a drag can fade it). */
  .sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background-color: var(--color-alpha-black-alpha-40);
  }
  .count-line {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-1);
    height: 44px;
  }
  .count-line p {
    max-width: 100%;
    overflow: hidden;
  }
  .job-link {
    display: grid;
    /* Line 3: salary and Added keep their full width; work type and level shorten first. */
    grid-template-columns: var(--spacing-11) minmax(0, 1fr) auto;
    grid-template-areas:
      "logo title title"
      "logo org org"
      ". facts side";
    align-items: center;
    column-gap: var(--spacing-3);
    row-gap: var(--spacing-1);
  }
  .job-logo {
    grid-area: logo;
    align-self: start;
  }
  .job-main,
  .job-meta {
    display: contents;
  }
  .job-title-line {
    grid-area: title;
  }
  .job-org,
  .job-facts {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-neutral-500);
    font-size: var(--font-size-sm);
    letter-spacing: var(--font-tracking-text);
    line-height: var(--font-leading-5);
  }
  .job-org {
    grid-area: org;
  }
  .job-facts {
    grid-area: facts;
  }
  .job-facts > .sep:first-child {
    display: none;
  }
  .job-side {
    grid-area: side;
    flex-direction: row;
    align-items: center;
    gap: 0;
    max-width: none;
    min-width: 0;
    text-align: left;
  }
  .job-side .salary {
    font-size: var(--font-size-sm);
  }
  .job-side .salary::before,
  .job-side .added::before {
    content: " · ";
    color: var(--color-neutral-500);
    white-space: pre;
  }
  .job-side .added {
    flex-shrink: 0;
  }
  .pager-showing {
    display: none;
  }
  .pager-row {
    justify-content: center;
  }
  .pager .pager-full {
    display: none;
  }
  .pager .pager-compact {
    display: flex;
  }
  .empty {
    min-height: 360px;
  }
}

/* ---------- UI round 3: forms, status pages, manage, About, legal, FAQ page, Resources,
   404 (Paper: Get Alerts, Form states, Alerts — …, Removal — …, About, FAQ, Legal,
   Resources, 404). Values are Paper's; mobile, hover and motion are UI round 4's. ---------- */

:root {
  /* Paper literals on these pages (not Paper tokens). */
  --color-segmented-track: #30303008;
  --input-shadow: inset 0 -0.5px 0 #16191D1F, 0 1px 2px -0.5px #16191D0A;
  --card-shadow: 0 0 0 1px var(--color-alpha-black-alpha-10), 0 1px 5px -4px var(--color-alpha-black-alpha-16), 0 2px 5px var(--color-alpha-black-alpha-4);
  --color-alpha-white-alpha-24: rgb(255 255 255 / 24%);
}

.page-col {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
  box-sizing: border-box;
  width: min(var(--container-content), 100% - 2 * var(--spacing-4));
  margin-inline: auto;
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-24);
}
.page-col-wide {
  gap: var(--spacing-12);
}
.page-col-about {
  gap: var(--spacing-16);
}
.page-status .page-col {
  padding-top: var(--spacing-32);
  padding-bottom: var(--spacing-40);
}
.page-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
}
.page-head .hero-title {
  margin: 0;
}
.page-lead {
  width: 440px;
  max-width: 100%;
  margin: 0;
  color: var(--color-neutral-600);
  font-size: var(--font-size-base);
  line-height: var(--font-leading-6);
}
.page-lead-wide {
  width: 480px;
}
.back-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  border-radius: var(--radius-sm);
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
  text-decoration: none;
}
.back-link .icon {
  flex-shrink: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: 36px;
  margin: 0;
  padding: 0 var(--spacing-4);
  border: 0;
  border-radius: var(--radius-lg);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background-image: linear-gradient(in oklab 180deg, var(--color-neutral-800) 0%, var(--color-neutral-900) 100%);
  box-shadow: 0 0 0 1px var(--color-neutral-800), 0 1px 3px var(--color-neutral-600);
  color: var(--color-neutral-50);
}
.btn-secondary {
  background-color: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-alpha-black-alpha-12), 0 1px 2px var(--color-alpha-black-alpha-4);
  color: var(--color-neutral-800);
}
.btn-danger {
  background-color: var(--color-white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-red-600) 28%, transparent), 0 1px 2px var(--color-alpha-black-alpha-4);
  color: var(--color-red-600);
}
.btn:focus-visible {
  box-shadow: var(--focus-ring);
}
/* Paper: Save changes before anything changed (0.7), Creating alert (0.8). */
.btn:disabled {
  opacity: 0.7;
  cursor: default;
}
.btn.is-busy {
  opacity: 0.8;
  cursor: progress;
}
.btn-block {
  display: flex;
  gap: var(--spacing-1);
  width: 100%;
  height: var(--spacing-10);
  padding: var(--spacing-1) var(--spacing-2);
}
.btn .icon {
  flex-shrink: 0;
}
.btn-text {
  padding-inline: var(--spacing-0-5);
}
.spinner {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Form card (Paper: Get Alerts, Form states) ---------- */
.cards {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6);
}
.form-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  box-sizing: border-box;
  width: 560px;
  max-width: 100%;
  margin: 0;
  padding: var(--spacing-6);
  border-radius: var(--radius-xl);
  background-color: var(--color-white);
  box-shadow: var(--card-shadow);
}
.card-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}
/* "Manage an existing alert" and the manage page's other cards: PLACEHOLDER layout. */
.card-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.card-title {
  margin: 0;
  color: var(--color-neutral-800);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-6);
}
.card-text {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-1);
  padding: 0;
  color: var(--color-neutral-800);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
}
.field-optional {
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
}
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-3);
}
.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.input {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 var(--spacing-3);
  border: 0;
  border-radius: var(--radius-lg);
  outline: 0.5px solid var(--color-alpha-black-alpha-10);
  outline-offset: -0.5px;
  background-color: var(--color-white);
  box-shadow: var(--input-shadow);
  color: var(--color-neutral-800);
  font: inherit;
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder {
  color: var(--color-neutral-500);
  opacity: 1;
}
/* Paper's focused input (Manage alert / Edit Email). */
.input:focus-visible,
.select[aria-expanded="true"] {
  border-radius: var(--radius-base);
  outline: none;
  box-shadow: var(--focus-ring);
}
/* Paper: Alert form / Errors. */
.has-error .input {
  border-radius: var(--radius-base);
  outline: none;
  box-shadow: 0 0 0 1px var(--color-red-500), 0 0 0 3px color-mix(in srgb, var(--color-red-500) 16%, transparent);
}
.textarea {
  min-height: 96px;
  padding-block: 10px;
  resize: vertical;
}
.select {
  justify-content: space-between;
  gap: var(--spacing-2);
  text-align: left;
  cursor: pointer;
}
.select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.select .icon {
  flex-shrink: 0;
  color: var(--color-neutral-400);
}
.msel {
  position: relative;
}
.msel .pop {
  right: 0;
  width: auto;
  min-width: 224px;
}
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--color-red-600);
  font-size: var(--font-size-xs);
  line-height: 18px;
}
.field-error .icon {
  flex-shrink: 0;
  margin-top: 2px;
}
.field-hint {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
  line-height: 18px;
}
.also {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-1);
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
  line-height: var(--font-leading-4);
}
.also-list {
  display: contents;
}
/* Why the search text was left out (owner, 2026-10-30; designed in code). */
.also-note {
  flex-basis: 100%;
  color: var(--color-neutral-600);
}
.also-item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  color: var(--color-neutral-800);
}
.also-item + .also-item::before {
  content: "·";
  color: var(--color-neutral-800);
}
/* One "Remove" per item (round 14; Paper has one for the line): PLACEHOLDER. */
.also-remove {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: none;
  color: var(--color-violet-600);
  font: inherit;
  cursor: pointer;
}
.segmented {
  position: relative;
  display: flex;
  gap: var(--spacing-1);
  padding: 2px;
  border-radius: var(--radius-lg);
  background-color: var(--color-segmented-track);
}
.segmented-field > legend {
  float: left;
  width: 100%;
  margin-bottom: 6px;
}
.segmented-field > legend + * {
  clear: both;
}
.segment {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}
.segment input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.segment span {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding-inline: var(--spacing-2);
  border-radius: 6px;
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
  text-align: center;
  cursor: pointer;
}
.segment input:checked + span {
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-alpha-black-alpha-8), 0 1px 2px var(--color-alpha-black-alpha-6);
  color: var(--color-neutral-800);
}
.segment input:focus-visible + span {
  box-shadow: var(--focus-ring);
}
.consents {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding-top: var(--spacing-1);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.check-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.check-box {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 22px;
}
.check-box::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  /* The dropdown option box (design round, owner): a light fill and a hairline. */
  background-color: var(--color-alpha-black-alpha-6);
  box-shadow: 0 0 0 1px #00000014;
}
.check-box .opt-check {
  margin-top: 4px;
}
.check-input:checked + .check-box::before {
  background-color: var(--color-violet-600);
  box-shadow: 0 1px 2px var(--color-violet-400), 0 0 0 1px var(--color-violet-500);
}
.check-input:focus-visible + .check-box::before {
  box-shadow: var(--focus-ring);
}
.has-error .check-box::before {
  box-shadow: 0 0 0 1px var(--color-red-500), 0 0 0 3px color-mix(in srgb, var(--color-red-500) 16%, transparent);
}
.check-text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
}
.check-label {
  color: var(--color-neutral-700);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
.check-note {
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
  line-height: 18px;
}
/* The Turnstile widget's own 300×65 box. */
.turnstile {
  min-height: 65px;
}
/* Below 364px forms.js asks Turnstile for its compact widget (150×140): its box is kept. */
@media (max-width: 363px) {
  .turnstile {
    min-height: 140px;
  }
}
.form-footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.form-note {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
  line-height: 18px;
  text-align: center;
}
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding-top: var(--spacing-1);
}

/* ---------- Status pages (Paper: Alerts — Check your email, Confirmed, Unsubscribed;
   Removal — Sent, Error; 404) ---------- */
.status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-6);
}
.status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-xl);
  background-color: var(--color-white);
  box-shadow: var(--card-shadow);
  color: var(--color-neutral-800);
}
.status-icon .icon-check {
  color: var(--color-emerald-500);
}
.status-icon-error {
  background-color: var(--color-red-50);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-red-600) 22%, transparent);
  color: var(--color-red-600);
}
.status-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  max-width: 460px;
}
.status-title {
  margin: 0;
  color: var(--color-neutral-900);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.64px;
  line-height: var(--font-leading-10);
}
.status-lead {
  margin: 0;
  color: var(--color-neutral-600);
  font-size: var(--font-size-base);
  line-height: var(--font-leading-6);
}
.status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
  padding-top: var(--spacing-2);
}
.status-actions:empty {
  display: none;
}
.inline-form {
  display: flex;
}
.status-note {
  box-sizing: border-box;
  width: 460px;
  max-width: 100%;
  margin: 0;
  padding-top: var(--spacing-6);
  border-top: 1px solid var(--color-alpha-black-alpha-8);
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
/* Links in notes ("Start over", the support address): PLACEHOLDER. */
.status-note a,
.status-lead a {
  border-radius: var(--radius-xs);
  color: inherit;
}
.not-found {
  width: fit-content;
  margin: 0;
  background-image: linear-gradient(in oklab 180deg, var(--color-neutral-300) 0%, var(--color-neutral-100) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: var(--font-size-9xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.05em;
  line-height: 112px;
}

/* ---------- Manage (Paper: Alerts — Manage alert, Edit Email, Error, Success) ---------- */
.form-card-manage {
  gap: var(--spacing-5);
  border-radius: var(--radius-2xl);
}
.form-card-manage > .form-footer {
  margin-top: var(--spacing-1);
}
.form-card-manage .input {
  border-radius: var(--radius-base);
  outline: none;
  box-shadow: 0 0 0 1px var(--color-alpha-black-alpha-12), 0 1px 2px var(--color-alpha-black-alpha-4);
}
.form-card-manage .input:focus-visible,
.form-card-manage .select[aria-expanded="true"] {
  box-shadow: var(--focus-ring);
}
.form-card-manage .has-error .input {
  box-shadow: 0 0 0 1px var(--color-red-500), 0 0 0 3px color-mix(in srgb, var(--color-red-500) 16%, transparent);
}
.email-display {
  justify-content: space-between;
  gap: var(--spacing-2);
  padding-right: var(--spacing-1);
}
.email-current {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--color-neutral-600);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.email-change {
  display: flex;
  align-items: center;
  height: 30px;
  margin: 0;
  padding: 0 var(--spacing-3);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--color-alpha-black-alpha-4);
  color: var(--color-neutral-800);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
  cursor: pointer;
}
.notice {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  padding: 10px var(--spacing-4);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
}
.notice .icon {
  flex-shrink: 0;
}
.notice-success {
  background-color: var(--color-emerald-50);
  color: var(--color-emerald-700);
}
.manage-status {
  margin: 0;
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
.manage-status:empty {
  display: none;
}
.panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
  box-sizing: border-box;
  width: 560px;
  max-width: 100%;
  margin: 0;
  padding: var(--spacing-5) var(--spacing-6);
  border-radius: var(--radius-2xl);
}
.panel-muted {
  background-color: var(--color-alpha-black-alpha-4);
}
.panel-card {
  background-color: var(--color-white);
  box-shadow: var(--card-shadow);
}
.panel-stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-4);
}
.panel-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.panel-card .panel-text {
  gap: 6px;
}
.panel-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0;
  color: var(--color-neutral-800);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
}
.panel-sub {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
.panel > form {
  display: flex;
  flex-shrink: 0;
}
.pill-success,
.pill-muted {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding-inline: var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-4);
}
.pill-success {
  background-color: var(--color-emerald-50);
  color: var(--color-emerald-700);
}
.pill-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-emerald-600);
}
.manage-updates {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  width: 560px;
  max-width: 100%;
  padding-top: var(--spacing-6);
}
.section-label {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.06em;
  line-height: var(--font-leading-4);
  text-transform: uppercase;
}

/* ---------- About (Paper: About) ---------- */
.stats {
  display: flex;
  margin: 0;
}
.stat {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-1);
  padding: var(--spacing-6);
  border-left: 1px solid var(--color-alpha-black-alpha-8);
}
.stat:first-child {
  padding-left: 0;
  border-left: 0;
}
.stat dd {
  margin: 0;
}
.stat-value {
  color: var(--color-neutral-900);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.64px;
  line-height: var(--font-leading-9);
}
.stat-label {
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
.about-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}
.about-row {
  display: flex;
  gap: var(--spacing-12);
}
.about-label {
  flex-shrink: 0;
  width: 200px;
  margin: 0;
  color: var(--color-neutral-900);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-6);
}
.about-body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--spacing-5);
  min-width: 0;
  color: var(--color-neutral-600);
  font-size: var(--font-size-base);
  line-height: var(--font-leading-6);
}
.about-body p,
.about-notes p {
  margin: 0;
}
/* Links in content text: PLACEHOLDER. */
.about-body a:not(.author),
.about-notes a,
.doc-article a,
.doc-intro a {
  border-radius: var(--radius-xs);
  color: inherit;
}
.author {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  width: fit-content;
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
}
/* Paper has the owner's photo here; the initial tile is a PLACEHOLDER until the image is in assets/. */
.author-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.author-text {
  display: flex;
  flex-direction: column;
}
.author-name {
  color: var(--color-neutral-800);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
}
.author-handle {
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
.about-notes {
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}

/* ---------- Long text (Paper: Legal — Privacy / Terms template) and the FAQ page ---------- */
.doc-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-8);
  border-bottom: 1px solid var(--color-alpha-black-alpha-8);
}
.doc-head .hero-title {
  margin: 0;
}
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-3);
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
.doc-dot {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-300);
}
.doc-intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
.doc-body {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
}
.toc,
.side-nav {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--spacing-3);
  width: 176px;
  /* Paper: sticks 40px below the top of the window; the active item follows the section in view. */
  position: sticky;
  top: var(--spacing-10);
}
.toc-list,
.side-nav-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}
.toc-list {
  gap: 10px;
  border-left: 1px solid var(--color-alpha-black-alpha-8);
}
.toc-list a {
  display: block;
  margin-left: -1px;
  padding-left: var(--spacing-3);
  border-left: 1px solid transparent;
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
  text-decoration: none;
}
.toc-list a[aria-current] {
  border-left-color: var(--color-neutral-800);
  color: var(--color-neutral-800);
  font-weight: var(--font-weight-medium);
}
.side-nav-list {
  gap: 2px;
}
.side-nav-list a {
  display: flex;
  align-items: center;
  height: 32px;
  padding-inline: var(--spacing-3);
  border-radius: var(--radius-lg);
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
  text-decoration: none;
}
.side-nav-list a[aria-current] {
  background-image: linear-gradient(in oklab 180deg, var(--color-alpha-black-alpha-4) 0%, var(--color-alpha-black-alpha-6) 100%);
  color: var(--color-neutral-800);
}
.doc-article,
.faq-groups {
  display: flex;
  flex: 1 1 576px;
  flex-direction: column;
  gap: var(--spacing-10);
  min-width: 0;
}
.doc-section,
.faq-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  scroll-margin-top: var(--spacing-6);
}
.faq-group {
  gap: var(--spacing-4);
}
.doc-heading {
  margin: 0;
  color: var(--color-neutral-900);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.3px;
  line-height: var(--font-leading-7);
}
.doc-p,
.doc-list li {
  margin: 0;
  color: var(--color-neutral-600);
  font-size: var(--font-size-base);
  line-height: 26px;
}
.doc-p strong,
.doc-list strong {
  color: var(--color-neutral-800);
  font-weight: var(--font-weight-medium);
}
.doc-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin: 0;
  padding: 0 0 0 var(--spacing-1);
  list-style: none;
}
.doc-list li {
  position: relative;
  padding-left: var(--spacing-4);
}
.doc-list li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-neutral-400);
}

/* ---------- Resources (Paper: Resources) ---------- */
.resources {
  position: relative;
}
/* The sidebar sits outside the 800px column, 144px to its left (Paper), and stays in view. */
.rnav {
  position: absolute;
  top: 50px;
  bottom: 0;
  left: -144px;
  width: 120px;
}
.rnav-list {
  position: sticky;
  top: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rnav-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  height: 32px;
  padding-inline: var(--spacing-1-5) var(--spacing-2);
  border-radius: var(--radius-lg);
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
  text-decoration: none;
  white-space: nowrap;
}
.rnav-link[aria-current] {
  color: var(--color-neutral-800);
}
.rbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: var(--spacing-5);
}
.rcount {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
}
.rcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-8) 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rcard {
  min-width: 0;
}
.rcard-link {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  border-radius: var(--radius-xl);
  color: inherit;
  text-decoration: none;
}
.rcard-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 131px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: var(--color-neutral-100);
  box-shadow: inset 0 0 0 1px var(--color-alpha-black-alpha-6);
}
.rcard-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* An image far from 1.91:1 (square, tall, very wide) is shown whole on the box's light grey
   (owner, 2026-10-31); the box itself never changes size, so nothing shifts. */
.rcard-img-contain {
  object-fit: contain;
}
/* Paper: Resources — Name tile: the full name centred on one line, cut with "…". */
.rcard-tile {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
.rcard-tile-name {
  max-width: calc(100% - 2 * var(--spacing-4));
  overflow: hidden;
  color: var(--color-neutral-700);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-tight);
  line-height: var(--font-leading-7);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The price tag sits after the name, under the cover (owner, 2026-10-31), never shrinking:
   only the name is cut. Its 20px height equals the caption line, so cards with and without
   a tag (portfolios) stay the same height. */
.rtag {
  display: flex;
  flex: none;
  align-items: center;
  height: 20px;
  padding-inline: var(--spacing-2);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-4);
}
.rtag-free {
  background-color: var(--color-emerald-50);
  box-shadow: 0 0 0 1px var(--color-alpha-black-alpha-6);
  color: var(--color-emerald-700);
}
.rtag-freemium {
  background-color: var(--color-amber-50);
  box-shadow: 0 0 0 1px var(--color-alpha-black-alpha-6);
  color: var(--color-amber-700);
}
.rtag-paid {
  background-color: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-alpha-black-alpha-6);
  color: var(--color-neutral-600);
}
.rcard-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
/* The caption is the name alone (owner, 2026-10-30), cut with "…" when long. */
.rcard-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--color-neutral-900);
  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rempty {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
.rmore {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-10);
}

/* Below about 1,150px the sidebar no longer fits beside the column: category chips above
   the cards (round 14). */
@media (max-width: 1150px) {
  .rnav {
    position: static;
    width: auto;
    margin: 0 calc(-1 * var(--spacing-4)) var(--spacing-5);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rnav::-webkit-scrollbar {
    display: none;
  }
  .rnav-list {
    position: static;
    flex-direction: row;
    gap: var(--spacing-2);
    width: max-content;
    padding: 2px var(--spacing-4);
  }
  .rnav-link {
    height: 30px;
    padding-inline: var(--spacing-3);
    border: 0.5px solid var(--color-alpha-black-alpha-16);
    box-shadow: var(--chip-shadow);
  }
  .rnav-link[aria-current] {
    background-color: var(--color-neutral-100);
  }
}

/* ---------- Mobile, UI round 3 (finished in UI round 4) ----------
   Forms in one column, status pages and long text stacked, Resources one card per row.
   No horizontal scroll at 360px. */
@media (max-width: 640px) {
  .page-col {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-16);
  }
  .page-status .page-col {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-20);
  }
  .page-head .hero-title,
  .doc-head .hero-title,
  .status-title {
    font-size: var(--font-size-3xl);
    line-height: var(--font-leading-9);
  }
  .form-card,
  .panel {
    padding: var(--spacing-4);
  }
  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-4);
  }
  .not-found {
    font-size: var(--font-size-8xl);
    line-height: 88px;
  }
  .stats {
    flex-direction: column;
  }
  .stat,
  .stat:first-child {
    padding: var(--spacing-4) 0;
    border-top: 1px solid var(--color-alpha-black-alpha-8);
    border-left: 0;
  }
  .stat:first-child {
    border-top: 0;
  }
  .about-row,
  .doc-body {
    flex-direction: column;
    gap: var(--spacing-3);
  }
  .doc-body {
    gap: var(--spacing-8);
  }
  .about-label,
  .toc,
  .side-nav {
    position: static;
    width: auto;
  }
  .side-nav-list {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rcards {
    grid-template-columns: minmax(0, 1fr);
  }
}
.page-lead-full {
  width: auto;
}

/* ---------- UI round 3 follow-up (Paper: /alerts — Manage existing alert, Manage — a–d) ---------- */

/* "Already have an alert?" under the signup form. */
.find-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  box-sizing: border-box;
  width: 560px;
  max-width: 100%;
  padding: var(--spacing-6);
  border-radius: var(--radius-xl);
  background-color: var(--color-neutral-50);
  box-shadow: 0 0 0 1px var(--color-alpha-black-alpha-6);
}
.find-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.find-title {
  margin: 0;
  color: var(--color-neutral-800);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-leading-5);
}
.find-text {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
.find-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.find-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.find-row .input {
  flex: 1;
  min-width: 0;
}
.btn-row {
  flex-shrink: 0;
  height: var(--spacing-10);
}
.find-sent {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: 40px;
  margin: 0;
  padding: 0 var(--spacing-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-alpha-black-alpha-8);
  color: var(--color-neutral-700);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-5);
}
.find-sent .icon {
  flex-shrink: 0;
  color: var(--color-emerald-600);
}

/* The manage page: one card with the email and the alert's fields. */
#alert-card {
  gap: var(--spacing-5);
}
.manage-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}
.manage-form > .form-footer {
  margin-top: var(--spacing-1);
}
/* Paper: Manage — a. Pending email change. */
.notice-pending {
  align-items: flex-start;
  padding: 10px var(--spacing-3);
  border-radius: var(--radius-lg);
  background-color: var(--color-amber-50);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-amber-500) 24%, transparent);
  color: var(--color-amber-900);
  font-weight: var(--font-weight-normal);
}
.notice-pending .icon {
  margin-top: 2px;
  color: var(--color-amber-700);
}
.notice-pending strong {
  font-weight: var(--font-weight-medium);
}
.manage-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  width: 560px;
  max-width: 100%;
}
/* Paper: Manage — d. Undo (panel in place). */
.panel-off {
  background-color: var(--color-neutral-100);
}
.panel-lead {
  display: flex;
  flex: 1 1 0;
  align-items: flex-start;
  gap: var(--spacing-3);
  min-width: 0;
}
.panel-lead .panel-text {
  gap: var(--spacing-1);
}
.panel-icon {
  flex-shrink: 0;
  color: var(--color-neutral-600);
}
.undo-form {
  display: flex;
}
.panel .btn .icon {
  flex-shrink: 0;
}
/* Paper: Manage — b. Updates not subscribed. */
.pill-muted {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-600);
}
.pill-muted .pill-dot {
  background-color: var(--color-neutral-400);
}
.panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  padding-left: 30px;
}
.author-avatar {
  object-fit: cover;
}

@media (max-width: 640px) {
  /* The flower field is shorter on phones. */
  .footer-slot {
    height: 96px;
  }
  .find-panel {
    padding: var(--spacing-4);
  }
  .panel-actions {
    padding-left: 0;
  }
}

/* ==========================================================================================
   UI round 4: motion, hover states, touch targets and the finished mobile layouts.
   Designed in code within Paper's tokens (the owner's rule change in UI round 4), with the
   frontend-ui-engineering, better-ui, emil-design-eng and animate skills:
   - Only transform and opacity animate. Colour changes on hover are instant (high-frequency).
   - Hover styling sits behind (hover: hover) and (pointer: fine), so a tap never latches it.
   - Every movement sits behind prefers-reduced-motion: no-preference; with reduce there is
     no motion at all (last block of the file).
   - Enter with a strong ease-out, exit shorter than enter; nothing starts from scale(0).
   ========================================================================================== */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-press: 150ms;
  --duration-hover: 150ms;
  --duration-pop-in: 180ms;
  --duration-pop-out: 120ms;
  /* Sheets (round 17, in the feel of Vaul): a soft deceleration in, slightly faster out. */
  --duration-sheet-in: 450ms;
  --duration-sheet-out: 300ms;
  --duration-enter: 240ms;
  --duration-faq: 220ms;
  --press-scale: 0.97;
  /* The smallest touch target (the owner's 44px). */
  --hit: 44px;
}

/* ---------- Hover (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  a.nav-link:not([aria-current]):hover::before {
    opacity: 1;
  }
  .button-primary:hover,
  .btn-primary:hover:not(:disabled) {
    background-image: none;
    background-color: var(--color-neutral-800);
  }
  .btn-secondary:hover:not(:disabled),
  .btn-danger:hover:not(:disabled) {
    background-color: var(--color-neutral-50);
  }
  .site-footer a:hover,
  .breadcrumb a:hover,
  .related a:hover {
    color: var(--color-neutral-900);
  }
  .chip:hover,
  .rnav-link:hover {
    color: var(--color-neutral-800);
  }
  .chip:hover .icon {
    color: var(--color-neutral-500);
  }
  .opt:not(.is-disabled):hover {
    background-color: var(--color-alpha-black-alpha-4);
  }
  .pop-done:hover {
    background-color: var(--color-neutral-900);
  }
  .pop-clear:hover,
  .back-link:hover,
  .faq-all:hover,
  .toc-list a:hover,
  .side-nav-list a:hover {
    color: var(--color-neutral-800);
  }
  .link-button:hover,
  .alerts-link:hover span,
  .also-remove:hover {
    text-decoration-line: underline;
  }
  .faq-a a:hover,
  .status-note a:hover,
  .status-lead a:hover,
  .about-body a:not(.author):hover,
  .about-notes a:hover,
  .doc-article a:hover,
  .doc-intro a:hover {
    color: var(--color-neutral-900);
    text-decoration-thickness: 2px;
  }
  a.page-arrow:hover,
  a.page-num:not(.current):hover,
  a.page-step:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-800);
  }
  .email-change:hover {
    background-color: var(--color-alpha-black-alpha-6);
  }
  .author:hover .author-name {
    text-decoration: underline;
  }
  .faq-item:not([open]) summary:hover {
    background-color: var(--color-alpha-black-alpha-2);
  }
  /* Rows: the 12px bleed background and the ↗ arrow fade in together. */
  .job-link:hover::before,
  .job-link:hover .job-arrow {
    opacity: 1;
  }
  /* Resource cards: a light veil over the thumbnail, the name underlined. */
  .rcard-link:hover .rcard-thumb::after {
    opacity: 1;
  }
  a.rcard-link:hover .rcard-name {
    text-decoration: underline;
    text-decoration-color: var(--color-neutral-300);
    text-underline-offset: 3px;
  }
}

/* The nav's hover pill fades in (opacity) rather than switching. */
.nav-link {
  position: relative;
  isolation: isolate;
}
.nav-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--color-neutral-100);
  opacity: 0;
  transition: opacity var(--duration-hover) ease;
}

/* Row background: a layer under the row that fades in (Paper's 12px bleed, alpha-black-4). */
.job-link {
  position: relative;
  isolation: isolate;
}
.job-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0;
  background-color: var(--color-row-hover);
  opacity: 0;
  transition: opacity var(--duration-hover) ease;
}
.job-link:active::before {
  opacity: 1;
}
.job-arrow {
  transition: opacity var(--duration-hover) ease, transform var(--duration-hover) var(--ease-out);
}

/* Resource card veil. */
.rcard-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-alpha-black-alpha-4);
  opacity: 0;
  transition: opacity var(--duration-hover) ease;
  pointer-events: none;
}

/* The current item in "On this page" and the FAQ group list: a 1px bar that fades in. */
.toc-list a {
  position: relative;
}
.toc-list a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 1px;
  background-color: var(--color-neutral-800);
  opacity: 0;
  transition: opacity var(--duration-hover) ease;
}
.toc-list a[aria-current] {
  border-left-color: transparent;
}
.toc-list a[aria-current]::before {
  opacity: 1;
}

/* ---------- Motion (no-preference only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Press feedback on everything pressable. */
  .button-primary,
  .btn,
  .chip,
  .pop-done,
  .email-change,
  .page-arrow,
  .page-num,
  .page-step,
  .rcard-thumb,
  .segment span {
    transition: transform var(--duration-press) var(--ease-out);
  }
  .button-primary:active,
  .btn:not(:disabled):not(.is-busy):active,
  .chip:active,
  .pop-done:active,
  .email-change:active,
  a.page-arrow:active,
  a.page-num:active,
  a.page-step:active,
  .segment input:not(:checked) + span:active {
    transform: scale(var(--press-scale));
  }
  a.rcard-link:active .rcard-thumb {
    transform: scale(0.98);
  }
  .rcard-img {
    transition: transform 250ms var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .rcard-link:hover .rcard-img {
      transform: scale(1.02);
    }
    .job-arrow {
      transform: translate(-2px, 2px);
    }
    .job-link:hover .job-arrow {
      transform: none;
    }
    .back-link .icon {
      transition: transform var(--duration-hover) var(--ease-out);
    }
    .back-link:hover .icon {
      transform: translateX(-2px);
    }
    .faq-all:hover .icon {
      transform: translateX(2px);
    }
  }

  /* Dropdowns (design round, the owner's dropdown reference): out of their chip (its left
     edge, or the right for the sort menu). In: from 8px up at 94%, a quick spring for the
     movement and a 120ms fade. Out: a short 120ms fall back to 97% and 6px up. */
  .pop {
    transform-origin: top left;
    transition: opacity var(--duration-pop-out) var(--ease-in-exit), transform var(--duration-pop-out) var(--ease-in-exit), display var(--duration-pop-out) allow-discrete;
  }
  .pop-end {
    transform-origin: top right;
  }
  .pop:not([hidden]) {
    transition: opacity var(--duration-pop-out) var(--ease-out), transform var(--dur-pop) var(--spring-pop), display var(--dur-pop) allow-discrete;
  }
  .pop[hidden] {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  @starting-style {
    .pop:not([hidden]) {
      opacity: 0;
      transform: translateY(-8px) scale(0.94);
    }
  }

  /* Things that appear in place: inline errors, the sent and saved notices, the manage
     page's panels and Undo, the removal form's revealed field. They fade in and settle 4px. */
  .field-error,
  .find-sent,
  .notice,
  .manage-status,
  .panel,
  .manage-section,
  [data-kind] {
    transition: opacity var(--duration-enter) var(--ease-out), transform var(--duration-enter) var(--ease-out);
  }
  @starting-style {
    .field-error:not([hidden]),
    .find-sent:not([hidden]),
    .notice:not([hidden]),
    .manage-status:not([hidden]),
    .panel:not([hidden]),
    .manage-section:not([hidden]),
    [data-kind]:not([hidden]) {
      opacity: 0;
      transform: translateY(4px);
    }
  }

  /* Load more, Free only and sorting: the cards that come in fade up (not on first paint). */
  .rcards.is-ready .rcard {
    transition: opacity var(--duration-enter) var(--ease-out), transform var(--duration-enter) var(--ease-out);
  }
  @starting-style {
    .rcards.is-ready .rcard:not([hidden]) {
      opacity: 0;
      transform: translateY(8px);
    }
  }

  /* FAQ answers (round 17): the height eases open and shut, quick and subtle, with the
     question's bottom padding easing alongside so nothing below jumps. Where the browser
     has ::details-content and interpolate-size, both directions animate; elsewhere the
     answer opens with grid rows from 0fr to 1fr and closes at once. <details> still works
     with no JavaScript; with reduced motion nothing animates (this block doesn't apply). */
  .faq-item summary {
    transition: padding-bottom var(--duration-faq) var(--ease-out);
  }
  @supports selector(::details-content) {
    .faq-item {
      interpolate-size: allow-keywords;
    }
    .faq-item::details-content {
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition: block-size var(--duration-faq) var(--ease-out), opacity var(--duration-faq) var(--ease-out), content-visibility var(--duration-faq) allow-discrete;
    }
    .faq-item[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
  @supports not selector(::details-content) {
    .faq-item[open] .faq-a {
      display: grid;
      grid-template-rows: 1fr;
      animation: faq-rows var(--duration-faq) var(--ease-out) both;
    }
    .faq-item[open] .faq-a-inner {
      min-height: 0;
      overflow: hidden;
    }
    .faq-item[open] summary {
      animation: faq-summary var(--duration-faq) var(--ease-out) both;
    }
  }

  /* Status pages are seen rarely: their parts arrive in a short stagger. */
  .status > * {
    animation: fade-up 300ms var(--ease-out) both;
  }
  .status > :nth-child(2) {
    animation-delay: 60ms;
  }
  .status > :nth-child(3) {
    animation-delay: 120ms;
  }
  .status > :nth-child(4) {
    animation-delay: 180ms;
  }

  /* The "On this page" chip row glides to the current chip. Page scrolling stays instant:
     paging and in-page jumps happen often (review-animations). */
  .toc-list {
    scroll-behavior: smooth;
  }
}
@keyframes faq-rows {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}
@keyframes faq-summary {
  from {
    padding-bottom: var(--faq-pad);
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Resource covers keep the Open Graph ratio, 1.91:1 (250×131 on a desktop card; owner,
   2026-10-31, replacing Paper's 250×168), at every width; name tiles use the same box. */
.rcard-thumb {
  height: auto;
  aspect-ratio: 1.91 / 1;
}

/* ---------- Mobile (Paper's sm, 640px and below) ---------- */
@media (max-width: 640px) {
  /* Round 17 audit: the back link keeps its look with an invisible 44px tap area. */
  .back-link,
  .faq-all {
    width: fit-content;
    padding-block: 12px;
    margin-block: -12px;
  }

  /* Landing pages: related links in two columns of 44px rows; the breadcrumb's link gets an
     invisible 44px hit area and the line keeps its look. */
  .related {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }
  .related ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--spacing-4);
  }
  .related a {
    display: flex;
    align-items: center;
    min-height: var(--hit);
  }
  .breadcrumb a {
    padding-block: 12px;
    margin-block: -12px;
  }
  .hero-landing + .list {
    padding-top: var(--spacing-10);
  }

  /* Footer (Paper: Mobile Reference spacing, owner, 2026-10-29): each link's tap area fills
     its row's 32px pitch, with no gaps between neighbours and no change to the look. */
  .footer-column a,
  .footer-brand p > a,
  .footer-bottom a {
    display: inline-block;
    padding-block: 6px;
    margin-block: -6px;
  }

  /* Search box: the input fills it, so the whole 44px box takes the tap. */
  .search {
    padding-block: 0;
  }
  .search-input {
    min-height: var(--hit);
    font-size: var(--font-size-base);
  }
  .kbd {
    display: none;
  }

  /* The filter chips scroll sideways; the row's padding leaves room for 44px hit areas. */
  .filter-bar {
    margin-block: -7px;
    padding-block: 7px;
  }

  /* Job rows: title (and tags); company · location; salary · work type · level · Added.
     Salary and Added keep their width, work type and level shorten first. */
  .job-link {
    /* Round 17: the tile's track includes desktop's 16px gap, so the text never touches it
       (a margin on the 44px tile used to spill over the text) and the tile never shrinks. */
    grid-template-columns: calc(var(--spacing-11) + var(--spacing-4)) auto minmax(0, max-content) auto minmax(0, 1fr);
    grid-template-areas:
      "logo title title title title"
      "logo org org org org"
      ". salary facts added .";
    column-gap: 0;
    padding-block: var(--spacing-4);
  }
  .job-logo {
    width: var(--spacing-11);
    min-width: var(--spacing-11);
  }
  .job-side {
    display: contents;
  }
  .job-side .salary {
    grid-area: salary;
  }
  .job-side .added {
    grid-area: added;
  }
  .job-side .salary,
  .job-side .added {
    min-width: max-content;
  }
  .job-side .salary::before {
    content: none;
  }
  .job-facts > .sep:first-child {
    display: inline;
    white-space: pre;
  }
  .job-arrow {
    display: none;
  }

  /* Bottom sheets: a grabber and the dropdown's name on top, 44px rows, a footer clear of
     the home indicator. They slide up from the bottom over a dimmed page. */
  .pop,
  .pop-wide,
  .msel .pop {
    max-height: min(80vh, 640px);
    padding-bottom: env(safe-area-inset-bottom);
    border: 0;
    box-shadow: 0 -4px 6px -4px var(--color-alpha-black-alpha-8), 0 -10px 15px -4px var(--color-alpha-black-alpha-6);
    overscroll-behavior: contain;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .pop::before {
    content: attr(aria-label);
    flex-shrink: 0;
    padding: var(--spacing-6) var(--spacing-4) var(--spacing-1);
    background-image: linear-gradient(var(--color-neutral-300), var(--color-neutral-300));
    background-position: 50% var(--spacing-2);
    background-size: 36px 4px;
    background-repeat: no-repeat;
    color: var(--color-neutral-900);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-leading-6);
  }
  .pop-items {
    padding: var(--spacing-1) var(--spacing-2);
  }
  .opt {
    min-height: var(--hit);
    box-sizing: border-box;
    padding-block: var(--spacing-3);
  }
  .pop-label {
    padding-top: var(--spacing-2);
  }
  .pop-search,
  .pop-search-input {
    min-height: var(--hit);
  }
  .pop-search-input {
    font-size: var(--font-size-base);
  }
  .pop-footer {
    position: sticky;
    bottom: 0;
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--color-white);
  }
  .pop-clear {
    min-height: var(--hit);
    padding-inline: var(--spacing-2);
    font-size: var(--font-size-sm);
  }
  .pop-done {
    min-height: var(--hit);
    padding-inline: var(--spacing-5);
  }
  .pop-salary {
    padding-inline: var(--spacing-4);
  }
  .salary-range {
    height: var(--hit);
  }
  /* The dimmed page is always there, invisible and untouchable until a sheet opens; it fades
     in step with the sheet (same duration and curve). */
  .sheet-backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-sheet-out) var(--ease-drawer);
  }
  .sheet-backdrop.is-on {
    opacity: 1;
    pointer-events: auto;
    touch-action: none;
    transition-duration: var(--duration-sheet-in);
  }
  /* The page behind doesn't scroll while a sheet is open (phones' scrollbars overlay the
     page, so nothing shifts); the sheets contain their own scrolling. */
  html:has(body.sheet-open) {
    overflow: hidden;
  }
  /* Both sheets: at most 85% of the screen, so the dimmed page shows above. */
  .pop,
  .pop-wide,
  .msel .pop {
    max-height: 85vh;
    max-height: 85dvh;
  }
  #pop-sort::before {
    content: none;
  }

  /* Pager: Prev and Next 44px tall. */
  .pager-row {
    min-height: var(--hit);
  }
  .page-step {
    height: var(--hit);
  }

  /* Forms: 44px fields and buttons; 16px text in fields so phones don't zoom in. */
  .input {
    min-height: var(--hit);
    font-size: var(--font-size-base);
  }
  .btn,
  .btn-block,
  .btn-row {
    height: var(--hit);
  }
  /* 44px segments (the track adds its 2px either side). */
  .segment span {
    height: var(--hit);
  }
  .check {
    min-height: var(--hit);
  }
  .find-row {
    flex-direction: column;
    align-items: stretch;
  }
  .author {
    padding-block: 2px;
  }
  .status-actions,
  .panel-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .status-actions {
    align-self: stretch;
  }
  .status-actions .btn,
  .status-actions .inline-form,
  .panel .btn,
  .panel > form,
  .undo-form,
  .rmore .btn {
    width: 100%;
  }
  .button-row .btn {
    flex: 1 1 auto;
  }

  /* Long text and FAQ: "On this page" becomes a sticky chip row at the top of the window;
     the current chip follows the section being read (toc.js keeps it in view). */
  .toc {
    display: contents;
  }
  .toc-list {
    align-self: stretch;
    min-width: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    flex-direction: row;
    gap: var(--spacing-2);
    margin: calc(-1 * var(--spacing-5)) calc(-1 * var(--spacing-4)) 0;
    padding: var(--spacing-2) var(--spacing-4);
    border-left: 0;
    background-color: var(--color-white);
    box-shadow: 0 1px 0 var(--color-alpha-black-alpha-6);
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .toc-list::-webkit-scrollbar {
    display: none;
  }
  .toc-list li {
    flex-shrink: 0;
  }
  .toc-list a {
    display: flex;
    align-items: center;
    min-height: 36px;
    box-sizing: border-box;
    margin-left: 0;
    padding: 0 var(--spacing-3);
    border: 0.5px solid var(--color-alpha-black-alpha-16);
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    box-shadow: var(--chip-shadow);
    white-space: nowrap;
  }
  .toc-list a::before {
    content: none;
  }
  .toc-list a[aria-current] {
    border-color: var(--color-alpha-black-alpha-16);
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-800);
    font-weight: var(--font-weight-medium);
  }
  .doc-section,
  .faq-group {
    scroll-margin-top: 72px;
  }
  .faq-item summary {
    min-height: var(--hit);
    box-sizing: border-box;
    padding: var(--spacing-3) var(--spacing-4);
  }
  .faq-item {
    --faq-pad: var(--spacing-3);
    --faq-pad-open: var(--spacing-2);
  }
  .faq-a-inner {
    padding-inline: var(--spacing-4);
  }

}

/* Resources chips (below about 1,150px): the row keeps room for their 44px hit areas. */
@media (max-width: 1150px) {
  .rnav {
    margin-block: -7px calc(var(--spacing-5) - 7px);
  }
  .rnav-list {
    padding-block: 7px;
  }
}

/* Tablets: the header keeps the 16px gutter until the 800px column fits with room to spare. */
@media (max-width: 832px) {
  .site-header {
    padding-inline: var(--spacing-4);
  }
}

/* Two cards per row on large phones. */
@media (min-width: 480px) and (max-width: 640px) {
  .rcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--spacing-4);
  }
}

/* Sheets slide up from the bottom and go back down faster. */
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .pop {
    transform-origin: bottom center;
    transition: transform var(--duration-sheet-out) var(--ease-drawer), display var(--duration-sheet-out) allow-discrete;
  }
  .pop:not([hidden]) {
    transition-duration: var(--duration-sheet-in);
    transition-timing-function: var(--ease-drawer);
  }
  .pop[hidden] {
    opacity: 1;
    transform: translateY(100%);
  }
  @starting-style {
    .pop:not([hidden]) {
      opacity: 1;
      transform: translateY(100%);
    }
  }
}

/* ---------- Touch targets: 44px hit areas without changing the look ----------
   On touch screens (and narrow ones), small controls get an invisible hit area that
   reaches 44px. Inline links inside sentences are the WCAG exception and keep their size. */
@media (pointer: coarse), (max-width: 640px) {
  .logo,
  .button-alerts,
  .chip,
  .rnav-link,
  .back-link,
  .link-button,
  .alerts-link,
  .also-remove,
  .email-change,
  .page-step {
    position: relative;
  }
  .logo::after,
  .nav-link::after,
  .button-alerts::after,
  .chip::after,
  .rnav-link::after,
  .back-link::after,
  .link-button::after,
  .alerts-link::after,
  .also-remove::after,
  .email-change::after,
  .page-step::after,
  .toc-list a::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--hit));
    height: max(100%, var(--hit));
    transform: translate(-50%, -50%);
  }
}

/* ---------- Phones' Filters sheet (owner, UI round 4 fixes) ----------
   At 640px and below the chip row gives way to two buttons, "Filters" (a count badge when
   anything is set) and the sort chip. "Filters" opens the chip row itself as one bottom
   sheet: each dropdown becomes a section under its name, with Clear all and "Show N jobs"
   at the bottom. Desktop keeps the chips, and never shows the button, head or foot. */
.chip-filters,
.sheet-head,
.sheet-foot {
  display: none;
}
@media (max-width: 640px) {
  .filter-bar {
    justify-content: space-between;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .chip-filters {
    display: flex;
  }
  .chips .chip {
    display: none;
  }
  .chips {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: 85vh;
    max-height: 85dvh;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background-color: var(--color-white);
    box-shadow: 0 -4px 6px -4px var(--color-alpha-black-alpha-8), 0 -10px 15px -4px var(--color-alpha-black-alpha-6);
    visibility: hidden;
    transform: translateY(100%);
  }
  .chips.is-open {
    visibility: visible;
    transform: none;
  }
  /* The header (round 17): the drag handle, the title and a 44px close button. Dragging it
     (or the handle) pulls the sheet down. */
  .sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-2);
    padding: var(--spacing-5) var(--spacing-2) 0 var(--spacing-4);
    touch-action: none;
    cursor: grab;
    user-select: none;
    background-color: var(--color-white);
    background-image: linear-gradient(var(--color-neutral-300), var(--color-neutral-300));
    background-position: 50% var(--spacing-2);
    background-size: 36px 4px;
    background-repeat: no-repeat;
  }
  .sheet-title {
    margin: 0;
    color: var(--color-neutral-900);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--font-leading-6);
  }
  .sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hit);
    height: var(--hit);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full, 9999px);
    background: none;
    color: var(--color-neutral-500);
    cursor: pointer;
  }
  .sheet-close:active {
    background-color: var(--color-alpha-black-alpha-4);
  }
  .chips .filter + .filter {
    border-top: 0.5px solid var(--color-alpha-black-alpha-8);
  }
  /* Each dropdown is a section here, always shown (it keeps its own hidden attribute for desktop). */
  .chips .pop,
  .chips .pop[hidden] {
    position: static;
    display: flex !important;
    width: auto;
    max-height: none;
    padding-bottom: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .chips .pop::before {
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-1);
    background-image: none;
    color: var(--color-neutral-800);
    font-size: var(--font-size-sm);
    line-height: var(--font-leading-5);
  }
  .chips .pop-footer {
    display: none;
  }
  /* The country list scrolls inside its section, under its search box. */
  .chips .pop-scroll {
    max-height: 264px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .chips .pop-search {
    margin-inline: var(--spacing-4);
    border: 0.5px solid var(--color-alpha-black-alpha-10);
    border-radius: var(--radius-lg);
  }
  .sheet-foot {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
    margin-top: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border-top: 0.5px solid var(--color-alpha-black-alpha-8);
    background-color: var(--color-white);
  }
  .sheet-foot .pop-done {
    flex: 0 1 auto;
    padding-inline: var(--spacing-6);
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .chips {
    transition: transform var(--duration-sheet-out) var(--ease-drawer), visibility 0s linear var(--duration-sheet-out);
  }
  .chips.is-open {
    transition: transform var(--duration-sheet-in) var(--ease-drawer), visibility 0s;
  }
}

/* ---------- Design round (owner, 2026-10-29): motion from the owner's references ----------
   Recreated without a library: beUI's shared-layout hover, radio, checkbox and bounce
   sidebar; interior.dev's icon morph and dropdown. Their springs are written as CSS
   linear() curves (stiffness / damping / mass in each comment), with the strong ease-out
   where a browser has no linear(). Transform and opacity only, except the tick's stroke
   drawing in. site/assets/motion.js moves the gliding highlight and the radio dot. */
:root {
  /* The job row hover (owner, design round follow-up): #18181B at 2%, square corners. */
  --color-row-hover: var(--color-alpha-black-alpha-2);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-layout: 453ms;
  --dur-press: 315ms;
  --dur-bounce: 304ms;
  --dur-morph: 354ms;
  --dur-pop: 293ms;
  --dur-snap: 375ms;
  --dur-tabs: 675ms;
  --spring-layout: var(--ease-out);
  --spring-press: var(--ease-out);
  --spring-bounce: var(--ease-out);
  --spring-morph: var(--ease-out);
  --spring-pop: var(--ease-out);
  --spring-snap: var(--ease-out);
  --spring-tabs: var(--ease-out);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* layout: 360 / 32 / 0.6 (the row glide, the radio dot) */
    --spring-layout: linear(0, 0.048 3.13%, 0.153 6.25%, 0.272 9.38%, 0.387 12.5%, 0.496 15.63%, 0.587 18.75%, 0.663 21.88%, 0.727 25%, 0.782 28.13%, 0.824 31.25%, 0.859 34.38%, 0.887 37.5%, 0.91 40.63%, 0.928 43.75%, 0.943 46.88%, 0.954 50%, 0.963 53.13%, 0.971 56.25%, 0.977 59.38%, 0.981 62.5%, 0.985 65.63%, 0.988 68.75%, 0.991 71.88%, 0.992 75%, 0.994 78.13%, 0.995 81.25%, 0.996 84.38%, 0.997 87.5%, 0.998 90.63%, 0.998 93.75%, 0.998 96.88%, 1);
    /* press: 500 / 30 / 0.6 (a slight overshoot back to full size) */
    --spring-press: linear(0, 0.037 3.13%, 0.118 6.25%, 0.227 9.38%, 0.343 12.5%, 0.451 15.63%, 0.555 18.75%, 0.648 21.88%, 0.723 25%, 0.789 28.13%, 0.843 31.25%, 0.885 34.38%, 0.917 37.5%, 0.943 40.63%, 0.962 43.75%, 0.976 46.88%, 0.986 50%, 0.993 53.13%, 0.998 56.25%, 1.001 59.38%, 1.002 62.5%, 1.003 65.63%, 1.004 68.75%, 1.004 71.88%, 1.003 75%, 1.003 78.13%, 1.003 81.25%, 1.002 84.38%, 1.002 87.5%, 1.001 90.63%, 1.001 93.75%, 1.001 96.88%, 1);
    /* bounce: 280 / 18 / 0.3 (the Resources sidebar dot) */
    --spring-bounce: linear(0, 0.037 3.13%, 0.12 6.25%, 0.223 9.38%, 0.331 12.5%, 0.435 15.63%, 0.529 18.75%, 0.613 21.88%, 0.684 25%, 0.745 28.13%, 0.795 31.25%, 0.837 34.38%, 0.87 37.5%, 0.898 40.63%, 0.92 43.75%, 0.937 46.88%, 0.951 50%, 0.962 53.13%, 0.97 56.25%, 0.977 59.38%, 0.982 62.5%, 0.986 65.63%, 0.99 68.75%, 0.992 71.88%, 0.994 75%, 0.995 78.13%, 0.996 81.25%, 0.997 84.38%, 0.998 87.5%, 0.998 90.63%, 0.999 93.75%, 0.999 96.88%, 1);
    /* morph: 520 / 34 / 0.45 (the FAQ "+" to "×") */
    --spring-morph: linear(0, 0.056 3.13%, 0.17 6.25%, 0.298 9.38%, 0.419 12.5%, 0.526 15.63%, 0.621 18.75%, 0.696 21.88%, 0.757 25%, 0.806 28.13%, 0.845 31.25%, 0.877 34.38%, 0.902 37.5%, 0.922 40.63%, 0.938 43.75%, 0.951 46.88%, 0.961 50%, 0.97 53.13%, 0.976 56.25%, 0.981 59.38%, 0.985 62.5%, 0.988 65.63%, 0.99 68.75%, 0.992 71.88%, 0.994 75%, 0.995 78.13%, 0.996 81.25%, 0.997 84.38%, 0.998 87.5%, 0.998 90.63%, 0.999 93.75%, 0.999 96.88%, 1);
    /* pop: 620 / 38 / 0.6 (dropdowns opening) */
    --spring-pop: linear(0, 0.037 3.13%, 0.125 6.25%, 0.228 9.38%, 0.335 12.5%, 0.443 15.63%, 0.537 18.75%, 0.618 21.88%, 0.689 25%, 0.751 28.13%, 0.8 31.25%, 0.84 34.38%, 0.875 37.5%, 0.901 40.63%, 0.922 43.75%, 0.939 46.88%, 0.953 50%, 0.963 53.13%, 0.972 56.25%, 0.978 59.38%, 0.983 62.5%, 0.987 65.63%, 0.99 68.75%, 0.992 71.88%, 0.994 75%, 0.996 78.13%, 0.997 81.25%, 0.997 84.38%, 0.998 87.5%, 0.999 90.63%, 0.999 93.75%, 0.999 96.88%, 1);
    /* tabs: 245 / 36 / 1.2 (the segmented pill) */
    --spring-tabs: linear(0, 0.038 3.13%, 0.122 6.25%, 0.227 9.38%, 0.334 12.5%, 0.434 15.63%, 0.526 18.75%, 0.605 21.88%, 0.674 25%, 0.733 28.13%, 0.782 31.25%, 0.822 34.38%, 0.855 37.5%, 0.883 40.63%, 0.905 43.75%, 0.923 46.88%, 0.938 50%, 0.95 53.13%, 0.96 56.25%, 0.968 59.38%, 0.974 62.5%, 0.979 65.63%, 0.983 68.75%, 0.986 71.88%, 0.989 75%, 0.991 78.13%, 0.993 81.25%, 0.994 84.38%, 0.995 87.5%, 0.996 90.63%, 0.997 93.75%, 0.998 96.88%, 1);
    /* snap: 700 / 46 / 0.5 (the dropdown highlight, the chevron) */
    --spring-snap: linear(0, 0.07 3.13%, 0.205 6.25%, 0.34 9.38%, 0.466 12.5%, 0.567 15.63%, 0.654 18.75%, 0.722 21.88%, 0.776 25%, 0.822 28.13%, 0.857 31.25%, 0.886 34.38%, 0.909 37.5%, 0.927 40.63%, 0.942 43.75%, 0.954 46.88%, 0.963 50%, 0.97 53.13%, 0.976 56.25%, 0.981 59.38%, 0.985 62.5%, 0.988 65.63%, 0.99 68.75%, 0.992 71.88%, 0.994 75%, 0.995 78.13%, 0.996 81.25%, 0.997 84.38%, 0.997 87.5%, 0.998 90.63%, 0.998 93.75%, 0.999 96.88%, 1);
  }
}

   style (site/assets/garden.js), behind the hero: the right half of the column, ending at
   its right margin, from the top of the hero to the search bar. A mask fades it in from the
   left (so the text stays clear) and out at the right, top and bottom. Phones: a wide box
   under the text with the scene centred. */
body {
  overflow-x: clip;
}
.hero-home {
  position: relative;
  isolation: isolate;
}
.hero-copy {
  position: relative;
}
.hero-art {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: calc(-1 * var(--spacing-10));
  left: 50%;
  right: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 30%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 80%, transparent);
  mask-composite: intersect;
}
/* The note over the tree (owner, 2026-10-29; hero-tip.js): frosted glass, no tail, just above
   the pointer. It fades in (and settles from 96%) only with motion allowed. */
.hero-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  padding: var(--spacing-1-5) var(--spacing-3);
  border: 1px solid rgb(255 255 255 / 60%);
  border-radius: var(--radius-base);
  background-color: rgb(255 255 255 / 55%);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 6px 20px var(--color-alpha-black-alpha-8), 0 1px 2px var(--color-alpha-black-alpha-6), inset 0 1px 0 rgb(255 255 255 / 70%);
  color: var(--color-neutral-800);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-text);
  line-height: var(--font-leading-5);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.hero-tip.is-on {
  opacity: 1;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-tip {
    background-color: rgb(255 255 255 / 92%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-tip {
    scale: 0.96;
    transition: opacity 140ms var(--ease-out), scale 220ms var(--ease-out);
  }
  .hero-tip.is-on {
    scale: 1;
  }
}
.hero-art canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Tablets: the art keeps to the right half, beside the text, the scene centred in it. */@media (min-width: 641px) and (max-width: 1023px) {  .hero-art {    left: 50%;  }}
@media (max-width: 640px) {
  .hero-art {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: var(--spacing-4) 0 calc(-1 * var(--spacing-6));
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
  }
}

/* The gliding hover highlight (motion.js): one per job list and per option group, under
   the rows; it replaces the rows' own hover background where the script runs. */
.glide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
}
.glide.is-on {
  opacity: 1;
}
.glide-row {
  border-radius: 0;
  background-color: var(--color-row-hover);
}
.glide-opt {
  border-radius: var(--radius-lg);
  background-color: var(--color-alpha-black-alpha-4);
}
/* Resources sidebar (owner, 2026-10-29): the job rows' sliding highlight, at 4% with 8px
   corners, sliding between categories. */
.glide-nav {
  border-radius: var(--radius-lg);
  background-color: var(--color-alpha-black-alpha-4);
}
.glide-on .rnav-link {
  position: relative;
}
@media (hover: hover) and (pointer: fine) {
  .glide-on .job-link:hover::before {
    opacity: 0;
  }
  .glide-on .opt:not(.is-disabled):hover {
    background-color: transparent;
  }
}

/* The gliding radio dot (motion.js): the chosen circle's violet fill travels between
   options; the circles themselves stay plain underneath. */
.radio-dot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-alpha-black-alpha-10);
  border-radius: var(--radius-full);
  background-color: var(--color-violet-500);
  background-image: radial-gradient(circle, var(--color-white) 0 3px, transparent 3.5px);
  box-shadow: inset 0 -1px 0 var(--color-alpha-black-alpha-8), 0 1px 2px -0.5px var(--color-alpha-black-alpha-4);
  opacity: 0;
  pointer-events: none;
}
.radio-dot.is-on {
  opacity: 1;
}
.radio-glide .opt-input:checked + .opt-radio::before {
  border-color: var(--color-alpha-black-alpha-8);
  background-color: var(--color-white);
  background-image: none;
  box-shadow: 0 1px 2px -0.5px #16191D0A;
}
.radio-glide .opt-input:focus-visible + .opt-radio::before {
  box-shadow: var(--focus-ring);
}

/* The segmented control's gliding pill (motion.js; the owner's tabs reference): it takes
   over the chosen segment's white face, and the labels sit above it. */
.segment-pill {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-alpha-black-alpha-8), 0 1px 2px var(--color-alpha-black-alpha-6);
  opacity: 0;
  pointer-events: none;
}
.segment-pill.is-on {
  opacity: 1;
}
.pill-glide .segment span {
  position: relative;
}
.pill-glide .segment input:checked + span {
  background-color: transparent;
  box-shadow: none;
}
.pill-glide .segment input:focus-visible + span {
  box-shadow: var(--focus-ring);
}

/* Dropdown chevrons turn over while their menu is open. */
.chip[aria-expanded="true"] > svg:last-child,
.select[aria-expanded="true"] > svg:last-child {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  /* Row and option highlight: glides with a spring, fades in and out. */
  .glide {
    transition: transform var(--dur-layout) var(--spring-layout), opacity 150ms var(--ease-out);
  }
  .glide-opt {
    transition: transform var(--dur-snap) var(--spring-snap), opacity 100ms var(--ease-out);
  }
  .glide.glide-jump {
    transition: opacity 150ms var(--ease-out);
  }
  .radio-dot {
    transition: transform var(--dur-layout) var(--spring-layout), opacity 120ms var(--ease-out);
  }
  .radio-dot.glide-jump {
    transition: none;
  }
  .segment-pill {
    transition: transform var(--dur-tabs) var(--spring-tabs);
  }
  .segment-pill.glide-jump {
    transition: none;
  }

  /* Ticks pop in (from half size) and draw; on untick they fade and shrink while the
     stroke stays drawn, then reset unseen. Boxes and circles give a little on press. */
  .opt-check {
    transition: opacity 160ms var(--ease-out-expo), transform 160ms var(--ease-out-expo);
  }
  .opt-check path {
    transition: stroke-dashoffset 0s linear 160ms;
  }
  .opt-input:checked + .opt-box .opt-check path,
  .check-input:checked + .check-box .opt-check path {
    transition: stroke-dashoffset 300ms var(--ease-out-expo) 40ms;
  }
  .opt-box,
  .opt-radio,
  .check-box {
    transition: transform var(--dur-press) var(--spring-press);
  }
  .opt:not(.is-disabled):active .opt-box,
  .opt:not(.is-disabled):active .opt-radio,
  .check:active .check-box {
    transform: scale(0.92);
  }

  /* FAQ: the "+" turns into the "×" with a quick spring. */
  .faq-icon {
    transition: transform var(--dur-morph) var(--spring-morph);
  }

  .chip > svg:last-child,
  .select > svg:last-child {
    transition: transform var(--dur-snap) var(--spring-snap);
  }
}

/* ---------- Reduced motion: no motion at all (owner, UI round 4) ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}