/* Theme "senior" — «Орден адептов», 15+.
   An alchemist's observatory at night: obsidian and deep indigo, moonlight
   text, aged-gold hairlines (1px, sometimes doubled like a book plate) and
   Cormorant Garamond display type. Violet is reserved for focus/active glow.

   Scoping: every rule is prefixed with body:where([data-tier="senior"]) —
   :where() keeps the scope but adds no specificity, so a later screen rule
   such as `.town-grid .card` can still override anything here. The landing
   preview card is scoped with body[data-tier="none"] as the brief asks.
   Cormorant 300 (used for the big display sizes) is not in index.html, so it
   is imported here; everything falls back to 400 if the import fails. */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&display=swap");

/* ---------- tokens ---------- */
body:where([data-tier="senior"]) {
  --bg: #14121F;
  --bg-elev: #241F3D;
  --bg-sunken: #1B1830;
  --ink: #E8E4F3;
  --ink-soft: #9792B0;
  --line: rgba(200, 169, 106, 0.38);
  --accent: #C8A96A;
  --accent-ink: #14121F;
  --accent-2: #A48EFF;
  --good: #86C79B;
  --bad: #E8907E;
  --warn: #E3B35B;
  --radius: 3px;
  --radius-sm: 2px;
  --shadow: none;
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  /* theme-private */
  --gold: #C8A96A;
  --gold-bright: #D9BD80;
  --gold-soft: rgba(200, 169, 106, 0.38);
  --gold-faint: rgba(200, 169, 106, 0.16);
  --glow: #8B6CFF;
  --glow-ring: 0 0 0 3px rgba(139, 108, 255, 0.28), 0 0 18px rgba(139, 108, 255, 0.35);
  --mist: #8A86A3;
  color-scheme: dark;
}

/* ---------- canvas: faint starfield ---------- */
body:where([data-tier="senior"]) {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 38% at 50% -8%, rgba(139, 108, 255, 0.14), transparent 70%),
    radial-gradient(circle at 37px 61px, rgba(232, 228, 243, 0.55) 0, rgba(232, 228, 243, 0.55) 0.7px, transparent 1.4px),
    radial-gradient(circle at 211px 143px, rgba(232, 228, 243, 0.35) 0, rgba(232, 228, 243, 0.35) 0.6px, transparent 1.3px),
    radial-gradient(circle at 349px 29px, rgba(232, 228, 243, 0.45) 0, rgba(232, 228, 243, 0.45) 0.6px, transparent 1.3px),
    radial-gradient(circle at 467px 311px, rgba(232, 228, 243, 0.3) 0, rgba(232, 228, 243, 0.3) 0.6px, transparent 1.3px),
    radial-gradient(circle at 131px 377px, rgba(232, 228, 243, 0.4) 0, rgba(232, 228, 243, 0.4) 0.6px, transparent 1.3px),
    radial-gradient(circle at 89px 233px, rgba(200, 169, 106, 0.5) 0, rgba(200, 169, 106, 0.5) 0.9px, transparent 1.8px),
    radial-gradient(circle at 503px 97px, rgba(232, 228, 243, 0.3) 0, rgba(232, 228, 243, 0.3) 0.8px, transparent 1.6px),
    radial-gradient(circle at 641px 449px, rgba(232, 228, 243, 0.42) 0, rgba(232, 228, 243, 0.42) 0.7px, transparent 1.4px),
    radial-gradient(circle at 293px 541px, rgba(232, 228, 243, 0.28) 0, rgba(232, 228, 243, 0.28) 0.6px, transparent 1.3px),
    radial-gradient(circle at 727px 199px, rgba(164, 142, 255, 0.45) 0, rgba(164, 142, 255, 0.45) 1px, transparent 2px),
    radial-gradient(circle at 173px 757px, rgba(232, 228, 243, 0.32) 0, rgba(232, 228, 243, 0.32) 1px, transparent 2px),
    radial-gradient(circle at 907px 613px, rgba(200, 169, 106, 0.4) 0, rgba(200, 169, 106, 0.4) 0.9px, transparent 1.8px);
  background-size:
    100% 720px,
    523px 419px, 523px 419px, 523px 419px, 523px 419px, 523px 419px,
    761px 613px, 761px 613px, 761px 613px, 761px 613px,
    1013px 877px, 1013px 877px, 1013px 877px;
  background-repeat:
    no-repeat,
    repeat, repeat, repeat, repeat, repeat,
    repeat, repeat, repeat, repeat,
    repeat, repeat, repeat;
  line-height: 1.55;
}
body:where([data-tier="senior"]) ::selection { background: rgba(139, 108, 255, 0.45); color: #fff; }

/* ---------- type ---------- */
body:where([data-tier="senior"]) h1,
body:where([data-tier="senior"]) h2,
body:where([data-tier="senior"]) h3,
body:where([data-tier="senior"]) h4 { font-weight: 400; letter-spacing: -0.005em; }
body:where([data-tier="senior"]) h1 { font-size: 3rem; font-weight: 300; line-height: 1.02; }
body:where([data-tier="senior"]) h2 { font-size: 2.1rem; line-height: 1.08; }
body:where([data-tier="senior"]) h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.15; }
body:where([data-tier="senior"]) .section-title { display: flex; align-items: baseline; gap: 12px; }
body:where([data-tier="senior"]) .section-title::before { content: '☿'; flex: none; font-size: 0.6em; color: var(--gold); }
body:where([data-tier="senior"]) .section-title::after { content: ''; flex: 1; height: 1px; min-width: 24px; background: var(--gold-faint); align-self: center; }
body:where([data-tier="senior"]) .section-lead { max-width: 62ch; }
body:where([data-tier="senior"]) a { text-decoration-color: var(--gold-soft); text-underline-offset: 0.15em; }
body:where([data-tier="senior"]) .link { color: var(--accent-2); padding: 11px 2px; margin: 0 -2px; } /* 44px hit area, no layout change */

