/* ─────────────────────────────────────────────────────────────────
   Robert Walters · Resume Studio — Design Tokens
   RW charcoal + white + pink-red accent. Dark by default.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Palette — Robert Walters dark shell (default) */
  --bg:            #242424;
  --bg-elev:       #2C2C2C;
  --bg-inset:      #1C1C1C;
  --ink:           #FFFFFF;
  --ink-2:         #F4F4F4;
  --ink-muted:     #D0D0D0;
  --ink-faint:     #9C9C9C;
  --rule:          #FFFFFF;
  --hairline:      rgba(255,255,255,.10);
  --hairline-2:    rgba(255,255,255,.18);

  --accent:        #FF4B67;
  --accent-ink:    #FF6D84;
  --gold:          #F0C36B;
  --seafoam:       #86D1C2;
  --danger:        #FF7B72;
  --surface-strong:   #252525;
  --surface-strong-2: #303030;

  /* Fonts */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "Menlo", "Consolas", monospace;

  /* Motion */
  --e-out: cubic-bezier(.2,.7,.2,1);
  --e-in:  cubic-bezier(.6,.05,.8,.3);
  --rw-logo-height: 64px;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:            #F6F4F1;
  --bg-elev:       #FFFFFF;
  --bg-inset:      #ECE8E1;
  --ink:           #252525;
  --ink-2:         #3A3A3A;
  --ink-muted:     #6C6C6C;
  --ink-faint:     #9D9D9D;
  --rule:          #252525;
  --hairline:      rgba(37,37,37,.10);
  --hairline-2:    rgba(37,37,37,.18);

  --accent:        #FF4B67;
  --accent-ink:    #E83E5D;
  --gold:          #C69D47;
  --seafoam:       #45897B;
  --danger:        #C94D46;
  --surface-strong:   #252525;
  --surface-strong-2: #303030;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  transition: background .5s var(--e-out), color .5s var(--e-out);
}

html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition-duration: .9s !important;
  transition-timing-function: var(--e-out) !important;
  transition-property:
    background,
    background-color,
    border-color,
    box-shadow,
    color,
    fill,
    filter,
    opacity,
    outline-color,
    stroke,
    text-shadow !important;
}

html.theme-switching body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  background: var(--theme-wash);
  animation: themeWash .96s var(--e-out) both;
  mix-blend-mode: normal;
}

html.theme-switching .nav,
html.theme-switching .nav *,
html.theme-switching .nav *::before,
html.theme-switching .nav *::after,
html.theme-switching .nav::before,
html.theme-switching .nav::after {
  transition: none !important;
}

html.theme-to-light { --theme-wash: #F6F4F1; }
html.theme-to-dark { --theme-wash: #242424; }

@keyframes themeWash {
  0% {
    opacity: .24;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-switching,
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

::selection { background: var(--accent); color: var(--bg); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(48px, 7vw, 96px); line-height: 1.02; letter-spacing: -.05em; }
h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.06; letter-spacing: -.04em; }
h3 { font-size: 28px; line-height: 1.15; }
h4 { font-size: 20px; line-height: 1.25; }

p { margin: 0 0 1em; color: var(--ink-muted); }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline-2); transition: border-color .2s; }
a:hover { border-color: var(--accent); }

.mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

/* ── Shell ──────────────────────────────────────────────────────── */
.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.container-tight { max-width: 960px; }
.container-wide  { max-width: 1440px; }

/* ── Top nav ────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  background: #252525;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.7);
}
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #ff4b67 18%, #ff4b67 82%, transparent 100%);
  opacity: 1;
}
.nav-inner {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 20px;
  /* Navbar option A (8 Nov 2026): ONE row on desktop — logo | links | language, theme, account avatar. The
     links wrap among themselves inside the middle column if they must; the right-hand cluster never drops to a
     second line under the logo (it used to: the username and Sign out landed at the left edge, and with no
     padding the logo touched the top of the bar). The username and Sign out live in the avatar menu. */
  flex-wrap: nowrap;
  /* top / bottom only: the element is also .container, whose side padding is the page gutter */
  padding-top: 16px;
  padding-bottom: 16px;
}
/* Nav gets a wider container than page content so the admin link set
   normally stays on one line on desktop before the wrap kicks in. */
