/**
 * The design system: tokens and the pieces every screen is built from.
 *
 * Values come from the Figma file (Card Binder, "Discovery"), named for what
 * they do rather than where they were first seen. style.css still holds the
 * screens; anything a second screen would reuse belongs here instead.
 * design/system/PATTERNS.md says what each piece is for and when to use it.
 */

:root {
  /*
   * Light and dark, one token each: light-dark() picks by the colour scheme in
   * force. Light unless the toggle beside the menu chose dark (<html
   * data-theme="dark">, set by theme.js before the first paint) — not the
   * system's: grimorio is a light room you can dim, not one that follows the OS.
   *
   * Dark is not the light theme inverted. Surfaces are a warm near-black that
   * rises as it comes forward (paper < sheet < tile), so depth reads as light
   * rather than as shadow; ink is off-white, never pure; the orange is lifted
   * a touch so it holds the same weight against the dark; rules are faint
   * light lines instead of grey ones.
   */
  color-scheme: light;

  /* ---------- surfaces ---------- */
  --paper: light-dark(#f7f7f7, #111113);        /* every screen but the shelf */
  --sheet: light-dark(#ffffff, #1a1a1d);        /* panels, fields, the shelf itself */
  --tile: light-dark(#f1eff1, #26252a);         /* the square behind a set symbol */
  --hover: light-dark(#f2f2f7, #242428);        /* a row under the pointer, the chosen segment */
  --sheet-hover: light-dark(#fcfcfc, #212125);  /* a white control under the pointer */

  /* ---------- ink ---------- */
  --ink-max: light-dark(#000000, #ffffff);
  --ink-body: light-dark(#1a1a1a, #e9e8ec);
  --ink-title: light-dark(#2c2b30, #f3f2f5);
  --ink-quiet: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.55));
  --ink-muted: light-dark(#69656c, #a9a6ad);
  --ink-eyebrow: light-dark(#969696, #85848b);
  --gray: light-dark(#8e8e93, #8e8e93);
  --gray-2: light-dark(#aeaeb2, #636366);
  --gray-4: light-dark(#d1d1d6, #3a3a3e);
  --rule: light-dark(#d5d7da, #34343a);
  --rule-hover: light-dark(#b9bcc1, #45454c);   /* that control's edge, darkened instead of lifted */
  --rule-field: light-dark(rgba(26, 26, 26, 0.16), rgba(255, 255, 255, 0.14));
  --rule-dashed: light-dark(#c4c6ca, #44444a);  /* the dashed "add" rows */

  /* ---------- the one colour that acts ---------- */
  --act: light-dark(#fc492d, #ff5638);          /* Continue, ready */
  --act-solid: light-dark(#fc3516, #ff4626);    /* the add button */
  --act-off: light-dark(#ffa99b, #6e3226);      /* Continue, not yet */
  --act-trail: light-dark(#f87a5b, #ff8566);    /* progress, the chosen check */
  --act-wash: light-dark(rgba(252, 73, 45, 0.08), rgba(255, 86, 56, 0.14));  /* a tinted ground */
  --danger-ink: light-dark(#c2271b, #ff6b5e);
  --danger-wash: light-dark(#fff7f6, rgba(255, 107, 94, 0.1));
  --danger-rule: light-dark(#e7b3ad, rgba(255, 107, 94, 0.4));

  /* ---------- the five covers, as swatches ---------- */
  --swatch-blue: #018d9c;
  --swatch-red: #fc1616;
  --swatch-black: #5c3e98;     /* stored as `black`, drawn as purple */
  --swatch-white: #ffffff;
  --swatch-green: #09724c;

  /* ---------- shape ---------- */
  --r-pill: 100px;
  --r-panel: 24px;
  --r-sheet: 20px;
  --r-field: 16px;
  --r-glass: 16px;
  --r-swatch: 15px;
  --r-tile: 8px;
  --r-seg: 8px;

  /* ---------- depth ---------- */
  --shadow-panel:
    0 46px 13px 0 rgba(0, 0, 0, 0),
    0 29px 12px 0 light-dark(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.08)),
    0 16px 10px 0 light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.16)),
    0 7px 7px 0 light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.22)),
    0 2px 4px 0 light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
  --shadow-swatch:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 6px 6px rgba(0, 0, 0, 0.09),
    0 12px 8px rgba(0, 0, 0, 0.05),
    0 22px 9px rgba(0, 0, 0, 0.01);
  --shadow-xs: 0 1px 2px 0 light-dark(rgba(10, 13, 18, 0.05), rgba(0, 0, 0, 0.4));
  --inset-skeuo:
    inset 0 0 0 1px light-dark(rgba(10, 13, 18, 0.18), rgba(255, 255, 255, 0.12)),
    inset 0 -2px 0 0 light-dark(rgba(10, 13, 18, 0.05), rgba(0, 0, 0, 0.3));
  /* a floating white thing's own drop: toast, popover, dialog */
  --shadow-float: light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
  /* the edge a white panel needs in the light and a dark one needs in the dark */
  --edge-soft: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08));

  /* ---------- glass: the dark floating menus ---------- */
  /* Dark in both themes; over a dark page it is lifted, so it still floats. */
  --glass-fill:
    linear-gradient(light-dark(rgba(93, 93, 93, 0.1), rgba(120, 120, 128, 0.22)), light-dark(rgba(93, 93, 93, 0.1), rgba(120, 120, 128, 0.22))),
    linear-gradient(light-dark(rgba(0, 0, 0, 0.5), rgba(20, 20, 22, 0.6)), light-dark(rgba(0, 0, 0, 0.5), rgba(20, 20, 22, 0.6)));
  --glass-edge: light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.14));
  --glass-ink: #ffffff;
  --glass-quiet: rgba(255, 255, 255, 0.5);
  --scrim: light-dark(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.7));

  /* ---------- type ---------- */
  /* One family everywhere (user, 2026-10-18). The two names stay so a role can
     be re-cut later without hunting for every use. */
  --font-head: var(--font-sans);
  --font-eyebrow: var(--font-sans);

  /* ---------- motion (mirrored in motion.js) ---------- */
  --t-quick: 160ms;
  --t-base: 280ms;
  --t-slow: 520ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: var(--ease-out);
}

:root[data-theme="dark"] { color-scheme: dark; }

/* Turning the lights down changes every surface in one fade. */
:root.is-theming,
:root.is-theming * {
  transition: background-color 360ms var(--ease-out), border-color 360ms var(--ease-out),
    color 360ms var(--ease-out), fill 360ms var(--ease-out) !important;
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%,
      1.017 20%, 1.043 23.1%, 1.044 25.2%, 1.035 27.7%, 0.998 36.4%, 0.99 41.3%,
      1 53.8%, 1.001 58.7%, 1);
  }
}

/* ============================================================
   Text
   ============================================================ */

/* Form controls do not inherit the page's type on their own; without this
   every icon-only button and the cover itself were set in Arial. */
button, input, select, textarea { font-family: inherit; }

/* Two lines, one statement: what this is, and — fainter — what to do. */
.headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.05;
  color: var(--ink-max);
}

.headline__more { opacity: 0.4; }

.eyebrow {
  margin: 0;
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink-eyebrow);
}

.field-label {
  display: block;
  margin: 0;
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink-body);
}

/* ============================================================
   Buttons
   ============================================================ */

/* Every pressable thing gives a little under the finger. */
.press {
  transition: transform var(--t-quick) var(--ease-out),
    background-color var(--t-base) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out),
    opacity var(--t-base) var(--ease-out);
}

.press:active:not(:disabled) { transform: scale(0.96); }

/* The one action on a step. Pale until it can be pressed, then the ember. */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r-pill);
  background-color: var(--act);
  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
  box-shadow: var(--shadow-xs), inset 0 -2px 0 0 rgba(10, 13, 18, 0.05);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
}

.btn-cta:hover:not(:disabled) { background-color: var(--act-solid); }
.btn-cta:disabled { background-color: var(--act-off); cursor: default; }
.btn-cta.is-busy { opacity: 0.7; cursor: progress; }

/* Round, white, outlined: the controls that float beside the binder. */
.btn-round {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--sheet);
  color: var(--ink-max);
  cursor: pointer;
  text-decoration: none;
}

/* Flat: a hairline and nothing under it. Hover darkens the edge instead of
   lifting the button. */
.btn-round img { display: block; }
.btn-round:hover { border-color: var(--rule-hover); background: var(--sheet-hover); }
.btn-round[aria-expanded="true"] { background: var(--hover); }

/* The add button: an ember disc whose plus turns into the cross. */
.btn-fab {
  display: block;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 10px 18px rgba(252, 53, 22, 0.32));
}

.btn-fab img {
  display: block;
  transition: transform var(--t-base) var(--ease-spring);
}

.btn-fab[aria-expanded="true"] img { transform: rotate(45deg); }

/* In the dark an orange glow is a smear around the button, and the white rim
   reads pink. There it stands on a neutral shadow, tight and deep, with the
   rim almost gone: an ember, not a lamp. */
:root[data-theme="dark"] .btn-fab {
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
}
:root[data-theme="dark"] .btn-fab img[src$="/fab.svg"] { content: url("icons/fab-dark.svg"); }

/* ============================================================
   Glass: dark menus floating over the page
   ============================================================ */

.glass {
  border: 2px solid var(--glass-edge);
  border-radius: var(--r-glass);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  color: var(--glass-ink);
}

.glass[hidden] { display: none; }

/* Opens out of the control that asked for it, and folds back into it. */
.pop {
  transform-origin: var(--pop-origin, bottom left);
  animation: pop-in var(--t-base) var(--ease-spring) both;
}

.pop.is-leaving { animation: pop-out var(--t-quick) var(--ease-in-out) both; }

@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px) scale(0.92); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes pop-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(4px) scale(0.96); }
}

