/*
 * Telly website styles (WEB-03; landing page: docs/design_system/05_WEBSITE.md).
 *
 * Colors and type come ONLY from tokens.css, which tool/site/build.dart
 * generates from lib/core/theme/ on every build. Never write a color literal
 * here: the build rejects hex and rgb() values. For translucency use
 * rgba(var(--token-rgb), alpha).
 *
 * Spacing and radii follow docs/design_system/01_DESIGN_PHILOSOPHY_AND_STYLE_GUIDE.md §4
 * (the app has no code constants for them).
 */

:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 999px;

  --page-max: 1120px;
  --gutter: var(--space-md);
  --section-gap: clamp(72px, 12vw, 140px);
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--background-primary);
  color: var(--text-secondary);
  font-family: var(--t-body-large-family);
  font-size: 16px;
  line-height: var(--t-body-large-line-height);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--phosphor-lime);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:focus-visible,
.store:focus-visible {
  outline: 2px solid var(--phosphor-lime);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: rgba(var(--phosphor-lime-rgb), 0.3);
  color: var(--text-primary);
}

.wrap {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (min-width: 720px) {
  :root {
    --gutter: var(--space-xl);
  }
}

.skip {
  position: absolute;
  left: -9999px;
  top: var(--space-xs);
  z-index: 10;
  padding: var(--space-xs) var(--space-md);
  background: var(--phosphor-lime);
  color: var(--background-primary);
  border-radius: var(--radius-sm);
}

.skip:focus {
  left: var(--space-xs);
}

/* --- Type ---------------------------------------------------------------- */

.h1 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--t-display-xxl-family);
  font-weight: var(--t-display-xxl-weight);
  letter-spacing: var(--t-display-xxl-tracking);
  font-size: clamp(calc(var(--t-display-xxl-size) * 1.15), 7.2vw, calc(var(--t-display-xxl-size) * 2.1));
  line-height: 1.04;
}

.h1--page {
  font-size: clamp(var(--t-display-xl-size), 5vw, var(--t-display-xxl-size));
  font-family: var(--t-display-xl-family);
  font-weight: var(--t-display-xl-weight);
  letter-spacing: var(--t-display-xl-tracking);
  line-height: var(--t-display-xl-line-height);
}

.h2 {
  margin: 0 0 var(--space-md);
  color: var(--text-primary);
  font-family: var(--t-display-xl-family);
  font-weight: var(--t-display-xl-weight);
  letter-spacing: var(--t-display-xl-tracking);
  font-size: clamp(var(--t-display-xl-size), 4vw, calc(var(--t-display-xl-size) * 1.45));
  line-height: 1.12;
}

.h3 {
  margin: 0 0 var(--space-xs);
  color: var(--text-primary);
  font-family: var(--t-title-medium-family);
  font-size: var(--t-title-medium-size);
  font-weight: var(--t-headline-small-weight);
  letter-spacing: var(--t-title-medium-tracking);
  line-height: var(--t-title-medium-line-height);
}

.lead {
  margin: 0 0 var(--space-lg);
  max-width: 34em;
  font-size: calc(var(--t-body-large-size) * 1.15);
  line-height: 1.55;
  color: var(--text-secondary);
}

.eyebrow {
  margin: 0 0 var(--space-sm);
  font-family: var(--t-caption-family);
  font-size: var(--t-label-medium-size);
  font-weight: var(--t-screen-title-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, var(--phosphor-lime));
}

.chip {
  display: inline-flex;
  margin: 0 0 var(--space-lg);
  padding: 6px 14px;
  border: 1px solid rgba(var(--phosphor-lime-rgb), 0.35);
  border-radius: var(--radius-full);
  background: rgba(var(--phosphor-lime-rgb), 0.08);
  color: var(--phosphor-lime);
  font-family: var(--t-label-medium-family);
  font-size: var(--t-label-medium-size);
  font-weight: var(--t-label-medium-weight);
  letter-spacing: 0.06em;
}

