/* ==========================================================================
   Polish layer (loaded last)
   1. One coherent glass button system: primary, secondary, ghost, soft,
      danger, hero glass buttons, icon buttons. Every state (rest / hover /
      active / focus / disabled / loading) keeps the same material, so nothing
      changes texture on hover.
   2. Spacing fixes for floating decorative elements and headers.
   ========================================================================== */

/* ---- Shared button anatomy ------------------------------------------------------- */
.btn {
  --btn-shadow: 0 1px 2px rgba(16, 24, 8, .06);
  --btn-hi: rgba(255, 255, 255, .7);      /* top inner highlight (the "glass edge") */
  border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--btn-hi), var(--btn-shadow);
  transition: transform .18s var(--ease), box-shadow .25s ease, background-color .2s, border-color .2s, color .2s, filter .2s;
}
.btn-sm { border-radius: 10px; }
.btn-lg { border-radius: 14px; }
.btn:not([disabled]):not(.is-loading):active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: none; box-shadow: inset 0 1px 0 var(--btn-hi), 0 0 0 3px var(--bg), 0 0 0 5px var(--focus); }
.btn[disabled], .btn[aria-disabled="true"] { box-shadow: none; filter: saturate(.6); }

/* ---- Primary: solid colour with a soft glass sheen ------------------------------- */
.btn-primary {
  --btn-hi: rgba(255, 255, 255, .42);
  --btn-shadow: 0 1px 2px rgba(16, 24, 8, .12), 0 6px 14px -8px color-mix(in srgb, var(--primary), #000 35%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .06) 48%, rgba(0, 0, 0, .04) 100%),
    var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary), #000 12%);
}
.btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 48%, rgba(0, 0, 0, .03) 100%),
    var(--primary-hover);
  border-color: color-mix(in srgb, var(--primary-hover), #000 14%);
  --btn-shadow: 0 2px 4px rgba(16, 24, 8, .1), 0 10px 20px -10px color-mix(in srgb, var(--primary), #000 30%);
  transform: translateY(-1px);
}
.btn-primary:not([disabled]):active { --btn-shadow: 0 1px 2px rgba(16, 24, 8, .14); --btn-hi: rgba(0, 0, 0, .08); }
/* the hover light-sweep: subtler and confined to the top half so it reads as glass, not glare */
.btn-primary::before { background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .26) 50%, transparent 62%); }

/* ---- Secondary: frosted glass ----------------------------------------------------- */
.btn-secondary {
  --btn-shadow: 0 1px 2px rgba(16, 24, 8, .05), 0 4px 12px -8px rgba(16, 24, 8, .2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, #fff) 0%, color-mix(in srgb, var(--surface) 82%, transparent) 100%);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  color: var(--text);
}
.btn-secondary:hover {
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface-2) 90%, transparent) 100%);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong));
  --btn-shadow: 0 2px 4px rgba(16, 24, 8, .06), 0 8px 18px -10px rgba(16, 24, 8, .25);
  transform: translateY(-1px);
}

/* ---- Ghost / soft / danger ---------------------------------------------------------- */
.btn-ghost { --btn-hi: transparent; --btn-shadow: none; }
.btn-ghost:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); --btn-hi: rgba(255, 255, 255, .6); --btn-shadow: 0 1px 2px rgba(16, 24, 8, .05); }
.btn-soft { --btn-hi: rgba(255, 255, 255, .55); }
.btn-soft:hover { --btn-shadow: 0 6px 14px -8px color-mix(in srgb, var(--primary), #000 35%); }
.btn-danger { --btn-hi: rgba(255, 255, 255, .5); border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent); }
.btn-danger:hover { border-color: color-mix(in srgb, var(--danger) 40%, transparent); filter: none; background: color-mix(in srgb, var(--danger) 16%, var(--surface)); }
.btn-danger-solid { --btn-hi: rgba(255, 255, 255, .3); --btn-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 14px -8px color-mix(in srgb, var(--danger), #000 30%); }

/* Dark theme: highlights must be faint, shadows deeper */
:root[data-theme="black"] .btn { --btn-hi: rgba(255, 255, 255, .07); --btn-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
:root[data-theme="black"] .btn-primary { --btn-hi: rgba(255, 255, 255, .35); --btn-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 18px -10px rgba(226, 193, 107, .45); }
:root[data-theme="black"] .btn-secondary {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .03) 100%);
  border-color: rgba(255, 255, 255, .12);
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 14px -10px rgba(0, 0, 0, .8);
}
:root[data-theme="black"] .btn-secondary:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .05) 100%); border-color: rgba(226, 193, 107, .4); }
:root[data-theme="black"] .btn-ghost:hover { background: rgba(255, 255, 255, .06); --btn-hi: rgba(255, 255, 255, .06); }

