/**
 * Briefer Design System: Atoms
 *
 * The single source of truth in code for every atom, and a carbon copy of the
 * "⬡ Atoms" and "◇ Brand" sections of the Briefer Design System Figma file:
 * one class here per Figma component, one modifier per Figma variant, one
 * pseudo-class or ARIA state per Figma state. Figma is upstream.
 *
 * Nothing re-implements an atom. React reaches these classes through the thin
 * wrappers in web/components/ui/ (which add only props, icons and ARIA), and
 * the server-rendered templates use the classes directly. A button built from
 * utilities, anywhere, is a bug.
 *
 * Every colour, type style, spacing step and radius is a Foundations token from
 * theme.css. The only raw numbers are the component dimensions Figma itself
 * leaves unbound (a 16px icon, a 44px toggle). Borders sit inside the box, as
 * Figma's strokes do, so paddings are written as the Figma padding less the
 * 1px border.
 *
 * Loaded after theme.css and before Tailwind's injected sheet, so a layout
 * utility on the same element (`w-full`, `mt-md`, `flex-1`) still applies.
 */

/* ══════════════════════════════════════════════════════════════════ */
/* Wordmark (◇ Brand · Logo & Wordmark)                                */
/* ══════════════════════════════════════════════════════════════════ */

/* The wordmark is the word "Briefer" set in a text style, nothing more: the
   Figma component is `h1`. The other sizes are the other styles: hero =
   display, md = h2, sm = h3, min = label. Every header, top bar and footer
   uses md, so the mark is one size on every screen and the 64px app header
   (which the sticky legal and help sidebars sit under) keeps its height. It
   takes the surrounding text colour: foreground, or primary-foreground on the
   accent. */
.wordmark { font: var(--type-h1); letter-spacing: var(--type-h1-tracking); color: inherit; text-decoration: none; }
.wordmark-hero { font: var(--type-display); letter-spacing: var(--type-display-tracking); }
.wordmark-md { font: var(--type-h2); letter-spacing: var(--type-h2-tracking); }
.wordmark-sm { font: var(--type-h3); letter-spacing: var(--type-h3-tracking); }
.wordmark-min { font: var(--type-label); letter-spacing: var(--type-label-tracking); }

/* ══════════════════════════════════════════════════════════════════ */
/* Button · Icon Button · Status Action Button                          */
/* ══════════════════════════════════════════════════════════════════ */

/* .btn is the MD size; .btn-sm and .btn-lg are the other two. A variant class
   is always required. Works on <button> and on <a>. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: calc(var(--space-sm) - 1px) calc(var(--space-md) - 1px);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}
.btn > svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-sm { padding: calc(var(--space-xs) - 1px) calc(var(--space-sm) - 1px); }
.btn-lg { height: 44px; padding: 0 calc(var(--space-lg) - 1px); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}
.icon-btn > svg { width: 20px; height: 20px; }
.icon-btn-sm { width: 24px; height: 24px; }
.icon-btn-sm > svg { width: 16px; height: 16px; }
.icon-btn-lg { width: 32px; height: 32px; }
.icon-btn-lg > svg { width: 24px; height: 24px; }

/* Variants, shared by .btn and .icon-btn. */
.btn-primary { background-color: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background-color: var(--accent-hover); }
.btn-primary:active { background-color: var(--accent-active); }

.btn-secondary { background-color: var(--bg-3); border-color: var(--border); color: var(--foreground); }
.btn-secondary:hover { background-color: var(--bg-4); }
.btn-secondary:active { background-color: var(--secondary); }

.btn-outline { background-color: transparent; border-color: var(--border-strong); color: var(--foreground); }
.btn-outline:hover { background-color: var(--secondary); }
.btn-outline:active { background-color: var(--bg-3); }

.btn-ghost { background-color: transparent; color: var(--fg-2); }
.btn-ghost:hover { background-color: var(--secondary); }
.btn-ghost:active { background-color: var(--bg-3); }

.btn-danger { background-color: var(--danger-subtle); border-color: var(--danger); color: var(--danger-foreground); }
.btn-danger:hover,
.btn-danger:active { background-color: var(--danger); color: var(--primary-foreground); }

/* An icon button's glyph is quieter than a button's label. */
.icon-btn.btn-secondary,
.icon-btn.btn-outline,
.icon-btn.btn-ghost { color: var(--muted-foreground); }