/* ---------- focus: the only place violet glows ---------- */
body:where([data-tier="senior"]) :focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; box-shadow: var(--glow-ring); }
body:where([data-tier="senior"]) .skip-link:focus { background: var(--bg-elev); color: var(--ink); }

/* ---------- top bar ---------- */
body:where([data-tier="senior"]) .topbar {
  background: rgba(20, 18, 31, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gold-soft);
}
body:where([data-tier="senior"]) .brand-name { font-weight: 500; font-size: 1.6rem; color: var(--gold); letter-spacing: 0.005em; }
body:where([data-tier="senior"]) .brand-sub { color: var(--ink-soft); font-size: 0.78rem; }
body:where([data-tier="senior"]) .resource { font-weight: 500; gap: 5px; }
body:where([data-tier="senior"]) .resource-value { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
body:where([data-tier="senior"]) .resource-icon { font-size: 0.95em; opacity: 0.9; }
body:where([data-tier="senior"]) .calendar { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); }
body:where([data-tier="senior"]) .nav { gap: 2px; }
body:where([data-tier="senior"]) .nav a { color: var(--ink-soft); border-radius: 0; padding: 6px 10px 3px; border-bottom: 1px solid transparent; min-height: 44px; justify-content: center; }
body:where([data-tier="senior"]) .nav a:hover { background: transparent; color: var(--ink); }
body:where([data-tier="senior"]) .nav a.active { background: transparent; color: var(--ink); border-bottom-color: var(--gold); }
body:where([data-tier="senior"]) .nav a .nav-icon { filter: saturate(0.85); }

/* ---------- surfaces ---------- */
body:where([data-tier="senior"]) .panel { border: 1px solid var(--gold-soft); box-shadow: none; padding: 22px 24px; }
body:where([data-tier="senior"]) .card { background: var(--bg-sunken); border: 1px solid var(--gold-faint); box-shadow: none; padding: 16px 18px; }
body:where([data-tier="senior"]) .card-title { font-size: 1.45rem; font-weight: 500; line-height: 1.1; }
body:where([data-tier="senior"]) .card-icon { filter: saturate(0.9); }
body:where([data-tier="senior"]) .card.locked { opacity: 0.55; }

/* ---------- buttons ---------- */
body:where([data-tier="senior"]) .btn {
  border: 1px solid var(--gold-soft); background: transparent; color: var(--ink);
  font-weight: 500; padding: 10px 18px; min-height: 44px;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
body:where([data-tier="senior"]) .btn:hover { background: var(--gold-faint); border-color: var(--gold); }
body:where([data-tier="senior"]) .btn:active { transform: none; border-color: var(--glow); box-shadow: var(--glow-ring); }
body:where([data-tier="senior"]) .btn:disabled { opacity: 0.45; box-shadow: none; }
body:where([data-tier="senior"]) .btn-primary { background: var(--gold); border-color: var(--gold); color: var(--accent-ink); font-weight: 600; }
body:where([data-tier="senior"]) .btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); filter: none; }
body:where([data-tier="senior"]) .btn-danger { border-color: var(--bad); color: var(--bad); }
body:where([data-tier="senior"]) .btn-danger:hover { background: rgba(232, 144, 126, 0.12); border-color: var(--bad); }
body:where([data-tier="senior"]) .btn-ghost { border-color: transparent; color: var(--ink-soft); }
body:where([data-tier="senior"]) .btn-ghost:hover { background: var(--gold-faint); border-color: transparent; color: var(--ink); }
body:where([data-tier="senior"]) .btn-big { font-size: 1.08rem; padding: 14px 28px; }
body:where([data-tier="senior"]) .btn-choice { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; padding: 10px 14px; min-height: 58px; font-variant-numeric: lining-nums; }
body:where([data-tier="senior"]) .btn-choice.is-right { background: var(--good); border-color: var(--good); color: var(--accent-ink); }
body:where([data-tier="senior"]) .btn-choice.is-wrong { background: var(--bad); border-color: var(--bad); color: var(--accent-ink); }
body:where([data-tier="senior"]) .btn-stat { padding: 18px 16px; }
body:where([data-tier="senior"]) .btn-stat small { color: var(--ink-soft); }

