/* astrite.app redesign - styles
   Near-black charcoal surfaces, warm off-white text, one antique-gold accent.
   Colour beyond gold only where the data has a real category (Tide types, timeline kinds)
   or a real negative state. Every category also carries a text label or shape. */

:root {
  /* surfaces */
  --bg: #030304;            /* page */
  --panel: #0a0a0a;         /* card */
  --panel-2: #0e0e0e;       /* inset surface */
  --section: hsl(240, 7%, 5%); /* drawer sections */
  --raised: #1a1917;
  --line: rgba(255, 255, 255, 0.10);   /* card hairline */
  --line-soft: rgba(255, 255, 255, 0.065); /* main container outline (v1.2.7: softer) */
  --line-2: rgba(255, 255, 255, 0.20); /* group / control border */
  --line-3: rgba(255, 255, 255, 0.05); /* inner divider */
  /* text */
  --text: #eeeae2;
  --text-2: #c9c4b8;
  --muted: #837f78;         /* v1.2.7: a little darker (still AA on cards) */
  /* brand */
  --gold: #ba975c;                         /* --main */
  --gold-hi: #cfae72;
  --gold-lo: rgba(186, 151, 92, 0.15);     /* selected fill  (main/15) */
  --gold-line: rgba(186, 151, 92, 0.30);   /* selected edge  */
  /* semantic */
  --danger: #ff6467;
  --danger-line: rgba(255, 100, 103, 0.45);
  --danger-bg: rgba(255, 100, 103, 0.09);
  --focus: #d0b16e;
  /* live-data cues: electric cyan for "this just changed", sage for gains */
  --cyan: #5cc8e0;
  --cyan-lo: rgba(92, 200, 224, 0.12);
  --cyan-line: rgba(92, 200, 224, 0.42);
  --up: #61ba5c;
  --up-bg: rgba(97, 186, 92, 0.12);
  --up-line: rgba(97, 186, 92, 0.45);
  --glass-edge: rgba(255, 255, 255, 0.05);
  /* category colours (names kept: the JS draws the composition bar with them) */
  --lustrous: #6fa8b8;   /* Standard */
  --radiant: #d6a04f;    /* Limited Character */
  --forging: #9c8bc9;    /* Limited Weapon */
  --flex: #8fb39a;       /* Afterglow / flexible */
  /* timeline kinds: always paired with a label and a shape */
  --c-event: #6fa8b8;
  --c-banner: #d6a04f;
  --c-patch: #9c8bc9;
  --c-custom: #8fb39a;
  --c-endgame: #e0866a;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 0;                    /* tool surfaces are square */
  /* motion vocabulary (audit §14) */
  --dur-fast: 100ms;
  --dur-base: 200ms;
  --dur-hover: 300ms;
  --dur-media: 500ms;
  --ease-ui: ease-in-out;
  --nav-h: 5.5rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Atmosphere at the top of the page only, masked like the audit's hero poster (32% -> 68%).
   Layer 1 (v1.2.4): the catalog's current patch splash (html.site-art-patch, --site-art set by ui.js applySiteArt).
   Darkened and softened so text stays readable; it fades in once chosen, so the wrong image never flashes. When it
   can't load (html.site-art-fallback) there is no image: the bundled key art was removed, so only the glow shows.
   Layer 2: the gold glow. If no image loads the glow still renders. */
body::before, body::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56rem; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(#000 32%, transparent 68%); mask-image: linear-gradient(#000 32%, transparent 68%); }
body::before {
  opacity: 0; filter: blur(1.5px) saturate(0.85);        /* no scale(): it would widen the page by a few px */
  transition: opacity 0.6s var(--ease);
}
html.site-art-patch body::before {
  background:
    linear-gradient(90deg, rgba(3, 3, 4, 0.15) calc(50% - 640px), rgba(3, 3, 4, 0.62) calc(50% - 470px), rgba(3, 3, 4, 0.62) calc(50% + 470px), rgba(3, 3, 4, 0.15) calc(50% + 640px)),
    linear-gradient(180deg, rgba(3, 3, 4, 0.84) 0, rgba(3, 3, 4, 0.72) 7rem, rgba(3, 3, 4, 0.48) 17rem, rgba(3, 3, 4, 0.6) 45%, var(--bg) 100%),
    var(--site-art) center 30% / cover no-repeat;
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) { body::before { transition: none; } }
@media (forced-colors: active) { body::before { display: none; } }
body::after {
  background:
    radial-gradient(52rem 24rem at 14% -4rem, rgba(186, 151, 92, 0.16), transparent 70%),
    radial-gradient(40rem 22rem at 96% 2rem, rgba(224, 175, 242, 0.05), transparent 70%);
}
@media (max-width: 800px) {
  html.site-art-patch body::before { background: linear-gradient(180deg, rgba(3, 3, 4, 0.86) 0, rgba(3, 3, 4, 0.76) 7rem, rgba(3, 3, 4, 0.56) 17rem, rgba(3, 3, 4, 0.68) 45%, var(--bg) 100%), var(--site-art) center 30% / cover no-repeat; }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--sans);
}
.wrap { width: min(1080px, 100% - 2rem); margin-inline: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
p { margin: 0; }
a { color: var(--gold-hi); }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 0.5rem; top: -4rem; background: var(--gold); color: #0b0a08; padding: 0.5rem 0.75rem; border-radius: var(--r); z-index: 100; font-weight: 600; }
.skip:focus { top: 0.5rem; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(208, 177, 110, 0.16); }

/* ---------- shared type ---------- */
.overline, .subhead {
  font: 600 0.7rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.subhead { margin: 1.5rem 0 0.6rem; display: flex; align-items: center; gap: 0.55rem; }
.subhead::before { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex: none; }
.confirm .subhead { margin-top: 0; }
.subsub { font: 600 0.82rem var(--sans); color: var(--text-2); margin: 1rem 0 0.4rem; }
.hint { font-size: 0.78rem; color: var(--muted); margin-top: 0.3rem; }
.hint.warn { color: var(--gold-hi); }
.caption { font-size: 0.8rem; color: var(--muted); margin-top: 0.9rem; }
.card-intro { color: var(--muted); font-size: 0.85rem; margin: 0.35rem 0 0.85rem; max-width: 70ch; }   /* v1.2.6: tighter */
.card-intro strong { color: var(--text-2); font-weight: 600; }

/* ---------- header ---------- */
.site-header { padding: 1.1rem 0 0.9rem; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; min-width: 0; }
.site-header h1 { font: 600 1.3rem/1 var(--serif); letter-spacing: 0.04em; }
.tagline { color: var(--muted); font-size: 0.82rem; padding-left: 0.8rem; border-left: 1px solid var(--line-2); }
.version { font-size: 0.75rem; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r); padding: 0.2rem 0.6rem; white-space: nowrap; }
@media (max-width: 640px) { .tagline { display: none; } }

/* ---------- navigation: boxed tab group, actions on the right, section switcher beneath ---------- */
.sidenav { position: sticky; top: 0; z-index: 30; background: rgba(6, 6, 6, 0.8); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px -22px #000; padding: 0.55rem 0; }
.nav-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.75rem; }
.tabbar {
  display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; min-width: 0; max-width: 100%;
}
.tabbar::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none; min-height: 2.4rem; padding: 0 1rem; font: inherit; font-size: 0.9rem; color: var(--muted);
  background: transparent; border: 1px solid transparent; border-radius: 3px; cursor: pointer; white-space: nowrap;
  transition: color var(--dur-base), background-color var(--dur-base), border-color var(--dur-base);
}
.tab:hover, .tab:focus-visible { color: var(--text); }
.tab[aria-selected="true"] { color: var(--gold); background: var(--gold-lo); border-color: var(--gold-line); font-weight: 600; }
.tab::after { content: none; }
.tab[aria-selected="true"]::after { content: none; }
.nav-actions { margin-left: auto; display: flex; gap: 0.5rem; }
/* v1.2.5: the Income subtabs take their own row under the tab bar and actions (keyboard order stays tabs, subtabs, actions) */
.nav-inner > .nav-actions { order: 2; }
.nav-inner > .subnav { order: 3; }
.nav-actions .btn { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 760px) { .nav-actions .btn:not(.primary) { display: none; } }
@media (max-width: 560px) { .nav-actions { display: none; } .tabbar { width: 100%; } }

.subnav { flex-basis: 100%; list-style: none; margin: 0; padding: 0; display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav li { flex: none; }
.subnav a {
  display: block; min-height: 2rem; padding: 0.3rem 0.8rem; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--muted); font-size: 0.82rem; text-decoration: none; white-space: nowrap; line-height: 1.3;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.subnav a:hover, .subnav a:focus-visible { color: var(--text); border-color: var(--line-2); }
.subnav a[aria-current="true"] { color: var(--gold); border-color: var(--gold-line); background: var(--gold-lo); }
.subnav a:focus-visible { outline-offset: 1px; }
[data-attention]:not(.subnav a)::before, .subnav a[data-attention]::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 0.4rem; border-radius: 50%; background: var(--gold-hi); vertical-align: middle;
}
.tab[data-attention]::before { margin: 0 0.4rem 0 0; }
.attn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- workspace ---------- */
.workspace { padding: 1.4rem 0 4rem; outline: none; }
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.view-enter { animation: rise var(--dur-hover) var(--ease) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(5px); } }
.view > section, .assumptions > section, .results, .panel { scroll-margin-top: calc(var(--nav-h) + 0.75rem); }
.assumptions { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 820px) { .assumptions { grid-template-columns: minmax(0, 1fr); } }
.assumptions .group-label { grid-column: 1 / -1; margin-bottom: -0.35rem; }

.panel, .results {
  position: relative; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 1.35rem 1.5rem; min-width: 0;
  transition: border-color var(--dur-base);
}
.panel:focus-within { border-color: var(--line-2); }
.panel > h2 { display: flex; align-items: center; gap: 0.6rem; font: 500 1.1rem/1.3 var(--sans); letter-spacing: 0.02em; color: var(--text); }
.panel > h2::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex: none; }
@media (max-width: 560px) { .panel, .results { padding: 1.1rem 1rem; } }

/* ---------- overview: balance and projection ---------- */
.results { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; }
.hero, .hero-top, .hero-figures, .hero-figures > * { min-width: 0; }
.hero { position: relative; padding: 1.4rem 1.5rem 1.35rem; background: linear-gradient(to right, rgba(186, 151, 92, 0.06), rgba(10, 10, 10, 0.1)); box-shadow: inset 0 1px 0 var(--gold-line); overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--gold); pointer-events: none; opacity: 0.8; }
.hero::before { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.hero::after { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }
.hero-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem; }
.hero-top .overline { display: flex; align-items: center; gap: 0.55rem; color: var(--gold); }
.hero-top .overline::before { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); }