/* Focus: a 2px ring, outside a button and inside an icon button. */
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.icon-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* Disabled, after the variants so it wins over their hover and active. */
.btn:disabled, .btn[aria-disabled="true"],
.icon-btn:disabled, .icon-btn[aria-disabled="true"] {
  background-color: var(--secondary);
  border-color: var(--border);
  color: var(--muted-foreground);
  cursor: not-allowed;
}
.btn-outline:disabled, .btn-outline[aria-disabled="true"] { background-color: transparent; }
.btn-ghost:disabled, .btn-ghost[aria-disabled="true"] { background-color: transparent; border-color: transparent; }
.btn[aria-disabled="true"], .icon-btn[aria-disabled="true"] { pointer-events: none; }

/* Figma marks this one as a hard-coded match of the live "Reopen brief"
   control, pending a decision on folding it into the Button scale. */
.status-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  height: 36px;
  padding: 0 calc(var(--space-md) - 1px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--foreground);
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out);
}
.status-action-btn > svg { width: 12px; height: 12px; flex-shrink: 0; }
.status-action-btn:hover { background-color: var(--secondary); }
.status-action-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.status-action-btn:disabled { color: var(--muted-foreground); border-color: var(--border); cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════ */
/* Badge · Tag                                                          */
/* ══════════════════════════════════════════════════════════════════ */

/* Decorative status badge: an emphasis (solid, soft) and a colour (green,
   amber, red, neutral). The colour is a semantic tone, not a business meaning:
   callers choose it and set the label. Text uses the -foreground tones so the
   soft badges keep their contrast in Light. */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: calc(var(--space-xs) - 1px) 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
  white-space: nowrap;
}
.badge > svg { width: 16px; height: 16px; flex-shrink: 0; }

.badge-solid.badge-green { background-color: var(--primary); color: var(--primary-foreground); }
.badge-solid.badge-amber { background-color: var(--warning); color: var(--foreground); }
.badge-solid.badge-red { background-color: var(--danger-foreground); color: var(--foreground); }
.badge-solid.badge-neutral { background-color: var(--bg-3); border-color: var(--border); color: var(--muted-foreground); }

.badge-soft.badge-green { background-color: var(--accent-subtle); border-color: var(--accent-subtle); color: var(--success-foreground); }
.badge-soft.badge-amber { background-color: var(--warning-subtle); border-color: var(--warning); color: var(--warning-foreground); }
.badge-soft.badge-red { background-color: var(--danger-subtle); border-color: var(--danger-foreground); color: var(--danger-foreground); }
.badge-soft.badge-neutral { background-color: var(--foreground); border-color: var(--border); color: var(--muted-foreground); }

/* Category tag. Selected through .is-selected, aria-pressed or aria-selected. */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--border-subtle);
  color: var(--fg-2);
  font: var(--type-small);
  letter-spacing: var(--type-small-tracking);
  white-space: nowrap;
}
.tag.is-selected,
.tag[aria-pressed="true"],
.tag[aria-selected="true"] {
  background-color: var(--accent-subtle);
  border-color: var(--accent-border);
  color: var(--accent-hover);
}

/* ══════════════════════════════════════════════════════════════════ */
/* Avatar                                                               */
/* ══════════════════════════════════════════════════════════════════ */

/* .avatar is MD (32px); .avatar-sm 24px, .avatar-lg 48px. Initials are always
   set in `label`. An <img> child fills the tile. */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--primary);
  color: var(--primary-foreground);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
}
.avatar-sm { width: 24px; height: 24px; }
.avatar-lg { width: 48px; height: 48px; }
.avatar > img { width: 100%; height: 100%; object-fit: cover; }

/* A hidden or anonymous user: a bordered tile with a neutral dot. */
.avatar-anonymous { border: 1px solid var(--border); }
.avatar-anonymous::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: var(--radius-full);
  background-color: var(--muted-foreground);
}
.avatar-sm.avatar-anonymous::before { width: 10px; height: 10px; }
.avatar-lg.avatar-anonymous::before { width: 18px; height: 18px; }

/* ══════════════════════════════════════════════════════════════════ */
/* Selection controls: Checkbox · Radio · Toggle · Step                 */
/* ══════════════════════════════════════════════════════════════════ */

/* On a real <input type="checkbox">, so forms and keyboards keep working.
   .checkbox is MD (16px); .checkbox-sm 12px, .checkbox-lg 20px. */
