/* ==========================================================================
   Reddit Safety Filters — component styles
   Depends on tokens.css (load tokens.css first).
   ========================================================================== */

/* ---------- Global nav bar (decorative, image-based) ---------- */
/* Uses cropped screenshots of Reddit's actual nav so icons are pixel-perfect.
   Three flex children (logo · search · actions) with the gaps absorbing resize.
   Source images are 3x (159px tall) for retina; displayed at 53px logical. */

.global-nav {
  display: flex;
  align-items: center;
  height: 3.3125rem;                /* 53px — matches source nav height */
  padding: 0 var(--spacer-md);
  background: var(--color-neutral-background);
  border-bottom: 1px solid var(--color-neutral-border-weak);
  position: sticky;
  top: 0;
  z-index: 100;
}

.global-nav__logo,
.global-nav__search,
.global-nav__actions {
  flex: 0 0 auto;
  height: 100%;
}

.global-nav__logo img,
.global-nav__search img,
.global-nav__actions img {
  height: 100%;
  width: auto;
  display: block;
}

/* Search fills available center space, image shrinks with the viewport */
.global-nav__search {
  flex: 1 1 auto;
  max-width: 37.5rem;               /* 600px logical — matches source crop */
  margin: 0 auto;                   /* center between logo and actions */
  overflow: hidden;                  /* clip cleanly when viewport is narrow */
}

/* ---------- App shell (sidebar + content) ---------- */
/* Below the global nav, a horizontal flex: fixed-width sidebar on the left,
   scrollable main content on the right. Both scroll independently. */

.app-shell {
  display: flex;
  height: calc(100vh - 3.3125rem);   /* viewport minus global-nav height */
  overflow: hidden;                   /* children handle their own scroll */
}

.app-sidebar {
  flex: 0 0 auto;
  width: 17.4375rem;                 /* 279px — matches source screenshot */
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--color-neutral-border-weak);
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* IE/Edge */
}

.app-sidebar::-webkit-scrollbar {
  display: none;                     /* Chrome/Safari */
}

.app-sidebar img {
  display: block;
  width: 100%;
  height: auto;
}

.app-content {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* ---------- Page container ---------- */

.page {
  max-width: 56rem;       /* ~896px — matches Reddit's content column on the index */
  margin: 0 auto;
  padding: var(--spacer-xl) var(--spacer-lg) var(--spacer-2xl);
}

/* Wider canvas for two-column detail pages so the settings column can breathe
   next to the 20rem FAQ aside. Matches the live page where the subtitle fits
   on one line next to the dropdown. */
.page--detail {
  max-width: 72rem;       /* ~1152px */
}

/* ---------- Page header ---------- */

.page-title {
  font: var(--font-title-1);
  color: var(--color-neutral-content);
  margin: 0 0 var(--spacer-2xl);            /* 48px — breathing room before sections */
  padding: 0 var(--spacer-md);              /* align with section/row text */
}

/* ---------- Info banner (temporary event) ---------- */

.info-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacer-md);
  background: var(--color-neutral-background-container);
  border-radius: var(--radius-2);
  padding: var(--spacer-md);
  margin: 0 0 var(--spacer-xl);
  color: var(--color-neutral-content);
  font: var(--font-body-1);
}

.info-banner a { color: var(--color-primary); text-decoration: underline; }
.info-banner a:hover { color: var(--color-primary-hover); }

.info-banner__icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  opacity: 0.7;
}

/* ---------- Section (group of filter rows) ---------- */

.section {
  margin: 0 0 var(--spacer-xl);
}

.section__heading {
  font: 700 1.25rem/1.5rem var(--font-sans); /* 20/24 bold */
  color: var(--color-neutral-content-strong);
  margin: 0 0 var(--spacer-2xs);
  padding: 0 var(--spacer-md);              /* align with row padding */
}

.section__description {
  font: 400 1.0625rem/1.375rem var(--font-sans); /* 17/22 regular — slightly larger than rows */
  color: var(--color-neutral-content-weak);
  margin: 0 0 var(--spacer-lg);             /* 24px gap before rows */
  padding: 0 var(--spacer-md);
}

.section__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---------- Filter row ---------- */

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacer-xs);
  padding: var(--spacer-sm) var(--spacer-md);   /* 12px 16px */
  border-radius: var(--radius-sm);
  color: var(--color-secondary-plain);          /* #DBE4E9 default */
  text-decoration: none;
  transition: background-color 120ms ease;
}