/* ---------- inputs ---------- */
body:where([data-tier="senior"]) .input,
body:where([data-tier="senior"]) .task-input { border: 1px solid var(--gold-soft); background: var(--bg); color: var(--ink); padding: 11px 14px; min-height: 44px; }
body:where([data-tier="senior"]) .input::placeholder,
body:where([data-tier="senior"]) .task-input::placeholder { color: var(--mist); opacity: 1; }
body:where([data-tier="senior"]) .input:focus,
body:where([data-tier="senior"]) .task-input:focus { outline: none; border-color: var(--glow); box-shadow: var(--glow-ring); }
body:where([data-tier="senior"]) .task-input { font-family: var(--font-display); font-size: 1.9rem; font-weight: 500; padding: 4px 14px; font-variant-numeric: lining-nums; }
body:where([data-tier="senior"]) label { font-weight: 500; }
body:where([data-tier="senior"]) .portrait { border: 1px solid var(--gold-soft); background: var(--bg); color: var(--gold); }
body:where([data-tier="senior"]) .portrait[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-faint); }

/* ---------- progress, tags ---------- */
body:where([data-tier="senior"]) .progress { height: 6px; background: var(--bg); border: 1px solid var(--gold-faint); border-radius: 1px; }
body:where([data-tier="senior"]) .progress-fill { border-radius: 0; background: var(--accent-2); }
body:where([data-tier="senior"]) .progress.xp .progress-fill { background: var(--gold); }
body:where([data-tier="senior"]) .progress.hp .progress-fill { background: var(--bad); }
body:where([data-tier="senior"]) .progress.mana .progress-fill { background: var(--glow); }
body:where([data-tier="senior"]) .tag { background: transparent; border: 1px solid var(--gold-soft); color: var(--ink-soft); font-weight: 500; border-radius: 2px; padding: 2px 8px; }
body:where([data-tier="senior"]) .tag.good { background: rgba(134, 199, 155, 0.14); border-color: var(--good); color: var(--good); }
body:where([data-tier="senior"]) .tag.bad { background: rgba(232, 144, 126, 0.14); border-color: var(--bad); color: var(--bad); }
body:where([data-tier="senior"]) .tag.warn { background: rgba(227, 179, 91, 0.14); border-color: var(--warn); color: var(--warn); }