.filters { min-width: 0; }
.filter-group { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: var(--r); background: rgba(6, 6, 6, 0.55); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.filter-group::-webkit-scrollbar { display: none; }
.filter { position: relative; flex: none; }
.filter input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.filter span { display: block; padding: 0 0.85rem; min-height: 2.2rem; line-height: 2.2rem; font-size: 0.84rem; color: var(--muted); border-radius: 3px; border: 1px solid transparent; white-space: nowrap; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
.filter input:hover + span { color: var(--text); }
.filter input:checked + span { color: var(--gold); background: var(--gold-lo); border-color: var(--gold-line); font-weight: 600; }
.filter input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }

.hero-figures { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.5rem; align-items: end; margin-top: 1.4rem; }
.headline-number { font: 500 clamp(3.4rem, 9vw, 5.4rem)/1 var(--serif); letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.headline-unit { font: 400 1.05rem var(--sans); color: var(--muted); letter-spacing: 0; }
.headline-label { margin-top: 0.4rem; color: var(--text-2); font-size: 0.9rem; }
.hero-projected { padding-left: 1.5rem; border-left: 1px solid var(--line-2); min-width: 0; }
.projected-number { font: 500 clamp(1.8rem, 4.4vw, 2.7rem)/1.1 var(--serif); color: var(--gold-hi); margin-top: 0.4rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .hero-figures { grid-template-columns: 1fr; gap: 1.1rem; }
  .hero-projected { padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--line-2); }
}

.tidebar { margin-top: 1.25rem; }
.tidebar-track { display: flex; height: 8px; background: var(--raised); border-radius: 2px; overflow: hidden; gap: 1px; }
.seg { height: 100%; min-width: 0; transition: flex-grow 0.3s var(--ease); }
.seg-standard { background: var(--lustrous); }
.seg-character { background: var(--radiant); }
.seg-weapon { background: var(--forging); }
.seg-pool { background: repeating-linear-gradient(135deg, var(--radiant) 0 5px, var(--forging) 5px 10px); }
.seg-afterglow { background: var(--flex); }

.legend { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.2rem; font-size: 0.8rem; }
.legend li { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); }
#legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.4rem 1.5rem; }
#legend li { padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); }
#legend .count { margin-left: auto; color: var(--text); font: 500 0.95rem var(--serif); font-variant-numeric: tabular-nums; }
.swatch { width: 0.7rem; height: 0.7rem; flex: none; display: inline-block; border: 2px solid currentColor; background: currentColor; }
#legend .swatch { border: 0; border-radius: 1px; width: 0.55rem; height: 0.55rem; }
.empty { margin-top: 1rem; padding: 0.8rem 1rem; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); font-size: 0.85rem; }
.item-list + .empty, .btn-row + .empty { margin-top: 1rem; }

.results-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.results-grid > * { padding: 0.25rem 1.5rem 1.4rem; min-width: 0; }
.results-grid > .projection { border-right: 1px solid var(--line); }
@media (max-width: 860px) {
  .results-grid { grid-template-columns: 1fr; }
  .results-grid > .projection { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) { .hero, .results-grid > * { padding-left: 1rem; padding-right: 1rem; } }

.proj-list { margin: 0; }
.proj-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--line); font-size: 0.86rem; }
.proj-list > div:first-child { border-top: 0; }
.proj-list dt { color: var(--text-2); }
.proj-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.proj-list .sub { padding-left: 0.9rem; font-size: 0.78rem; border-left: 1px solid var(--line-2); }
.proj-list .sub dt { color: var(--muted); }

.breakdown, .notes { list-style: none; margin: 0; padding: 0; }
.breakdown li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; padding: 0.65rem 0; border-top: 1px solid var(--line); }
.breakdown li:first-child { border-top: 0; }
.breakdown .b-label { font-size: 0.92rem; }
.breakdown .b-value { font: 500 1.35rem/1.1 var(--serif); font-variant-numeric: tabular-nums; text-align: right; grid-row: span 2; align-self: center; color: var(--gold-hi); }
.breakdown .b-meta { font-size: 0.76rem; color: var(--muted); }
.breakdown .b-kind { color: var(--text-2); font-weight: 600; }
.notes { margin-top: 0.8rem; display: grid; gap: 0.45rem; }
.notes li { font-size: 0.82rem; color: var(--text-2); background: var(--panel-2); border-left: 2px solid var(--gold); padding: 0.5rem 0.75rem; border-radius: 0 var(--r) var(--r) 0; }
.key { margin-top: 1rem; font-size: 0.76rem; color: var(--muted); }
.key strong { color: var(--text-2); font-weight: 600; }

.breakdown-details { border-top: 1px solid var(--line); padding: 0 1.5rem; }
.breakdown-details summary { cursor: pointer; min-height: 3rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--text-2); list-style: none; }
.breakdown-details summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); transition: transform 0.2s var(--ease); flex: none; }
details[open] > summary::before { transform: rotate(45deg); }
details > summary:hover { color: var(--text); }
.breakdown-details .table-wrap { margin-bottom: 1.25rem; }
@supports (interpolate-size: allow-keywords) {
  details { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height 0.24s var(--ease), content-visibility 0.24s allow-discrete; }
  details[open]::details-content { height: auto; }
}
.eg-details { margin-top: 0.7rem; }
.eg-details > summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; min-height: 2.25rem; display: flex; align-items: center; gap: 0.6rem; list-style: none; color: var(--text-2); }
.eg-details > summary::-webkit-details-marker { display: none; }

/* ---------- forms ---------- */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-size: 0.82rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.45rem; }
.field-row { display: grid; gap: 0.9rem 1.1rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.field-row.two { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.field { min-width: 0; margin-bottom: 0.45rem; }
.field label, .counter > label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--text-2); margin-bottom: 0.35rem; }

input[type="text"], input[type="date"], input[type="time"], select, textarea {
  width: 100%; min-height: 2.5rem; padding: 0.5rem 0.7rem; font: inherit; color: var(--text); background: #080808;
  border: 1px solid var(--line-2); border-radius: var(--r); font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
input[type="date"], input[type="time"] { color-scheme: dark; }
input:hover, select:hover, textarea:hover { border-color: #4a463c; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold-lo), 0 0 0 1px var(--gold); }
input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-bg); }
textarea { min-height: 6rem; font: 0.82rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize: vertical; word-break: break-all; }
.field-error { font-size: 0.82rem; color: var(--danger); margin-top: 0.3rem; }
.tone-radiant label, .tone-forging label, .tone-lustrous label { padding-left: 0.55rem; border-left: 3px solid; }
.tone-radiant label { border-color: var(--radiant); }
.tone-forging label { border-color: var(--forging); }
.tone-lustrous label { border-color: var(--lustrous); }

.toggle { position: relative; display: flex; align-items: center; gap: 0.75rem; margin: 0.9rem 0 0.4rem; cursor: pointer; min-height: 2.5rem; max-width: 100%; }
.toggle input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-track { width: 2.6rem; height: 1.45rem; border-radius: 999px; background: var(--raised); border: 1px solid var(--line-2); position: relative; flex: none; transition: background-color 0.18s, border-color 0.18s; }
.toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--muted); transition: transform 0.2s var(--ease), background-color 0.18s; }
.toggle input:checked ~ .toggle-track { background: var(--gold); border-color: var(--gold); }
.toggle input:checked ~ .toggle-track::after { transform: translateX(1.15rem); background: #0b0a08; }
.toggle input:focus-visible ~ .toggle-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.toggle-text { font-size: 0.88rem; font-weight: 600; color: var(--text-2); }
.toggle:hover .toggle-text { color: var(--text); }

.choice { margin-top: 0.9rem; }
.choice-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.choice-item { position: relative; display: inline-block; }
.choice-item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice-item span { display: block; padding: 0.4rem 0.85rem; min-height: 2.3rem; line-height: 1.5rem; font-size: 0.85rem; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel-2); color: var(--text-2); transition: color 0.15s, border-color 0.15s, background-color 0.15s; }
.choice-item input:hover:not(:disabled):not(:checked) + span { border-color: #5a554a; color: var(--text); }
.choice-item input:checked + span { color: var(--gold); background: var(--gold-lo); border-color: var(--gold-line); font-weight: 600; }
.choice-item input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice-item input:disabled + span { opacity: 0.45; cursor: not-allowed; }
.check { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.3rem; cursor: pointer; font-size: 0.88rem; margin: 0.1rem 0.8rem 0.1rem 0; color: var(--text-2); }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--gold); flex: none; }

.summary { margin-top: 0.9rem; font-size: 0.86rem; padding: 0.65rem 0.85rem; background: var(--panel-2); border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: var(--r); color: var(--text-2); }
.summary:empty { display: none; }
.panel > .field, .panel > .field-row { max-width: 40rem; }
.panel > .field-row.two { max-width: 40rem; }