/* Hover/focus only applies when the list item is itself interactive
   (rendered as <a>, <button>, or with .list-item--interactive).
   Settings rows on detail pages are <div>/<label> and stay static. */
a.list-item:hover,
button.list-item:hover,
.list-item--interactive:hover {
  background: var(--color-neutral-background-hover);  /* #181C1F */
  text-decoration: none;
}

a.list-item:focus-visible,
button.list-item:focus-visible,
.list-item--interactive:focus-visible {
  outline: none;
  box-shadow: var(--elevation-focus-ring);
}

.list-item__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.list-item__title {
  font: 500 1rem/1.25rem var(--font-sans);      /* 16/20 medium — lighter than headline */
  color: var(--color-neutral-content-strong);
}

.list-item__desc {
  font: var(--font-body-1);                     /* 16/20 400 */
  color: var(--color-neutral-content-weak);
}

.list-item__end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacer-xs);
  color: var(--color-neutral-content);
}

.list-item__status {
  font: var(--font-body-1);                     /* 16/20 400 */
  color: var(--color-neutral-content);
}

.list-item__chevron {
  width: 1.125rem;                              /* 18px */
  height: 1.125rem;
  flex: 0 0 auto;
  color: var(--color-neutral-content);
  stroke-width: 2.5;                            /* heavier chevron */
}

/* ---------- Setting group ---------- */
/* A group header (larger title, optional description, optional trailing
   control like a toggle) that gates a nested list of child settings.

   Patterns this supports:
   - Header-with-toggle gating children (Reputation, Crowd Control, Adult
     Content Promoters): toggle sits in the header row.
   - Header-as-label (Mature Content subgroups): no trailing control; the
     header is purely a section label with title + description, and each
     child row has its own toggle.

   Usage:
   <section class="setting-group">
     <div class="setting-group__header">
       <div class="setting-group__header-body">
         <h3 class="setting-group__title">Filter posts</h3>
         <p class="setting-group__desc">Optional description</p>
       </div>
       <div class="setting-group__header-end">
         <!-- optional toggle or other control -->
       </div>
     </div>
     <ul class="setting-group__children">
       <li><div class="list-item">...</div></li>
     </ul>
   </section>
*/

.setting-group {
  display: flex;
  flex-direction: column;
}

.setting-group__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacer-md);
  padding: var(--spacer-sm) var(--spacer-md);   /* matches .list-item */
}

.setting-group__header-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-2xs);                       /* 4px between title and desc */
  min-width: 0;
}

.setting-group__title {
  font: var(--font-group-heading);              /* 18/24 600 */
  color: var(--color-neutral-content-strong);
  margin: 0;
}

.setting-group__desc {
  font: var(--font-body-2);                     /* 14/21 400 */
  color: var(--color-neutral-content-weak);
  margin: 0;
}

.setting-group__header-end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacer-xs);
}

.setting-group__children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 120ms ease;
}

/* When the group's top-level toggle is OFF, dim the child settings and
   show the not-allowed cursor. Scoped to a switch inside the group's
   own header so nested groups with their own toggles don't trigger this
   on their parents.

   We avoid `opacity` + `pointer-events: none` because that also kills the
   `cursor: not-allowed` indicator. Instead, we push each element to a
   dimmer color directly and let the controls handle their own cursor. */
.setting-group--off > .setting-group__children,
.setting-group:has(> .setting-group__header .switch__input:not(:checked)) > .setting-group__children {
  cursor: not-allowed;
}

/* Title + description: both land on the same disabled alpha as the dropdown
   so everything inside the disabled group reads as one uniform dim tone. */
.setting-group--off > .setting-group__children .list-item__title,
.setting-group--off > .setting-group__children .list-item__desc,
.setting-group:has(> .setting-group__header .switch__input:not(:checked)) > .setting-group__children .list-item__title,
.setting-group:has(> .setting-group__header .switch__input:not(:checked)) > .setting-group__children .list-item__desc {
  color: var(--color-interactive-content-disabled);
}

/* Dropdown control: reuse its own disabled appearance (darker + not-allowed).
   Override the hover-brighten so it stays dim while the group is off. */