/* ---------- modal: a framed plate ---------- */
body:where([data-tier="senior"]) .overlay { background: rgba(9, 7, 18, 0.74); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body:where([data-tier="senior"]) .modal {
  border: 1px solid var(--gold-soft);
  padding: 26px 28px;
  box-shadow: inset 0 0 0 5px var(--bg-elev), inset 0 0 0 6px var(--gold-faint), 0 30px 80px rgba(0, 0, 0, 0.6);
}
body:where([data-tier="senior"]) .modal-title { font-size: 2rem; font-weight: 400; display: flex; align-items: baseline; gap: 10px; margin-bottom: 0.5em; }
body:where([data-tier="senior"]) .modal-title::before { content: '♄'; flex: none; font-size: 0.55em; color: var(--gold); }
body:where([data-tier="senior"]) .modal-close { color: var(--ink-soft); top: 10px; right: 10px; }
body:where([data-tier="senior"]) .modal-close:hover { color: var(--ink); }
body:where([data-tier="senior"]) .modal-buttons { border-top: 1px solid var(--gold-faint); padding-top: 16px; margin-top: 22px; }

/* ---------- task prompt ---------- */
body:where([data-tier="senior"]) .task-title { font-weight: 500; font-size: 1.5rem; color: var(--gold); line-height: 1.1; }
body:where([data-tier="senior"]) .task-title::before { content: '🜂 '; font-size: 0.7em; }
body:where([data-tier="senior"]) .task-context { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
body:where([data-tier="senior"]) .task-timer { height: 2px; background: var(--gold-faint); border-radius: 0; margin-bottom: 20px; }
body:where([data-tier="senior"]) .task-timer-fill { background: var(--gold); }
body:where([data-tier="senior"]) .task-question { font-family: var(--font-display); font-size: 2rem; font-weight: 500; line-height: 1.25; margin: 10px 0 22px; font-variant-numeric: lining-nums; }
body:where([data-tier="senior"]) .task-question table { font-family: var(--font-body); font-size: 1rem; font-weight: 400; }
body:where([data-tier="senior"]) .task-question td,
body:where([data-tier="senior"]) .task-question th { border-color: var(--gold-soft); padding: 5px 12px; }
body:where([data-tier="senior"]) .task-hint { background: var(--bg-sunken); border-left: 2px solid var(--gold); border-radius: 0; padding: 10px 14px; }
body:where([data-tier="senior"]) .task-feedback { border-top: 1px solid var(--gold-soft); margin-top: 18px; padding-top: 16px; }
body:where([data-tier="senior"]) .task-verdict { font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; line-height: 1.1; }
body:where([data-tier="senior"]) .task-explain { color: var(--ink-soft); }

/* ---------- lesson ---------- */
body:where([data-tier="senior"]) .lesson-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--gold-faint); }
body:where([data-tier="senior"]) .lesson-icon { font-size: 2.2rem; line-height: 1; }
body:where([data-tier="senior"]) .lesson-spell { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; color: var(--gold); line-height: 1.1; }
body:where([data-tier="senior"]) .lesson-text { max-width: 64ch; line-height: 1.6; }
body:where([data-tier="senior"]) .lesson-text b { color: var(--ink); font-weight: 600; }
body:where([data-tier="senior"]) .lesson-examples { margin-top: 18px; }
body:where([data-tier="senior"]) .lesson-examples h3 { font-size: 1.35rem; margin-bottom: 0.2em; }
body:where([data-tier="senior"]) .lesson-examples ul { list-style: none; margin: 0; padding: 0; }
body:where([data-tier="senior"]) .lesson-examples li { padding: 8px 0; border-top: 1px solid var(--gold-faint); font-family: var(--font-display); font-size: 1.4rem; font-variant-numeric: lining-nums; }
body:where([data-tier="senior"]) .lesson-examples li b { font-weight: 600; }

/* ---------- toasts ---------- */
body:where([data-tier="senior"]) .toast { background: var(--bg-elev); color: var(--ink); border: 1px solid var(--gold-soft); font-weight: 500; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
body:where([data-tier="senior"]) .toast-success { background: var(--bg-elev); color: var(--ink); border-color: var(--good); }
body:where([data-tier="senior"]) .toast-error { background: var(--bg-elev); color: var(--ink); border-color: var(--bad); }

/* ---------- landing seen by a senior hero ---------- */
body:where([data-tier="senior"]) .hero-banner { padding: 56px 0 36px; }
body:where([data-tier="senior"]) .hero-kicker { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--ink-soft); }
body:where([data-tier="senior"]) .hero-title { font-weight: 300; letter-spacing: -0.015em; line-height: 0.95; }
body:where([data-tier="senior"]) .hero-title .semi { color: var(--gold); }
body:where([data-tier="senior"]) .hero-lead { font-size: 1.1rem; }
body:where([data-tier="senior"]) .tier-card { border: 1px solid var(--gold-faint); }
body:where([data-tier="senior"]) .tier-ages { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.15rem; color: var(--gold); }
body:where([data-tier="senior"]) .tier-title { font-size: 1.9rem; }
body:where([data-tier="senior"]) .how-step h3 { font-size: 1.4rem; }
body:where([data-tier="senior"]) .site-footer { border-top: 1px solid var(--gold-faint); padding-top: 18px; }