/* --- Navigation ---------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(var(--background-primary-rgb), 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--border-glass);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand img {
  border-radius: 22.4%;
}

.brand__word {
  color: var(--phosphor-lime);
  font-family: var(--font-plus-jakarta-sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.047em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__links a {
  color: var(--text-secondary);
  font-family: var(--t-label-large-family);
  font-size: var(--t-label-large-size);
  font-weight: var(--t-label-large-weight);
  text-decoration: none;
}

.nav__links a:hover {
  color: var(--text-primary);
}

.nav__links .nav__cta {
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--phosphor-lime);
  color: var(--background-primary);
}

.nav__links .nav__cta:hover {
  color: var(--background-primary);
  box-shadow: 0 0 20px rgba(var(--phosphor-lime-rgb), 0.35);
}

@media (max-width: 1000px) {
  .nav__links .nav__chapter {
    display: none;
  }
}

@media (max-width: 560px) {
  .nav__links a:not(.nav__cta) {
    display: none;
  }
}

/* --- Phone frame --------------------------------------------------------- */

.phone {
  --accent-rgb-local: var(--accent-rgb, var(--phosphor-lime-rgb));
  position: relative;
  margin: 0;
  width: min(340px, 78vw);
  padding: 9px;
  border-radius: 52px;
  background: var(--background-surface);
  border: 1px solid var(--stroke-strong);
  box-shadow:
    0 0 0 1px var(--border-glass) inset,
    0 30px 80px rgba(var(--background-primary-rgb), 0.9),
    0 0 120px rgba(var(--accent-rgb-local), 0.18);
}

.phone::before {
  content: "";
  position: absolute;
  inset: -12% -30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb-local), 0.22), rgba(var(--accent-rgb-local), 0));
  pointer-events: none;
}

.phone img {
  width: 100%;
  border-radius: 43px;
  background: var(--background-primary);
}

/* Second screenshot of a chapter: offset beside the lead on wide screens. */
.phone--second {
  display: none;
}

@media (min-width: 900px) {
  .phone--second {
    display: block;
    width: min(290px, 24vw);
    margin-top: var(--space-xxl);
    margin-left: calc(-1 * var(--space-xxl));
  }

  .phone--lead {
    z-index: 1;
  }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  display: grid;
  gap: var(--space-xxl);
  align-items: center;
  padding-top: clamp(48px, 9vw, 112px);
  padding-bottom: clamp(48px, 7vw, 88px);
}

.hero__tagline {
  margin: var(--space-md) 0 var(--space-md);
  color: var(--phosphor-lime);
  font-family: var(--t-title-large-family);
  font-size: calc(var(--t-title-medium-size) * 1.1);
  font-weight: var(--t-title-large-weight);
  letter-spacing: var(--t-title-large-tracking);
}

@media (min-width: 960px) {
  .hero {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Hero duel (05_WEBSITE §2) ------------------------------------------- */

.duel {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.duel__card {
  display: grid;
  gap: var(--space-lg);
  padding: clamp(18px, 3vw, 28px);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-glass);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(var(--phosphor-lime-rgb), 0.12), rgba(var(--phosphor-lime-rgb), 0) 70%),
    var(--background-surface);
  box-shadow: 0 30px 80px rgba(var(--background-primary-rgb), 0.9);
}

.duel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
}

.duel__q {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--t-display-xl-family);
  font-weight: var(--t-display-xl-weight);
  font-size: clamp(var(--t-title-large-size), 2.6vw, var(--t-display-xl-size));
  letter-spacing: var(--t-display-xl-tracking);
  line-height: 1.15;
  outline: none;
}

.duel__media {
  color: var(--text-tertiary);
  font-family: var(--t-score-mono-family);
  font-size: var(--t-label-medium-size);
  font-weight: var(--t-score-mono-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.duel__pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-sm);
  align-items: center;
}