.setting-group--off > .setting-group__children .dropdown-trigger,
.setting-group:has(> .setting-group__header .switch__input:not(:checked)) > .setting-group__children .dropdown-trigger {
  color: var(--color-interactive-content-disabled);
  cursor: not-allowed;
}
.setting-group--off > .setting-group__children .dropdown-trigger:hover,
.setting-group:has(> .setting-group__header .switch__input:not(:checked)) > .setting-group__children .dropdown-trigger:hover {
  color: var(--color-interactive-content-disabled);
  background: transparent;
}

/* Tag input: dim everything inside when group is off */
.setting-group--off > .setting-group__children .tag-input__field,
.setting-group:has(> .setting-group__header .switch__input:not(:checked)) > .setting-group__children .tag-input__field {
  color: var(--color-interactive-content-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.setting-group--off > .setting-group__children .tag-input__input,
.setting-group:has(> .setting-group__header .switch__input:not(:checked)) > .setting-group__children .tag-input__input {
  color: var(--color-interactive-content-disabled);
}
.setting-group--off > .setting-group__children .tag-input__hint,
.setting-group--off > .setting-group__children .tag-input__counter,
.setting-group:has(> .setting-group__header .switch__input:not(:checked)) > .setting-group__children .tag-input__hint,
.setting-group:has(> .setting-group__header .switch__input:not(:checked)) > .setting-group__children .tag-input__counter {
  color: var(--color-interactive-content-disabled);
}

/* ---------- Button ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacer-xs);
  padding: var(--spacer-sm) var(--spacer-md);    /* 12px 16px */
  min-height: 2.5rem;                            /* 40px — matches icon-button */
  border: 0;
  border-radius: var(--radius-full);             /* pill */
  font: var(--font-label-1);                     /* 14/20 600 */
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

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

/* Primary (filled blue pill) — used for "Save changes", "Submit", etc. */
.button--primary {
  background: var(--color-primary-background);  /* #115BCA */
  color: #fff;
}
.button--primary:hover:not(:disabled) {
  background: var(--color-primary-background-hover); /* #1870F4 */
}

/* Disabled — applies across all button variants */
.button:disabled,
.button[aria-disabled="true"] {
  background: var(--color-interactive-background-disabled); /* #FFFFFF0C */
  color: var(--color-interactive-content-disabled);         /* #FFFFFF3F */
  cursor: not-allowed;
}

/* ---------- Icon button ---------- */
/* Circular 40px ghost button — used for back-arrow, close, etc. */

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-neutral-content-strong);
  cursor: pointer;
  transition: background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.icon-button:hover {
  background: var(--color-neutral-background-hover); /* #181C1F */
}

.icon-button:focus-visible {
  outline: none;
  box-shadow: var(--elevation-focus-ring);
}

.icon-button svg {
  width: 1.25rem;                                /* 20px */
  height: 1.25rem;
  stroke-width: 2.5;
}

/* ---------- Detail page header ---------- */
/* Used at the top of every filter detail page: back button + title + save action,
   with a subtitle line underneath. */

.detail-header {
  display: flex;
  align-items: center;
  gap: var(--spacer-xs);
  padding: 0 var(--spacer-md);                   /* align with row/section padding */
  margin: 0 0 var(--spacer-xl);                  /* 32px below header before content */
}

.detail-header__back {
  /* Pull back button outward so title aligns with content, not with back button.
     Negative offset matches the page padding so the back button's left edge sits
     where the main-page title would. */
  margin-left: calc(var(--spacer-md) * -1);
}

.detail-header__title {
  flex: 1 1 auto;
  min-width: 0;
  font: var(--font-title-2);                     /* 24/28 700 */
  color: var(--color-neutral-content);
  margin: 0;
}

.detail-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacer-xs);
}

.detail-subtitle {
  font: var(--font-body-1);                      /* 16/20 400 */
  color: var(--color-neutral-content-strong);
  margin: 0 0 var(--spacer-xl);                  /* 32px before first section */
  padding: 0 var(--spacer-md);                   /* align with rows */
}

/* ---------- Detail page layout ---------- */
/* Two-column grid: settings list (left) + FAQ card (right).
   Right column is a fixed width so FAQ cards don't squish. */

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;   /* 384px FAQ column */
  gap: var(--spacer-xl);
}

.detail-layout__aside { min-width: 0; }

/* Collapse to single column on narrow screens */
@media (max-width: 48rem) {
  .detail-layout {
    grid-template-columns: 1fr;
    gap: var(--spacer-lg);
  }
}