/* ---------- landing preview card (body is still untiered) ---------- */
body[data-tier="none"] .tier-card[data-tier="senior"],
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] {
  color: #E8E4F3;
  background-color: #14121F;
  background-image:
    radial-gradient(ellipse 90% 45% at 50% -10%, rgba(139, 108, 255, 0.18), transparent 70%),
    radial-gradient(circle at 23px 41px, rgba(232, 228, 243, 0.55) 0, rgba(232, 228, 243, 0.55) 0.7px, transparent 1.4px),
    radial-gradient(circle at 151px 97px, rgba(232, 228, 243, 0.35) 0, rgba(232, 228, 243, 0.35) 0.6px, transparent 1.3px),
    radial-gradient(circle at 239px 19px, rgba(232, 228, 243, 0.45) 0, rgba(232, 228, 243, 0.45) 0.6px, transparent 1.3px),
    radial-gradient(circle at 67px 173px, rgba(200, 169, 106, 0.5) 0, rgba(200, 169, 106, 0.5) 0.9px, transparent 1.8px),
    radial-gradient(circle at 197px 211px, rgba(232, 228, 243, 0.3) 0, rgba(232, 228, 243, 0.3) 0.7px, transparent 1.4px),
    radial-gradient(circle at 311px 139px, rgba(164, 142, 255, 0.45) 0, rgba(164, 142, 255, 0.45) 1px, transparent 2px);
  background-size: 100% 100%, 331px 263px, 331px 263px, 331px 263px, 331px 263px, 331px 263px, 331px 263px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat;
  border: 1px solid rgba(200, 169, 106, 0.55);
  border-radius: 3px;
  box-shadow: inset 0 0 0 5px #14121F, inset 0 0 0 6px rgba(200, 169, 106, 0.22);
  padding: 28px 26px 26px;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.55;
}
body[data-tier="none"] .tier-card[data-tier="senior"] .tier-ages,
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] .tier-ages { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: 1.2rem; color: #C8A96A; }
body[data-tier="none"] .tier-card[data-tier="senior"] .tier-title,
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] .tier-title { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 2.3rem; line-height: 1.02; letter-spacing: -0.01em; color: #E8E4F3; margin-bottom: 0.15em; }
body[data-tier="none"] .tier-card[data-tier="senior"] .tier-blurb,
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] .tier-blurb { color: #E8E4F3; }
body[data-tier="none"] .tier-card[data-tier="senior"] .tier-list,
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] .tier-list { list-style: none; padding: 0; color: #B3AFC8; }
body[data-tier="none"] .tier-card[data-tier="senior"] .tier-list li,
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] .tier-list li { position: relative; padding-left: 1.5em; margin-bottom: 4px; }
body[data-tier="none"] .tier-card[data-tier="senior"] .tier-list li::before,
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] .tier-list li::before { content: '☿'; position: absolute; left: 0.1em; top: 0; color: #C8A96A; }
body[data-tier="none"] .tier-card[data-tier="senior"] .tier-list li:nth-child(2)::before,
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] .tier-list li:nth-child(2)::before { content: '♄'; }
body[data-tier="none"] .tier-card[data-tier="senior"] .tier-list li:nth-child(3)::before,
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] .tier-list li:nth-child(3)::before { content: '☉'; }
body[data-tier="none"] .tier-card[data-tier="senior"] .btn,
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] .btn { background: #C8A96A; border: 1px solid #C8A96A; color: #14121F; border-radius: 2px; font-weight: 600; min-height: 44px; padding: 10px 22px; }
body[data-tier="none"] .tier-card[data-tier="senior"] .btn:hover,
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] .btn:hover { background: #D9BD80; border-color: #D9BD80; filter: none; }
body[data-tier="none"] .tier-card[data-tier="senior"] .btn:focus-visible,
body:where([data-tier="senior"]) .tier-card[data-tier="senior"] .btn:focus-visible { outline: 2px solid #8B6CFF; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(139, 108, 255, 0.28), 0 0 18px rgba(139, 108, 255, 0.35); }

/* ---------- small screens ---------- */
@media (max-width: 720px) {
  body:where([data-tier="senior"]) h1 { font-size: 2.5rem; }
  body:where([data-tier="senior"]) h2 { font-size: 1.8rem; }
  body:where([data-tier="senior"]) .panel { padding: 18px 16px; }
  body:where([data-tier="senior"]) .modal { padding: 22px 18px; }
  body:where([data-tier="senior"]) .modal-title { font-size: 1.75rem; }
  body:where([data-tier="senior"]) .task-question { font-size: 1.7rem; }
  body:where([data-tier="senior"]) .btn-choice { font-size: 1.4rem; }
  body:where([data-tier="senior"]) .task-input { font-size: 1.6rem; }
  body:where([data-tier="senior"]) .hero-banner { padding: 36px 0 24px; }
  body:where([data-tier="senior"]) .nav a { padding: 4px 8px 2px; }
  body[data-tier="none"] .tier-card[data-tier="senior"],
  body:where([data-tier="senior"]) .tier-card[data-tier="senior"] { padding: 24px 20px 22px; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body:where([data-tier="senior"]) .topbar,
  body:where([data-tier="senior"]) .overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
}