.nav .container { max-width: 1440px; }
.brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 0;
}
.brand-logo {
  display: block;
  height: var(--rw-logo-height);
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.brand::before {
  content: "";
  width: 5px;
  height: var(--rw-logo-height);
  border-radius: 999px;
  background: #ff4b67;
  box-shadow: 0 0 0 7px rgba(255,75,103,.08);
}
.brand-logo .bl-line { display: block; white-space: nowrap; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--ink-muted);
}
.brand-word em {
  font-style: italic;
  color: var(--ink-muted);
  font-weight: 400;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 0;
  gap: 8px;
  font-size: 14px;
}
.nav-links a,
.nav-menu-trigger {
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.65);
  font-weight: 600;
  /* 14px / 14px side padding (option A): Studio's widest bar (finder links + Admin) fits one row from 1366px */
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .2s, background .2s, border-color .2s;
}
.nav-links a:hover,
.nav-menu-trigger:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.3);
}
.nav-links a[aria-current="page"],
.nav-menu-trigger[aria-current="page"] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.nav-menu {
  position: relative;
  flex-shrink: 0;
}
.nav-menu-trigger {
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.nav-menu-trigger::-webkit-details-marker { display: none; }
/* People waiting in Admin › Users (Ted, 11 Nov 2026: a new Microsoft sign-in waits for approval). */
.nav-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.nav-menu-trigger[aria-current="page"] .nav-count { background: #fff; color: var(--accent); }
.nav-menu-panel a .nav-count { margin-left: auto; }
.nav-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 60;
  min-width: 180px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: #252525;
  box-shadow: 0 18px 38px -22px rgba(0,0,0,.82);
}
.nav-menu:not([open]) .nav-menu-panel { display: none; }
.nav-menu:hover .nav-menu-panel,
.nav-menu:focus-within .nav-menu-panel {
  display: block;
}
.nav-menu-panel a {
  display: flex;
  width: 100%;
  border-radius: 8px;
  border-color: transparent;
  padding: 9px 12px;
}
.nav-menu-panel a + a { margin-top: 2px; }
.nav-menu-panel a[aria-current="page"] {
  background: rgba(255,75,103,.18);
  border-color: rgba(255,75,103,.38);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Theme toggle */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all .3s var(--e-out);
}
/* Keep the language toggle (fixed-width segmented control) from being
   compressed by the flex row. */
.nav-right .lang-seg { flex-shrink: 0; }
.theme-toggle:hover {
  border-color: #ff4b67;
  color: #ff4b67;
  transform: rotate(20deg);
}
.theme-toggle svg { width: 16px; height: 16px; }

/* Account menu (lives in .nav-right, only when authenticated): the avatar opens the username and Sign out. */
.account-menu { position: relative; flex-shrink: 0; }
.account-trigger {
  list-style: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  user-select: none;
  background: rgba(255,75,103,.16);
  border: 1px solid rgba(255,75,103,.32);
  color: #ffb3bf;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: border-color .2s, background .2s;
}
.account-trigger::-webkit-details-marker { display: none; }
.account-trigger:hover,
.account-menu[open] .account-trigger { border-color: #ff4b67; background: rgba(255,75,103,.26); }
.account-trigger:focus-visible { outline: 2px solid #ff4b67; outline-offset: 2px; }
.account-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: max-content;
  min-width: 220px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 12px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: #252525;
  box-shadow: 0 18px 38px -22px rgba(0,0,0,.82);
}
.account-menu:not([open]) .account-panel { display: none; }
/* Admin in the profile menu (13 Nov 2026, Ted: "relocate the admin link to the user profile menu"): the people waiting
   for approval show as a count on the avatar, and the avatar is ringed on an admin page. */
.account-trigger { position: relative; }
.account-trigger.is-admin-page { border-color: #ff4b67; box-shadow: 0 0 0 3px rgba(255,75,103,.18); }
.account-count {
  position: absolute; top: -5px; right: -7px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ff4b67; color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  border: 2px solid #252525;
}
.account-panel { max-height: min(78vh, 640px); overflow-y: auto; }
.account-admin { display: flex; flex-direction: column; padding: 6px 0 4px; border-bottom: 1px solid rgba(255,255,255,.1); }
.account-section {
  padding: 10px 10px 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.account-admin a {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; border: 1px solid transparent;
  color: rgba(255,255,255,.8); font-size: 13.5px; font-weight: 500; white-space: nowrap;
}
.account-admin a:hover { background: rgba(255,255,255,.07); color: #fff; }
.account-admin a[aria-current="page"] { background: rgba(255,75,103,.16); border-color: rgba(255,75,103,.32); color: #fff; }
.account-admin a .nav-count { margin-left: auto; }
.logout-user {
  font-size: 12px;
  color: rgba(255,255,255,.72);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  padding: 2px 4px 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.logout-form { margin: 10px 0 0; }
.logout-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  color: #ffb3bf;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.logout-btn:hover {
  background: rgba(255,75,103,.14);
  border-color: rgba(255,75,103,.3);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s var(--e-out);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--surface-strong);
  color: #fff;
}
.btn-primary:hover { background: var(--surface-strong-2); box-shadow: 0 10px 24px -12px rgba(0,0,0,.55); }
.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover { background: var(--accent-ink); color: #fff; }
.btn:disabled, .btn[disabled] {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-ghost {
  border-color: var(--hairline-2);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--accent); background: rgba(255,255,255,.03); }
.btn-lg { padding: 16px 30px; font-size: 15px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-icon { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
.btn-icon:hover { color: var(--accent); border-color: var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }

.nav .btn-primary {
  background: #ff4b67;
  color: #fff;
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 24px -16px rgba(255,75,103,.75);
}
.nav .btn-primary:hover {
  background: #ff4967;
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 14px 28px -14px rgba(255,73,103,.85);
}

[data-theme="dark"] .nav .btn-primary {
  background: #ff4b67;
  color: #fff;
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 14px 30px -16px rgba(255,75,103,.9);
}
[data-theme="dark"] .nav .btn-primary:hover {
  background: #ff5a73;
  border-color: rgba(255,255,255,.34);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 18px 34px -16px rgba(255,75,103,.95);
}
.nav .btn-ghost {
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.nav .btn-ghost:hover {
  border-color: #ff4b67;
  color: #fff;
  background: rgba(255,255,255,.04);
}

/* Navbar option B (13 Nov 2026: "it must fit all the buttons" — "GO ahead with B, but do not drop anything"). On a
   desktop the bar is TWO tiers: a slim top row (logo | language, theme, account) and under it a full-width TAB STRIP
   holding every link — nothing hidden, nothing moved into a menu — with Admin (and its waiting count) at the right
   end. The one-row pill bar needed ~1075px for Studio's widest set and wrapped at every desktop width. The current
   page is underlined in the brand red. The phone layout (≤820px) is unchanged. */
@media (min-width: 821px) {
  :root { --rw-logo-height: 44px; }
  .nav-inner {
    flex-wrap: wrap;
    min-height: 0;
    row-gap: 0;
    padding-top: 12px;
    padding-bottom: 0;
  }
  .brand { gap: 14px; }
  .brand::before { box-shadow: 0 0 0 5px rgba(255,75,103,.08); }
  .nav-right { margin-left: auto; }
  .nav-links {
    order: 3;
    flex: 1 1 100%;
    justify-content: flex-start;
    gap: 2px 4px;
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .nav-links:not(:has(a, details)) { display: none; }
  .nav-links > a,
  .nav-links > .nav-menu > .nav-menu-trigger {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    padding: 13px 12px 12px;
    font-size: 14px;
    color: rgba(255,255,255,.62);
  }
  .nav-links > a:hover,
  .nav-links > .nav-menu > .nav-menu-trigger:hover {
    background: transparent;
    color: #fff;
    border-bottom-color: rgba(255,255,255,.28);
  }
  /* The current page: a soft red tab standing on the bar's red bottom line (an underline alone vanished into it). */
  .nav-links > a[aria-current="page"],
  .nav-links > .nav-menu > .nav-menu-trigger[aria-current="page"] {
    background: rgba(255,75,103,.16);
    color: #fff;
    border-radius: 8px 8px 0 0;
    border-bottom-color: #ff4b67;
  }
}
/* A narrow laptop / tablet: the same strip, tighter, so every link still fits on one line down to ~1000px. */
@media (min-width: 821px) and (max-width: 1200px) {
  .nav-links { gap: 2px; }
  .nav-links > a,
  .nav-links > .nav-menu > .nav-menu-trigger { padding: 12px 9px 11px; font-size: 13px; }
}

@media (max-width: 820px) {
  :root {
    --rw-logo-height: 48px;
  }

  .nav-inner {
    height: auto;
    min-height: 92px;
    padding: 16px 20px;          /* keep a gutter on phones: the logo and the avatar touched the screen edges */
    flex-wrap: wrap;
  }
  .nav-links {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 18px;
  }
  .nav-menu-panel {
    left: 0;
    right: auto;
  }
  .nav-right {
    margin-left: auto;
  }
}

/* ── Cards / panels ─────────────────────────────────────────────── */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 28px;
}
.card-flat {
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 24px;
}
.hairline { height: 1px; background: var(--hairline); border: 0; margin: 24px 0; }

/* ── Ambient background: grain + radial bloom ─────────────────── */
.ambient {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(55% 38% at 82% 0%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(42% 56% at 0% 100%, color-mix(in oklab, var(--gold) 14%, transparent), transparent 68%),
    linear-gradient(180deg, #262626 0%, #242424 50%, #1f1f1f 100%);
  opacity: .9;
  transition: opacity .6s var(--e-out);
}
[data-theme="light"] .ambient {
  background:
    radial-gradient(48% 36% at 84% 0%, rgba(255,75,103,.14), transparent 62%),
    radial-gradient(42% 52% at 0% 100%, rgba(198,157,71,.10), transparent 68%),
    linear-gradient(180deg, #fbfbfa 0%, #f6f4f1 52%, #efede8 100%);
  opacity: 1;
}
.grain {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .26;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.18 0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-theme="light"] .grain { mix-blend-mode: multiply; opacity: .35; }

/* Particles canvas */
#particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; }

/* ── Footer ─────────────────────────────────────────────────────── */
.footer {
  margin-top: auto;
  border-top: 1px solid var(--hairline);
  padding: 40px 0 60px;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── Form controls ──────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.input, .textarea, .select {
  font: inherit;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--hairline-2);
  border-radius: 8px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent);
}
.textarea { min-height: 100px; resize: vertical; line-height: 1.55; }

/* ── Badges ─────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--hairline-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
}
.tag-accent { color: var(--accent-ink); border-color: color-mix(in oklab, var(--accent) 50%, transparent); }
.tag-ok     { color: var(--seafoam); border-color: color-mix(in oklab, var(--seafoam) 50%, transparent); }
.tag-gold   { color: var(--gold); border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.tag-filled { background: var(--surface-strong); color: #fff; border-color: var(--surface-strong); }

/* ── Progress steps ─────────────────────────────────────────────── */
.steps {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: var(--bg-elev);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  margin-bottom: 40px;
}
.steps .step {
  flex: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--ink);
  padding: 16px 12px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: background .35s var(--e-out), color .35s var(--e-out), transform .35s var(--e-out);
}
.steps .step::before {
  content: attr(data-n);
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--accent);
}
.steps .step.active {
  border-color: var(--surface-strong);
  background: var(--surface-strong);
  color: #fff;
  box-shadow: none;
}
.steps .step.active::before {
  color: var(--accent);
}
[data-theme="dark"] .steps .step.active {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, var(--bg));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent);
}
.steps .step.done {
  color: color-mix(in oklab, var(--ink) 86%, transparent);
}
.steps .step.done::before {
  content: attr(data-n);
  color: var(--accent);
}
.steps .sep {
  display: none;
}
@media (max-width: 760px) {
  .steps {
    display: grid;
    grid-template-columns: 1fr;
    padding: 24px;
  }
}

/* ── Reveal animation primitives ───────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--e-out), transform .9s var(--e-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-l { opacity: 0; transform: translateX(-32px); transition: opacity .9s var(--e-out), transform .9s var(--e-out); }
.reveal-l.in { opacity: 1; transform: translateX(0); }
.reveal-r { opacity: 0; transform: translateX(32px); transition: opacity .9s var(--e-out), transform .9s var(--e-out); }
.reveal-r.in { opacity: 1; transform: translateX(0); }

/* Stagger children */
.stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--e-out), transform .7s var(--e-out);
}
.stagger.in > * { opacity: 1; transform: translateY(0); }
.stagger.in > *:nth-child(1) { transition-delay: .05s; }
.stagger.in > *:nth-child(2) { transition-delay: .12s; }
.stagger.in > *:nth-child(3) { transition-delay: .19s; }
.stagger.in > *:nth-child(4) { transition-delay: .26s; }
.stagger.in > *:nth-child(5) { transition-delay: .33s; }
.stagger.in > *:nth-child(6) { transition-delay: .40s; }
.stagger.in > *:nth-child(7) { transition-delay: .47s; }
.stagger.in > *:nth-child(8) { transition-delay: .54s; }

/* ── Section heading helper ─────────────────────────────────────── */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 40px;
}

/* ── Flash messages ─────────────────────────────────────────────── */
.flash-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
}
.flash {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--hairline-2);
  background: var(--bg-elev);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.flash.success { border-color: color-mix(in oklab, var(--seafoam) 50%, transparent); color: var(--seafoam); }
.flash.danger  { border-color: color-mix(in oklab, var(--danger)  50%, transparent); color: var(--danger); }
.flash.warning { border-color: color-mix(in oklab, var(--gold)    50%, transparent); color: var(--gold); }
.flash.info    { border-color: var(--hairline-2); color: var(--ink-muted); }
.flash .close {
  background: transparent; border: 0; color: currentColor;
  cursor: pointer; font: inherit; font-size: 18px; line-height: 1; padding: 0 4px;
}

/* Fine utility */
.sr-only { position: absolute; left: -9999px; }
.row { display: flex; gap: 24px; flex-wrap: wrap; }
.col { flex: 1; min-width: 0; }
.mt-xs { margin-top: 8px; }
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 32px; }
.mt-l { margin-top: 64px; }
.mt-xl { margin-top: 120px; }
.mb-s { margin-bottom: 16px; }
.mb-m { margin-bottom: 32px; }
.mb-l { margin-bottom: 64px; }
.mb-xl { margin-bottom: 120px; }
.text-center { text-align: center; }
.text-muted { color: var(--ink-muted); }
.text-faint { color: var(--ink-faint); }

/* ── Custom confirm dialog ─────────────────────────────────────────────── */
.rw-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rw-confirm {
  background: var(--bg-elev);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  padding: 24px 24px 20px;
  max-width: 420px;
  width: 100%;
}
[data-theme="light"] .rw-confirm {
  border-color: rgba(0, 0, 0, .08);
}
.rw-confirm-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
}
.rw-confirm-msg {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0 0 20px;
}
.rw-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}