.glass-menu {
  width: 213px;
  padding: 14px 0 16px;
}

.glass-menu__title {
  margin: 0 16px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.28;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glass-menu__sub {
  margin: 2px 16px 0;
  font-size: 14px;
  line-height: 1.32;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glass-menu__rule {
  height: 1px;
  margin: 14px 0 6px;
  background: rgba(255, 255, 255, 0.2);
}

.glass-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 16px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.32;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-quick) var(--ease-out);
}

.glass-menu__item:hover,
.glass-menu__item:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
.glass-menu__item img { flex: 0 0 auto; }

/* A pane's way back: the chevron and its name, quieter than an item. */
.glass-menu__back {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 8px 0;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.32;
  cursor: pointer;
}
.glass-menu__back img { transition: transform var(--t-quick) var(--ease-out); }
.glass-menu__back:hover img,
.glass-menu__back:focus-visible img { transform: translateX(-3px); }
.glass-menu__back:focus-visible { outline: none; background: rgba(255, 255, 255, 0.08); }

/* One of several: the chosen one carries a check at its end. */
.glass-menu__item[role="menuitemradio"] { justify-content: space-between; }
.glass-menu__item[aria-checked="true"]::after {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("icons/check.svg") center / contain no-repeat;
  mask: url("icons/check.svg") center / contain no-repeat;
}