.duel__pick {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--background-card);
  box-shadow: inset 0 0 0 1px var(--border-glass);
  cursor: pointer;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.duel__pick img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.duel__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-xl) var(--space-sm) var(--space-sm);
  background: linear-gradient(rgba(var(--background-primary-rgb), 0), rgba(var(--background-primary-rgb), 0.92));
  color: var(--text-primary);
  font-family: var(--t-title-medium-family);
  font-size: var(--t-title-medium-size);
  font-weight: var(--t-screen-title-weight);
  line-height: 1.2;
}

.duel__pick:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 2px var(--phosphor-lime), 0 0 30px rgba(var(--phosphor-lime-rgb), 0.25);
}

.duel__pick:focus-visible,
.duel__tie:focus-visible,
.duel__next:focus-visible {
  outline: 3px solid var(--phosphor-lime);
  outline-offset: 3px;
}

.duel__vs {
  color: var(--text-tertiary);
  font-family: var(--t-score-mono-family);
  font-weight: var(--t-score-mono-weight);
  font-size: var(--t-label-large-size);
}

.duel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.duel__hint {
  color: var(--text-tertiary);
  font-size: var(--t-label-large-size);
}

.duel__tie,
.duel__next {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke-strong);
  background: var(--background-card);
  color: var(--text-primary);
  font-family: var(--t-label-large-family);
  font-size: var(--t-label-large-size);
  font-weight: var(--t-label-large-weight);
  cursor: pointer;
}

.duel__next {
  border-color: var(--phosphor-lime);
  background: var(--phosphor-lime);
  color: var(--background-primary);
}

.duel__ranking {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.duel__ranking li {
  display: grid;
  grid-template-columns: 3ch 48px minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--background-card);
}

.duel__ranking li.is-top {
  box-shadow: inset 0 0 0 1px var(--phosphor-lime);
}

.duel__ranking img {
  width: 48px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

.duel__rank,
.duel__score {
  font-family: var(--t-score-mono-family);
  font-weight: var(--t-score-mono-weight);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.duel__name {
  color: var(--text-primary);
  font-family: var(--t-title-medium-family);
  font-size: var(--t-title-medium-size);
  font-weight: var(--t-screen-title-weight);
}

.is-top .duel__score {
  color: var(--phosphor-lime);
  font-size: var(--t-title-large-size);
}

.duel__explain {
  margin: 0;
  max-width: 44em;
  color: var(--text-tertiary);
  font-size: var(--t-label-large-size);
}

/* --- Chapter strip ------------------------------------------------------- */

.strip {
  padding-bottom: var(--section-gap);
}

.strip__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin: 0;
  padding: 0 0 var(--space-xs);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--stroke-strong) transparent;
}

.strip__item {
  display: grid;
  align-content: start;
  gap: 2px;
  height: 100%;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke-subtle);
  background: var(--background-surface);
  color: var(--text-tertiary);
  text-decoration: none;
  font-size: var(--t-label-large-size);
  transition: border-color 0.15s;
}

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

.strip__num {
  color: var(--accent);
  font-family: var(--t-score-mono-family);
  font-size: var(--t-label-medium-size);
  font-weight: var(--t-score-mono-weight);
}

.strip__name {
  color: var(--text-primary);
  font-family: var(--t-title-medium-family);
  font-size: var(--t-title-medium-size);
  font-weight: var(--t-screen-title-weight);
}

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

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.store {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 176px;
  padding: 10px 18px 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stroke-strong);
  background: var(--background-surface);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

a.store:hover {
  border-color: var(--phosphor-lime);
  box-shadow: 0 0 20px rgba(var(--phosphor-lime-rgb), 0.25), inset 0 0 0 1px var(--phosphor-lime);
}

.store--soon {
  cursor: default;
  border-style: dashed;
  color: var(--text-secondary);
}

.store__icon {
  display: flex;
  color: var(--phosphor-lime);
}

.store--soon .store__icon {
  color: var(--text-tertiary);
}