/* ---------- FAQ card ---------- */
/* Filled container with accordion items. No dividers between items —
   separation is handled by the filled-card background instead.

   Implementation note: we deliberately avoid <details>/<summary> because
   Chrome's UA stylesheet applies `display: none !important` to closed
   <details> children, which breaks expand/collapse transitions. Instead
   we use <button aria-expanded> + sibling CSS, wired up by faq.js.

   Usage:
   <aside class="faq-card">
     <h3 class="faq-card__title">Frequently asked questions</h3>
     <div class="faq-card__list">
       <div class="faq-item">
         <button class="faq-item__question" type="button" aria-expanded="false">
           What is ban evasion?
           <svg class="faq-item__chevron" ...><polyline points="6 9 12 15 18 9"/></svg>
         </button>
         <div class="faq-item__answer-wrapper">
           <div class="faq-item__answer"><p>...</p></div>
         </div>
       </div>
     </div>
   </aside>
*/

.faq-card {
  background: transparent; /* blend with page — darker than page canvas */
  border: 1px solid var(--color-neutral-border-weak); /* subtle outline */
  border-radius: var(--radius-2);                 /* 8px */
  padding: var(--spacer-lg);                      /* 24px */
}

.faq-card__title {
  font: var(--font-label-1);                      /* 14/20 600 */
  color: var(--color-neutral-content-weak);       /* muted */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--spacer-sm);
}

.faq-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-2xs);                         /* 4px between items */
}

.faq-item {
  border-radius: var(--radius-sm);
}

.faq-item__question {
  /* Button reset */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  width: calc(100% + (var(--spacer-lg) * 2));     /* span full card width */
  text-align: left;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacer-md);
  padding: var(--spacer-sm) var(--spacer-lg);     /* 12px 24px — matches card padding */
  margin: 0 calc(var(--spacer-lg) * -1);          /* extend hit target flush to card edges */
  font: 500 1rem/1.25rem var(--font-sans);        /* match list item title: 16/20 500 */
  color: var(--color-neutral-content-weak);       /* #8BA2AD */
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background-color 120ms ease;
}

.faq-item__question:hover {
  background: var(--color-neutral-background-container-hover); /* #21272A */
}

.faq-item__question:focus-visible {
  outline: none;
  box-shadow: var(--elevation-focus-ring);
}

.faq-item__chevron {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2.5;
  color: var(--color-neutral-content-weak);       /* #8BA2AD — match text */
  margin-top: 0.125rem;                           /* optical align with first text line */
  transition: transform 280ms cubic-bezier(0.2, 0, 0.2, 1);
}

.faq-item__question[aria-expanded="true"] .faq-item__chevron {
  transform: rotate(180deg);
}

/* ---------- Shared reveal animation ---------- */
/* Smooth expand/collapse via grid-template-rows 0fr → 1fr.
   Wrapper is display:grid; the row track is what animates.
   Tweak --reveal-duration / --reveal-easing in tokens.css to
   adjust timing for BOTH the FAQ accordion and test-card result. */

.faq-item__answer-wrapper,
.test-card__result-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--reveal-duration) var(--reveal-easing);
}

/* Open states — FAQ via sibling selector, test-card via JS class */
.faq-item__question[aria-expanded="true"] + .faq-item__answer-wrapper,
.test-card__result-wrapper.is-visible {
  grid-template-rows: 1fr;
}

.faq-item__answer,
.test-card__result-wrapper > * {
  min-height: 0;
  overflow: hidden;
}

/* FAQ-specific styling for the inner content */
.faq-item__answer {
  padding: var(--spacer-xs) 0 var(--spacer-sm);   /* left-align answer with question text */
  font: var(--font-body-1);                       /* 16/20 400 */
  color: var(--color-neutral-content-weak);       /* muted secondary copy */
}

/* When closed, suppress padding so collapsed height is truly 0 */
.faq-item__question[aria-expanded="false"] + .faq-item__answer-wrapper .faq-item__answer {
  padding-top: 0;
  padding-bottom: 0;
}

.faq-item__answer > :first-child { margin-top: 0; }
.faq-item__answer > :last-child { margin-bottom: 0; }
.faq-item__answer p { margin: 0 0 var(--spacer-xs); }
.faq-item__answer p:last-child { margin-bottom: 0; }