/* ============================================================
   Panels and fields
   ============================================================ */

.panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px 24px 32px;
  border-radius: var(--r-panel);
  background: var(--sheet);
  box-shadow: var(--shadow-panel);
}

.panel__group { display: flex; flex-direction: column; gap: 16px; position: relative; }

.input {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 0 20px 0 24px;
  border: 1px solid var(--rule-field);
  border-radius: var(--r-field);
  background: var(--sheet);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}

.input:focus-within {
  border-color: rgba(26, 26, 26, 0.4);
  box-shadow: 0 0 0 4px rgba(248, 122, 91, 0.12);
}

.input input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  outline: none;
  background: none;
  font-family: var(--font-head);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-body);
}

.input input::placeholder { color: var(--gray-2); }
.input img { flex: 0 0 auto; }

/* Results that drop out of a field, overlapping whatever is below it. */
.dropdown {
  position: absolute;
  z-index: 5;
  left: 24px;
  right: 24px;
  max-height: 320px;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--gray-4);
  border-radius: var(--r-field);
  background: var(--sheet);
  box-shadow: var(--shadow-panel);
  transform-origin: top center;
  animation: pop-in var(--t-base) var(--ease-spring) both;
}

.dropdown[hidden] { display: none; }

/* A segmented choice: one row of buttons, the chosen one filled. */
.seg-group {
  display: flex;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-seg);
  box-shadow: 0 1px 1px rgba(10, 13, 18, 0.05);
}

