/* Drimva, round 3 (2026-10-16): the look of the iPhone app. White pages with Apple's greys, and
   black ones when the computer or phone is in dark mode; the system font everywhere (SF Pro on
   Apple devices). Orange only for the main button in an area, the mark, saved jobs and the count
   of what needs you; other buttons are grey. Lists are rows divided by hairlines; the one thing
   that most needs the visitor gets a grey card. Every element should tell the visitor something. */

:root {
  color-scheme: light dark;
  --canvas: #ffffff;
  --surface: #ffffff;
  --raised: #f5f5f7;
  --elevated: #ffffff;
  --sunken: rgb(118 118 128 / 0.12);
  --grey-press: rgb(118 118 128 / 0.2);
  --hover: rgb(0 0 0 / 0.03);
  --glass: rgb(255 255 255 / 0.84);
  --glass-strong: rgb(255 255 255 / 0.94);
  --focus-ring: rgb(0 0 0 / 0.06);
  --ink: #1d1d1f;
  --ink-2: #3a3a3c;
  --muted: #6e6e73;
  --faint: #8e8e93;
  --line: #e5e5ea;
  --line-strong: #d1d1d6;
  --orange: #dd6a2c;
  --orange-press: #c95d22;
  --orange-ink: #b5541f;
  --orange-soft: #fcefe6;
  --ins: rgb(221 106 44 / 0.24);
  --on-orange: #ffffff;
  --badge-ink: #1d1d1f;
  --night: #1c1c1e;
  --on-night: #f5f5f7;
  --on-night-muted: rgb(245 245 247 / 0.62);
  --danger: #b42318;
  --danger-soft: #fbeae7;
  --ok: #34a853;
  --shadow: 0 2px 6px rgb(0 0 0 / 0.06), 0 18px 40px -18px rgb(0 0 0 / 0.3);
  --sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial,
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gutter: max(28px, env(safe-area-inset-left, 0px));
  --gutter-end: max(28px, env(safe-area-inset-right, 0px));
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
/* Dark mode follows the computer or phone, like the app. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #000000;
    --surface: #000000;
    --raised: #1c1c1e;
    --elevated: #2c2c2e;
    --sunken: rgb(118 118 128 / 0.24);
    --grey-press: rgb(118 118 128 / 0.34);
    --hover: rgb(255 255 255 / 0.04);
    --glass: rgb(0 0 0 / 0.72);
    --glass-strong: rgb(0 0 0 / 0.88);
    --focus-ring: rgb(255 255 255 / 0.14);
    --ink: #f5f5f7;
    --ink-2: #d1d1d6;
    --muted: #98989d;
    --faint: #6e6e73;
    --line: #2c2c2e;
    --line-strong: #3a3a3c;
    --orange: #e97b42;
    --orange-press: #f08a55;
    --orange-ink: #f29a6b;
    --orange-soft: rgb(233 123 66 / 0.18);
    --ins: rgb(233 123 66 / 0.36);
    --badge-ink: #000000;
    --danger: #ff6961;
    --danger-soft: rgb(255 69 58 / 0.16);
    --ok: #30d158;
    --shadow: 0 2px 6px rgb(0 0 0 / 0.5), 0 18px 40px -18px rgb(0 0 0 / 0.9);
  }
}
[hidden] {
  display: none !important;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--canvas);
}
h1,
h2,
h3,
h4,
p,
dl,
dd,
ul,
ol,
figure,
blockquote {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
a {
  color: inherit;
  text-decoration: none;
}
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
svg.icon {
  flex: none;
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.muted {
  color: var(--muted);
}
/* Public catalog content stays redacted even after an account signs in. */
[data-public] .private-only,
:root:not([data-public]) .public-only,
[data-public]:not([data-member]) .personal-only,
:root:not([data-accounts]) .accounts-only,
[data-accounts] .legacy-only,
:root:not([data-member]) .member-only,
[data-member] .sign-in-only,
[data-beta] .non-beta-only,
:root:not([data-beta]) .beta-only {
  display: none !important;
}
.skip-link {
  position: absolute;
  top: -48px;
  left: 12px;
  z-index: 80;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--canvas);
}
.skip-link:focus {
  top: 12px;
}

/* Top bar: glass over the page */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  column-gap: 36px;
  height: 60px;
  padding: 0 var(--gutter-end) 0 var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 650 21px/1 var(--sans);
  letter-spacing: -0.02em;
}
/* The mark (approved 2026-10-16): a D in two parts, an ink stem and an orange half that leans
   away from it like a door opening. The favicons in the pages draw the same shapes on a white tile;
   in dark mode the stem turns light. */