/* ---------- Dropdown trigger ---------- */
/* Ghost-style select button. Text + chevron-down, no border/bg at rest.
   Hover brightens the text; focus shows the standard ring.
   Clicking opens a menu popover (not yet implemented — static for now).

   Usage:
   <button class="dropdown-trigger" type="button">
     <span class="dropdown-trigger__label">Moderate filtering</span>
     <svg class="dropdown-trigger__chevron" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
          aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
   </button>
*/

.dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  margin: -0.5rem -0.75rem;                      /* zero visual offset; gives hit + focus room */
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font: var(--font-body-1);                      /* 16/20 400 */
  color: var(--color-neutral-content-strong);    /* #EEF1F3 */
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.dropdown-trigger:hover {
  color: var(--color-secondary-plain-hover);     /* #FFFFFF */
  background: var(--color-neutral-background-container-hover);
}

.dropdown-trigger:focus-visible {
  outline: none;
  box-shadow: var(--elevation-focus-ring);
}

.dropdown-trigger:disabled {
  color: var(--color-interactive-content-disabled);
  cursor: not-allowed;
}

.dropdown-trigger__chevron {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2.5;
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

/* Rotate chevron when the parent dropdown is open */
.dropdown.is-open .dropdown-trigger__chevron {
  transform: rotate(180deg);
}

/* No persistent highlight when the menu is open — only hover shows the bg */

/* ---------- Dropdown menu (popover) ---------- */
/* Right-aligned popover anchored under .dropdown-trigger.

   Usage:
   <div class="dropdown">
     <button class="dropdown-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
       <span class="dropdown-trigger__label">Remove</span>
       <svg class="dropdown-trigger__chevron" ...></svg>
     </button>
     <div class="dropdown__menu" role="listbox">
       <button class="dropdown__item" role="option" aria-selected="true" data-value="remove">
         <span class="dropdown__item-body">
           <span class="dropdown__item-title">Remove</span>
           <span class="dropdown__item-desc">Remove comments without reviewing</span>
         </span>
         <svg class="dropdown__item-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <polyline points="5 12 10 17 19 7"/>
         </svg>
       </button>
       <button class="dropdown__item" role="option" data-value="review">
         <span class="dropdown__item-body">
           <span class="dropdown__item-title">Review</span>
           <span class="dropdown__item-desc">Add to mod queue for review</span>
         </span>
       </button>
     </div>
   </div>

   Toggle the .is-open class on .dropdown to show the menu. dropdown.js handles
   click-to-toggle, click-outside-to-close, and selection.
*/

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + var(--spacer-xs));
  right: 0;
  z-index: 50;
  min-width: 18rem;
  max-width: 22rem;
  padding: 0;
  background: var(--color-neutral-background-container);
  border: 1px solid var(--color-neutral-border-weak);
  border-radius: var(--radius-2);
  box-shadow: var(--elevation-overlay);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Closed by default — fade + slide in when open */
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}

.dropdown.is-open .dropdown__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 0s;
}

.dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacer-sm);
  width: 100%;
  padding: var(--spacer-sm) var(--spacer-md);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-neutral-content-strong);
  text-align: left;
  cursor: pointer;
  transition: background-color 100ms ease;
}

.dropdown__item:hover,
.dropdown__item:focus-visible {
  background: var(--color-neutral-background-container-hover);
  outline: none;
}

.dropdown__item[aria-selected="true"] {
  background: var(--color-neutral-background-container-hover);
}

.dropdown__item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.dropdown__item-title {
  font: var(--font-body-1);              /* 16/20 400 */
  color: var(--color-neutral-content-strong);
}

.dropdown__item-desc {
  font: var(--font-body-2);              /* 14/21 400 */
  color: var(--color-neutral-content-weak);
}

.dropdown__item-check {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 2px;
  color: var(--color-neutral-content-strong);
  opacity: 0;
}

.dropdown__item[aria-selected="true"] .dropdown__item-check {
  opacity: 1;
}

/* ---------- Toggle switch ---------- */
/* Usage:
   <label class="switch">
     <input type="checkbox" class="switch__input" [checked] [disabled]>
     <span class="switch__track">
       <span class="switch__handle">
         <svg class="switch__check" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <polyline points="5 12 10 17 19 7"/>
         </svg>
       </span>
     </span>
   </label>
*/