.store__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.store__small {
  font-family: var(--t-caption-family);
  font-size: var(--t-caption-size);
  font-weight: var(--t-caption-weight);
  letter-spacing: var(--t-caption-tracking);
  color: var(--text-tertiary);
}

.store__name {
  font-family: var(--t-title-medium-family);
  font-size: var(--t-title-medium-size);
  font-weight: var(--t-screen-title-weight);
  letter-spacing: -0.01em;
}

/* --- Chapters (05_WEBSITE §3) ------------------------------------------ */

.chapter {
  display: grid;
  gap: var(--space-xxl);
  align-items: center;
  padding-bottom: var(--section-gap);
}

.chapter__shots {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  order: -1;
}

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

  .chapter__shots {
    order: 0;
  }

  .chapter--flip .chapter__shots {
    order: -1;
  }
}

.points {
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
}

.points li {
  position: relative;
  padding-left: 28px;
  margin-bottom: var(--space-xs);
  color: var(--text-secondary);
}

.points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--accent, var(--phosphor-lime));
  box-shadow: 0 0 12px rgba(var(--accent-rgb, var(--phosphor-lime-rgb)), 0.6);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
}

.card {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border: 1px solid var(--stroke-subtle);
  background: var(--background-surface);
}

.card p {
  margin: 0;
  font-size: var(--t-label-large-size);
}

/* --- Tier strip (from the app's CanonTier and tier gradient tokens) ------ */

.tiers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tier {
  display: inline-flex;
  flex-direction: column;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--tier-a), var(--tier-b));
  color: var(--background-primary);
}

.tier__label {
  font-family: var(--t-label-medium-family);
  font-size: var(--t-label-medium-size);
  font-weight: var(--t-screen-title-weight);
}

.tier__range {
  font-family: var(--t-score-mono-family);
  font-size: var(--t-caption-size);
  font-weight: var(--t-score-mono-weight);
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* --- Extras & CTA -------------------------------------------------------- */

.extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-md);
  margin: 0 0 var(--section-gap);
  padding: 0;
  list-style: none;
}

.extra {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--background-surface);
  border: 1px solid var(--stroke-subtle);
}

.extra p {
  margin: 0;
}

.cta {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--section-gap);
  padding: clamp(32px, 6vw, 72px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(var(--phosphor-lime-rgb), 0.35);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(var(--phosphor-lime-rgb), 0.16), rgba(var(--phosphor-lime-rgb), 0) 60%),
    var(--background-surface);
  box-shadow: 0 0 40px rgba(var(--phosphor-lime-rgb), 0.08);
}

/* --- Prose pages (legal, support) ---------------------------------------- */

.prose {
  max-width: calc(720px + 2 * var(--gutter));
  padding-top: clamp(40px, 8vw, 88px);
  padding-bottom: var(--section-gap);
}

.prose h2 {
  margin: var(--space-xl) 0 var(--space-sm);
  color: var(--text-primary);
  font-family: var(--t-title-large-family);
  font-size: var(--t-title-large-size);
  font-weight: var(--t-title-large-weight);
  letter-spacing: var(--t-title-large-tracking);
  line-height: var(--t-title-large-line-height);
}

.prose h3,
.prose h4 {
  margin: var(--space-lg) 0 var(--space-xs);
  color: var(--text-primary);
  font-family: var(--t-title-medium-family);
  font-size: var(--t-title-medium-size);
  font-weight: var(--t-title-medium-weight);
}

.prose p,
.prose li {
  color: var(--text-secondary);
}

.prose ul {
  padding-left: 1.25em;
}

.prose li {
  margin-bottom: var(--space-xs);
}

.prose li::marker {
  color: var(--phosphor-lime);
}

.prose strong {
  color: var(--text-primary);
}

.prose code {
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--background-card);
  font-family: var(--font-jet-brains-mono);
  font-size: 0.9em;
}