.counters { display: grid; gap: 0.9rem 1.1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.stepper { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; gap: 0.3rem; }
.stepper input { text-align: center; }
.stepper button { min-height: 2.5rem; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font: inherit; font-size: 1.15rem; cursor: pointer; transition: border-color 0.15s, color 0.15s, background-color 0.15s; }
.stepper button:hover, .stepper button:focus-visible { border-color: var(--gold); color: var(--gold-hi); }
.stepper button:active { background: var(--raised); }

/* ---------- stat tiles: label over figure, note close by ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.6rem; margin: 1.25rem 0 0; }
.stats > div { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 0.8rem 0.95rem 0.85rem; min-width: 0; }
.stats dt { font: 600 0.66rem/1.35 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); min-height: 1.8em; }
.stats dd { margin: 0.35rem 0 0; font: 500 1.65rem/1.1 var(--serif); color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stats .strong { border-color: var(--gold-line); background: linear-gradient(to right, rgba(186, 151, 92, 0.05), var(--panel)); }
.stats .strong dd { color: var(--gold-hi); }

/* ---------- buttons and messages ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.btn-row.tight { margin-top: 0.45rem; }
.btn {
  min-height: 2.5rem; padding: 0.4rem 1rem; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--panel-2);
  color: var(--text); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-base), border-color var(--dur-base), color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast);
}
.btn:hover:not(:disabled), .btn:focus-visible { border-color: var(--line-2); background: rgba(255, 255, 255, 0.08); color: var(--text); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--gold); border-color: transparent; color: #000; box-shadow: 0 0 16px rgba(186, 151, 92, 0.2); }
.btn.primary:hover:not(:disabled), .btn.primary:focus-visible { background: rgba(186, 151, 92, 0.9); border-color: transparent; color: #000; box-shadow: 0 0 24px rgba(186, 151, 92, 0.35); }
.btn.small { min-height: 2.1rem; padding: 0.2rem 0.75rem; font-size: 0.8rem; }
.btn.danger { border-color: var(--danger-line); color: var(--danger); background: transparent; }
.btn.danger:hover:not(:disabled), .btn.danger:focus-visible { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.msg { margin-top: 0.9rem; padding: 0.6rem 0.85rem; border-radius: var(--r); font-size: 0.86rem; border: 1px solid var(--line); border-left: 3px solid var(--muted); background: var(--panel-2); animation: fade 0.2s ease; }
@keyframes fade { from { opacity: 0; } }
.msg-ok { border-left-color: var(--gold); }
.msg-error { border-left-color: var(--danger); background: var(--danger-bg); }
.msg-info { border-left-color: var(--lustrous); }
/* v1.2.9: results of card actions (Events, Timeline, Endgame) float as a toast, outside the layout, so no card moves.
   Under the sticky bar on the right; full width minus the gutters on phones. Hidden again after a few seconds. */
.msg.toast {
  position: fixed; z-index: 60; top: calc(var(--nav-h) + 0.75rem); right: 1rem; margin: 0;
  width: min(26rem, calc(100% - 2rem)); background: var(--raised); box-shadow: 0 12px 32px -12px #000;
}
.msg-error.toast { background: #2a1416; }
/* v1.2.9: a card's confirmation opens inside the card, under its actions */
.confirm.confirm-in-card { margin-top: 0.8rem; }
.review { margin-top: 0.6rem; padding: 0.6rem 0.8rem; border: 1px dashed var(--gold-line); border-radius: var(--r); background: var(--panel-2); font-size: 0.86rem; }

/* inline confirmation panels */
.confirm { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--gold-line); border-left: 3px solid var(--gold); border-radius: var(--r); background: var(--panel-2); animation: fade 0.2s ease; }
.confirm p + p { margin-top: 0.4rem; }
.confirm textarea, .confirm input { max-width: 100%; }
.confirm .field { margin-bottom: 0.6rem; }
.kv { margin: 0.75rem 0 0; display: grid; gap: 0.35rem; }
.kv div { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr; gap: 0.5rem; font-size: 0.86rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; margin-top: 0.75rem; -webkit-overflow-scrolling: touch; }
.preview-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.preview-table th, .preview-table td { padding: 0.55rem 0.7rem; border-top: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.preview-table thead th { color: var(--muted); font: 600 0.66rem/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; border-top: 0; border-bottom: 1px solid var(--line-2); white-space: normal; vertical-align: bottom; }
.preview-table th[scope="row"], .preview-table thead th:first-child { text-align: left; font-weight: 500; color: var(--text-2); }
.preview-table tbody tr:last-child { font-weight: 700; background: var(--gold-lo); }
.preview-table tbody tr:last-child th { color: var(--gold-hi); }
.pulls-row th, .pulls-row td { font-weight: 700; border-top: 1px solid var(--gold-line); }
.breakdown-table { font-size: 0.78rem; }
.breakdown-table th, .breakdown-table td { padding: 0.5rem 0.55rem; }
.event-table input, .editor-table input { min-height: 2.1rem; padding: 0.25rem 0.5rem; text-align: right; }
.editor-table td { padding: 0.25rem 0.35rem; }
.event-table th, .event-table td { padding: 0.35rem 0.5rem; }

/* ---------- lists: events, endgames, timeline ---------- */
.item-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.item { padding: 0.9rem 1.05rem; border: 1px solid var(--line-soft); border-left-width: 3px; border-radius: var(--r); background: var(--panel-2); min-width: 0; transition: border-color 0.18s, background-color 0.18s, transform 0.18s var(--ease-ui); }
.item:hover, .item:focus-within { background: #161614; border-top-color: var(--line-2); border-right-color: var(--line-2); border-bottom-color: var(--line-2); transform: translateY(-1px); }
.item-selected { border-color: var(--gold-line); background: rgba(186, 151, 92, 0.05); box-shadow: inset 3px 0 0 var(--gold); }
.item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; }
.item-head h3 { font: 500 1.08rem var(--serif); margin-right: 0.25rem; overflow-wrap: anywhere; }
.item > p { margin-top: 0.4rem; font-size: 0.86rem; color: var(--text-2); }
/* v1.2.6: the projection line is supporting text: muted and a step smaller, with its label kept legible */
.item > p.item-proj { font-size: 0.82rem; color: var(--muted); }
.item > p.item-proj strong { color: var(--text-2); font-weight: 600; }
.item.has-art > p.item-proj { color: var(--text-2); }   /* brighter over card art */
.eg-help { margin: 0 0 0.6rem; }
.eg-help > summary { min-height: 2.25rem; font-size: 0.8rem; }
.eg-help .notes { margin: 0.2rem 0 0.6rem; font-size: 0.8rem; color: var(--muted); }
.badge { display: inline-block; padding: 0.08rem 0.5rem; border-radius: 2px; font: 600 0.66rem/1.6 var(--sans); letter-spacing: 0.07em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--text-2); }
.badge-ongoing { border-color: var(--gold-line); color: var(--gold-hi); background: var(--gold-lo); }
.badge-upcoming { border-color: var(--lustrous); color: var(--lustrous); }
.badge-completed { border-color: var(--flex); color: var(--flex); }
.badge-expired, .badge-ended { border-style: dashed; color: var(--muted); }
.badge-warn { border-color: var(--danger-line); color: var(--danger); }
.badge-deadline { background: var(--gold); color: #0b0a08; border-color: var(--gold); }
.badge-kind { border-style: dashed; }

.item-event { border-left-color: var(--c-event); }
.item-banner { border-left-color: var(--c-banner); }
.item-patch { border-left-color: var(--c-patch); }
.item-custom { border-left-color: var(--c-custom); }
.item-endgame { border-left-color: var(--c-endgame); }
.item-event .badge-kind { border-style: solid; border-color: var(--c-event); color: var(--c-event); }
.item-banner .badge-kind { border-style: solid; border-color: var(--c-banner); color: var(--c-banner); }
.item-patch .badge-kind { border-style: solid; border-color: var(--c-patch); color: var(--c-patch); }
.item-custom .badge-kind { border-style: solid; border-color: var(--c-custom); color: var(--c-custom); }
.item-endgame .badge-kind { border-style: solid; border-color: var(--c-endgame); color: var(--c-endgame); }
.swatch-event { color: var(--c-event); border-radius: 50%; }
.swatch-banner { color: var(--c-banner); border-radius: 1px; }
.swatch-patch { color: var(--c-patch); transform: rotate(45deg); border-radius: 1px; }
.swatch-custom { color: var(--c-custom); border-radius: 1px; background: transparent; }
.swatch-endgame { color: var(--c-endgame); border-radius: 50% 50% 1px 1px; }

.eg-cycle { margin-top: 0.6rem; }
.eg-cycle-title { font: 500 1rem var(--serif); margin: 0 0 0.3rem; }
.eg-assume { display: grid; gap: 0.35rem; margin-top: 0.7rem; }
.eg-prompt { margin-top: 0.8rem; border-color: var(--danger-line); border-left-color: var(--c-endgame); }
.subpanel { margin: 0.5rem 0; padding: 0.75rem; border: 1px solid var(--line-soft); border-radius: var(--r); }
.import-list { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.6rem; }
.import-entry { padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.import-entry select { margin-top: 0.3rem; }
.import-entry label { display: block; font-size: 0.82rem; margin-top: 0.5rem; color: var(--muted); }

/* ---------- drawer: editors and import panels slide in from the right ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.34); animation: fade var(--dur-fast) ease; }
.confirm.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(36rem, 100%); margin: 0; padding: 1.25rem 1.4rem 2rem;
  border: 0; border-left: 1px solid var(--gold-line); border-radius: 0; background: rgba(3, 3, 4, 0.92); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); overflow-y: auto; overscroll-behavior: contain;
  animation: drawer-in var(--dur-base) var(--ease-ui);
}
@keyframes drawer-in { from { transform: translateX(2.5rem); opacity: 0; } }
.confirm.drawer.drawer-closing { animation: drawer-out var(--dur-base) var(--ease-ui) forwards; pointer-events: none; }
@keyframes drawer-out { to { transform: translateX(2.5rem); opacity: 0; } }
.drawer-close { display: block; margin: 0 0 1rem auto; min-height: 2.1rem; padding: 0.2rem 0.8rem; background: transparent; color: var(--text-2); border: 1px solid var(--line-2); border-radius: var(--r); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.drawer-close:hover, .drawer-close:focus-visible { border-color: var(--gold-line); color: var(--text); }
body.drawer-open { overflow: hidden; }
.confirm.drawer > .subhead { margin: 0 0 0.9rem; font-size: 0.78rem; color: var(--gold); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 1.25rem 0 1.75rem; color: var(--muted); font-size: 0.78rem; }
.site-footer p { max-width: 80ch; }
/* footer: disclaimer, copyright, links to Privacy / Terms / contact */
.footer-body { display: grid; gap: 0.45rem; }
.footer-meta .footer-version { margin-left: 0.4rem; padding-left: 0.6rem; border-left: 1px solid var(--line-2); white-space: nowrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.15rem; }
.footer-links a { color: var(--text-2); text-decoration: none; overflow-wrap: anywhere; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--gold-hi); text-decoration: underline; }

/* ---- standalone document pages (privacy.html, terms.html): no game art, readable measure ---- */
.doc-header { padding: 1.1rem 0 0.9rem; border-bottom: 1px solid var(--line); }
.doc-header .header-row { flex-wrap: wrap; }
.doc-home { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-2); text-decoration: none; font-size: 0.86rem; }
.doc-home:hover, .doc-home:focus-visible { color: var(--gold-hi); }
.doc { max-width: 72ch; padding: 2rem 0 3rem; }
.doc h1 { font: 500 1.7rem/1.2 var(--serif); letter-spacing: 0.01em; margin-bottom: 0.35rem; }
.doc .doc-updated { color: var(--muted); font-size: 0.82rem; margin-bottom: 1.5rem; }
.doc h2 { font: 600 1.02rem/1.3 var(--sans); margin: 1.9rem 0 0.55rem; color: var(--text); }
.doc p, .doc li { color: var(--text-2); line-height: 1.65; }
.doc p + p { margin-top: 0.7rem; }
.doc ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.doc li + li { margin-top: 0.35rem; }
.doc ul + p { margin-top: 0.7rem; }
.doc code { font-size: 0.9em; color: var(--text); overflow-wrap: anywhere; }
.doc .doc-note { margin-top: 1rem; padding: 0.65rem 0.85rem; border: 1px solid var(--line-soft); border-left: 2px solid var(--gold); background: var(--panel-2); }
.doc table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.88rem; }
.doc th, .doc td { text-align: left; padding: 0.45rem 0.6rem 0.45rem 0; border-top: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.doc th { color: var(--text); font-weight: 600; white-space: nowrap; }
@media (max-width: 560px) { .doc th { white-space: normal; } .doc { padding-top: 1.4rem; } }

@media (max-width: 420px) { #legend { grid-template-columns: 1fr; } .kv div { grid-template-columns: 1fr; } }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ======================= summary strip ======================= */
.sum-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.3rem; }
.sum-tile { position: relative; padding: 0.8rem 0.95rem 0.85rem; min-width: 0; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--panel); transition: border-color var(--dur-hover); }
.sum-tile::before { content: ""; position: absolute; left: 0; top: 0.8rem; bottom: 0.8rem; width: 2px; background: var(--line-2); }
.sum-tile.is-up::before { background: var(--up); box-shadow: 0 0 10px var(--up); }
.sum-val { font: 600 clamp(1.5rem, 3.6vw, 2.15rem)/1.1 var(--serif); margin-top: 0.4rem; font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere; }
.sum-tile.is-up .sum-val { color: var(--up); }
.sum-date { font-size: clamp(1.05rem, 2.3vw, 1.4rem); letter-spacing: 0.02em; padding-top: 0.3rem; }
.sum-tile .hint { margin-top: 0.35rem; }
@media (max-width: 560px) { .sum-tile:first-child { grid-column: 1 / -1; } }