.brand-mark {
  flex: none;
  width: 29px;
  height: 29px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='19.28' y='11.77' width='14' height='76' rx='2.5' fill='%231d1d1f'/%3E%3Cpath d='M36.78 11.77a38 38 0 0 1 0 76z' transform='rotate(9 36.78 87.77)' fill='%23dd6a2c'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
  .brand-mark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='19.28' y='11.77' width='14' height='76' rx='2.5' fill='%23f5f5f7'/%3E%3Cpath d='M36.78 11.77a38 38 0 0 1 0 76z' transform='rotate(9 36.78 87.77)' fill='%23e97b42'/%3E%3C/svg%3E");
  }
}
.main-nav {
  display: flex;
  align-self: stretch;
  gap: 26px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.nav-item:hover,
.nav-item[aria-current="page"] {
  color: var(--ink);
}
.nav-item[aria-current="page"] {
  font-weight: 600;
}
.short-label {
  display: none;
}
.badge {
  min-width: 18px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--orange);
  color: var(--badge-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.topbar-end {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  font-size: 14px;
}
.account-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
}
.account-link:hover {
  color: var(--ink);
}
.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sunken);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}
.avatar:empty {
  display: none;
}
.account-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer */
.support-page { max-width: 720px; }
.support-form { display: grid; gap: 24px; }
.support-form .button { justify-self: start; }
.support-form textarea, .support-form select {
  width: 100%;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  background: var(--canvas);
  font: inherit;
}
.support-form textarea { resize: vertical; }
.support-form textarea:focus-visible, .support-form select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.support-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#contact-email { overflow-wrap: anywhere; }

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  max-width: 1240px;
  margin: 96px auto 0;
  padding: 28px var(--gutter-end) 44px var(--gutter);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.foot .brand {
  gap: 7px;
  font-size: 17px;
  color: var(--ink);
}
.foot .brand-mark {
  width: 22px;
  height: 22px;
}
.foot a:hover {
  color: var(--ink);
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform 160ms var(--ease),
    background-color 160ms var(--ease);
}
.button.primary {
  background: var(--orange);
  color: var(--on-orange);
}
.button.primary:hover {
  background: var(--orange-press);
}
.button.secondary {
  background: var(--sunken);
  color: var(--ink);
}
.button.secondary:hover {
  background: var(--grey-press);
}
.button.small {
  gap: 6px;
  height: 34px;
  padding: 0 15px;
  font-size: 13px;
}
.button svg.icon {
  width: 15px;
  height: 15px;
}
.text-button {
  color: var(--ink-2);
  font-weight: 600;
}
.text-button:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-orange {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--orange-ink);
  font-size: 14px;
  font-weight: 600;
}
.link-orange:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-orange svg.icon {
  width: 15px;
  height: 15px;
}
.icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--faint);
  transition: transform 160ms var(--ease);
}
.icon-button:hover {
  color: var(--ink);
}
/* Every press answers at once: the control shrinks a little while held. */
.button:active,
.icon-button:active,
.toggle:active,
.chip:active,
.sort-button:active,
.status-button:active,
.interest:active,
.goto:active,
.finish-button:active,
.choice:active,
.pill:has(.pill-main:active) {
  transform: scale(0.97);
}
.save-button[aria-pressed="true"] svg.icon {
  color: var(--orange);
  fill: currentColor;
}
.save-button svg.icon.pop {
  animation: pop 240ms ease-out;
}
@keyframes pop {
  0% {
    transform: scale(0.82);
  }
  60% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
.bump {
  animation: bump 180ms ease-out;
}
@keyframes bump {
  from {
    transform: translateY(5px);
    opacity: 0.3;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
/* Copy buttons swap their label for "Copied" for a moment. */
.copy-button {
  position: relative;
  min-width: 88px;
}
.copy-label,
.done-label {
  transition:
    opacity 150ms ease-out,
    transform 150ms ease-out;
}
.done-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(4px);
}
.copy-button.done .copy-label {
  opacity: 0;
  transform: translateY(-4px);
}
.copy-button.done .done-label {
  opacity: 1;
  transform: none;
}

/* Instructions to paste into an agent look like the terminal they go into. */
.codebox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.codebox code {
  flex: 1 1 240px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--night);
  color: var(--on-night);
  font: 12.5px/1.6 var(--mono);
  overflow-wrap: anywhere;
  user-select: all;
}

/* Page frame */
.page {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter-end) 0 var(--gutter);
}
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 52px 24px;
}
.page-title,
.doc h1 {
  font: 700 clamp(32px, 3.6vw, 40px) / 1.08 var(--sans);
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* One container, rows divided by hairlines */
.box,
.list-pane,
.detail-pane {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.box {
  overflow: hidden;
}

/* Search and filters */
.search-area {
  display: grid;
  gap: 14px;
  padding-bottom: 24px;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 56px;
  padding: 0 6px 0 20px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.search-box:focus-within {
  box-shadow:
    inset 0 0 0 1.5px var(--ink),
    0 0 0 4px var(--focus-ring);
}
.field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--faint);
}
.location-input {
  flex: 0 1 260px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  color: var(--ink);
  font-size: 15px;
}
.field input::placeholder {
  color: var(--faint);
}
.search-box .button {
  height: 44px;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pill,
.toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 34px;
  border-radius: 99px;
  background: var(--sunken);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  transition:
    transform 160ms var(--ease),
    background-color 160ms var(--ease);
}
.pill:hover,
.toggle:hover {
  background: var(--grey-press);
}
.pill-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  max-width: 240px;
  padding: 0 14px;
  border-radius: 99px;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pill-main svg.icon {
  width: 14px;
  height: 14px;
  color: var(--faint);
}
.pill.on,
.toggle[aria-pressed="true"] {
  background: var(--ink);
  color: var(--canvas);
  box-shadow: none;
}
.pill.on .pill-main {
  padding-right: 2px;
  font-weight: 600;
}
.pill-clear {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 4px;
  border-radius: 50%;
  color: inherit;
}
.pill-clear:hover {
  background: rgb(128 128 128 / 0.3);
}
.pill-clear svg.icon {
  width: 13px;
  height: 13px;
}
.toggle {
  gap: 6px;
  padding: 0 14px;
  white-space: nowrap;
}
.count {
  color: var(--faint);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.toggle[aria-pressed="true"] .count {
  color: inherit;
  opacity: 0.62;
}
.reset {
  flex: none;
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 150ms ease-out,
    visibility 150ms;
}
.reset.show {
  opacity: 1;
  visibility: visible;
}

/* List and details side by side */
.list-pane {
  scroll-margin-top: 76px;
}
.workspace {
  display: grid;
  grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
.list-head {
  position: sticky;
  top: 60px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--muted);
  font-size: 13px;
}
.list-head strong {
  color: var(--ink);
}
.sort-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  transition: transform 160ms var(--ease);
}
.sort-button:hover {
  color: var(--ink);
}
.sort-button svg.icon {
  width: 14px;
  height: 14px;
}
.job-list:focus {
  outline: 0;
}
.job-row {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 16px 12px 16px 18px;
}
.job-row + .job-row {
  border-top: 1px solid var(--line);
}
/* Hover and selection change at once: people move through this list many times a day. */
.job-row:hover {
  background: var(--hover);
}
.job-row.selected {
  background: var(--sunken);
}
.job-row h2 {
  font-size: inherit;
}
.row-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}
/* The title button covers the row so the whole row opens the job. */
.row-title::after {
  content: "";
  position: absolute;
  inset: 0;
}
.row-title:focus-visible {
  outline: 0;
}
.job-row:has(.row-title:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}
.job-row .icon-button {
  position: relative;
  z-index: 1;
}
.row-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.row-company,
.row-foot {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-pay {
  color: var(--ink);
  font-weight: 600;
}
.status-chip {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--sunken);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}
.company-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  font-size: 18px;
  font-weight: 700;
}
/* Logos sit on white; the hairline is drawn over the image so white logos keep an edge. */
.company-logo.has-logo {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.company-logo.has-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
}
.company-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tone-0 {
  background: #e7efe9;
  color: #2f5d3e;
}
.tone-1 {
  background: #e8edf4;
  color: #34506f;
}
.tone-2 {
  background: #f4ebdc;
  color: #7a5521;
}
.tone-3 {
  background: #f3e6e4;
  color: #7f3b31;
}
.tone-4 {
  background: #ebe7f1;
  color: #55456f;
}
.tone-5 {
  background: #f6e7dc;
  color: #8a4520;
}
.tone-6 {
  background: #e4ece9;
  color: #2f5a52;
}
.tone-7 {
  background: #ece9e1;
  color: #55503f;
}
@media (prefers-color-scheme: dark) {
  .tone-0 { background: #1d2b22; color: #9fd0ad; }
  .tone-1 { background: #1d2533; color: #a6bddb; }
  .tone-2 { background: #2e261a; color: #e0bd85; }
  .tone-3 { background: #2f201e; color: #e3a79d; }
  .tone-4 { background: #251f30; color: #c3b3e0; }
  .tone-5 { background: #31221a; color: #eeb08a; }
  .tone-6 { background: #1b2a27; color: #9ccfc2; }
  .tone-7 { background: #29271f; color: #cfc8ad; }
}
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 14px 8px;
  border-top: 1px solid var(--line);
}
.pagination button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 99px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.pagination button:hover:not(:disabled) {
  background: var(--sunken);
}
.pagination [aria-current="page"] {
  background: var(--ink);
  color: var(--canvas);
}
.pagination [aria-current="page"]:hover {
  background: var(--ink-2);
}
.pagination span {
  align-self: center;
  color: var(--faint);
}
.list-foot {
  padding: 4px 16px 16px;
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}
.saved-note,
.inline-error {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
}
.saved-note {
  background: var(--sunken);
  color: var(--ink-2);
}
.inline-error {
  background: var(--danger-soft);
  color: var(--danger);
}

/* Job details */
.detail-pane {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.detail-pane:focus {
  outline: 0;
}
.back-button {
  display: none;
}
.detail-placeholder {
  display: grid;
  place-items: center;
  min-height: 240px;
  color: var(--muted);
}
.detail-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.detail-who {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.detail-who .company-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  font-size: 15px;
}
.detail-who div {
  min-width: 0;
}
.detail-who div > * {
  display: block;
}
.detail-who div > span {
  color: var(--muted);
  font-size: 13px;
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.detail-tabs {
  padding: 14px 28px 0;
}
.tabs {
  position: relative;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
.tab:hover,
.tab[aria-selected="true"] {
  color: var(--ink);
}
.tab[aria-selected="true"] {
  font-weight: 600;
}
.tab[aria-selected="true"] .count {
  color: var(--ink-2);
}
/* The underline slides from the old tab to the new one. */
.tabline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--ink);
  transition:
    transform 200ms ease-out,
    width 200ms ease-out;
}
.still .tabline,
.still .thumb {
  transition: none;
}
.detail-body {
  display: grid;
  gap: 26px;
  padding: 30px 28px 36px;
}
.detail-head {
  display: grid;
  gap: 10px;
}
#detail-title {
  font: 700 30px/1.15 var(--sans);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
/* The one number people look for first. */
.detail-pay {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.keyfacts {
  color: var(--muted);
  font-size: 14px;
}
.fact-rows {
  display: grid;
}
.fact-rows > div {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.fact-rows > div:last-child {
  border-bottom: 1px solid var(--line);
}
.fact-rows dt {
  color: var(--muted);
}
.fact-rows dd {
  margin: 0;
  color: var(--ink);
}
.about-job {
  display: grid;
  gap: 14px;
}
.about-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.about-head h3,
.detail-section h3,
.detail-section h4 {
  font-size: 16px;
  font-weight: 600;
}
.segmented {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: 99px;
  background: var(--sunken);
}
.segmented button {
  position: relative;
  z-index: 1;
  height: 30px;
  padding: 0 14px;
  border-radius: 99px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.segmented [aria-pressed="true"] {
  color: var(--ink);
}
/* The light thumb slides under the chosen side. */
.thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: 99px;
  background: var(--elevated);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.14);
  transition:
    transform 200ms ease-out,
    width 200ms ease-out;
}
.summary-text {
  max-width: 64ch;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
}
#summary-view {
  display: grid;
  gap: 22px;
}
.detail-section {
  display: grid;
  gap: 8px;
}
.detail-section p {
  max-width: 64ch;
  color: var(--ink-2);
  line-height: 1.6;
}
.detail-section ul {
  display: grid;
  gap: 8px;
  max-width: 66ch;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  line-height: 1.6;
}
.detail-section li {
  position: relative;
  padding-left: 18px;
}
.detail-section li::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint);
}
.tags {
  color: var(--ink-2);
}
.tag + .tag::before {
  content: ", ";
}
.summary-note,
.detail-meta {
  color: var(--faint);
  font-size: 12px;
}
.posting-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink-2);
  line-height: 1.65;
}
.detail-meta {
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
#connections-panel {
  display: grid;
  gap: 4px;
  padding: 24px 28px 36px;
}
.contacts-intro {
  margin-bottom: 8px;
  color: var(--muted);
}
.contact-card {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.contact-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.contact-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sunken);
  color: var(--ink-2);
  font-weight: 700;
}
.contact-name {
  font-weight: 600;
}
.contact-role,
.contact-headline,
.contact-evidence,
.post-time {
  color: var(--muted);
  font-size: 13px;
}
.contact-headline,
.contact-evidence {
  margin-top: 6px;
}
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.external-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  font-weight: 600;
}
.external-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.external-link svg.icon {
  width: 15px;
  height: 15px;
}
.post-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.no-contacts {
  margin-top: 8px;
  padding: 16px;
  border-radius: 12px;
  background: var(--sunken);
}
.no-contacts h3 {
  margin-bottom: 4px;
  font-size: 15px;
}

/* Loading and empty states */
.empty-state {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 24px;
  color: var(--muted);
  text-align: center;
}
.empty-state h2 {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}
.empty-state .button {
  margin-top: 8px;
}
.skeleton {
  display: grid;
  gap: 8px;
  padding: 18px;
}
.skeleton + .skeleton {
  border-top: 1px solid var(--line);
}
.skeleton i {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--line), var(--surface), var(--line)) 0 0 / 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.skeleton i:nth-child(1) {
  width: 60%;
  height: 13px;
}
.skeleton i:nth-child(2) {
  width: 40%;
}
.skeleton i:nth-child(3) {
  width: 75%;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* Menus, tooltips and toasts */
.menu {
  position: fixed;
  z-index: 70;
  display: grid;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  max-height: min(360px, calc(100vh - 24px));
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--elevated);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity 150ms ease-out,
    transform 150ms ease-out;
}
.menu.open {
  opacity: 1;
  transform: none;
}
.menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink);
  text-align: left;
  white-space: nowrap;
}
.menu button:hover,
.menu button:focus-visible {
  background: var(--sunken);
  outline: 0;
}
.menu button[aria-checked="true"] {
  font-weight: 700;
}
.menu button.danger {
  color: var(--danger);
}
.menu-count {
  margin-left: auto;
  padding-left: 16px;
  color: var(--faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.menu-line {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}
.tip {
  position: fixed;
  z-index: 80;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--canvas);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out;
}
.tip.show {
  opacity: 1;
  transform: none;
}
.tip.instant {
  transition: none;
}
.toasts {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(92vw, 440px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  font-weight: 500;
  box-shadow: var(--shadow);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out;
}
.toast.in {
  opacity: 1;
  transform: none;
}
.toast.out {
  opacity: 0;
  transform: translateY(6px);
  transition-duration: 150ms;
}
.toast button {
  margin-left: auto;
  padding: 2px 4px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Pages with one column: My search, For AI agents, shortlists, questions, account */
.doc {
  display: grid;
  gap: 40px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 52px var(--gutter-end) 24px var(--gutter);
}
.doc-head,
.head {
  display: grid;
  gap: 10px;
}
.lede,
.intro {
  max-width: 62ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.eyebrow {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.crumb:hover {
  color: var(--ink);
}
.crumb svg.icon {
  width: 15px;
  height: 15px;
}
.block {
  display: grid;
  gap: 14px;
}
.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.block-head h2,
.step h2,
.section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.needs-count {
  color: var(--orange);
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.block-head .muted {
  color: var(--faint);
  font-size: 14px;
}
.status-line {
  color: var(--muted);
  font-size: 13px;
}
.status-line a,
.guide-doc p a,
.guide-links a,
.collection-links a {
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.status-line .live {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--ok);
  vertical-align: 1px;
}

/* My search: what needs you. The first thing is a grey card with the page's one orange button,
   the rest are rows, as in the app. */
.needs {
  display: grid;
}
.need {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  padding: 16px 0;
}
.need + .need {
  border-top: 1px solid var(--line);
}
.need.featured {
  margin-bottom: 6px;
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--raised);
}
.need.featured + .need {
  border-top: 0;
}
.need.featured .need-text b {
  font-size: 17px;
}
.need.featured .need-meta {
  font-size: 14px;
}
.need-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.need-text b {
  font-weight: 600;
}
.need-meta {
  color: var(--muted);
  font-size: 13px;
}
.need-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
  font-size: 13px;
}
.need-empty {
  padding: 4px 0;
}
.need-empty b {
  display: block;
  font-weight: 600;
}
.need-empty p {
  color: var(--muted);
}
.need-empty .button {
  margin-top: 12px;
}

/* My search: applications and shortlists */
.rows {
  display: grid;
}
.row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}
.row + .row {
  border-top: 1px solid var(--line);
}
.row.compact {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
a.row:hover .row-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.row-text {
  display: grid;
  min-width: 0;
}
.row-link {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.row-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.row-sub {
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.when {
  color: var(--faint);
  font-size: 12px;
  white-space: nowrap;
}
.row-go {
  color: var(--faint);
}
.status-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 160ms var(--ease);
}
.status-button svg.icon {
  width: 14px;
  height: 14px;
  color: var(--faint);
}
.rows-empty {
  padding: 6px 0;
  color: var(--muted);
}
/* Application stages as grey chips, the chosen one black, as in the app. */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 99px;
  background: var(--sunken);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    transform 160ms var(--ease),
    background-color 160ms var(--ease);
}
.chip:hover {
  background: var(--grey-press);
}
.chip[aria-selected="true"] {
  background: var(--ink);
  color: var(--canvas);
}
.chip .count {
  color: var(--muted);
}
.chip[aria-selected="true"] .count {
  color: inherit;
  opacity: 0.62;
}

/* For AI agents */
.agent-doc {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 56px;
  max-width: 1240px;
}
.agent-doc > * {
  grid-column: 1 / -1;
}
.agent-doc > .doc-head {
  grid-column: 1;
}
.agent-doc > [data-agent-entry] {
  grid-column: 2;
  grid-row: 1;
}
.step {
  display: grid;
  gap: 10px;
}
.step > .lede,
.step > .muted {
  max-width: 70ch;
}
[data-agent-entry] {
  gap: 14px;
  padding: 22px;
  border-radius: 20px;
  background: var(--night);
  color: var(--on-night-muted);
}
[data-agent-entry] h2 {
  color: var(--on-night);
  font-size: 15px;
}
[data-agent-entry] .muted,
[data-agent-entry] .account-note {
  color: var(--on-night-muted);
}
[data-agent-entry] .codebox code {
  background: rgb(255 255 255 / 0.07);
}
[data-agent-entry] .text-button {
  color: var(--on-night);
}
[data-agent-entry] .inline-error {
  margin: 0;
}
[data-agent-entry] p:empty {
  display: none;
}
.flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  margin-top: 4px;
  padding: 0;
  list-style: none;
  counter-reset: flow;
  color: var(--muted);
}
.flow li {
  position: relative;
  padding: 16px 0 16px 42px;
  border-top: 1px solid var(--line);
  counter-increment: flow;
}
.flow li::before {
  content: counter(flow);
  position: absolute;
  top: 14px;
  left: 0;
  color: var(--orange-ink);
  font: 650 20px/1.3 var(--sans);
}
.flow b {
  color: var(--ink);
  font-weight: 600;
}

/* Job collection pages (/software-engineer-jobs and the others) and their list on home */
.collection-jobs {
  display: grid;
  padding: 0;
  list-style: none;
}
.collection-jobs li {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.collection-jobs li:last-child {
  border-bottom: 1px solid var(--line);
}
.collection-jobs a {
  color: var(--ink);
  font-weight: 600;
}
.collection-jobs a:hover,
.browse-groups a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.collection-jobs p {
  color: var(--muted);
  font-size: 14px;
}
.browse {
  padding-top: 96px;
}
.browse-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 28px;
  margin-top: 28px;
}
.browse-groups h3 {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 650;
}
.browse-groups ul {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 14px;
}

/* Shortlist page */
.count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 14px;
}
.hint {
  max-width: 72ch;
  color: var(--muted);
}
.error {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--danger-soft);
  color: var(--danger);
}
.items {
  display: grid;
  padding: 0;
  list-style: none;
}
.item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 156px;
  align-items: start;
  gap: 22px;
  padding: 26px 0;
}
.item + .item {
  border-top: 1px solid var(--line);
}
.score {
  display: grid;
  justify-items: start;
}
.score-value {
  font: 650 32px/1 var(--sans);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.score-label {
  color: var(--muted);
  font-size: 11px;
}
.body {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.item .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 13px;
}
.item .meta .company-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 11px;
}
.item .meta b {
  color: var(--ink-2);
  font-weight: 600;
}
.item .meta strong {
  color: var(--ink);
  font-weight: 600;
}
.job-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.blurb {
  color: var(--muted);
  line-height: 1.55;
}
.reason {
  color: var(--ink-2);
  line-height: 1.55;
}
.reason-label {
  margin-right: 6px;
  color: var(--muted);
  font-weight: 600;
}
.todo {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--sunken);
  color: var(--ink-2);
  font-size: 14px;
}
.todo-label {
  margin-right: 8px;
  font-weight: 600;
}
.item .actions {
  display: grid;
  gap: 10px;
}
.interest,
.goto,
.item .status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition:
    transform 160ms var(--ease),
    background-color 160ms var(--ease);
}
.interest {
  background: var(--sunken);
}
.interest:hover {
  background: var(--grey-press);
}
.interest[aria-pressed="true"],
.goto {
  background: var(--orange);
  color: var(--on-orange);
}
.goto:hover,
.interest[aria-pressed="true"]:hover {
  background: var(--orange-press);
}
.item .status {
  background: var(--sunken);
  color: var(--ink-2);
}
.official {
  justify-self: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.official:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.interest:disabled,
.goto:disabled,
.finish-button:disabled {
  cursor: progress;
  opacity: 0.6;
}
/* The last step of a page stays in reach at the bottom of the screen. */
.finish {
  position: sticky;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 10px 10px 22px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.35);
}
.finish p {
  flex: 1 1 260px;
  color: var(--muted);
  font-size: 14px;
}
.finish p strong {
  color: var(--ink);
}
.finish-button {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--on-orange);
  font-size: 14px;
  font-weight: 600;
  transition:
    transform 160ms var(--ease),
    background-color 160ms var(--ease);
}
.finish-button:hover {
  background: var(--orange-press);
}