.switch {
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.switch__input {
  /* Visually hidden but still accessible */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.switch__track {
  display: block;
  position: relative;
  width: var(--size-switch-input-w);            /* 48px */
  height: var(--size-switch-input-h);           /* 32px */
  border-radius: var(--radius-full);
  background: var(--color-switch-input-background-default); /* #2A3236 */
  transition: background-color 150ms ease;
}

.switch__handle {
  position: absolute;
  top: 50%;
  left: 0.25rem;                                /* 4px inset */
  width: 1.5rem;                                /* 24px */
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--color-switch-input-background-handle); /* #FFFFFF */
  transform: translateY(-50%);
  transition: left 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-switch-input-background-checked); /* check tint when ON */
}

.switch__check {
  width: 1rem;
  height: 1rem;
  opacity: 0;
  transition: opacity 120ms ease;
}

/* Hover — off (only when enabled) */
.switch:hover .switch__input:not(:disabled) ~ .switch__track {
  background: var(--color-switch-input-background-default-hover); /* #333D42 */
}

/* Checked — on */
.switch__input:checked ~ .switch__track {
  background: var(--color-switch-input-background-checked);       /* #115BCA */
}

.switch__input:checked ~ .switch__track .switch__handle {
  left: calc(100% - 1.5rem - 0.25rem);          /* 48 - 24 - 4 = 20px from left */
}

.switch__input:checked ~ .switch__track .switch__check {
  opacity: 1;
}

/* Hover — on (only when enabled) */
.switch:hover .switch__input:checked:not(:disabled) ~ .switch__track {
  background: var(--color-switch-input-background-checked-hover); /* #1870F4 */
}

/* Focus ring */
.switch__input:focus-visible ~ .switch__track {
  box-shadow: var(--elevation-focus-ring);
}

/* Disabled — shared (no hover-driven color shift) */
.switch__input:disabled {
  cursor: not-allowed;
}

.switch:has(.switch__input:disabled) {
  cursor: not-allowed;
}

/* Disabled off */
.switch__input:disabled ~ .switch__track {
  background: #131313;
}

.switch__input:disabled ~ .switch__track .switch__handle {
  background: #2A3236;
}

/* Disabled on */
.switch__input:disabled:checked ~ .switch__track {
  background: var(--color-interactive-background-disabled); /* #FFFFFF0C */
}

.switch__input:disabled:checked ~ .switch__track .switch__handle {
  background: var(--color-interactive-content-disabled);   /* #FFFFFF3F — handle */
  color: var(--color-neutral-background);                  /* check = page bg → reads as cut-out */
}

/* ---------- Tag input ---------- */
/* Filled text field that accepts a list of terms. Shown empty by default for
   the mock — in the live app, entered terms render as pills inside the field.
   Sibling nodes handle the hint and the N/15 counter beneath the field.

   Usage:
   <div class="tag-input">
     <input class="tag-input__field" type="text" placeholder="Allowed words">
     <div class="tag-input__meta">
       <p class="tag-input__hint">Ignore certain keywords. For partial matching…</p>
       <span class="tag-input__counter">0/15 terms</span>
     </div>
   </div>
*/

.tag-input {
  display: flex;
  flex-direction: column;
  gap: var(--spacer-xs);
  width: 100%;
}

/* Wrapper that looks like a single input field — holds pills + the real input */
.tag-input__field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacer-xs);
  width: 100%;
  min-height: 3rem;                                /* 48px — taller to give pills room */
  padding: var(--spacer-xs) var(--spacer-md);
  background: var(--color-neutral-background-container); /* #181C1F */
  border: 1px solid transparent;
  border-radius: var(--radius-full);               /* pill shape to match live site */
  color: var(--color-neutral-content-strong);
  font: var(--font-body-1);
  transition: border-color 120ms ease, background-color 120ms ease;
}

/* Placeholder now lives on .tag-input__input inside the wrapper */

.tag-input__field:hover {
  cursor: text;
}

.tag-input__field:focus,
.tag-input__field:focus-within {
  outline: none;
  border-color: var(--color-primary-background-hover); /* #1870F4 */
  background: var(--color-neutral-background-container);
}

/* The actual text input inside the flex wrapper */
.tag-input__input {
  flex: 1 1 6rem;
  min-width: 4rem;
  border: 0;
  background: transparent;
  color: var(--color-neutral-content-strong);
  font: var(--font-body-1);
  outline: none;
  padding: 0;
}