/* ======================= live change chips ======================= */
.headline, .hero-projected { position: relative; }
.delta { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; pointer-events: none; padding: 0.26rem 0.5rem; border: 1px solid; border-radius: 3px; font: 700 0.76rem/1 var(--sans); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; animation: delta-pop 2.4s var(--ease) both;}
.headline > .delta { top: -1.55rem; left: 0; right: auto; }
.hero-projected > .delta { top: -1.55rem; left: 1.5rem; right: auto; }
@media (max-width: 640px) { .hero-projected > .delta { left: 0; } }
.delta-up { color: var(--up); background: var(--up-bg); border-color: var(--up-line); }
.delta-down { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.delta-up::before { content: "\25B2"; font-size: 0.55rem; margin-right: 0.35rem; vertical-align: 0.1em; }
.delta-down::before { content: "\25BC"; font-size: 0.55rem; margin-right: 0.35rem; vertical-align: 0.1em; }
@keyframes delta-pop { 0% { opacity: 0; transform: translateY(8px) scale(0.96); } 10% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4px); } }
.tick { animation: tick 0.8s ease-out; }
@keyframes tick { from { color: var(--cyan); text-shadow: 0 0 18px rgba(92, 200, 224, 0.55); } }
.number-tick { animation: number-flash 0.8s ease-out; }
@keyframes number-flash { from { color: var(--gold-hi); text-shadow: 0 0 12px var(--gold-line); } }

/* ======================= adjust: live preview ======================= */
.delta-preview { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.4rem; align-items: center; max-width: 40rem; margin-top: 0.9rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-left: 2px solid var(--cyan); border-radius: var(--r); background: linear-gradient(90deg, var(--cyan-lo), transparent 60%), var(--panel-2); animation: fade 0.2s ease; }
.delta-preview > .cur { grid-row: span 2; align-self: start; }
.dp-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.86rem; font-variant-numeric: tabular-nums; min-width: 0; }
.dp-op { min-width: 4.6rem; color: var(--muted); font-weight: 600; }
.dp-from { color: var(--muted); }
.dp-arrow { color: var(--cyan); }
.dp-to { font: 500 1.1rem/1 var(--serif); color: var(--text); }
.dp-blocked .dp-to { font: 600 0.78rem var(--sans); color: var(--danger); }
.dp-blocked .delta { opacity: 0.45; }
.delta-inline { position: static; margin-left: auto; animation: none; }