/* Question page: one grey card per numbered question, as in the app */
.fields {
  display: grid;
  gap: 12px;
  counter-reset: question;
}
.question {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 24px 24px 24px 68px;
  border-radius: 20px;
  background: var(--raised);
  counter-increment: question;
}
.question::before {
  content: counter(question);
  position: absolute;
  top: 23px;
  left: 26px;
  color: var(--faint);
  font: 650 20px/1.2 var(--sans);
}
.question.is-missing {
  background: var(--danger-soft);
}
.question-label {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.question-hint {
  color: var(--muted);
  font-size: 13px;
}
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 99px;
  background: var(--sunken);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 160ms var(--ease),
    transform 160ms var(--ease);
}
.choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice:has(input:checked) {
  background: var(--ink);
  color: var(--canvas);
  box-shadow: none;
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Resume review: a tailored resume inside its question card, each change marked where it sits */
.sheet {
  display: grid;
  gap: 5px;
  min-width: 0;
  margin-top: 10px;
  padding: 26px 30px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--elevated);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}
.r-name {
  color: var(--ink);
  font: 700 22px/1.2 var(--sans);
  letter-spacing: -0.015em;
}
.r-contact {
  color: var(--muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.r-section {
  margin-top: 14px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.r-role {
  margin-top: 8px;
  color: var(--ink);
  font-weight: 600;
}
.r-li {
  position: relative;
  padding-left: 16px;
}
.r-li::before {
  content: "•";
  position: absolute;
  left: 3px;
  color: var(--faint);
}
.change {
  display: grid;
  gap: 8px;
  margin-inline: -10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--orange-soft);
  overflow-wrap: anywhere;
}
.question-document > .change {
  margin-inline: 0;
}
.change.is-decided {
  background: var(--raised);
}
.change.is-missing {
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 1.5px var(--danger);
}
.change ins {
  padding: 0 1px;
  border-radius: 3px;
  background: var(--ins);
  color: var(--ink);
  text-decoration: none;
}
.change.is-decided ins {
  background: none;
  color: inherit;
}
.change del {
  color: var(--faint);
}
.change .choices {
  margin-top: 0;
}
.change .choice {
  min-height: 32px;
  padding: 0 14px;
  font-size: 13px;
}
.text-answer,
.account-field input,
.resume-grid input,
.resume-grid select,
.resume-input textarea {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--canvas);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  font-size: 15px;
}
.resume-input textarea {
  min-height: 160px;
  padding: 12px 16px;
}
.text-answer {
  margin-top: 6px;
}
.text-answer:focus-visible,
.account-field input:focus-visible,
.resume-grid input:focus-visible,
.resume-grid select:focus-visible,
.resume-input textarea:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 0 0 1.5px var(--ink),
    0 0 0 4px var(--focus-ring);
}
.file-answer {
  margin-top: 6px;
  font-size: 14px;
}