.tag-input__input::placeholder {
  color: var(--color-neutral-content-weak);
}

/* Individual tag pill */
.tag-input__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem 0.25rem 0.75rem;
  background: var(--color-neutral-background-container-hover);
  border-radius: var(--radius-full);
  font: var(--font-body-2);                          /* 14/21 */
  color: var(--color-neutral-content);
  white-space: nowrap;
}

.tag-input__tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-neutral-content-weak);
  cursor: pointer;
  padding: 0;
  transition: color 100ms ease;
}

.tag-input__tag-remove:hover {
  color: var(--color-neutral-content-strong);
}

.tag-input__tag-remove svg {
  width: 0.875rem;
  height: 0.875rem;
}

.tag-input__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacer-md);
}

.tag-input__hint {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font: var(--font-body-2);                         /* 14/21 400 */
  color: var(--color-neutral-content-weak);
}

.tag-input__counter {
  flex: 0 0 auto;
  font: var(--font-caption-1);                      /* 12/16 */
  color: var(--color-neutral-content-weak);
  padding-top: 0.125rem;                            /* optical align to first line of hint */
}

/* ---------- Test card ---------- */
/* Right-column card used on the Harassment detail page to let moderators
   try out the filter. Same chrome language as the FAQ card (sunken bg,
   8px radius, 24px padding) but with its own internal layout: title,
   secondary copy, textarea, Submit button.

   Usage:
   <aside class="test-card">
     <h3 class="test-card__title">Test the filter</h3>
     <p class="test-card__desc">See if a comment would be caught…</p>
     <textarea class="test-card__textarea" placeholder="Comment"></textarea>
     <div class="test-card__actions">
       <button class="button button--primary" disabled>Submit</button>
     </div>
   </aside>
*/

.test-card {
  background: transparent; /* blend with page */
  border: 1px solid var(--color-neutral-border-weak); /* subtle outline */
  border-radius: var(--radius-2);                   /* 8px — matches FAQ card */
  padding: var(--spacer-lg);                        /* 24px */
  display: flex;
  flex-direction: column;
  gap: var(--spacer-sm);
}

.test-card__title {
  font: var(--font-label-1);                        /* 14/20 600 — matches .faq-card__title */
  color: var(--color-neutral-content-weak);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.test-card__desc {
  font: var(--font-body-1);                         /* 16/20 400 — matches .faq-item__answer */
  color: var(--color-neutral-content-weak);
  margin: 0;
}

.test-card__textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 6rem;                                 /* 96px */
  resize: vertical;
  padding: var(--spacer-sm) var(--spacer-md);
  background: var(--color-neutral-background-container); /* #181C1F */
  border: 1px solid transparent;
  border-radius: var(--radius-2);
  color: var(--color-neutral-content-strong);
  font: var(--font-body-1);
  transition: border-color 120ms ease;
}

.test-card__textarea::placeholder {
  color: var(--color-neutral-content-weak);
}

.test-card__textarea:focus {
  outline: none;
  border-color: var(--color-primary-background-hover);
}

.test-card__textarea--flagged {
  border-color: var(--color-danger-border);
}

.test-card__textarea--flagged:focus {
  border-color: var(--color-danger-border);
}

.test-card__result {
  font: var(--font-body-2);              /* 14/21 */
  color: var(--color-danger);
  padding: var(--spacer-2xs) 0 0;        /* small gap above result text */
}

.test-card__result strong {
  font-weight: 700;
}

.test-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacer-sm);
}

.test-card__feedback {
  display: flex;
  align-items: center;
  gap: var(--spacer-xs);
  background: var(--color-neutral-background-container);
  border-radius: var(--radius-full);
  padding: var(--spacer-xs) var(--spacer-md);
  font: var(--font-body-2);
  color: var(--color-neutral-content);
  margin-right: auto;
  /* Hidden initial state; fades + slides in when .is-visible is added */
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--reveal-duration) var(--reveal-easing) 60ms,
    transform var(--reveal-duration) var(--reveal-easing) 60ms;
}

.test-card__feedback.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.test-card__feedback-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-neutral-content-weak);
  cursor: pointer;
  padding: 0;
  transition: color 120ms ease;
}

.test-card__feedback-btn:hover {
  color: var(--color-neutral-content-strong);
}

.test-card__feedback-btn svg {
  width: 1rem;
  height: 1rem;
}