/* ==========================================================================
   BayWay: liquid metal theme
   Pearl and silver in light mode, graphite and chrome in dark mode. Chrome
   borders and graphite pills echo the liquid metal button, which stays the
   one animated, most prominent control on each screen.
   ========================================================================== */

:root {
  --bg: #e8e8eb;
  --bg-sheen: #ffffff;
  --surface: #fafafb;
  --surface-2: #f1f1f3;
  --surface-3: #e5e5e9;
  --text: #0b0c0f;
  --text-2: #2c2f36;
  --muted: #656973;
  --line: #d8d9de;
  --line-2: #c2c4cb;
  --primary: #1d4ed8;
  --primary-hover: #1a43bb;
  --primary-soft: #e2e8f7;
  --on-primary: #ffffff;
  --warn: #c62828;
  --star: #f0a312;
  --chrome: linear-gradient(135deg, #ffffff 0%, #b5b7bf 20%, #f8f8fa 42%, #8a8d96 64%, #eeeff2 82%, #a5a7af 100%);
  --chrome-soft: linear-gradient(135deg, #ffffff 0%, #d0d1d7 28%, #ffffff 52%, #bfc1c8 78%, #f3f3f5 100%);
  --graphite: linear-gradient(180deg, #2c2d32 0%, #0c0c0e 100%);
  --graphite-hover: linear-gradient(180deg, #3a3b41 0%, #141416 100%);
  --on-graphite: #eeeef1;
  --media: linear-gradient(135deg, #f7f7f9 0%, #dadbe0 36%, #f5f5f7 60%, #cdcfd5 100%);
  --highlight: inset 0 1px 0 rgb(255 255 255 / 0.95);
  --shadow: 0 1px 2px rgb(10 12 18 / 0.06), 0 1px 1px rgb(10 12 18 / 0.03);
  --shadow-md: 0 14px 30px -14px rgb(10 12 18 / 0.28), 0 3px 8px -3px rgb(10 12 18 / 0.08);
  --shadow-lg: 0 26px 60px -18px rgb(10 12 18 / 0.38);
  --topbar-bg: rgb(242 242 245 / 0.72);
  --radius: 14px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

/* Dark theme: follows the device unless the person picked Light or Dark in
   Settings (data-theme on <html>). The two blocks must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #060607;
    --bg-sheen: #1d1e23;
    --surface: #0f1012;
    --surface-2: #15161a;
    --surface-3: #1c1d22;
    --text: #f3f3f5;
    --text-2: #c9cbd1;
    --muted: #8b8f98;
    --line: #23252a;
    --line-2: #34373e;
    --primary: #93b4ff;
    --primary-hover: #b0c8ff;
    --primary-soft: #172038;
    --on-primary: #06070a;
    --warn: #ff7b72;
    --star: #f7b733;
    --chrome: linear-gradient(135deg, #f4f4f6 0%, #54575e 20%, #d6d7dc 42%, #2d2f35 64%, #b1b3ba 82%, #44474e 100%);
    --chrome-soft: linear-gradient(135deg, #5e616a 0%, #26282d 30%, #6c6f78 55%, #222428 80%, #4a4d55 100%);
    --graphite: linear-gradient(180deg, #3b3d44 0%, #1b1c20 100%);
    --graphite-hover: linear-gradient(180deg, #484a52 0%, #232429 100%);
    --on-graphite: #eeeef1;
    --media: linear-gradient(135deg, #1a1b1f 0%, #2a2c32 40%, #141518 70%, #23252a 100%);
    --highlight: inset 0 1px 0 rgb(255 255 255 / 0.06);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.5);
    --shadow-md: 0 16px 34px -16px rgb(0 0 0 / 0.8), 0 3px 8px -3px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 26px 60px -18px rgb(0 0 0 / 0.85);
    --topbar-bg: rgb(8 8 10 / 0.72);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #060607;
  --bg-sheen: #1d1e23;
  --surface: #0f1012;
  --surface-2: #15161a;
  --surface-3: #1c1d22;
  --text: #f3f3f5;
  --text-2: #c9cbd1;
  --muted: #8b8f98;
  --line: #23252a;
  --line-2: #34373e;
  --primary: #93b4ff;
  --primary-hover: #b0c8ff;
  --primary-soft: #172038;
  --on-primary: #06070a;
  --warn: #ff7b72;
  --star: #f7b733;
  --chrome: linear-gradient(135deg, #f4f4f6 0%, #54575e 20%, #d6d7dc 42%, #2d2f35 64%, #b1b3ba 82%, #44474e 100%);
  --chrome-soft: linear-gradient(135deg, #5e616a 0%, #26282d 30%, #6c6f78 55%, #222428 80%, #4a4d55 100%);
  --graphite: linear-gradient(180deg, #3b3d44 0%, #1b1c20 100%);
  --graphite-hover: linear-gradient(180deg, #484a52 0%, #232429 100%);
  --on-graphite: #eeeef1;
  --media: linear-gradient(135deg, #1a1b1f 0%, #2a2c32 40%, #141518 70%, #23252a 100%);
  --highlight: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 16px 34px -16px rgb(0 0 0 / 0.8), 0 3px 8px -3px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 26px 60px -18px rgb(0 0 0 / 0.85);
  --topbar-bg: rgb(8 8 10 / 0.72);
  color-scheme: dark;
}

/* Category colors. Tags and card images mix these with the surface. */
[data-cat="stem"] { --c: #3b82f6; }
[data-cat="eng"] { --c: #f97316; }
[data-cat="cs"] { --c: #8b5cf6; }
[data-cat="bio"] { --c: #22c55e; }
[data-cat="biz"] { --c: #eab308; }
[data-cat="arts"] { --c: #ec4899; }
[data-cat="hum"] { --c: #14b8a6; }
[data-cat="env"] { --c: #84cc16; }
[data-cat="comm"] { --c: #0ea5e9; }
[data-cat="career"] { --c: #94a3b8; }

/* List statuses */
[data-status="want"] { --s: #3b82f6; }
[data-status="applied"] { --s: #8b5cf6; }
[data-status="accepted"] { --s: #22c55e; }
[data-status="waitlisted"] { --s: #f59e0b; }
[data-status="denied"] { --s: #ef4444; }

/* ---------- Base ---------- */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1200px 560px at 50% -180px, var(--bg-sheen), transparent 70%) no-repeat, var(--bg);
  color: var(--text);
  font: 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: color-mix(in srgb, var(--primary) 28%, transparent);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
}

h1 {
  letter-spacing: -0.025em;
}

h2 {
  letter-spacing: -0.012em;
}

/* Page titles get a soft silver falloff, like light on metal. */
.page-head h1,
.list-head h1,
.gate h1,
.product-info h1,
.legal h1 {
  background: linear-gradient(180deg, var(--text) 35%, color-mix(in srgb, var(--text) 55%, var(--muted)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

p {
  margin: 0;
}

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

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

svg {
  display: block;
}

.container {
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
}

.narrow-page {
  width: min(860px, 100% - 32px);
}

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

.muted { color: var(--muted); }
.strong { font-weight: 600; }
.small { font-size: 0.86rem; }

/* ---------- Chrome surfaces ----------
   A 1px gradient border painted behind a solid fill. On hover the border
   gradient slides, which reads as light moving across metal. */

.card,
.panel,
.filters,
.score,
.review,
.review-compose,
.upcoming,
.col,
.item,
.consent,
.gate-cat,
.role-card,
.cat,
.facts,
.search input {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--fill, var(--surface)), var(--fill, var(--surface))) padding-box,
    var(--chrome-soft) border-box;
  background-size: 100% 100%, 220% 220%;
  background-position: 0 0, 0% 0%;
}

.card,
.panel,
.filters,
.score,
.review,
.review-compose,
.upcoming,
.item {
  box-shadow: var(--highlight), var(--shadow);
}

.col { --fill: var(--surface-2); }
.facts { --fill: var(--line); }

@media (hover: hover) and (pointer: fine) {
  .card,
  .item,
  .gate-cat,
  .role-card,
  .cat {
    transition: background-position 700ms var(--ease-out), box-shadow 200ms ease, transform 120ms var(--ease-out);
  }

  .card:hover,
  .item:hover,
  .gate-cat:hover,
  .role-card:hover,
  .cat:hover {
    background-position: 0 0, 100% 100%;
  }

  .card:hover {
    box-shadow: var(--highlight), var(--shadow-md);
  }
}

/* ---------- Buttons ----------
   Levels, by how likely the press is:
   1. .metal: the one most likely next press on a screen (animated shader).
   2. .btn-primary / .btn-add: graphite pill with a chrome edge, no motion.
   3. .btn-outline: thin line, transparent.
   4. .btn-ghost and plain links: rare actions. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.btn:active,
.cat:active,
.status-select:active {
  transform: scale(0.97);
}

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

.btn-sm {
  min-height: 34px;
  padding: 0 14px;
  font-size: 0.88rem;
}

.btn-block {
  width: 100%;
}

.btn-primary,
.btn-add {
  background: var(--graphite) padding-box, var(--chrome) border-box;
  color: var(--on-graphite);
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.45);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 6px 14px -8px rgb(0 0 0 / 0.55);
}

.btn-add {
  min-height: 36px;
  font-size: 0.9rem;
}

.btn-outline {
  border-color: var(--line-2);
  background: transparent;
  color: var(--text);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
}

.btn-approve {
  background: linear-gradient(180deg, #22c55e, #15803d);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2);
}

.btn-danger {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  color: #fff;
}

.btn-danger-text {
  background: transparent;
  color: var(--warn);
}

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

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .btn-add:hover {
    background: var(--graphite-hover) padding-box, var(--chrome) border-box;
  }

  .btn-outline:hover {
    border-color: transparent;
    background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--chrome) border-box;
  }

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

  .btn-danger-text:hover {
    background: color-mix(in srgb, var(--warn) 10%, transparent);
  }
}

/* Liquid metal button */

.metal {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  overflow: hidden;
  border: 0;
  border-radius: 100px;
  background: transparent;
  color: #e9e9ec;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3), 0 36px 14px rgb(0 0 0 / 0.02), 0 20px 12px rgb(0 0 0 / 0.08), 0 9px 9px rgb(0 0 0 / 0.12), 0 2px 5px rgb(0 0 0 / 0.15);
  transition: transform 120ms var(--ease-out), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.metal-ring {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  border-radius: inherit;
  background: var(--chrome);
}

.metal-ring canvas {
  position: absolute !important;
  inset: 0;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
}

.metal-face {
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, #202020 0%, #000000 100%);
  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.metal-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

.metal-label svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5));
}

@media (hover: hover) and (pointer: fine) {
  .metal:hover {
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.4), 0 12px 6px rgb(0 0 0 / 0.05), 0 8px 5px rgb(0 0 0 / 0.1), 0 4px 4px rgb(0 0 0 / 0.15), 0 1px 2px rgb(0 0 0 / 0.2);
  }
}

.metal:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.3);
}

.metal:active .metal-face {
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.4), inset 0 1px 2px rgb(0 0 0 / 0.3);
}

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

.metal:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.metal-ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.4) 0%, rgb(255 255 255 / 0) 70%);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: metal-ripple 600ms ease-out forwards;
}

@keyframes metal-ripple {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  to {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

/* Status picker: a native select styled as a pill, so it works with
   keyboards, screen readers and phone pickers. */

.status-select {
  width: 100%;
  min-height: 36px;
  padding: 0 32px 0 14px;
  border: 1px solid color-mix(in srgb, var(--s, var(--primary)) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--s, var(--primary)) 12%, var(--surface)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  color: color-mix(in srgb, var(--s, var(--primary)) 75%, var(--text));
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  appearance: none;
  cursor: pointer;
  box-shadow: var(--highlight);
  transition: transform 120ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  border-image: var(--chrome-soft) 1;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  view-transition-name: topbar;
}

@media (prefers-reduced-transparency: reduce) {
  .topbar {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 62px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-decoration: none;
}

/* The logo sits in a small tile with a chrome ring. */
.logo-tile {
  display: block;
  flex: none;
  padding: 1.5px;
  border-radius: 11px;
  background: var(--chrome);
  box-shadow: 0 2px 6px -2px rgb(0 0 0 / 0.35);
}

.logo-tile img {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 9.5px;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topnav a,
.topnav button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--text-2);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.topnav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .topnav a:hover {
    background: var(--surface-3);
    color: var(--text);
  }
}

.list-link {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--chrome-soft) border-box;
  box-shadow: var(--highlight);
}

.list-link svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--graphite) padding-box, var(--chrome) border-box;
  color: var(--on-graphite);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.avatar {
  display: grid !important;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: 4px;
  padding: 1.5px !important;
  overflow: hidden;
  border-radius: 50% !important;
  background: var(--chrome);
  color: var(--text) !important;
  font-weight: 700;
}

.avatar img,
.avatar span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--surface);
  object-fit: cover;
}

.avatar[aria-current="page"] {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .topnav { gap: 2px; }
  .topnav a { padding: 8px; }
  .logo > span:last-child { display: none; }
}

/* ---------- Loading ---------- */

.boot-line,
.loading-line {
  padding: 48px 16px;
  color: var(--muted);
  text-align: center;
}

.boot-line {
  animation: fade-in 200ms ease 400ms both;
}

@keyframes fade-in {
  from { opacity: 0; }
}

/* ---------- Sign-in page ---------- */

.gate {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 56px;
  padding: 72px 0 56px;
}

.gate h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.3rem);
  font-weight: 700;
  line-height: 1.06;
}

.gate .sub {
  margin-top: 16px;
  font-size: 1.06rem;
}

.gate-actions {
  margin: 30px 0 18px;
}

.gate-art {
  justify-self: center;
  width: min(420px, 100%);
  padding: 2px;
  border-radius: 28px;
  background: var(--chrome);
  box-shadow: var(--shadow-lg);
}

.gate-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
}

.gate-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.gate-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.86rem;
  font-weight: 500;
}

.gate-cat svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--c);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gate-cat .tag {
  display: none;
}

@media (max-width: 860px) {
  .gate {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0 40px;
  }

  .gate-art {
    order: -1;
    width: min(260px, 70%);
  }
}

/* ---------- Catalog head ---------- */

.page-head {
  padding: 36px 0 22px;
}

.page-head h1 {
  font-size: 1.9rem;
  font-weight: 700;
}

.sub {
  max-width: 44rem;
  margin-top: 6px;
  color: var(--muted);
  font-size: 1rem;
}

.search {
  position: relative;
  display: block;
  max-width: 640px;
  margin-top: 20px;
}

.search svg {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
}

.search input {
  width: 100%;
  height: 50px;
  padding: 0 18px 0 46px;
  border-radius: 999px;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  box-shadow: var(--highlight), var(--shadow-md);
}

.search input::placeholder {
  color: var(--muted);
}

.search input:focus {
  outline: none;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--chrome) border-box;
  box-shadow: var(--highlight), 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

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

.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  color: var(--text-2);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--highlight);
}

/* The active chip becomes a small graphite pill. */
.cat[aria-pressed="true"] {
  background: var(--graphite) padding-box, var(--chrome) border-box;
  color: var(--on-graphite);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 6px 14px -8px rgb(0 0 0 / 0.6);
}

.cat .count {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.cat[aria-pressed="true"] .count {
  color: color-mix(in srgb, var(--on-graphite) 70%, transparent);
}

.cat-all {
  padding-left: 14px;
}

@media (max-width: 720px) {
  .cats {
    flex-wrap: nowrap;
    margin-inline: -16px;
    padding: 2px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

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

  .cat {
    flex: none;
  }
}

/* ---------- Tags ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--c, #94a3b8) 22%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, #94a3b8) 11%, var(--surface));
  color: color-mix(in srgb, var(--c, #94a3b8) 72%, var(--text));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tag-type {
  --c: #94a3b8;
  font-weight: 600;
  letter-spacing: 0;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ---------- Explorer layout ---------- */

.explorer {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.sidebar {
  position: sticky;
  top: 84px;
}

.filters {
  padding: 16px;
  border-radius: var(--radius);
}

.filters summary {
  display: none;
}

.filter-group {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.filter-group legend,
.filter-group .legend,
.eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -6px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--text-2);
  cursor: pointer;
}

.option input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--text);
}

.option .count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .option:hover {
    background: var(--surface-3);
  }
}

.filter-group select,
.sort select {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.filter-count:not(:empty) {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--graphite);
  color: var(--on-graphite);
  font-size: 0.72rem;
}

@media (max-width: 900px) {
  .explorer {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sidebar {
    position: static;
  }

  .filters {
    padding: 0;
  }

  .filters summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-weight: 600;
    cursor: pointer;
  }

  .filters[open] summary {
    border-bottom: 1px solid var(--line);
  }

  .filters > :not(summary) {
    margin-inline: 16px;
  }

  .filters > .filter-group:first-of-type {
    margin-top: 16px;
  }

  .filters > .btn {
    width: calc(100% - 32px);
    margin-bottom: 16px;
  }
}

.results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

#results-count {
  color: var(--muted);
}

#results-count strong {
  color: var(--text);
}

