/* ============================================================================
   PBS APP KIT — theme-safe elevation layer for core app DESKTOP pages.
   Canonical shared component vocabulary (.a-*) for the page redesigns.

   THEME SAFETY (the important part):
   - Every .a-* component reads the active DESKTOP THEME TOKENS
     (--bg-card, --text-heading, --text-secondary, --border, --scheme-primary,
     --gold, --btn-gradient, ...). Those tokens are set by whichever
     themes/<mode>.css base.html loaded (light / dark / classic / chang), so
     the SAME markup recolours automatically across all four themes.
   - This file is loaded AFTER themes/<mode>.css in base.html, so the alias
     bridge below resolves against the active theme's :root.
   - Mobile (.m-*) keeps using --mc-* (fixed light) from mobile.css. Do NOT
     use .a-* inside .m-only blocks.

   The redesign mockups (app-theme.css) used slightly different token names
   (--bg, --border-sub, --scheme-2, --shadow, --r-*, --font) and a standalone
   light default block. We drop the light defaults (the live themes own those)
   and bridge the name differences here instead.
   ========================================================================== */

/* ---- token alias bridge: kit names -> app's real theme tokens ---- */
:root {
    --bg:          var(--bg-body);
    --border-sub:  var(--border-subtle);
    --scheme-2:    var(--scheme-secondary);
    --shadow:      var(--shadow-card, 0 1px 2px rgba(20, 20, 40, .05), 0 10px 28px -14px rgba(20, 20, 40, .22));
    --r-sm: 10px;  --r: 14px;  --r-lg: 20px;  --r-xl: 26px;
    --font: "Inter", "Noto Sans Thai", system-ui, -apple-system, sans-serif;
}

/* ---------------- type ---------------- */
.a-h1 { font-size: clamp(26px, 4.4vw, 42px); font-weight: 900; letter-spacing: -.02em; line-height: 1.04; margin: 0; color: var(--text-heading); }
.a-h2 { font-size: clamp(20px, 3vw, 28px); font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--text-heading); }
.a-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.a-eyebrow.accent { color: var(--scheme-primary); }
.a-lede { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; color: var(--text-secondary); margin: 0; }
.a-baht { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; }
.a-num { font-variant-numeric: tabular-nums; }
.a-muted { color: var(--text-muted); }

/* ---------------- buttons ---------------- */
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: none; cursor: pointer;
    border-radius: 999px; font: 700 15px var(--font); white-space: nowrap; color: var(--btn-text); text-decoration: none;
    background: var(--btn-gradient); box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--scheme-primary) 80%, transparent); transition: transform .15s ease, box-shadow .15s ease; }
.a-btn:hover { transform: translateY(-1px); }
.a-btn.gold { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 80%, #fff), var(--gold)); color: #221604; }
.a-btn.block { width: 100%; }
.a-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; cursor: pointer; text-decoration: none;
    border: 1.5px solid var(--border); border-radius: 999px; font: 700 15px var(--font); white-space: nowrap; color: var(--text-heading); background: var(--bg-card); transition: border-color .15s ease, color .15s ease; }
.a-btn-outline:hover { border-color: var(--scheme-primary); color: var(--scheme-primary); }
.a-btn-sm { min-height: 40px; font-size: 13px; padding: 0 16px; }
.a-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); text-decoration: none; font-size: 13px; font-weight: 600; }
.a-back:hover { color: var(--text-heading); }

/* ---------------- pills ---------------- */
.a-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
    background: var(--bg-inset); color: var(--text-secondary); border: 1px solid var(--border-sub); }
.a-pill.blue { background: color-mix(in srgb, var(--scheme-primary) 16%, transparent); color: var(--scheme-primary); border-color: color-mix(in srgb, var(--scheme-primary) 34%, transparent); }
.a-pill.green { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 34%, transparent); }
.a-pill.gold { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 36%, transparent); }
.a-pill.red { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); border-color: color-mix(in srgb, var(--red) 34%, transparent); }
.a-pill.orange { background: color-mix(in srgb, var(--orange) 16%, transparent); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 34%, transparent); }

/* ---------------- cards ---------------- */
.a-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); }
.a-card.pad { padding: 18px; }

/* image hero with scrim (theme-independent: text sits on the photo) */
.a-hero { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.a-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a-hero .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 6, 16, .12) 0%, rgba(8, 6, 16, .08) 38%, rgba(8, 6, 16, .82) 100%); }
.a-hero .ov { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 3vw, 30px); color: #fff; }
.a-hero .ov h1, .a-hero .ov h2 { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }

/* stat tiles */
.a-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 14px 16px; }
.a-stat .n { font-size: 26px; font-weight: 900; letter-spacing: -.02em; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.a-stat .l { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-weight: 600; }

/* progress */
.a-prog { height: 8px; border-radius: 999px; background: var(--bg-inset); overflow: hidden; }
.a-prog > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--scheme-primary), var(--scheme-2)); }
.a-prog.gold > i { background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 70%, #fff), var(--gold)); }

/* list row */
.a-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-sub); }
.a-row:last-child { border-bottom: none; }
.a-row .ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; font-size: 19px; background: var(--bg-inset); border: 1px solid var(--border-sub); overflow: hidden; }
.a-row .ic img { width: 100%; height: 100%; object-fit: cover; }

/* segmented subtabs */
.a-tabs { display: flex; gap: 6px; background: var(--bg-inset); border-radius: 999px; padding: 4px; }
.a-tab { flex: 1; text-align: center; padding: 9px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text-secondary); text-decoration: none; white-space: nowrap; cursor: pointer; }
.a-tab.active { background: var(--bg-card); color: var(--text-heading); box-shadow: var(--shadow); }

.a-av { border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--bg-card); box-shadow: 0 2px 8px rgba(20, 20, 40, .18); }

@media (prefers-reduced-motion: reduce) { .a-btn, .a-btn-outline { transition: none; } }