/* Account and privacy */
.account-page {
  max-width: 800px;
}
#ai-connections,
#connected-apps,
#invitation {
  scroll-margin-top: 80px;
}
.account-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 24px;
  border-radius: 20px;
  background: var(--raised);
}
.account-card h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.account-card p {
  line-height: 1.6;
}
.account-profile,
.account-form,
.token-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.account-profile > div,
.token-row > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
.account-form {
  flex-wrap: wrap;
  align-items: end;
}
.account-field {
  display: grid;
  flex: 1 1 200px;
  gap: 6px;
  font-weight: 500;
}
.account-note {
  color: var(--muted);
  font-size: 13px;
}
.account-note a {
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.token-list {
  padding: 0;
  list-style: none;
}
.token-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.token-row:last-child {
  border-bottom: 0;
}
.token-row strong {
  display: block;
}
/* A new instruction sits on a dark panel, like the terminal it goes into. */
.token-secret {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: 16px;
  background: var(--night);
  color: var(--on-night-muted);
}
.token-secret h3 {
  color: var(--on-night);
  font-size: 15px;
}
.token-secret .account-note {
  color: var(--on-night-muted);
}
.token-secret .codebox code {
  background: rgb(255 255 255 / 0.07);
  white-space: pre-wrap;
}
.token-secret .text-button {
  color: var(--on-night);
}
.account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.account-page .inline-error {
  margin: 0;
}
/* Connector reference: lists of facts, then one card per MCP tool. */
.ref-list {
  display: grid;
  gap: 8px;
  max-width: 70ch;
  padding-left: 20px;
  color: var(--ink-2);
  line-height: 1.6;
}
.connector-doc code {
  font: 0.9em var(--mono);
  overflow-wrap: anywhere;
}
.connector-doc .codebox code {
  font-size: 12.5px;
}
.tool-ref {
  display: grid;
  gap: 14px;
}
.tool-ref h3 {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 650;
}
.tool {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.tool-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tool-head h4 {
  font-size: 16px;
}
.tool-title {
  color: var(--muted);
  font-size: 14px;
}
.access {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--sunken);
  font-size: 12px;
  font-weight: 600;
}
.access-write {
  color: var(--orange-ink);
}
.tool-params {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
}
.tool-params li > span:not(.muted) {
  display: block;
  color: var(--ink-2);
}
.tool-hints {
  color: var(--faint);
  font-size: 12.5px;
}
/* OAuth consent: what an assistant may do with the account. */
.consent-scopes {
  display: grid;
  gap: 8px;
  padding-left: 20px;
  line-height: 1.6;
}
.consent-scopes label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.account-notice {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--sunken);
}