/* ======================= currency badges ======================= */
.cur { --c: var(--muted); --c-bg: rgba(143, 139, 131, 0.12); --c-bd: rgba(143, 139, 131, 0.4); position: relative; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: 0.5rem; flex: none; vertical-align: middle; border: 1px solid var(--c-bd); border-radius: 4px; background: var(--c-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 14px -8px var(--c); }
.cur-ico { display: block; width: 0.78rem; height: 0.78rem; background: var(--c); }
.delta-preview > .cur { margin-right: 0; width: 1.8rem; height: 1.8rem; }
.cur-cell { display: inline-flex; align-items: center; }
.cur-astrite { --c: #8fd3ec; --c-bg: rgba(143, 211, 236, 0.12); --c-bd: rgba(143, 211, 236, 0.42); }
.cur-astrite .cur-ico { clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.cur-lunite { --c: #cfd6ea; --c-bg: rgba(207, 214, 234, 0.1); --c-bd: rgba(207, 214, 234, 0.4); }
.cur-lunite .cur-ico { clip-path: polygon(25% 0, 75% 0, 100% 38%, 50% 100%, 0 38%); }
.cur-radiant { --c: var(--radiant); --c-bg: rgba(214, 160, 79, 0.13); --c-bd: rgba(214, 160, 79, 0.45); }
.cur-radiant .cur-ico { border-radius: 50%; background: radial-gradient(circle, var(--c) 0 28%, transparent 30% 52%, var(--c) 54%); }
.cur-forging { --c: var(--forging); --c-bg: rgba(156, 139, 201, 0.13); --c-bd: rgba(156, 139, 201, 0.45); }
.cur-forging .cur-ico { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }
.cur-lustrous { --c: var(--lustrous); --c-bg: rgba(111, 168, 184, 0.13); --c-bd: rgba(111, 168, 184, 0.45); }
.cur-lustrous .cur-ico { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%, 50% 22%, 78% 50%, 50% 78%, 22% 50%, 50% 22%); }
.cur-afterglow { --c: var(--flex); --c-bg: rgba(143, 179, 154, 0.12); --c-bd: rgba(143, 179, 154, 0.42); }
.cur-afterglow .cur-ico { background: radial-gradient(circle at 30% 32%, var(--c) 0 21%, transparent 23%), radial-gradient(circle at 70% 32%, var(--c) 0 21%, transparent 23%), radial-gradient(circle at 50% 72%, var(--c) 0 25%, transparent 27%); }
.cur-oscillated { --c: #7fb8b0; --c-bg: rgba(127, 184, 176, 0.12); --c-bd: rgba(127, 184, 176, 0.42); }
.cur-oscillated .cur-ico { border-radius: 60% 0 60% 0; transform: rotate(-8deg); }

/* ======================= timeline and event cards ======================= */
.item.has-date { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.item.has-date > .item-date { grid-column: 1; grid-row: 1 / span 8; }
.item.has-date > :not(.item-date) { grid-column: 2; min-width: 0; }
.item-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.7rem; padding: 0.4rem 0.2rem 0.45rem; border: 1px solid var(--line-2); border-top: 2px solid var(--gold); border-radius: var(--r); background: linear-gradient(180deg, #1c1b18, var(--panel)); box-shadow: inset 0 1px 0 var(--glass-edge); line-height: 1.1; }
.item-date-m { font: 600 0.62rem var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.item-date-d { font: 500 1.55rem/1.15 var(--serif); color: var(--text); font-variant-numeric: tabular-nums; }
.item-date-y { font: 500 0.6rem var(--sans); color: var(--muted); letter-spacing: 0.06em; }
.item-event > .item-date { border-top-color: var(--c-event); }
.item-banner > .item-date { border-top-color: var(--c-banner); }
.item-patch > .item-date { border-top-color: var(--c-patch); }
.item-custom > .item-date { border-top-color: var(--c-custom); }
.item-endgame > .item-date { border-top-color: var(--c-endgame); }
.badge-kind::before { content: ""; display: inline-block; width: 0.42rem; height: 0.42rem; margin-right: 0.38rem; background: currentColor; vertical-align: 0.05em; }
.item-event .badge-kind::before { border-radius: 50%; }
.item-patch .badge-kind::before { transform: rotate(45deg); }
.item-custom .badge-kind::before { background: transparent; border: 1.5px solid currentColor; }
.item-endgame .badge-kind::before { border-radius: 50% 50% 1px 1px; }
.item-patch .badge-kind { background: rgba(156, 139, 201, 0.1); box-shadow: 0 0 14px -6px var(--c-patch); }
.item-banner .badge-kind { background: rgba(214, 160, 79, 0.1); }
.badge-deadline { box-shadow: 0 0 14px -4px var(--gold); }
@media (max-width: 560px) { .item.has-date { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; } .item-date { width: 3.1rem; } .item-date-d { font-size: 1.3rem; } }

/* ======================= small screens: tables become bento cards ======================= */
@media (max-width: 700px) {
  .table-wrap { overflow: visible; }
  .preview-table, .preview-table tbody { display: block; }
  .preview-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .preview-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.6rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)); box-shadow: inset 0 1px 0 var(--glass-edge); }
  .preview-table th, .preview-table td { border-top: 0; }
  .preview-table tbody th { grid-column: 1 / -1; display: block; padding: 0 0 0.5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: normal; }
  .preview-table td { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 3px; background: rgba(0, 0, 0, 0.25); text-align: left; white-space: normal; font-size: 1rem; color: var(--text); }
  .preview-table td[data-label]::before { content: attr(data-label); font: 600 0.6rem/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .preview-table td[data-empty] { display: none; }
  .preview-table td:last-child { grid-column: 1 / -1; border-color: var(--gold-line); background: linear-gradient(90deg, var(--gold-lo), rgba(0, 0, 0, 0.25)); }
  .preview-table td:last-child::before { color: var(--gold); }
  .preview-table td:last-child { font: 500 1.35rem/1.15 var(--serif); font-variant-numeric: tabular-nums; }
  .preview-table tbody tr:last-child { background: linear-gradient(180deg, var(--gold-lo), rgba(255, 255, 255, 0.01)); border-color: var(--gold-line); }
  .editor-table td input, .event-table td input { width: 100%; text-align: left; }
  .breakdown-table { font-size: 0.9rem; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats dd { font-size: 1.4rem; }
  .field-row, .field-row.two, .counters { grid-template-columns: minmax(0, 1fr); }
}

/* the change chip should stay visible (not animate) when motion is reduced */
@media (prefers-reduced-motion: reduce) { .delta { animation: none; } .tick, .number-tick { animation: none; } .item:hover, .item:focus-within { transform: none; } }

/* ======================= audit: serif tabular numerals for data ======================= */
.preview-table td, .proj-list dd, .kv dd, .dp-from, .badge-deadline, .breakdown .b-value { font-family: var(--serif); font-variant-numeric: tabular-nums; }
.preview-table td { font-size: 0.95rem; }
input[data-kind="count"], input[data-kind="optcount"] { font-family: var(--serif); text-align: right; }
.stepper input[data-kind="count"] { text-align: center; }

/* =====================================================================================
   Motion and animated graphics
   Vocabulary from the audit: 100 / 200 / 300 / 500 ms, 2px lift, 1px press, small amplitudes,
   one looping graphic at most, everything gated by prefers-reduced-motion (see the end).
   ===================================================================================== */

/* ---- brand (v1.1.4; re-measured v1.1.5): assets/brand/astrite-logo.png, cropped to its artwork box ----
   The file is a 1920x1080 canvas whose artwork (icon + "astrite.app") is the 1361x319 box at (279, 386).
   The h1 is that box at a fixed height; the image is scaled and offset inside it, so its 16:9 ratio is kept. */
.brand-logo { position: relative; height: 1.75rem; aspect-ratio: 1361 / 319; overflow: hidden; flex: none; }
.brand-logo img { position: absolute; max-width: none; width: 141.073%; height: 338.558%; left: -20.500%; top: -121.003%; }
.doc-header .brand-logo { display: block; }   /* privacy.html / terms.html: the logo is a link home */
@keyframes pop { from { transform: scale(0); } }

/* ---- navigation: one indicator glides between tabs; a hairline tracks page scroll ---- */
.tabbar { position: relative; }
.tab-slider { position: absolute; left: 0; bottom: 3px; height: 2px; z-index: 1; pointer-events: none; background: var(--gold); box-shadow: 0 0 10px rgba(186, 151, 92, 0.7); clip-path: inset(0 0.7rem); transition: transform var(--dur-hover) var(--ease), width var(--dur-hover) var(--ease); }
.tab-slider.no-anim { transition: none; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); transform-origin: left; transform: scaleX(0); pointer-events: none; opacity: 0.85; }

/* ---- view entrance: cards rise in turn (children of the view, then tiles inside them) ---- */
.view.stagger > * { animation: rise var(--dur-media) var(--ease) backwards; animation-delay: calc(var(--n, 0) * 70ms); }
.view.stagger > :nth-child(2) { --n: 1; } .view.stagger > :nth-child(3) { --n: 2; } .view.stagger > :nth-child(4) { --n: 3; } .view.stagger > :nth-child(5) { --n: 4; }
.view.stagger .sum-tile, .view.stagger .stats > div, .view.stagger .item-list > .item, .view.stagger .legend li { animation: rise 420ms var(--ease) backwards; animation-delay: calc(160ms + var(--n, 0) * 55ms); }
.view.stagger .sum-tile:nth-child(2), .view.stagger .stats > div:nth-child(2), .view.stagger .item-list > .item:nth-child(2), .view.stagger .legend li:nth-child(2) { --n: 1; }
.view.stagger .sum-tile:nth-child(3), .view.stagger .stats > div:nth-child(3), .view.stagger .item-list > .item:nth-child(3), .view.stagger .legend li:nth-child(3) { --n: 2; }
.view.stagger .stats > div:nth-child(4), .view.stagger .item-list > .item:nth-child(4), .view.stagger .legend li:nth-child(4) { --n: 3; }
.view.stagger .stats > div:nth-child(5), .view.stagger .item-list > .item:nth-child(5) { --n: 4; }
.view.stagger .panel > h2::before, .view.stagger .hero-top .overline::before { animation: pop 420ms var(--ease) 200ms backwards; }

/* ---- hero graphic: slow orbital rings behind the figures (the one ambient loop) ---- */
.hero > *:not(.hero-orbit) { position: relative; z-index: 1; }
.hero-orbit { position: absolute; right: -5.5rem; top: -7rem; z-index: 0; width: 28rem; height: 28rem; pointer-events: none; opacity: 0.55; fill: none; stroke: var(--gold); stroke-width: 0.6; -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 50%, transparent 100%); animation: fade 900ms ease backwards; }
.orb { transform-box: fill-box; transform-origin: center; }
.orb-a { animation: spin 140s linear infinite; }
.orb-b { animation: spin 90s linear infinite reverse; }
.orb-c { animation: spin 200s linear infinite; }
.hero-orbit .ticks { stroke-dasharray: 1 7; stroke-width: 3; opacity: 0.7; }
.hero-orbit .ticks.fine { stroke-dasharray: 0.6 3.4; stroke-width: 2; }
.hero-orbit .arc { stroke-width: 1.4; opacity: 0.9; }
.hero-orbit .node { fill: var(--gold); stroke: none; }
.orb-cross { stroke-width: 0.4; opacity: 0.45; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .hero-orbit { width: 19rem; height: 19rem; right: -6.5rem; top: -4.5rem; opacity: 0.4; } }

/* ---- live data: figures roll in, the tide bar eases and is swept by a single highlight ---- */
#result-value { display: inline-block; }
.tick { animation: roll var(--dur-hover) var(--ease) both; }
@keyframes roll { from { opacity: 0.2; transform: translateY(0.2em); color: var(--cyan); text-shadow: 0 0 18px rgba(92, 200, 224, 0.5); } }
.seg { transition: flex-grow var(--dur-media) var(--ease); }
.tidebar { position: relative; overflow: hidden; }
.tidebar::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); transform: translateX(-100%); }
.tidebar.sweep::after { animation: sweep 800ms var(--ease-ui); }
@keyframes sweep { 0% { transform: translateX(-100%); opacity: 1; } 100% { transform: translateX(100%); opacity: 1; } }
.sum-tile::before { transform: scaleY(0.35); transform-origin: bottom; transition: transform var(--dur-hover) var(--ease), background-color var(--dur-hover), box-shadow var(--dur-hover); }
.sum-tile.is-up::before { transform: scaleY(1); }
.sum-tile .overline { display: flex; align-items: center; gap: 0.5rem; }
.ico { width: 0.95rem; height: 0.95rem; flex: none; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }

/* ---- feedback: messages and confirmations slide in; attention dots ping three times ---- */
.msg, .confirm:not(.drawer) { animation: msg-in var(--dur-base) var(--ease-ui); }
@keyframes msg-in { from { opacity: 0; transform: translateY(-4px); } }
.subnav a[data-attention]::after, .tab[data-attention]::before { animation: ping 1.4s ease-out 3; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(207, 174, 114, 0.6); } 100% { box-shadow: 0 0 0 7px rgba(207, 174, 114, 0); } }

/* ---- hover: icons turn a little, rows brighten (kept small, as in the reference) ---- */
.cur-ico { transition: transform var(--dur-hover) var(--ease); }
.field:hover .cur-ico, .counter:hover .cur-ico, .cur-cell:hover .cur-ico { transform: rotate(14deg) scale(1.12); }
.proj-list > div, .breakdown li, .legend li { transition: background-color var(--dur-base); }
.proj-list > div:hover, .breakdown li:hover { background: rgba(255, 255, 255, 0.02); }
.preview-table tbody tr { transition: background-color var(--dur-base); }
.preview-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
.item { transition: border-color var(--dur-hover), background-color var(--dur-hover); }

/* ---- reduced motion: no looping graphics, no travel; state changes still read ---- */
@media (prefers-reduced-motion: reduce) {
  .orb, .tidebar.sweep::after { animation: none !important; }
  .tab-slider, .seg, .sum-tile::before { transition: none; }
}

/* =====================================================================================
   v1.1: claim status, composition, icons, scroll cues, finer interaction feedback
   ===================================================================================== */

/* ---- no visible scrollbars (and so no sideways jump when one appears); scrolling is unchanged ---- */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
.table-wrap, .drawer, .tabbar, .subnav, .filter-group { scrollbar-width: none; -ms-overflow-style: none; }
.table-wrap::-webkit-scrollbar, .drawer::-webkit-scrollbar, .filter-group::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* The nav is sticky: keep focused fields, confirmations and anchors from landing underneath it. */
html { scroll-padding-top: calc(var(--nav-h) + 0.75rem); }
.confirm { scroll-margin-top: calc(var(--nav-h) + 0.75rem); }

/* ---- scroll-edge fades: shown only on the side that still has more content (set by ui-polish.js) ---- */
[data-fade="x"].fade-start:not(.fade-end) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.6rem); mask-image: linear-gradient(90deg, transparent, #000 1.6rem); }
[data-fade="x"].fade-end:not(.fade-start) { -webkit-mask-image: linear-gradient(270deg, transparent, #000 1.6rem); mask-image: linear-gradient(270deg, transparent, #000 1.6rem); }
[data-fade="x"].fade-start.fade-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.6rem, #000 calc(100% - 1.6rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1.6rem, #000 calc(100% - 1.6rem), transparent); }
[data-fade="y"].fade-start:not(.fade-end) { -webkit-mask-image: linear-gradient(180deg, transparent, #000 1.6rem); mask-image: linear-gradient(180deg, transparent, #000 1.6rem); }
[data-fade="y"].fade-end:not(.fade-start) { -webkit-mask-image: linear-gradient(0deg, transparent, #000 2rem); mask-image: linear-gradient(0deg, transparent, #000 2rem); }
[data-fade="y"].fade-start.fade-end { -webkit-mask-image: linear-gradient(180deg, transparent, #000 1.6rem, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(180deg, transparent, #000 1.6rem, #000 calc(100% - 2rem), transparent); }

/* ---- claim cards (today's daily, this week's cycle): the status is read from the real state ---- */
.claim-card { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem 1rem; align-items: center; margin: 1rem 0 1.25rem; padding: 0.9rem 1rem; border: 1px solid var(--line-soft); background: var(--panel-2); transition: border-color var(--dur-hover), background-color var(--dur-hover); }
.claim-card[data-state="counted"] { border-color: var(--gold-line); background: linear-gradient(90deg, var(--gold-lo), var(--panel-2) 75%); }
.claim-card[data-state="sync-first"] { border-style: dashed; border-color: var(--gold-line); }
.claim-card[data-state="unavailable"], .claim-card[data-state="past-deadline"] { opacity: 0.85; }
.claim-body { min-width: 0; }
.claim-body .overline { display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.claim-date { color: var(--muted); letter-spacing: 0.06em; text-transform: none; font-weight: 500; }
.claim-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.65rem; margin-top: 0.4rem; font-size: 0.95rem; color: var(--text); }
.claim-card .hint { margin-top: 0.35rem; }
.claim-chip { display: inline-block; padding: 0.12rem 0.55rem; border: 1px solid var(--line-2); font: 600 0.68rem/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); transition: color var(--dur-hover), background-color var(--dur-hover), border-color var(--dur-hover); }
.claim-card[data-state="counted"] .claim-chip { color: var(--gold); background: var(--gold-lo); border-color: var(--gold-line); }
.claim-card[data-state="sync-first"] .claim-chip { border-style: dashed; border-color: var(--gold-line); color: var(--gold-hi); }
.claim-card[data-state="unavailable"] .claim-chip, .claim-card[data-state="past-deadline"] .claim-chip { color: var(--muted); }
.claim-badge { width: 2.5rem; height: 2.5rem; }
.claim-badge svg { width: 100%; height: 100%; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: square; }
.cb-ring { stroke-dasharray: 3 3.2; transition: stroke var(--dur-hover), stroke-dasharray var(--dur-hover); }
.cb-check { stroke: var(--gold); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 450ms var(--ease) 100ms; }
.cb-dash { stroke-dasharray: 1; stroke-dashoffset: 0; transition: opacity var(--dur-base); }
.claim-card[data-state="counted"] .cb-ring { stroke: var(--gold); stroke-dasharray: 63 0; }
.claim-card[data-state="counted"] .cb-check { stroke-dashoffset: 0; }
.claim-card[data-state="counted"] .cb-dash { opacity: 0; }
.claim-card[data-state="sync-first"] .cb-ring { stroke: var(--gold-hi); }
.claim-card[data-state="sync-first"] .cb-dash { stroke: var(--gold-hi); }
/* The shine exists only while .claim-flash is set (JS removes it on animationend). It runs once, ends fully transparent and
   keeps that end state (fill-mode both), so it can never snap back to the centre of the card. */
.claim-card.claim-flash::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent 30%, rgba(186, 151, 92, 0.3) 50%, transparent 70%); animation: claim-shine 900ms var(--ease-ui) both; }
@keyframes claim-shine { 0% { transform: translateX(-100%); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
.claim-action .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .claim-card { grid-template-columns: auto minmax(0, 1fr); }
  .claim-action { grid-column: 1 / -1; }
  .claim-action .btn { width: 100%; }
}

/* ---- composition: scope label and percentages ---- */
.comp-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2rem 1rem; margin-top: 1.25rem; }
.comp-scope { color: var(--gold); }
.tidebar { margin-top: 0.6rem; }
#legend li { gap: 0.45rem; }
#legend .pct { min-width: 3.5rem; text-align: right; color: var(--muted); font: 500 0.78rem var(--serif); font-variant-numeric: tabular-nums; }
#legend .cur { width: 1.35rem; height: 1.35rem; margin-right: 0; }
.seg { transition: flex-grow var(--dur-media) var(--ease), filter var(--dur-base); }
.seg:hover { filter: brightness(1.18); }

/* ---- supplied currency icons ---- */
.cur .cur-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)); transition: transform var(--dur-hover) var(--ease); }
.cur.has-img { border-color: transparent; background: transparent; box-shadow: none; }
.cur.has-img .cur-ico { visibility: hidden; }   /* v1.2.9: keeps the same box, so a loading icon never changes the row height */
.field:hover .cur-img, .counter:hover .cur-img, .cur-cell:hover .cur-img { transform: scale(1.14) rotate(-4deg); }
.h-icons { display: inline-flex; align-items: center; gap: 0.1rem; margin-left: 0.4rem; }
.h-icons .cur { width: 1.75rem; height: 1.75rem; margin-right: 0; }
.empty-icons { display: flex; gap: 0.1rem; margin-bottom: 0.6rem; }
.empty-icons .cur { width: 2.4rem; height: 2.4rem; margin-right: 0; }
.field label .cur, .counter > label .cur { margin-right: 0.45rem; margin-top: -0.2rem; margin-bottom: -0.2rem; }
.delta-preview > .cur { width: 2.2rem; height: 2.2rem; }

/* ---- selection highlight that glides between the "Show pulls for" options ---- */
.filter-group { position: relative; }
.pill-slider { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; background: var(--gold-lo); border: 1px solid var(--gold-line); transition: transform var(--dur-hover) var(--ease), width var(--dur-hover) var(--ease), height var(--dur-hover) var(--ease); }
.pill-slider.no-anim { transition: none; }
.filter-group.has-slider .filter { z-index: 1; }
.filter-group.has-slider .filter input:checked + span { background: transparent; border-color: transparent; }

/* ---- Endstate reset option ---- */
.reset-option { margin: 0.8rem 0 0.2rem; padding: 0.65rem 0.85rem; border: 1px dashed var(--gold-line); background: var(--panel); }

/* ---- pressed and focus feedback ---- */
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }
.tab:active, .subnav a:active, .drawer-close:active { transform: scale(0.97); }
.filter input:active + span, .choice-item input:active + span { transform: scale(0.97); }
.stepper button:active { transform: scale(0.94); }
.toggle:active .toggle-track::after { width: 1.35rem; }
.filter span, .choice-item span { transition: color var(--dur-base), background-color var(--dur-base), border-color var(--dur-base), transform var(--dur-fast); }
.btn, .tab, .subnav a, .drawer-close, .stepper button {
  outline: 2px solid transparent; outline-offset: 6px;
  transition: background-color var(--dur-base), border-color var(--dur-base), color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast), outline-color var(--dur-fast), outline-offset var(--dur-base) var(--ease);
}
.btn:focus-visible, .tab:focus-visible, .subnav a:focus-visible, .drawer-close:focus-visible, .stepper button:focus-visible { outline-color: var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pill-slider, .cb-check, .cb-ring { transition: none; }
  .claim-card.claim-flash::after { display: none; }
}

/* =====================================================================================================
   v1.1.2: three-stage projection, single-page Balances / Income, floating counter, card and button effects
   ===================================================================================================== */
.subpanel, .panel { scroll-margin-top: calc(var(--nav-h) + 0.75rem); }
.inline-link { color: var(--gold-hi); text-decoration: underline; text-underline-offset: 0.2em; margin-left: 0.35rem; }
.inline-link:hover, .inline-link:focus-visible { color: var(--text); }
.field-row.three { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.panel.group > .subpanel { margin: 1.1rem 0 0; padding: 0.95rem 1.05rem 1.05rem; background: var(--panel); }
.panel.group > .subpanel > .subhead:first-child { margin-top: 0; }
.subpanel > .card-intro { margin-top: 0; }
.compact-details { margin: 0.9rem 0 0; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--panel); padding: 0 0.9rem; }
.compact-details summary { cursor: pointer; min-height: 2.5rem; display: flex; align-items: center; font-size: 0.82rem; font-weight: 600; color: var(--text-2); }
.compact-details[open] { padding-bottom: 0.8rem; }

/* ---- Overview: Initial / Current / Forecast ---- */
.results > .projection { padding: 0.25rem 1.5rem 0.4rem; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .results > .projection { padding-left: 1rem; padding-right: 1rem; } }
.stage-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 0.6rem; }
@media (max-width: 1060px) { .stage-grid { grid-template-columns: minmax(0, 1fr); } }
.stage { position: relative; min-width: 0; padding: 0.95rem 1rem 1.05rem; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--panel); }
.stage-forecast { border-color: var(--gold-line); background: linear-gradient(180deg, rgba(186, 151, 92, 0.06), var(--panel) 55%); }
.stage-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.1rem 0.8rem; }
.stage-head .overline { grid-column: 1 / -1; }
.stage-head h4 { font: 500 1.15rem var(--serif); color: var(--text); }
.stage-pulls { position: relative; text-align: right; color: var(--muted); font-size: 0.8rem; }
.stage-pulls strong { font: 500 1.9rem/1 var(--serif); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.cur-grid { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
@media (max-width: 1060px) and (min-width: 561px) { .cur-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 460px) { .cur-grid { grid-template-columns: minmax(0, 1fr); } }
.cur-tile { position: relative; display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.45rem 0.55rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.cur-tile .cur { flex: none; width: 1.6rem; height: 1.6rem; margin: 0; }
.cur-tile .ct-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ct-name { font: 600 0.6rem/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.ct-amt { font: 500 1.05rem/1.2 var(--serif); color: var(--text); font-variant-numeric: tabular-nums; }
.cur-tile.is-zero .ct-amt { color: var(--muted); }
.ct-chg { flex: none; font: 700 0.7rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
.ct-chg.up { color: var(--up); } .ct-chg.down { color: var(--danger); }
.src-head { margin-top: 1rem; }
.src-list { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.src-list li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.src-list li:last-child { border-bottom: 0; }
.src-name { color: var(--text-2); } .src-val { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.src-manual .src-name, .src-assumed .src-name { color: var(--gold); }
.src-list .src-empty { color: var(--muted); display: block; }
.stage-key { margin-top: 0.8rem; }
/* delta chips sit on the tile they belong to */
.cur-tile > .delta { top: -0.55rem; right: 0.35rem; }
.stage-pulls > .delta { top: -1.4rem; right: 0; left: auto; }

/* ---- first-time / revisit setup ---- */
.accounting-setup { margin: 0 0 0.2rem; }
.setup-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.accounting-setup.is-quiet { padding: 0.4rem 0.8rem; background: transparent; border-style: dashed; }
.accounting-setup.is-quiet .setup-head { align-items: center; }
.accounting-setup.is-quiet #accounting-setup-kicker { margin: 0; }
.claim-setup { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.claim-setup .btn[aria-pressed="true"], .claim-setup .btn.is-on { border-color: var(--gold); background: var(--gold-lo); color: var(--gold-hi); }
.sync-source-fields { max-width: 44rem; }

/* ---- floating pull counter ---- */
.float-count {
  position: fixed; left: 50%; bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px)); z-index: 18;
  display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.5rem 1rem; max-width: calc(100vw - 1.5rem); white-space: nowrap;
  border: 1px solid var(--gold-line); border-radius: 999px; color: var(--muted); font: 600 0.72rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  background: rgba(10, 10, 9, 0.82); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(186, 151, 92, 0.12);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 14px);
  transition: opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), visibility 0s linear var(--dur-hover);
}
.float-count.is-in { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s; }
.float-count .fc-value { font: 500 1.35rem/1 var(--serif); color: var(--gold-hi); font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
.float-count .fc-unit { letter-spacing: 0.06em; }
.float-count:hover, .float-count:focus-visible { border-color: var(--gold); }
body.drawer-open .float-count { opacity: 0; visibility: hidden; pointer-events: none; }
.site-footer { padding-bottom: 4.5rem; }

/* ---- card hover: tilt + glow (js/ui-fx.js toggles .fx-hover and sets --rx --ry --gx --gy) ---- */
.sum-tile, .stage, .item-list > .item { transform-origin: 50% 50%; }
.sum-tile::after, .stage::after, .item-list > .item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur-hover) var(--ease);
  background:
    linear-gradient(115deg, transparent calc(var(--gx, 50%) - 30%), rgba(236, 214, 160, 0.07) var(--gx, 50%), transparent calc(var(--gx, 50%) + 30%));
}
.item-list > .item { position: relative; }
/* v1.1.7: the tilt is written only by ui-fx.js's easing loop, so .fx-tilt has NO transform transition (a CSS transition
   would compete with the per-frame values and cause lag or a snap). .fx-hover only switches the light on. */
.fx-hover { transition: border-color var(--dur-hover), background-color var(--dur-hover); z-index: 1; }
.fx-hover::after { opacity: 1; }
.fx-tilt, .item-list > .item.fx-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); z-index: 1; }   /* replaces the older 1px lift */
@media (hover: none), (pointer: coarse) { .fx-tilt, .item-list > .item.fx-tilt { transform: none; } .fx-hover::after { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-tilt, .item-list > .item.fx-tilt { transform: none !important; } }

/* ---- selective button shine (hover/focus only, one pass, primary actions) ---- */
.btn.shine { position: relative; overflow: hidden; }
.btn.shine::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateX(-120%); background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%); }
.btn.shine:hover:not(:disabled)::after, .btn.shine:focus-visible::after { opacity: 1; transform: translateX(120%); transition: transform 650ms var(--ease), opacity 120ms; }
@media (prefers-reduced-motion: reduce) { .btn.shine::after { display: none; } }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }

/* ---- text entrance: brief blur-to-sharp for headings and intros, small stagger ---- */
.view.stagger .panel > h2, .view.stagger .stage-head h4, .view.stagger .card-intro { animation: text-rise 480ms var(--ease) backwards; animation-delay: 90ms; }
.view.stagger .stage:nth-child(2) { --n: 1; } .view.stagger .stage:nth-child(3) { --n: 2; }
.view.stagger .stage { animation: rise 460ms var(--ease) backwards; animation-delay: calc(140ms + var(--n, 0) * 70ms); }
@keyframes text-rise { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .view.stagger .stage, .view.stagger .panel > h2, .view.stagger .card-intro { animation: none; } }
.panel > h2 + .field-row { margin-top: 0.9rem; }

/* v1.1.8: projection assumptions as toggle buttons (the allocation picker's choice-item pills, as checkboxes) */
.assume-toggles { margin-top: 0.7rem; }
.eg-assume.assume-toggles { display: flex; }   /* row of pills like the event buttons (overrides the old checkbox grid) */
.assume-toggles .choice-item span { font-size: 0.82rem; }
.assume-toggles .choice-item[hidden] { display: none; }
.assume-hint { margin-top: 0.4rem; }

/* =====================================================================================
   v1.1.8 permanent events: limited and permanent rewards as two sections. After the event ends the limited
   section is greyed and hatched (no longer obtainable); the permanent section stays fully active.
   ===================================================================================== */