.sort {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.sort select {
  width: auto;
}

/* ---------- Program cards ---------- */

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

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

.card:has(.card-title a:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Card and program images: brushed metal with a glow in the category color. */
.media {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--c) 30%, transparent), transparent 62%),
    var(--media);
  color: var(--c);
}

.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.18), transparent 40%);
  pointer-events: none;
}

.media svg {
  position: relative;
  z-index: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--c) 45%, transparent));
}

.card .media {
  height: 96px;
  border-bottom: 1px solid var(--line);
}

.card .media svg {
  width: 32px;
  height: 32px;
}

.card .media > .tag-type {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  background: var(--surface);
}

.card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 16px 16px;
}

.card-title {
  display: -webkit-box;
  margin-top: 8px;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-title a {
  color: var(--text);
  text-decoration: none;
}

.card-title a:focus-visible {
  outline: none;
}

/* The whole card opens the program page. */
.card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-org {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 0;
  color: var(--text-2);
  font-size: 0.86rem;
  list-style: none;
}

.meta li {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.meta svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.soon {
  color: var(--warn);
  font-weight: 600;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.price {
  font-weight: 700;
}

.price-check {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
}

.card-actions {
  position: relative;
  z-index: 1;
  margin-top: 12px;
}

.card-actions .btn {
  width: 100%;
}

.posted-by {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 500;
}

.verified {
  width: 16px;
  height: 16px;
  fill: var(--primary);
}

.verified .tick {
  fill: none;
  stroke: var(--surface);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Ratings ---------- */

.stars {
  display: inline-flex;
  gap: 1px;
}

.stars svg {
  width: 14px;
  height: 14px;
}

.star-full { fill: var(--star); }
.star-empty { fill: var(--line-2); }

.rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.86rem;
  font-weight: 600;
}

.rating small {
  color: var(--muted);
  font-weight: 400;
}

.no-rating {
  color: var(--muted);
  font-size: 0.82rem;
}

/* ---------- Empty states and notes ---------- */

.empty,
.list-empty,
.no-reviews,
.col .none {
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.empty {
  padding: 32px 16px;
  text-align: center;
}

.empty p {
  margin-bottom: 14px;
  color: var(--muted);
}

.fineprint {
  margin-top: 16px;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---------- Panels ---------- */

.info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
}

.panel {
  padding: 22px;
  border-radius: var(--radius);
}

.panel h2 {
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.panel p + p {
  margin-top: 10px;
}

.narrow-page .panel {
  margin-bottom: 16px;
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel-head h2 {
  margin: 0;
}

@media (max-width: 900px) {
  .info {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer ---------- */

.footer {
  margin-top: 56px;
  padding: 24px 0 40px;
  border-top: 1px solid transparent;
  border-image: var(--chrome-soft) 1;
  color: var(--muted);
  font-size: 0.85rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

.footer nav {
  display: flex;
  gap: 16px;
}

.footer a {
  color: var(--muted);
}

/* ---------- Program page ---------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 24px 0 20px;
  padding: 0;
  color: var(--muted);
  font-size: 0.88rem;
  list-style: none;
}

.crumbs li {
  min-width: 0;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 6px;
  color: var(--line-2);
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover {
    color: var(--text);
  }
}

.product {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 40px;
}

.product > .media {
  position: sticky;
  top: 88px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--c) 32%, transparent), transparent 62%) padding-box,
    var(--media) padding-box,
    var(--chrome) border-box;
  box-shadow: var(--shadow-md);
}

.product > .media svg {
  width: 72px;
  height: 72px;
}

.product > .media .tags {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
}

.product-info h1 {
  margin-top: 4px;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.18;
}

.product-info .org {
  margin-top: 6px;
  color: var(--muted);
  font-size: 1rem;
}

.buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.buy .price {
  font-size: 1.25rem;
}

.rating-link {
  color: inherit;
  text-decoration: none;
}

.buy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.buy-actions .status-select {
  width: auto;
  min-width: 170px;
  min-height: 38px;
}

.facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 24px 0 0;
  overflow: hidden;
  border-radius: 12px;
}

.facts div {
  padding: 10px 12px;
  background: var(--surface);
}

.facts.single {
  grid-template-columns: 1fr;
}

.facts dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.facts dd {
  margin: 2px 0 0;
  font-size: 0.92rem;
}

.block {
  margin-top: 22px;
}

.block h2 {
  margin-bottom: 6px;
  font-size: 1rem;
}

.block p {
  color: var(--text-2);
}

.checked {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.85rem;
}

.section-title {
  margin: 48px 0 16px;
  font-size: 1.25rem;
}

.reviews {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.score {
  padding: 18px;
  border-radius: var(--radius);
}

.score-num {
  display: block;
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.score .stars {
  margin-top: 8px;
}

.score .stars svg {
  width: 18px;
  height: 18px;
}

.score p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.88rem;
}

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

.find p {
  color: var(--muted);
  font-size: 0.88rem;
}

.find .links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.review-side {
  display: grid;
  gap: 12px;
}

.review-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.review {
  padding: 16px;
  border-radius: var(--radius);
}

.review p {
  margin-top: 8px;
  color: var(--text-2);
}

.review footer {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.no-reviews {
  padding: 24px;
  color: var(--muted);
}

.review-compose {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: var(--radius);
}

.review-compose h3 {
  font-size: 1rem;
}

.review-compose textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.review-compose .btn {
  justify-self: start;
}

.star-input {
  display: flex;
  gap: 4px;
}

.star-input button {
  padding: 2px;
  border: 0;
  background: none;
  cursor: pointer;
}

.star-input svg {
  width: 26px;
  height: 26px;
  fill: var(--line-2);
  transition: fill 120ms ease, transform 120ms var(--ease-out);
}

.star-input button.on svg {
  fill: var(--star);
}

.star-input button:active svg {
  transform: scale(0.9);
}

@media (max-width: 860px) {
  .product,
  .reviews {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .product > .media {
    position: relative;
    top: auto;
    aspect-ratio: 16 / 7;
  }

  .product > .media svg {
    width: 48px;
    height: 48px;
  }

  .facts {
    grid-template-columns: 1fr;
  }
}

/* ---------- My list ---------- */

.list-head {
  margin: 34px 0 24px;
}

.list-head h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.9rem;
}

.list-head h1 .verified {
  width: 24px;
  height: 24px;
}

.upcoming {
  margin-bottom: 24px;
  padding: 18px 20px;
  border-radius: var(--radius);
}

.upcoming-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.upcoming-next > div {
  min-width: 0;
}

.upcoming-title {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 600;
  text-decoration: none;
}

.upcoming h2 {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
}

.upcoming ol {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.upcoming li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  font-size: 0.92rem;
}

.upcoming li a {
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .upcoming li a:hover,
  .upcoming-title:hover {
    text-decoration: underline;
  }
}

.upcoming .when {
  flex: none;
  color: var(--muted);
}

.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.col {
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius);
}

.col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.92rem;
}

.col-head::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--s);
  box-shadow: 0 0 8px color-mix(in srgb, var(--s) 60%, transparent);
}

.col-head .count {
  margin-left: auto;
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.col ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.col .none {
  padding: 16px 8px;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.item {
  min-width: 0;
  padding: 12px;
  border-radius: 12px;
}

.item-title {
  display: block;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .item-title:hover {
    text-decoration: underline;
  }
}

.item-org {
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-when {
  margin-top: 6px;
  font-size: 0.82rem;
}

.item .status-select {
  margin-top: 10px;
  min-height: 32px;
  font-size: 0.85rem;
}

.item-apply {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
}

.item-apply svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.list-empty {
  padding: 48px 24px;
  text-align: center;
}

.list-empty p {
  margin: 6px 0 18px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .board {
    grid-template-columns: 1fr;
  }
}

/* ---------- Forms ---------- */

.form {
  display: grid;
  gap: 16px;
}

.form h2 {
  margin-top: 8px;
  font-size: 1.05rem;
}

.form h2:first-child {
  margin-top: 0;
}

.field {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.field label,
.form legend {
  font-size: 0.88rem;
  font-weight: 600;
}

.form input[type="text"],
.form input[type="url"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="date"],
.form select,
.form textarea,
.note-input,
.danger-confirm input {
  width: 100%;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.06);
}

.form textarea {
  min-height: 90px;
  resize: vertical;
}

.form input:focus,
.form select:focus,
.form textarea:focus,
.note-input:focus,
.danger-confirm input:focus,
.review-compose textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}

.form [aria-invalid="true"] {
  border-color: var(--warn);
}

.hint {
  color: var(--muted);
  font-size: 0.82rem;
}

.form-error {
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--warn) 9%, var(--surface));
  color: color-mix(in srgb, var(--warn) 85%, var(--text));
  font-size: 0.9rem;
}

.row-2,
.row-3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

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

@media (max-width: 600px) {
  .row-2,
  .row-3 {
    grid-template-columns: 1fr;
  }
}

fieldset.plain,
.check-group {
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset.plain {
  display: grid;
  gap: 10px;
}

.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.check-group legend {
  margin-bottom: 8px;
}

.check-chip {
  position: relative;
  cursor: pointer;
}

.check-chip input {
  position: absolute;
  opacity: 0;
}

.check-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.88rem;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.check-chip input:checked + span {
  border-color: transparent;
  background: var(--graphite) padding-box, var(--chrome) border-box;
  color: var(--on-graphite);
  font-weight: 600;
}

.check-chip input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.94rem;
  cursor: pointer;
}

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

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

.role-card {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 14px 16px 14px 44px;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--highlight);
}

.role-card input {
  position: absolute;
  top: 17px;
  left: 16px;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--text);
}

.role-card:has(input:checked) {
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    var(--chrome) border-box;
  box-shadow: var(--highlight), var(--shadow-md);
}

@media (max-width: 520px) {
  .role-cards { grid-template-columns: 1fr; }
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.12);
}

.segmented label {
  position: relative;
  cursor: pointer;
}

.segmented input {
  position: absolute;
  opacity: 0;
}

.segmented span {
  display: block;
  padding: 7px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 150ms ease, color 150ms ease;
}

.segmented input:checked + span {
  background: var(--graphite) padding-box, var(--chrome) border-box;
  color: var(--on-graphite);
}

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

.switch input {
  appearance: none;
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.2);
  cursor: pointer;
  transition: background-color 150ms ease;
}

.switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--chrome);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
  transition: transform 180ms var(--ease-out);
}

.switch input:checked {
  background: #1f2023;
}

.switch input:checked::after {
  transform: translateX(18px);
}

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

.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---------- Dashboards ---------- */

.proofs {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}

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

.proofs .dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line-2);
}

.proofs .ok .dot {
  background: #22c55e;
  box-shadow: 0 0 8px rgb(34 197 94 / 0.6);
}

.proofs .missing {
  color: var(--muted);
}

.manage-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.manage-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.manage-list li:first-child {
  border-top: 0;
}

.manage-list a.strong {
  color: var(--text);
  text-decoration: none;
}

.pill {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  font-size: 0.76rem;
  font-weight: 600;
}

.pill[data-state="live"] { background: color-mix(in srgb, #22c55e 16%, var(--surface)); color: color-mix(in srgb, #22c55e 75%, var(--text)); }
.pill[data-state="pending"] { background: color-mix(in srgb, #f59e0b 16%, var(--surface)); color: color-mix(in srgb, #f59e0b 75%, var(--text)); }

.tabs {
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 4px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.12);
}

.tabs a {
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.tabs a[aria-current="page"] {
  background: var(--graphite) padding-box, var(--chrome) border-box;
  color: var(--on-graphite);
  font-weight: 600;
}

.queue-card h3 {
  font-size: 1.05rem;
}

.queue-card > p,
.queue-card > h4 {
  margin-top: 8px;
}

.queue-card h4 {
  font-size: 0.9rem;
}

.decide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.note-input {
  flex: 1 1 240px;
  min-height: 36px;
}

/* ---------- Settings ---------- */

.advanced summary {
  font-weight: 600;
  cursor: pointer;
}

.advanced-body {
  display: grid;
  margin-top: 12px;
}

.setting-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.setting-row > div {
  flex: 1 1 260px;
}

.danger-row strong {
  color: var(--warn);
}

.danger-confirm {
  margin-top: 10px;
}

.danger-confirm p {
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.danger-confirm input {
  width: 160px;
  min-height: 34px;
}

/* ---------- Consent banner and toasts ---------- */

.consent {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 40;
  display: grid;
  gap: 10px;
  width: min(380px, 100% - 32px);
  padding: 14px 16px;
  border-radius: var(--radius);
  box-shadow: var(--highlight), var(--shadow-lg);
  font-size: 0.9rem;
}

.toasts {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 50;
  display: grid;
  gap: 8px;
  width: min(420px, 100% - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, #232428, #0c0c0e) padding-box,
    var(--chrome) border-box;
  color: #f1f1f3;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}

.toast.is-in {
  opacity: 1;
  transform: none;
}

.toast.is-out {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition-duration: 160ms;
}

.toast button,
.toast a {
  flex: none;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* ---------- Legal pages ---------- */

.legal {
  width: min(760px, 100% - 32px);
  margin: 0 auto;
  padding: 40px 0 24px;
  line-height: 1.65;
}

.legal h1 {
  font-size: 2.1rem;
}

.legal h2 {
  margin: 32px 0 10px;
  font-size: 1.2rem;
}

.legal h3 {
  margin: 20px 0 6px;
  font-size: 1rem;
}

.legal p,
.legal li {
  color: var(--text-2);
}

.legal p + p,
.legal ul,
.legal ol {
  margin-top: 10px;
}

.legal .updated {
  margin-top: 6px;
  color: var(--muted);
}

.legal .summary {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--chrome-soft) border-box;
  box-shadow: var(--highlight), var(--shadow);
}

.legal .caps {
  text-transform: uppercase;
  font-size: 0.92rem;
}

.legal table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.legal th,
.legal td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal th {
  background: var(--surface-2);
}

.legal .toc {
  margin-top: 16px;
  columns: 2;
  font-size: 0.92rem;
}

@media (max-width: 600px) {
  .legal .toc { columns: 1; }
  .legal table { display: block; overflow-x: auto; }
}

/* ---------- Motion ---------- */

/* Page changes cross-fade quickly; list items glide to their new column. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: var(--ease-out);
  }

  ::view-transition-group(*) {
    animation-duration: 260ms;
    animation-timing-function: var(--ease-out);
  }
}

@media (prefers-reduced-motion: reduce) {
  .metal:active,
  .btn:active,
  .cat:active,
  .status-select:active {
    transform: none;
  }

  .card,
  .item,
  .gate-cat,
  .role-card,
  .cat {
    transition: none;
  }

  .toast,
  .toast.is-out {
    transform: none;
  }
}