.seg-group__btn {
  flex: 1 1 0;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-right: 1px solid var(--rule);
  background: var(--sheet);
  color: light-dark(#414651, #b9b7be);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}

.seg-group__btn:last-child { border-right: 0; }
.seg-group__btn--wide { flex: 0 0 91px; }
.seg-group__btn:hover { background: var(--sheet-hover); }
.seg-group__btn[aria-pressed="true"] { background: var(--hover); color: light-dark(#252b37, #ffffff); }

/* ============================================================
   Rows: sets and sections, everywhere they are listed
   ============================================================ */

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
  border-radius: var(--r-tile);
  transition: background-color var(--t-quick) var(--ease-out), opacity var(--t-base) var(--ease-out);
}

.row__lead { display: flex; align-items: center; gap: 16px; min-width: 0; }

.row__tile {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-tile);
  background: var(--tile);
}

.row__tile img { width: 22px; height: 22px; object-fit: contain; }

.row__label {
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row__grip { flex: 0 0 auto; cursor: grab; touch-action: none; }
.row__grip:active { cursor: grabbing; }

.row__end {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

button.row {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.row:hover,
button.row:focus-visible { background: var(--hover); outline: none; }

.row-group__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-muted);
}

/* A row being dragged lifts off the list; the others make room for it. */
.row.is-dragging {
  background: var(--sheet);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.3);
  z-index: 2;
  position: relative;
}

/* ============================================================
   Choosing a colour
   ============================================================ */

.swatch-row { display: flex; gap: 19px; }

.swatch-tile {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: var(--r-swatch);
  background: var(--swatch);
  box-shadow: var(--shadow-swatch);
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
}

.swatch-tile:hover { transform: translateY(-3px); }
.swatch-tile[data-color="white"] { box-shadow: var(--shadow-swatch), inset 0 0 0 1px light-dark(#e7e7e7, transparent); }
.swatch-tile[data-color="blue"] { --swatch: var(--swatch-blue); }
.swatch-tile[data-color="red"] { --swatch: var(--swatch-red); }
.swatch-tile[data-color="black"] { --swatch: var(--swatch-black); }
.swatch-tile[data-color="white"] { --swatch: var(--swatch-white); }
.swatch-tile[data-color="green"] { --swatch: var(--swatch-green); }

.swatch-tile__check {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  margin-left: -12px;
  opacity: 0;
  transform: translateY(-6px) scale(0.4);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring);
  pointer-events: none;
}

.swatch-tile[aria-pressed="true"] .swatch-tile__check { opacity: 1; transform: none; }

/* ============================================================
   Progress through a flow
   ============================================================ */

.progress {
  position: relative;
  height: 8px;
  border-radius: 9999px;
  background: light-dark(#e9eaeb, #2a2a2f);
  overflow: hidden;
}

.progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: var(--act-trail);
  transition: width var(--t-slow) var(--ease-spring);
}

/* ============================================================
   Side sheet: a white panel inset from the right edge
   ============================================================ */

.drawer { position: fixed; inset: 0; z-index: 70; }
.drawer[hidden] { display: none; }

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  animation: fade-in var(--t-base) var(--ease-out) both;
}

.drawer__panel {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: min(639px, calc(100% - 20px));
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--r-sheet);
  background: var(--sheet);
  animation: drawer-in var(--t-slow) var(--ease-spring) both;
}

.drawer.is-leaving .drawer__scrim { animation: fade-out var(--t-base) var(--ease-in-out) both; }
.drawer.is-leaving .drawer__panel { animation: drawer-out var(--t-base) var(--ease-in-out) both; }

.drawer__bar { display: flex; align-items: center; justify-content: space-between; }

.drawer__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-eyebrow);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--gray);
}