.event-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-top: 0.6rem; }
@media (max-width: 1100px) { .event-cats { grid-template-columns: minmax(0, 1fr); } }
/* compact cells so all five columns fit inside a half-width section */
.event-cat .event-table th, .event-cat .event-table td { padding: 0.32rem 0.4rem; }
.event-cat .preview-table thead th { letter-spacing: 0.05em; }
.event-cat { min-width: 0; padding: 0.6rem 0.7rem 0.7rem; border: 1px solid var(--line-soft); background: var(--panel); }
.event-cat-permanent { border-color: var(--gold-line); }
.event-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 0.8rem; }
.event-cat-head h4 { font: 600 0.72rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.event-cat-state { font-size: 0.78rem; color: var(--muted); }
.event-cat .table-wrap { margin-top: 0.4rem; }
.event-cat.is-expired {   /* v1.2.3: red hatch, matching ended cards; the table stays readable on a solid surface */
  color: var(--muted); border-style: dashed; border-color: var(--danger-line);
  background: repeating-linear-gradient(135deg, rgba(255, 100, 103, 0.09) 0 6px, transparent 6px 12px), var(--panel);
}
.event-cat.is-expired .event-cat-state { color: var(--danger); font-weight: 600; }
.event-cat.is-expired .table-wrap { background: var(--panel); }
.event-cat.is-expired table, .event-cat.is-expired .event-cat-head h4 { opacity: 0.75; }
.event-cat.is-completed .event-cat-state { color: var(--gold); }
.badge-permanent { border-color: var(--gold-line); color: var(--gold-hi); }
@media (forced-colors: active) { .event-cat.is-expired { background: Canvas; } }

/* =====================================================================================
   v1.1.8 dropdowns: native <select> in the site's style (CSS only; the real element stays for keyboard, screen
   readers, phone pickers and data-bind). Closed control everywhere; the open list too where the browser supports
   customizable select (appearance: base-select); elsewhere the dark native list is used.
   ===================================================================================== */
select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2.3rem; text-overflow: ellipsis;
  /* gold chevron from two small gradients (no image) */
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%;
  background-size: 0.36rem 0.36rem, 0.36rem 0.36rem;
  background-repeat: no-repeat;
}
select:disabled { opacity: 0.5; cursor: not-allowed; }
select option { background: var(--panel-2); color: var(--text); }   /* honoured by the native list in some browsers */

@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: flex; align-items: center; }
  select::picker-icon { display: none; }                                /* the gold chevron above is the only arrow */
  select:open {
    border-color: var(--gold-line);
    background-image: linear-gradient(45deg, transparent 50%, var(--gold-hi) 50%), linear-gradient(135deg, var(--gold-hi) 50%, transparent 50%);
  }
  ::picker(select) {
    /* open below the field and flip above only when the list doesn't fit. The browser default
       (position-try-order: most-block-size, plus a height that stretches to the space) opened it on whichever side
       had more room, often above with plenty of space below. A fixed max height makes "fits" mean the real list. */
    position-area: bottom span-right; position-try-fallbacks: flip-block; position-try-order: normal;
    max-block-size: 20rem; overflow-y: auto;
    margin-top: 4px; padding: 0.3rem; border: 1px solid var(--line-2); border-radius: var(--r);
    background: var(--panel-2); color: var(--text-2); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
    /* v1.2.4: an explicit closed state. Closing used to keep the list fully visible for the whole display/overlay
       window and then drop it; now it fades out at once (90 ms, ease-in) and ignores the pointer while it does, so it
       never blocks the control underneath. Opening eases in over 140 ms. The new state's duration applies, so the
       variables below pick the open or close timing; reduced motion turns both off. */
    --pk-dur: 90ms; --pk-ease: cubic-bezier(0.4, 0, 1, 1);
    opacity: 0; translate: 0 -4px; pointer-events: none;
    transition: opacity var(--pk-dur) var(--pk-ease), translate var(--pk-dur) var(--pk-ease), overlay var(--pk-dur) allow-discrete, display var(--pk-dur) allow-discrete;
  }
  ::picker(select):popover-open { --pk-dur: 140ms; --pk-ease: var(--ease-ui); opacity: 1; translate: 0 0; pointer-events: auto; }
  @starting-style { ::picker(select):popover-open { opacity: 0; translate: 0 -4px; } }
  select option {
    display: flex; align-items: center; gap: 0.55rem; min-height: 2.2rem; padding: 0.4rem 0.7rem;
    font-size: 0.88rem; color: var(--text-2); background: transparent; border: 1px solid transparent; cursor: pointer;
  }
  select option:hover, select option:focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--text); outline: none; }
  select option:checked { color: var(--gold); background: var(--gold-lo); border-color: var(--gold-line); font-weight: 600; }
  select option::checkmark { color: var(--gold); }
  select option:disabled { opacity: 0.45; cursor: not-allowed; }
}
@media (prefers-reduced-motion: reduce) { ::picker(select) { transition: none; } }
@media (forced-colors: active) {
  select { background-image: none; }
  select option:checked { forced-color-adjust: auto; }
}

/* =====================================================================================
   v1.2.0 Library: patch cards reuse .item-list > .item (card style, stagger, hover effects); banner slot is 16:9.
   ===================================================================================== */