/* ---- Glass buttons on the coloured balance card ------------------------------------- */
.hero-btn, .hero-eye, .hero-next, .hero-chip {
  --g-top: rgba(255, 255, 255, .34);
  --g-bot: rgba(255, 255, 255, .14);
  --g-edge: rgba(255, 255, 255, .5);
  background: linear-gradient(180deg, var(--g-top), var(--g-bot));
  border: 1px solid var(--g-edge);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .04), 0 6px 16px -10px rgba(0, 0, 0, .35);
}
.hero-chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.hero-btn {
  gap: 8px;
  min-height: 74px;
  border-radius: 18px;
  color: var(--hero-fg);
  transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
.hero-btn .icon {
  width: 34px; height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 8px -4px rgba(0, 0, 0, .3);
}
.hero-btn:hover {
  --g-top: rgba(255, 255, 255, .5);
  --g-bot: rgba(255, 255, 255, .24);
  --g-edge: rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, var(--g-top), var(--g-bot));
  color: var(--hero-fg);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 22px -12px rgba(0, 0, 0, .4);
}
.hero-btn:active { transform: translateY(0) scale(.97); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .12); }
.hero-btn:focus-visible, .hero-eye:focus-visible, .hero-next:focus-visible { outline: 2px solid var(--hero-fg); outline-offset: 2px; }
.hero-eye:hover, .hero-next:hover { --g-top: rgba(255, 255, 255, .48); --g-bot: rgba(255, 255, 255, .22); }
.hero-next { transform: none; }
.hero-next:hover { transform: none; }

/* Premium Black: the card is dark, so the glass is a faint light film with a gold edge */
:root[data-theme="black"] :is(.hero-btn, .hero-eye, .hero-next, .hero-chip) {
  --g-top: rgba(255, 255, 255, .09);
  --g-bot: rgba(255, 255, 255, .03);
  --g-edge: rgba(226, 193, 107, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 18px -12px rgba(0, 0, 0, .9);
}
:root[data-theme="black"] .hero-btn .icon { background: rgba(226, 193, 107, .16); color: #EACB7C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
:root[data-theme="black"] .hero-btn:hover { --g-top: rgba(226, 193, 107, .16); --g-bot: rgba(226, 193, 107, .06); --g-edge: rgba(226, 193, 107, .5); }
:root[data-theme="black"] :is(.hero-eye, .hero-next):hover { --g-top: rgba(255, 255, 255, .14); --g-bot: rgba(255, 255, 255, .06); }
/* Clean White: blue card, crisper white film */
:root[data-theme="white"] .hero-btn .icon { background: rgba(255, 255, 255, .28); }

/* ---- Top-bar icon buttons and theme switcher: same glass family ----------------------- */
.theme-switch {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, #fff), color-mix(in srgb, var(--surface) 75%, transparent));
  border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(16, 24, 8, .05);
}
:root[data-theme="black"] .theme-switch { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.theme-switch button[aria-pressed="true"] { box-shadow: 0 1px 3px rgba(16, 24, 8, .15); }

/* ---- Header spacing: brand never runs under the controls ---------------------------- */
.pub-header-inner .brand, .auth-top .brand { min-width: 0; }
.pub-header-inner .brand-name, .auth-top .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-actions, .auth-top .theme-switch { flex: none; }
.menu-theme { display: none; }
@media (max-width: 479px) {
  /* On phones the theme switcher moves into the menu panel, leaving the header uncluttered. */
  .pub-actions .theme-switch { display: none; }
  .menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 4px 12px; font-weight: 650; }
}
@media (max-width: 359px) { .auth-top .brand-name { display: none; } }

/* ---- Focus ring belongs to controls, not to the whole page region --------------------- */
/* (#view receives programmatic focus after navigation so screen readers start at the new page.) */
#view:focus, #view:focus-visible { outline: none; }

/* ---- Landing hero: floating cards stay clear of the text column ------------------------ */
@media (min-width: 960px) {
  .hero-visual .preview-card { left: -24px; bottom: -24px; }
  .hero-visual .fc-2 { left: -18px; }
}
@keyframes float-3d {
  0%, 100% { transform: perspective(1000px) rotateX(2deg) rotateY(-3deg) translateY(0); }
  50% { transform: perspective(1000px) rotateX(-1deg) rotateY(-1deg) translateY(-8px); }
}

/* ---- Stat cards: sparkline never collides with the icon on narrow cards ---------------- */
.stat { container-type: inline-size; }
@container (max-width: 124px) { .stat-spark { display: none; } }
.hero-next { font-size: .84rem; }

/* ---- Summary / admin stat cards: values line up across a row however the labels wrap ------- */
.summary-item { display: flex; flex-direction: column; }
.summary-item .stat-value { margin-top: auto; padding-top: 4px; }

/* ---- Sideways-scrolling tab rows: fade the edge that has more tabs (ui.scrollFade) ------- */
.tabs.fade-end { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.tabs.fade-start { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.tabs.fade-start.fade-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.tabs { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .tabs { scroll-behavior: auto; } }

/* ---- Help: contact form ----------------------------------------------------------------- */
#contact { scroll-margin-top: 84px; }
/* Spam trap: present for bots, invisible and unreachable for people (not display:none, which
   some bots skip). */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.help-count { margin: -8px 0 0; text-align: right; font-size: .8rem; font-variant-numeric: tabular-nums; transition: color var(--dur) ease; }
.help-count.is-near { color: var(--warning, #b7791f); }
.help-done { outline: none; }
.help-done:not([hidden]) { animation: help-done-in .45s var(--ease) both; }
.help-done-inner { max-width: 460px; margin: 8px auto; padding-block: 12px; }
@keyframes help-done-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
#contact-form .input[readonly] { background: var(--surface-2); cursor: default; }

/* ---- Admin: support email delivery -------------------------------------------------------- */
.adm-mail { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .76rem; font-weight: 600; color: var(--text-muted); }
.adm-mail.is-sent { color: var(--success, #168527); }
.adm-mail.is-failed { color: var(--danger, #c53030); cursor: help; }

@media (prefers-reduced-motion: reduce) {
  .help-done:not([hidden]) { animation: none; }
}