.checkbox {
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--card);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.checkbox::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--primary-foreground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
}
.checkbox-sm { width: 12px; height: 12px; }
.checkbox-sm::before { width: 8px; height: 8px; }
.checkbox-lg { width: 20px; height: 20px; }
.checkbox-lg::before { width: 16px; height: 16px; }
.checkbox:checked,
.checkbox[aria-checked="true"] { background-color: var(--primary); border-color: var(--primary); }
.checkbox:checked::before,
.checkbox[aria-checked="true"]::before { opacity: 1; }
.checkbox:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.checkbox:disabled { border-color: var(--border); cursor: not-allowed; }

/* On a real <input type="radio">. */
.radio {
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  background-color: transparent;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.radio::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  opacity: 0;
}
.radio:checked,
.radio[aria-checked="true"] { border-color: var(--primary); }
.radio:checked::before,
.radio[aria-checked="true"]::before { opacity: 1; }
.radio:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.radio:disabled { border-color: var(--border); cursor: not-allowed; }

/* On a <button role="switch" aria-checked>. */
.toggle {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background-color: var(--border-strong);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out);
}
.toggle::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background-color: var(--primary-foreground);
  transition: transform var(--duration-base) var(--ease-out);
}
.toggle[aria-checked="true"] { background-color: var(--primary); }
.toggle[aria-checked="true"]::before { transform: translateX(20px); }
.toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.toggle:disabled { background-color: var(--secondary); cursor: not-allowed; }

/* One step of a progress indicator: a numbered circle over its label.
   data-state is "default", "active" or "success". */
.step {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted-foreground);
  font: var(--type-caption);
  letter-spacing: var(--type-caption-tracking);
}
.step-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background-color: var(--secondary);
  color: var(--muted-foreground);
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  transition: background-color var(--duration-base) var(--ease-out);
}
.step-circle > svg { width: 20px; height: 20px; }
.step[data-state="active"],
.step[data-state="success"] {
  color: var(--foreground);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
}
.step[data-state="active"] .step-circle,
.step[data-state="success"] .step-circle {
  background-color: var(--primary);
  color: var(--primary-foreground);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
}
/* The label may be wider than the circle: it centres on it and never wraps,
   so a row of steps stays evenly spaced. */
.step { width: 40px; }
.step-label { white-space: nowrap; }
/* A step rendered as a button is one the user can return to. */
button.step { cursor: pointer; }
button.step:hover .step-circle { background-color: var(--accent-hover); }
button.step:hover .step-label { text-decoration: underline; }
button.step:focus-visible { outline: none; }
button.step:focus-visible .step-circle { outline: 2px solid var(--ring); outline-offset: 0; }

/* ══════════════════════════════════════════════════════════════════ */
/* Form controls: Text Field · Dropdown Trigger · Menu · Menu Item      */
/* ══════════════════════════════════════════════════════════════════ */

/* The box of a text field. On an <input> or <textarea> directly, or on a
   wrapper holding a 16px leading icon and a bare input. States: aria-invalid
   or .is-error, and .is-success. */
.field {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: calc(var(--space-xs) - 1px) calc(var(--space-sm) - 1px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--background);
  color: var(--foreground);
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  transition: border-color var(--duration-base) var(--ease-out);
}
.field::placeholder,
.field > input::placeholder,
.field > textarea::placeholder { color: var(--fg-4); opacity: 1; }
.field > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted-foreground); }
.field > input,
.field > textarea {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.field:focus,
.field:focus-visible,
.field:focus-within { outline: 2px solid var(--ring); outline-offset: 0; }
.field[aria-invalid="true"],
.field.is-error { border-color: var(--danger-foreground); }
.field.is-success { border-color: var(--success-foreground); }
.field:disabled,
.field.is-disabled { background-color: var(--secondary); color: var(--muted-foreground); cursor: not-allowed; }

/* The closed dropdown. On the native <select> (web/components/ui/select.tsx
   keeps it a real select) and on any button that opens a .menu. The chevron is
   a 16px sibling placed by .dropdown. */
.dropdown { position: relative; display: block; }
.dropdown > svg {
  position: absolute;
  top: 50%;
  right: var(--space-sm);
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--fg-2);
  opacity: 0.5;
  pointer-events: none;
}
.dropdown-trigger {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  height: 40px;
  padding: 0 calc(var(--space-sm) - 1px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--background);
  color: var(--foreground);
  font: var(--type-body);
  letter-spacing: var(--type-body-tracking);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out);
}
.dropdown > .dropdown-trigger { padding-right: calc(var(--space-sm) + 16px + var(--space-xs)); }
.dropdown-trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.dropdown-trigger[aria-invalid="true"],
.dropdown-trigger.is-error { border-color: var(--danger-foreground); }
.dropdown-trigger.is-success { border-color: var(--success-foreground); }
.dropdown-trigger.is-placeholder { color: var(--muted-foreground); }
.dropdown-trigger:disabled { background-color: var(--secondary); color: var(--muted-foreground); cursor: not-allowed; }