.library-page { margin-top: 0; }
.library-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.library-page > h2:focus { outline: none; }
.library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; }
.library-card { padding: 0; border-left-width: 1px; }
.library-card.is-current { border-color: var(--gold-line); }
.library-card-btn { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.library-card-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.library-card-meta { padding: 0.7rem 0.85rem 0.85rem; }
.library-card-meta .hint { margin-top: 0.25rem; }
.library-banner { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel-2); border-bottom: 1px solid var(--line); }
.library-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.library-banner-wide { max-width: 44rem; margin: 0.4rem 0 0.9rem; border: 1px solid var(--line); }
.library-placeholder { position: absolute; inset: 0.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; border: 1px dashed var(--line-2); }
.library-placeholder-v { font: 500 1.9rem/1 var(--serif); color: var(--text-2); font-variant-numeric: tabular-nums; }
.library-placeholder-t { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.library-expired { margin-top: 0.6rem; }
/* v1.2.9 fix: long source links in import cards wrapped nowhere and widened phone screens (found at 320 px) */
.import-entry .hint, .import-entry li { overflow-wrap: anywhere; }
/* v1.2.9: ended limited events of a patch, kept in the catalog: a closed group, greyed with translucent stripes,
   still importable */
.library-ended { margin-top: 1rem; }
.library-ended > summary { cursor: pointer; font-weight: 600; font-size: 0.86rem; min-height: 2.5rem; display: flex; align-items: center; gap: 0.6rem; list-style: none; color: var(--text-2); }
.library-ended > summary::-webkit-details-marker { display: none; }
.library-ended > .hint { margin: 0.2rem 0 0.4rem; }
.library-ended-preview .import-entry {
  opacity: 0.72;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.075) 0 10px, transparent 10px 22px), var(--panel-2);
  filter: grayscale(0.55);
  transition: opacity var(--dur-hover), filter var(--dur-hover);
}
.library-ended-preview .import-entry:hover, .library-ended-preview .import-entry:focus-within { opacity: 1; filter: none; }
@media (forced-colors: active) { .library-ended-preview .import-entry { opacity: 1; filter: none; background: Canvas; } }
@media (max-width: 560px) { .library-grid { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================================
   v1.2.1 card artwork and per-entry import cards. Artwork is a darkened image layer (.item-art, inserted by
   ui.js applyArt only when the developer-supplied file loads) behind the card's content; the plain card is the
   fallback. Import entries are .item cards too, so they get the same 3D tilt, glow and border light.
   ===================================================================================== */
.item.has-art { isolation: isolate; }
.item > .item-art {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, rgba(10, 10, 9, 0.93) 0%, rgba(10, 10, 9, 0.86) 55%, rgba(10, 10, 9, 0.78) 100%), var(--art) center / cover no-repeat;
}
.item.has-date > .item-art { grid-column: auto; grid-row: auto; }
.item.has-art .hint, .item.has-art > p { color: var(--text-2); }
.import-list.item-list { margin-top: 0.75rem; }
.item.import-entry { padding: 0.9rem 1.05rem; border-left-width: 3px; background: var(--panel-2); }
.item.import-new { border-left-color: var(--gold-line); }
.item.import-conflict, .item.import-resembles { border-left-color: var(--line-2); }
.item.import-identical, .item.import-owned, .item.import-batch, .item.import-error { border-left-color: var(--line); }
.import-entry .btn-row { margin-top: 0.6rem; }
.import-entry .msg { margin-top: 0.5rem; }
.library-placeholder-v.is-category { font-size: 1.5rem; }

/* =====================================================================================
   v1.2.2 first-launch choices, patch-content results, live countdown tag
   ===================================================================================== */
/* the first-launch pop-up: darkened + blurred page, fading in and out together */
.start-overlay {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1rem; overflow-y: auto;
  background: rgba(0, 0, 0, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); opacity: 0;
  transition: opacity 0.4s var(--ease), background-color 0.4s var(--ease), -webkit-backdrop-filter 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
}
.start-overlay[hidden] { display: none; }
.start-overlay.is-open { opacity: 1; background: rgba(0, 0, 0, 0.58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.start-overlay .start-panel {
  width: min(42rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; margin: 0;
  transform: translateY(10px) scale(0.985); transition: transform 0.4s var(--ease);
}
.start-overlay.is-open .start-panel { transform: none; }
body.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .start-overlay, .start-overlay .start-panel { transition: none; } }
.start-panel { border-color: var(--gold-line); }
.start-panel .btn-row { margin-top: 0.8rem; }
.patch-load { margin-top: 0.9rem; }
.patch-load-summary { margin-top: 0.4rem; }
.patch-load .overline { margin-top: 1rem; }
.confirm-inline { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--danger-line); }
.countdown-tag {
  /* v1.2.5: urgency colour. --cd-h is set per tag from the time left (events.urgency): 140 green ... 0 red. One
     lightness and saturation for every hue keeps the text above 4.5:1 on the darkest card and the artwork overlay. */
  --cd-h: 0;
  margin-left: auto; padding: 0.15rem 0.5rem; border: 1px solid hsl(var(--cd-h) 85% 66% / 0.45); border-radius: var(--r);
  background: hsl(var(--cd-h) 85% 66% / 0.11); color: hsl(var(--cd-h) 85% 66%); font: 600 0.72rem/1.4 var(--sans); letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: color 0.6s, border-color 0.6s, background-color 0.6s;
}
@media (forced-colors: active) { .countdown-tag { color: CanvasText; border-color: CanvasText; background: Canvas; } }
/* v1.2.8: the longer "Limited rewards unavailable in …" never widens a card: the tag can take the full row and, on a
   narrow card, wraps at a space */
.countdown-tag { max-width: 100%; white-space: normal; }
/* v1.2.5: the card "Open in Events" / "Open in Endgame Content" lands on (uiNav.reveal), clear of the sticky bar */
.item-list > .item { scroll-margin-top: calc(var(--nav-h) + 0.75rem); }
.item.nav-target { animation: nav-target 1.6s var(--ease) 1; }
@keyframes nav-target { 0%, 35% { box-shadow: 0 0 0 2px var(--gold), 0 0 28px rgba(186, 151, 92, 0.45); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .item.nav-target { animation: none; outline: 2px solid var(--gold); outline-offset: 2px; } }
.eg-not-published { margin-top: 0.4rem; }

/* =====================================================================================
   v1.2.3 ended cards (Events and Timeline): marked on the card itself instead of a separate "has ended" note.
   Red diagonal stripes over the card's surface, or over its darkened artwork so the image stays recognisable; a red
   left edge and Ended badge; the Delete action leads the row as a solid red button. Reward tables keep an opaque
   surface so their numbers stay readable over the stripes.
   ===================================================================================== */
.item.is-ended {
  border-left-color: var(--danger);
  background: repeating-linear-gradient(135deg, rgba(255, 100, 103, 0.13) 0 10px, transparent 10px 22px), var(--panel-2);
}
.item.is-ended > .item-art {
  background: repeating-linear-gradient(135deg, rgba(255, 100, 103, 0.16) 0 10px, transparent 10px 22px),
    linear-gradient(90deg, rgba(10, 10, 9, 0.9) 0%, rgba(10, 10, 9, 0.8) 55%, rgba(10, 10, 9, 0.7) 100%), var(--art) center / cover no-repeat;
}
.item.is-ended .badge-expired, .item.is-ended .badge-ended { border-style: solid; border-color: var(--danger-line); color: var(--danger); background: var(--danger-bg); }
.item.is-ended .table-wrap { background: var(--panel); border-radius: var(--r); }
.btn.danger.solid { background: var(--danger); border-color: var(--danger); color: #000; font-weight: 600; }
.btn.danger.solid:hover:not(:disabled), .btn.danger.solid:focus-visible { background: #ff8587; border-color: #ff8587; color: #000; }
@media (forced-colors: active) {
  .item.is-ended { background: Canvas; border-left-color: Mark; border-left-style: double; border-left-width: 6px; }
  .btn.danger.solid { background: ButtonText; color: ButtonFace; forced-color-adjust: none; }
}

/* =====================================================================================
   v1.2.4 card actions: operational actions on the left, the management group (Edit, Export, Delete) on the right.
   On narrow cards the management group wraps to its own line, right-aligned, under a hairline.
   ===================================================================================== */
.card-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1rem; margin-top: 0.7rem; }
.card-actions .act-ops, .card-actions .act-manage { display: flex; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.card-actions .act-manage { margin-left: auto; justify-content: flex-end; }
@media (max-width: 560px) {
  .card-actions .act-ops + .act-manage { flex-basis: 100%; padding-top: 0.5rem; border-top: 1px solid var(--line); }
}
.event-cats.single { grid-template-columns: minmax(0, 1fr); }

/* =====================================================================================
   v1.2.7 local cache: header pill, status line in Save & Load, the "restored" note
   ===================================================================================== */
.header-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.cache-pill {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--r); padding: 0.2rem 0.6rem; white-space: nowrap;
}
.cache-pill:hover, .cache-pill:focus-visible { color: var(--text-2); border-color: var(--line-2); }
.cache-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; }
[data-cache="ok"] .cache-dot { background: var(--up); }
[data-cache="pending"] .cache-dot, [data-cache="off"] .cache-dot, [data-cache="conflict"] .cache-dot { background: var(--gold); }
[data-cache="error"] .cache-dot { background: var(--danger); }
.cache-pill[data-cache="error"], .cache-pill[data-cache="conflict"] { color: var(--text-2); border-color: var(--gold-line); }
.cache-pill[data-cache="error"] { border-color: var(--danger-line); }
.cache-box { margin-top: 1rem; }
.cache-status { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.88rem; margin: 0.4rem 0; }
.cache-status #cache-status-time { color: var(--muted); font-size: 0.8rem; }
.cache-toggles { margin-top: 0.4rem; }
.cache-interval { margin-top: 0.5rem; }
.cache-restored { margin: 0.75rem 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.cache-restored .cache-restored-actions { margin: 0 0 0 auto; }
.cache-restored-actions a.btn { text-decoration: none; display: inline-flex; align-items: center; }
@media (forced-colors: active) { .cache-dot { forced-color-adjust: none; border: 1px solid CanvasText; } }

/* =====================================================================================
   v1.1.6 holographic layer (visual only)
   The logo's crystal spectrum (aqua, lilac, periwinkle) is a second, quiet accent that means "projected / live";
   gold still means selected / owned / action. Rules: never on text, never a new animation or loop, no outline on
   every card; light only on projection surfaces (static hairlines) and on interaction (hover sheen, button shine,
   focus halo). Hidden in forced-colors mode; nothing here moves under prefers-reduced-motion.
   ===================================================================================== */
:root {
  --holo-aqua: #bdeff4;
  --holo-lilac: #d9b8f0;
  --holo-blue: #9aa8ea;
  --holo-line: linear-gradient(90deg, transparent, rgba(189, 239, 244, 0.55) 22%, rgba(217, 184, 240, 0.55) 52%, rgba(154, 168, 234, 0.45) 78%, transparent);
  --holo-line-v: linear-gradient(180deg, transparent, rgba(189, 239, 244, 0.45) 22%, rgba(217, 184, 240, 0.45) 52%, rgba(154, 168, 234, 0.35) 78%, transparent);
}

/* ---- projection emphasis: static 1px light on the surfaces that show projected values ---- */
.stage-forecast::before { content: ""; position: absolute; left: 0.9rem; right: 0.9rem; top: -1px; height: 1px; pointer-events: none; background: var(--holo-line); }
.hero-projected { border-left-color: transparent; }
.hero-projected::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; pointer-events: none; background: var(--holo-line-v); }
@media (max-width: 640px) {
  .hero-projected { border-top-color: transparent; }
  .hero-projected::before { left: 0; right: 0; top: -1px; bottom: auto; width: auto; height: 1px; background: var(--holo-line); }
}

/* ---- reflected light on interaction (existing hooks only) ---- */
/* card hover (ui-fx.js): a narrow spectral band that follows the pointer (the round gold cursor glow was removed after v1.1.7 review).
   v1.1.7 border light: the same layer is moved onto the card's border (inset -1px + a 1px transparent border) and its
   border-image is a radial light centred on the SAME --gx/--gy as the band, so only the edge near the shine brightens
   and it moves with it. Visible only while .fx-hover is on (this layer's opacity); border-image needs the square
   corners the design uses (--r: 0). */
.sum-tile::after, .stage::after, .item-list > .item::after {
  inset: -1px; border: 1px solid transparent;
  border-image: radial-gradient(150px circle at var(--gx, 50%) var(--gy, 50%), rgba(240, 224, 186, 0.85), rgba(189, 239, 244, 0.5) 28%, rgba(217, 184, 240, 0.28) 48%, transparent 70%) 1;
  background:
    linear-gradient(115deg, transparent calc(var(--gx, 50%) - 24%), rgba(189, 239, 244, 0.06) calc(var(--gx, 50%) - 7%), rgba(217, 184, 240, 0.075) var(--gx, 50%), rgba(154, 168, 234, 0.05) calc(var(--gx, 50%) + 7%), transparent calc(var(--gx, 50%) + 24%));
}
/* items have a 3px coloured left edge: the light ring covers it at the same width */
.item-list > .item::after { inset: -1px -1px -1px -3px; border-left-width: 3px; }
/* primary-button shine: the same single pass, with a thin chromatic fringe */
.btn.shine::after { background: linear-gradient(105deg, transparent 33%, rgba(189, 239, 244, 0.26) 44%, rgba(255, 255, 255, 0.4) 50%, rgba(217, 184, 240, 0.26) 56%, transparent 67%); }
/* tide-bar sweep: the same single pass, with the same fringe */
.tidebar::after { background: linear-gradient(100deg, transparent 30%, rgba(189, 239, 244, 0.32) 44%, rgba(255, 255, 255, 0.5) 50%, rgba(217, 184, 240, 0.32) 56%, transparent 70%); }
/* floating counter: a faint spectral rim on hover only (the gold value and border stay) */
.float-count:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(186, 151, 92, 0.12), 0 0 0 1px rgba(189, 239, 244, 0.14), 0 0 22px rgba(154, 168, 234, 0.12); }

/* ---- focus: the gold 2px outline is unchanged and stays the strongest cue; a soft aqua halo is added beside it ---- */
.btn.primary:focus-visible { box-shadow: 0 0 24px rgba(186, 151, 92, 0.35), 0 0 16px rgba(189, 239, 244, 0.12); }
.tab:focus-visible { box-shadow: 0 0 0 5px rgba(208, 177, 110, 0.16), 0 0 16px rgba(189, 239, 244, 0.12); }

/* ---- safety nets ---- */
@media (prefers-reduced-motion: reduce) {
  .sum-tile::after, .stage::after, .item-list > .item::after { transition: none; }
}
@media (forced-colors: active) {
  .stage-forecast::before, .hero-projected::before,
  .sum-tile::after, .stage::after, .item-list > .item::after, .btn.shine::after, .tidebar::after { display: none; }
  .hero-projected { border-left-color: CanvasText; }
}
@media (forced-colors: active) and (max-width: 640px) { .hero-projected { border-top-color: CanvasText; } }