@keyframes drawer-in {
  from { transform: translateX(calc(100% + 20px)); }
  to { transform: none; }
}

@keyframes drawer-out {
  from { transform: none; }
  to { transform: translateX(calc(100% + 20px)); }
}

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

/* ============================================================
   Screen to screen
   ============================================================ */

/* Whatever is not a named shared element crossfades, with the outgoing screen
   sinking slightly and the incoming one rising into place. */
::view-transition-old(root) {
  animation: vt-sink var(--t-base) var(--ease-in-out) both;
}

::view-transition-new(root) {
  animation: vt-rise var(--t-slow) var(--ease-out) both;
}

/* The cover is the object that carries across: it moves and resizes on the
   spring, and its two snapshots are one picture so nothing crossfades. */
::view-transition-group(binder-hero) {
  animation-duration: 640ms;
  animation-timing-function: var(--ease-spring);
}

::view-transition-old(binder-hero),
::view-transition-new(binder-hero) {
  animation: none;
  mix-blend-mode: normal;
  height: 100%;
  object-fit: contain;
}

::view-transition-old(binder-hero) { display: none; }

@keyframes vt-sink { to { opacity: 0; transform: scale(0.985); } }
@keyframes vt-rise { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  .press, .btn-fab img, .swatch-tile, .swatch-tile__check, .progress__fill, .row,
  .input, .seg-group__btn { transition: none; }
  .pop, .dropdown, .drawer__scrim, .drawer__panel { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ============================================================
   A quiet way back: a chevron and a word, no button around it
   ============================================================ */

.link-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: 500 14px/1 var(--font-eyebrow);
  letter-spacing: -0.02em;
  color: var(--ink-eyebrow);
  cursor: pointer;
  transition: color var(--t-quick) var(--ease-out);
}

.link-back img { opacity: 0.55; transition: transform var(--t-base) var(--ease-spring), opacity var(--t-quick); }
.link-back:hover { color: var(--ink-body); }
.link-back:hover img { opacity: 1; transform: translateX(-3px); }
.link-back:focus-visible { outline: 2px solid var(--act-trail); outline-offset: 2px; }

/* ============================================================
   Dark: the icons drawn in black
   ============================================================ */

/* Most icons were drawn once for light controls, in black or the title ink.
   In the dark they are turned to light ink rather than redrawn; the glass
   ones were white already and are left alone. */
:root[data-theme="dark"] img[src$="/check.svg"],
:root[data-theme="dark"] img[src$="/chevron-left.svg"],
:root[data-theme="dark"] img[src$="/close-sm.svg"],
:root[data-theme="dark"] img[src$="/flip.svg"],
:root[data-theme="dark"] img[src$="/menu.svg"],
:root[data-theme="dark"] img[src$="/plus-sm.svg"],
:root[data-theme="dark"] img[src$="/plus.svg"],
:root[data-theme="dark"] img[src$="/search.svg"],
:root[data-theme="dark"] img[src$="/tuning-sm.svg"],
:root[data-theme="dark"] img[src$="/tuning.svg"] {
  filter: invert(1) brightness(0.96);
}