.prose hr {
  margin: var(--space-xl) 0;
  border: 0;
  border-top: 1px solid var(--stroke-subtle);
}

.prose .meta {
  margin: var(--space-sm) 0 var(--space-xl);
  color: var(--text-tertiary);
  font-family: var(--t-score-mono-family);
  font-size: var(--t-label-medium-size);
}

.button {
  display: inline-flex;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  background: var(--phosphor-lime);
  color: var(--background-primary);
  font-family: var(--t-label-large-family);
  font-weight: var(--t-screen-title-weight);
  text-decoration: none;
}

.button:hover {
  box-shadow: 0 0 20px rgba(var(--phosphor-lime-rgb), 0.35);
}

.notfound {
  text-align: left;
}

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

.footer {
  border-top: 1px solid var(--stroke-subtle);
  background: var(--background-canvas-oled);
  padding: var(--space-xxl) 0 var(--space-xl);
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
}

.footer__tag {
  margin: var(--space-sm) 0 0;
  color: var(--text-tertiary);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: flex-start;
}

.footer__links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--t-label-large-size);
}

.footer__links a:hover {
  color: var(--phosphor-lime);
}

.footer__legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--stroke-subtle);
}

.footer__legal p {
  margin: 0 0 var(--space-xs);
  max-width: 72em;
  color: var(--text-tertiary);
  font-size: var(--t-caption-size);
  line-height: 1.6;
}

.footer__legal a {
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .duel__pick {
    transition: none;
  }

  .duel__pick:hover {
    transform: none;
  }
}

/* --- Feedback form (spec 05_WEBSITE.md section 7) ------------------------- */

.feedback {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  border: 1px solid var(--stroke-subtle);
  border-radius: var(--radius-md);
  background: var(--background-card);
}

.feedback h2 {
  margin-top: 0;
}

.feedback__form[hidden],
.feedback__sent[hidden],
.feedback [hidden] {
  display: none;
}

.feedback__form {
  display: grid;
  gap: var(--space-md);
}

.feedback__types {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  border: 0;
}

.feedback__types legend,
.feedback__field > label {
  display: block;
  margin-bottom: var(--space-xs);
  padding: 0;
  font-family: var(--t-label-large-family);
  font-size: var(--t-label-large-size);
  color: var(--text-primary);
}

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

.feedback__type input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}

.feedback__type span {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--stroke-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}

.feedback__type input:checked + span {
  border-color: var(--phosphor-lime);
  color: var(--text-primary);
}

.feedback__type input:focus-visible + span {
  outline: 2px solid var(--phosphor-lime);
  outline-offset: 3px;
}

.feedback textarea,
.feedback input[type="text"] {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--stroke-subtle);
  border-radius: var(--radius-sm);
  background: var(--background-primary);
  color: var(--text-primary);
  font: inherit;
}

.feedback textarea {
  min-height: 6em;
  resize: vertical;
}

.feedback textarea:focus-visible,
.feedback input[type="text"]:focus-visible,
.feedback__again:focus-visible {
  outline: 2px solid var(--phosphor-lime);
  outline-offset: 2px;
}

.feedback textarea[aria-invalid="true"] {
  border-color: var(--neon-coral);
}

.feedback__count,
.feedback__help {
  margin: var(--space-xxs) 0 0;
  font-size: var(--t-caption-size);
  color: var(--text-tertiary);
}

.feedback__error,
.feedback__banner {
  margin: var(--space-xs) 0 0;
  color: var(--neon-coral);
}

.feedback__banner {
  margin: 0;
}

.feedback__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.feedback__submit {
  justify-self: start;
  border: 0;
  cursor: pointer;
  font-size: var(--t-label-large-size);
}

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

.feedback__sent h3 {
  margin: 0 0 var(--space-sm);
}

.feedback__sent:focus {
  outline: none;
}

.feedback__again {
  padding: 0;
  border: 0;
  background: none;
  color: var(--phosphor-lime);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.feedback__note {
  color: var(--text-secondary);
}