/* The open list and its rows, for any popup built in the page. */
.menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--card);
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--foreground);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}
.menu-item > svg { width: 16px; height: 16px; flex-shrink: 0; }
.menu-item:hover,
.menu-item:focus-visible,
.menu-item.is-selected,
.menu-item[aria-selected="true"],
.menu-item[aria-checked="true"],
.menu-item[aria-current="page"] {
  outline: none;
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* The same trigger, list and rows where the browser draws the list itself.
   `appearance: base-select` moves a native <select>'s popup into the page,
   where ::picker() and the options take the Menu and Menu Item treatment.
   Behind @supports: a browser without it keeps its native list rather than an
   unstyled one, and the select stays a real <select> throughout. */
@supports (appearance: base-select) {
  select.dropdown-trigger { appearance: base-select; }

  /* base-select supplies its own chevron; .dropdown already places ours. */
  select.dropdown-trigger::picker-icon { display: none; }

  select.dropdown-trigger::picker(select) {
    appearance: base-select;
    max-height: 20rem;
    overflow-y: auto;
    /* Figma draws the list attached under its trigger, square where they meet.
       The browser flips the list above the trigger when there is no room below,
       and CSS cannot tell which way it went, so it floats a hair clear with all
       four corners instead: right in both directions. */
    margin-block: 4px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--card);
    color: var(--foreground);
  }

  select.dropdown-trigger option {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--foreground);
    font: var(--type-label);
    letter-spacing: var(--type-label-tracking);
    /* Explicit: options nest inside optgroup, whose label styling would
       otherwise inherit down and shout every choice in caps. */
    text-transform: none;
    cursor: pointer;
  }
  select.dropdown-trigger option + option { margin-top: var(--space-xs); }

  /* The leading check: always takes its 16px, shows only on the chosen row. */
  select.dropdown-trigger option::checkmark {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
    visibility: hidden;
  }
  select.dropdown-trigger option:checked::checkmark { visibility: visible; }

  select.dropdown-trigger option:hover,
  select.dropdown-trigger option:focus,
  select.dropdown-trigger option:checked {
    outline: none;
    background-color: var(--primary);
    color: var(--primary-foreground);
  }

  select.dropdown-trigger optgroup {
    padding: 8px 8px 2px;
    color: var(--muted-foreground);
    font: var(--type-overline);
    letter-spacing: var(--type-overline-tracking);
    text-transform: uppercase;
  }
}

/* ══════════════════════════════════════════════════════════════════ */
/* Navigation: Nav Item · Link                                          */
/* ══════════════════════════════════════════════════════════════════ */

/* A row of the mobile and tablet drawer: 16px icon and label, full width.
   Active through aria-current="page" or .is-active. */
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--muted-foreground);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}
.nav-item > svg { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item:hover { background-color: var(--secondary); color: var(--foreground); }
.nav-item:focus-visible { outline: 2px solid var(--ring); outline-offset: 0; }
.nav-item.is-active,
.nav-item[aria-current="page"] { background-color: var(--primary); color: var(--primary-foreground); }

/* A text link, set in `label`. .link-inline keeps the surrounding text's type
   instead, for a link inside a sentence. Works on <a> and on <button>. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out);
}
.link > svg { width: 16px; height: 16px; flex-shrink: 0; }
.link:hover { color: var(--accent-hover); text-decoration: underline; }
.link:active { color: var(--accent-active); text-decoration: underline; }
.link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.link:disabled { color: var(--muted-foreground); text-decoration: none; cursor: not-allowed; }
.link-inline { font: inherit; letter-spacing: inherit; }
/* Plain text flows and wraps with its sentence; with an icon it keeps the gap. */
.link-inline:not(:has(> svg)) { display: inline; }