/* Saved resume and matches (an invited feature in My search) */
.resume-stack {
  display: grid;
  gap: 12px;
}
.resume-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}
.resume-grid label,
.resume-input {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
.resume-consent {
  display: flex;
  align-items: start;
  gap: 10px;
  color: var(--ink-2);
  font-size: 13px;
}
.resume-card {
  display: grid;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.resume-card h3 {
  font-size: 16px;
  font-weight: 600;
}
.resume-card blockquote {
  margin-top: 4px;
  padding-left: 12px;
  border-left: 2px solid var(--line-strong);
  color: var(--muted);
}
.match-check {
  display: flex;
  align-items: start;
  gap: 8px;
}
.resume-consent input,
.match-check input {
  flex: none;
  margin-top: 4px;
}
#resume-section {
  overflow-wrap: anywhere;
}
#resume-section summary {
  font-weight: 600;
  cursor: pointer;
}
.resume-card ul {
  padding-left: 20px;
}
.resume-task {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--sunken);
}
#match-results {
  display: grid;
  gap: 12px;
}

/* ---------- Home for signed-out visitors ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 64px;
  padding-block: 96px 112px;
}
.hero-copy {
  display: grid;
  gap: 22px;
}
/* The one headline in the system sans (SF Pro on Apple devices), picked 2026-10-16. */
.hero-title {
  font: 600 clamp(40px, 5.2vw, 76px) / 1.05 var(--sans);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.hero-copy .lede {
  max-width: 34ch;
  font-size: 19px;
  line-height: 1.5;
  text-wrap: balance;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 10px;
}
.cta-row .text-button {
  font-size: 15px;
}
.google-mark {
  width: 18px;
  height: 18px;
  padding: 2px;
  border-radius: 50%;
  background: #fff;
}
.term {
  overflow: hidden;
  border-radius: 20px;
  background: var(--night);
  color: var(--on-night);
}
/* On a black page the terminal needs an edge. */
@media (prefers-color-scheme: dark) {
  .term,
  [data-agent-entry],
  .token-secret,
  .codebox code {
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  color: var(--on-night-muted);
  font: 12px var(--mono);
}
.term-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.15);
}
.term-bar span {
  margin-left: 8px;
}
.term pre {
  margin: 0;
  padding: 22px 22px 24px;
  font: 13.5px/1.75 var(--mono);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.term b {
  color: var(--orange);
  font-weight: 600;
}
.term .dim {
  color: var(--on-night-muted);
}
/* The promo film. Its frames are light in both themes. */
.hero-video {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #f5f5f7;
}
.cursor {
  display: inline-block;
  width: 8px;
  height: 1.15em;
  margin-left: 3px;
  vertical-align: text-bottom;
  background: var(--orange);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.how {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-strong);
  font: 700 30px/1.15 var(--sans);
  letter-spacing: -0.022em;
}
.home-steps {
  padding: 0;
  list-style: none;
}
.home-step {
  display: grid;
  grid-template-columns: minmax(120px, 240px) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "num text"
    "num visual";
  column-gap: 64px;
  row-gap: 28px;
  padding-block: 72px;
  border-bottom: 1px solid var(--line);
}
.step-num {
  grid-area: num;
  position: sticky;
  top: 92px;
  align-self: start;
  color: var(--orange);
  font: 600 clamp(64px, 7vw, 104px) / 0.9 var(--sans);
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
  transition:
    opacity 400ms var(--ease),
    filter 400ms var(--ease);
}
/* Steps below the reading line stay faint until the visitor reaches them. */
.home-step.is-ahead .step-num {
  opacity: 0.25;
  filter: grayscale(1);
}
.step-text {
  grid-area: text;
  display: grid;
  align-content: start;
  gap: 12px;
}
.step-text h3 {
  font: 700 30px/1.15 var(--sans);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.step-text p {
  max-width: 52ch;
  color: var(--muted);
  font-size: 17px;
}
.step-visual {
  grid-area: visual;
  min-width: 0;
}
.step-visual .term {
  max-width: 640px;
}
.example {
  margin-bottom: 10px;
  color: var(--faint);
  font-size: 12px;
}
.signin {
  display: grid;
  gap: 20px;
  max-width: 420px;
  padding: 26px;
}
.signin-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.signin-head .brand-mark {
  width: 36px;
  height: 36px;
}
.signin-head b {
  display: block;
  font: 650 17px/1.2 var(--sans);
  letter-spacing: -0.01em;
}
.signin-head span {
  color: var(--muted);
  font-size: 13px;
}
.checks {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 14px;
}
.checks li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.checks svg.icon {
  width: 15px;
  height: 15px;
  color: var(--muted);
  stroke-width: 2.2;
}
.signin .button {
  width: 100%;
}
.flow3 {
  max-width: 580px;
  padding: 0;
  list-style: none;
}
.flow3 li {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
}
.flow3 li + li {
  border-top: 1px solid var(--line);
}
.flow3 .stage {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.mini-job {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.mini-job b,
.mini-job span {
  display: block;
}
.mini-job div span {
  color: var(--muted);
  font-size: 13px;
}
.match {
  display: grid;
  justify-items: end;
}
.match .num {
  font: 650 28px/1 var(--sans);
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.match small {
  color: var(--muted);
  font-size: 11px;
}
.diff {
  display: grid;
  gap: 6px;
  font-size: 14px;
}
.diff p {
  padding: 7px 12px;
  border-radius: 10px;
}
.diff .del {
  background: var(--sunken);
  color: var(--muted);
  text-decoration: line-through;
}
.diff .add {
  background: var(--orange-soft);
}
.submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}
.submitted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.submitted svg.icon {
  width: 16px;
  height: 16px;
  color: var(--orange);
  stroke-width: 2.4;
}
.inbox {
  max-width: 580px;
}
.mail {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 18px 20px;
}
.mail + .mail {
  border-top: 1px solid var(--line);
}
.mail i {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
}
.mail.new i {
  background: var(--orange);
}
.mail div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mail b,
.mail .subject {
  font-size: 14px;
}
.mail .subject {
  font-weight: 600;
}
.mail small {
  color: var(--muted);
  font-size: 13px;
}
.mail:not(.new) b,
.mail:not(.new) .subject {
  color: var(--muted);
  font-weight: 500;
}
.mail time {
  color: var(--faint);
  font-size: 12px;
}
.closing {
  display: grid;
  justify-items: start;
  gap: 24px;
  padding-top: 96px;
}

/* Wide screens */
@media (max-width: 1080px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-doc {
    grid-template-columns: minmax(0, 1fr);
  }
  .agent-doc > .doc-head,
  .agent-doc > [data-agent-entry] {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Narrow screens: the list fills the page and a job opens over it. */
@media (max-width: 899px) {
  .topbar {
    column-gap: 20px;
  }
  .main-nav {
    gap: 18px;
  }
  .workspace {
    display: block;
  }
  .detail-pane {
    display: none;
  }
  .detail-open {
    overflow: hidden;
  }
  .detail-open .detail-pane {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .back-button {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    font-weight: 600;
  }
  .detail-bar {
    position: static;
    padding: 14px 16px;
    /* A filter here would pin the actions below to this bar instead of the screen. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* Save and Apply stay at the bottom of the screen while you read the job. */
  .detail-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 4;
    flex-wrap: nowrap;
    padding: 10px var(--gutter-end) calc(10px + env(safe-area-inset-bottom, 0px)) var(--gutter);
    border-top: 1px solid var(--line);
    background: var(--surface);
  }
  .detail-actions > :last-child {
    flex: 1 1 0;
    min-width: 0;
  }
  .detail-actions > :last-child > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .detail-tabs {
    padding: 12px 16px 0;
  }
  .detail-body {
    padding: 24px 16px calc(104px + env(safe-area-inset-bottom, 0px));
  }
  #connections-panel {
    padding: 20px 16px calc(104px + env(safe-area-inset-bottom, 0px));
  }
  #detail-title {
    font-size: 26px;
  }
  .fact-rows > div {
    grid-template-columns: 104px minmax(0, 1fr);
  }
  .flow {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-step {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "num text"
      "visual visual";
    column-gap: 16px;
    padding-block: 44px;
  }
  .step-num {
    position: static;
    font-size: 56px;
  }
  .step-text h3 {
    font-size: 24px;
  }
  .item {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
  }
  .item .actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  .row .when {
    display: none;
  }
  .row.compact {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
@media (max-width: 640px) {
  :root {
    --gutter: max(16px, env(safe-area-inset-left, 0px));
    --gutter-end: max(16px, env(safe-area-inset-right, 0px));
  }
  .brand-name,
  .long-label,
  .account-link:has(.avatar:not(:empty)) .account-name {
    display: none;
  }
  .short-label {
    display: inline;
  }
  .page-head,
  .doc {
    padding-top: 32px;
  }
  .page-head {
    padding-bottom: 18px;
  }
  .hero {
    padding-block: 44px 64px;
  }
  .search-box {
    flex-wrap: wrap;
    height: auto;
    padding: 6px;
    border-radius: 22px;
  }
  .search-box .field {
    flex: 1 1 100%;
    height: 46px;
    padding: 0 12px;
  }
  /* The keyword takes the first row; the place and Search share the second. */
  .search-box .field:first-child {
    border-bottom: 1px solid var(--line);
  }
  .search-box .location-input {
    flex-basis: 0;
    border-left: 0;
  }
  .search-box .button {
    flex: none;
    height: 40px;
    padding: 0 18px;
  }
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar {
    display: none;
  }
  .workspace .list-pane {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-end) * -1);
  }
  .list-head {
    border-radius: 0;
  }
  .need {
    grid-template-columns: minmax(0, 1fr);
  }
  .need-actions {
    justify-content: flex-start;
  }
  .need.featured {
    padding: 18px;
  }
  /* The card's button spans the card, as in the app. */
  .need.featured .need-actions .button.primary {
    flex: 1 1 100%;
  }
  .question {
    padding: 20px 18px 20px 50px;
  }
  .question::before {
    top: 19px;
    left: 20px;
    font-size: 18px;
  }
  .question-document {
    padding: 48px 16px 16px;
  }
  .question-document::before {
    left: 16px;
  }
  .sheet {
    padding: 18px 14px 20px;
  }
  .account-card {
    padding: 18px;
  }
  .account-profile {
    align-items: start;
  }
  .account-form > .button {
    width: 100%;
  }
  .finish {
    border-radius: 22px;
  }
}

/* Touch screens: a finger needs about 44 px to hit a control, and an input under 16 px
   makes iPhones zoom in when it gets focus. */
@media (pointer: coarse) {
  .field input,
  .text-answer,
  .account-field input,
  .resume-grid input,
  .resume-grid select,
  .resume-input textarea {
    font-size: 16px;
  }
  .button.small,
  .interest,
  .goto {
    height: 44px;
  }
  .button.small {
    font-size: 14px;
  }
  .icon-button {
    width: 44px;
    height: 44px;
  }
  .pagination button {
    min-width: 44px;
    height: 44px;
  }
  .finish-button,
  .choice {
    min-height: 44px;
  }
  .pill,
  .toggle,
  .segmented button {
    height: 40px;
  }
  .pill-clear {
    width: 32px;
    height: 32px;
  }
  .tab {
    padding-top: 10px;
  }
  /* Text links get a taller hit area without moving anything. */
  .text-button,
  .sort-button,
  .crumb,
  .status-button,
  .official,
  .link-orange,
  .foot a {
    padding-block: 12px;
    margin-block: -12px;
  }
  .nav-item {
    padding-inline: 6px;
    margin-inline: -6px;
  }
  a.brand {
    padding: 8px;
    margin: -8px;
  }
  .account-link {
    justify-content: flex-end;
    min-width: 44px;
    min-height: 44px;
  }
  /* An application opens from anywhere on its row, as a job does in the job list. */
  .row {
    position: relative;
  }
  a.row-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .row .status-button {
    position: relative;
    z-index: 1;
  }
}

/* Short screens, such as a phone on its side: the top bar scrolls away with the page. */
@media (max-height: 500px) {
  .topbar {
    position: static;
  }
  .list-head {
    top: 0;
  }
  .list-pane {
    scroll-margin-top: 16px;
  }
  .detail-pane {
    top: 16px;
    max-height: calc(100vh - 32px);
  }
}

/* The welcome after someone redeems a code from a Madison poster (2026-10-22): the State Capitol is
   drawn line by line, a Badger red sun rises behind the dome, and the lake reflects it. Only the
   city's name and the school's color appear; UW's names and marks need the university's approval. */
.welcome {
  --badger: #c5050c;
  --badger-ink: #c5050c;
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px max(24px, env(safe-area-inset-right, 0px)) 24px max(24px, env(safe-area-inset-left, 0px));
  background: var(--canvas);
  text-align: center;
  animation: welcome-fade 260ms ease-out both;
}
.welcome-scene {
  width: min(300px, 100%);
  height: auto;
  margin-bottom: 8px;
  overflow: visible;
}
.welcome-sun,
.welcome-horizon,
.welcome-reflection line {
  transform-box: fill-box;
  transform-origin: center;
}
.welcome-sun {
  fill: var(--badger);
  animation: welcome-sunrise 1050ms cubic-bezier(0.2, 0.7, 0.2, 1) 0.61s both;
}
.welcome-capitol {
  fill: var(--ink);
  fill-rule: evenodd;
  stroke: var(--ink);
  stroke-width: 0.8;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  animation:
    welcome-draw 1100ms cubic-bezier(0.45, 0, 0.2, 1) 0.2s both,
    welcome-fill 440ms ease-out 1.16s both;
}
.welcome-horizon {
  stroke: var(--line-strong);
  animation: welcome-grow 520ms var(--ease) 0.1s both;
}
.welcome-reflection line {
  stroke: var(--badger);
  stroke-width: 2.2;
  stroke-linecap: round;
  animation: welcome-grow 460ms var(--ease) 1.36s both;
}
.welcome-reflection line:nth-child(2) {
  opacity: 0.65;
  animation-delay: 1.44s;
}
.welcome-reflection line:nth-child(3) {
  opacity: 0.42;
  animation-delay: 1.52s;
}
.welcome-reflection line:nth-child(4) {
  opacity: 0.25;
  animation-delay: 1.6s;
}
.welcome h2 {
  font-size: 28px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  animation: welcome-rise 460ms var(--ease) 1.68s both;
}
.welcome h2 span {
  color: var(--badger-ink);
}
.welcome p {
  color: var(--muted);
  animation: welcome-rise 460ms var(--ease) 1.8s both;
}
.welcome .button {
  margin-top: 10px;
  animation: welcome-rise 460ms var(--ease) 1.92s both;
}
@media (prefers-color-scheme: dark) {
  .welcome {
    --badger-ink: #ef3b41;
  }
  .welcome-capitol {
    fill: var(--raised);
    stroke: var(--muted);
  }
}
@keyframes welcome-fade {
  from {
    opacity: 0;
  }
}
@keyframes welcome-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes welcome-sunrise {
  from {
    transform: translateY(66px);
  }
}
@keyframes welcome-draw {
  from {
    stroke-dashoffset: 100;
  }
}
@keyframes welcome-fill {
  from {
    fill-opacity: 0;
  }
}
@keyframes welcome-grow {
  from {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}