/* ---------- Design tokens ---------- */
:root{
  --bg:#ffffff; --panel:#f9fafb; --text:#0f172a; --muted:#475569; --border:#e2e8f0;
  --brand:#008753; --accent:#16a34a;

  --tint-green:#f0fbf5; --tint-blue:#eef6ff; --tint-amber:#fff7ed; --tint-purple:#f5efff;

  --bg-d:#0b1222; --panel-d:#0f172a; --text-d:#e6edf3; --muted-d:#cbd5e1; --border-d:#1f2a44; --brand-d:#4aa3ff;
  --tile-d:#111b2e; --tile-border-d:#2b3a5b; --btn-d:#0b1222; --btn-border-d:#2b3a5b; --link:#0a58ca; --link-d:#7aa7ff;

  --tint-green-d:#0f2019; --tint-blue-d:#0f1a2a; --tint-amber-d:#21180f; --tint-purple-d:#1a1530;

  --fs-12: clamp(11.5px, 0.72rem, 12px);
  --fs-14: clamp(13px, 0.84rem, 14px);
  --fs-16: clamp(14.5px, 0.95rem, 16px);
  --fs-18: clamp(16px, 1.05rem, 18px);
  --fs-20: clamp(17px, 1.12rem, 20px);
  --fs-22: clamp(18px, 1.2rem, 22px);
  --fs-28: clamp(20px, 1.6rem, 28px);
  --fs-72: clamp(34px, 6vw, 72px);

  --radius-8: 8px; --radius-12: 12px; --radius-16: 16px;
  --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px;
  --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-24: 24px;

  /* stronger borders */
  --border-strong: color-mix(in srgb, var(--border) 50%, #000000 10%);

  /* Polarity palettes (light) */
  --pos-bg:#eefdf6; --pos-bd:#b7f0d3; --pos-fg:#065f46;
  --neg-bg:#fff1f2; --neg-bd:#fecdd3; --neg-fg:#7f1d1d;
  --neu-bg:#f5f5f4; --neu-bd:#e7e5e4; --neu-fg:#3f3f46;

  /* Polarity palettes (dark) */
  --pos-bg-d:#0f1f19; --pos-bd-d:#1e3a2a; --pos-fg-d:#86efac;
  --neg-bg-d:#241417; --neg-bd-d:#3f1d22; --neg-fg-d:#fda4af;
  --neu-bg-d:#1b1b1b; --neu-bd-d:#2a2a2a; --neu-fg-d:#d4d4d8;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  /* Public Sans first, Open Sans fallback */
  font:var(--fs-16)/1.5 "Public Sans","Open Sans",ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--link);text-decoration:underline}
:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 60%, transparent);outline-offset:2px}
.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}
[hidden]{display:none !important}

/* Skip link */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;z-index:100;background:#111827;color:#fff;padding:8px 12px;border-radius:8px}

/* Layout & header */
.wrap{max-width:1160px;margin:0 auto;padding:var(--space-24) var(--space-16)}
@media (min-width:768px){ .wrap{padding:var(--space-24)} }

.site-bar{position:sticky;top:0;z-index:50;backdrop-filter:saturate(170%) blur(8px);-webkit-backdrop-filter:saturate(170%) blur(8px);
  background:color-mix(in srgb, var(--bg) 88%, transparent);border-bottom:1px solid var(--border);transition:box-shadow .2s ease, background-color .2s ease}
.site-bar.is-stuck{box-shadow:0 6px 18px rgba(0,0,0,.06);background:color-mix(in srgb, var(--bg) 92%, transparent)}
.dark .site-bar{background:color-mix(in srgb, var(--bg-d) 70%, transparent);border-bottom-color:var(--border-d)}
.dark .site-bar.is-stuck{background:color-mix(in srgb, var(--bg-d) 78%, transparent);box-shadow:0 8px 24px rgba(0,0,0,.25)}

.site-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);padding-block:10px}
.site-bar.is-stuck .site-header{padding-block:8px}
.brand{display:flex;align-items:center;gap:var(--space-12)}
.logo{width:40px;height:40px;border-radius:10px;flex:0 0 auto}
.site-title{margin:0;font-size:var(--fs-28);font-weight:900;letter-spacing:.2px;line-height:1.1}
.site-tagline{margin:.15rem 0 0 0;font-size:var(--fs-16);font-weight:600;color:var(--muted);line-height:1.2}

.header-actions{display:flex;gap:var(--space-10);align-items:center;flex-wrap:wrap}
.btn{padding:var(--space-8) var(--space-12);border:1px solid var(--border);border-radius:var(--radius-8);background:#fff;color:var(--text);cursor:pointer;font-size:var(--fs-14);line-height:1}
.btn:hover{filter:brightness(.98)} .btn:active{transform:translateY(1px)}
.btn--xs{padding:4px 8px;font-size:12px}
.btn--ghost{background:transparent}

.pill{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:var(--space-4)}
.pill button{padding:var(--space-6) var(--space-10);border:0;border-radius:999px;background:transparent;cursor:pointer;color:inherit;line-height:1;font-size:var(--fs-14)}
.pill button[aria-pressed="true"]{background:var(--accent);color:#fff;font-weight:700}

/* --------- SECTION panels (hero-like) --------- */
.section{
  background:var(--panel);border:2px solid var(--border-strong);border-radius:var(--radius-16);padding:var(--space-18);
  margin-top:var(--space-18); box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.section.hero{
  border-left:6px solid var(--brand);
  background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 6%, transparent), transparent), var(--panel);
}
.section-title{margin:0;font-size:var(--fs-20);font-weight:900}
.section .head-actions{display:flex;align-items:center;gap:8px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}

/* Color accents per category */
.panel--debt{ background:var(--tint-green); border-color:color-mix(in srgb, #008753 25%, var(--border)) }
.panel--economy{ background:var(--tint-blue); border-color:color-mix(in srgb, #2463eb 22%, var(--border)) }
.panel--trade{ background:var(--tint-amber); border-color:color-mix(in srgb, #ea580c 25%, var(--border)) }

/* Mini cards grid */
.mini-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:540px){ .mini-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:920px){ .mini-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.mini{
  background:#fff;border:2px solid var(--border-strong);border-radius:12px;padding:14px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease, box-shadow .2s ease;
}
.mini:hover{ box-shadow:0 14px 30px rgba(0,0,0,.08); }
.mini-title{font-size:var(--fs-16);font-weight:800;color:var(--muted);margin-bottom:6px}
.mini-num{font-size:var(--fs-28);font-weight:600;letter-spacing:-.2px;line-height:1.15}
.mini-sub{margin-top:6px;font-size:var(--fs-14);color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}

/* Polarity skins */
.mini--pos{ background:var(--pos-bg); border-color:var(--pos-bd); color:var(--pos-fg); }
.mini--pos .mini-title,.mini--pos .mini-sub{ color:color-mix(in srgb, var(--pos-fg) 60%, #0000); }

.mini--neg{ background:var(--neg-bg); border-color:var(--neg-bd); color:var(--neg-fg); }
.mini--neg .mini-title,.mini--neg .mini-sub{ color:color-mix(in srgb, var(--neg-fg) 60%, #0000); }

.mini--neu{ background:var(--neu-bg); border-color:var(--neu-bd); color:var(--neu-fg); }
.mini--neu .mini-title,.mini--neu .mini-sub{ color:color-mix(in srgb, var(--neu-fg) 60%, #0000); }

/* Sparklines */
.spark{width:100%;height:28px;display:block;margin-top:6px}
.spark .line{fill:none;stroke:#0a58ca;stroke-width:1.5}
.spark .area{fill:#0a58ca22}

/* Skeletons */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel-line{color:transparent !important;border-radius:6px;background:linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.08), rgba(0,0,0,0.04));background-size:200% 100%;animation:shimmer 1.1s ease-in-out infinite}
.is-loading .mini-num,.is-loading .mini-sub{display:inline-block;min-width:120px;min-height:1.1em}

/* Popover */
.popover{position:relative}
.popover[hidden]{display:none}
.popover .popover-body{
  position:absolute;right:0;top:calc(100% + 6px);min-width:240px;
  background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);z-index:40
}
.pop-row{display:flex;gap:6px;align-items:baseline;font-size:13px;margin:4px 0}
.dark .popover .popover-body{background:var(--panel-d);border-color:var(--border-d);color:var(--text-d);box-shadow:0 12px 28px rgba(0,0,0,.35)}

/* Back to top */
.to-top{position:fixed;right:14px;bottom:14px;z-index:60;width:42px;height:42px;border-radius:999px;border:1px solid var(--border);
  background:#fff;color:#0f172a;box-shadow:0 8px 24px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease, transform .2s ease, visibility .2s}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.dark .to-top{background:var(--btn-d);border-color:var(--btn-border-d);color:var(--text-d)}

.badge{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;font-size:11px;line-height:1;border:1px solid var(--border);background:#fff;color:#6b7280;vertical-align:middle}

/* Footer */
.foot{margin-top:var(--space-16);font-size:var(--fs-14);color:var(--muted)}

/* =================== NEW: Clocks deck styles =================== */
.deck-root{display:grid;gap:16px}
.deck-cat{border:1px dashed var(--border);border-radius:12px;padding:12px;background:#fff}
.deck-cat>h3{margin:0 0 8px 0;font-size:var(--fs-18);font-weight:900;color:var(--text)}
.deck-cards{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:540px){.deck-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:920px){.deck-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

.card{
  background:#fff;border:2px solid var(--border-strong);border-radius:12px;padding:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.06)
}
.card>h4{margin:0 0 6px 0;font-size:var(--fs-16);font-weight:800;color:var(--muted)}
.card-num{font-size:var(--fs-28);font-weight:600;letter-spacing:-.2px;line-height:1.15}
.card .unit{font-size:var(--fs-12);color:var(--muted);margin-left:6px}

/* polarity for deck cards */
.card--pos{ background:var(--pos-bg); border-color:var(--pos-bd); color:var(--pos-fg); }
.card--neg{ background:var(--neg-bg); border-color:var(--neg-bd); color:var(--neg-fg); }
.card--neu{ background:var(--neu-bg); border-color:var(--neu-bd); color:var(--neu-fg); }
.card--pos h4,.card--pos .unit{ color:color-mix(in srgb, var(--pos-fg) 60%, #0000); }
.card--neg h4,.card--neg .unit{ color:color-mix(in srgb, var(--neg-fg) 60%, #0000); }
.card--neu h4,.card--neu .unit{ color:color-mix(in srgb, var(--neu-fg) 60%, #0000); }
/* =============================================================== */

/* Dark mode */
.dark body{background:var(--bg-d);color:var(--text-d)}
.dark a{color:var(--link-d)}
.dark .section{background:var(--panel-d);border-color:var(--border-d)}
.dark .section.hero{background:linear-gradient(90deg, color-mix(in srgb, var(--brand-d) 8%, transparent), transparent), var(--panel-d);border-left-color:var(--brand-d)}
.dark .panel--debt{ background: var(--tint-green-d); border-color: color-mix(in srgb, #7ee0b0 25%, var(--border-d)) }
.dark .panel--economy{ background: var(--tint-blue-d); border-color: color-mix(in srgb, #9cc2ff 22%, var(--border-d)) }
.dark .panel--trade{ background: var(--tint-amber-d); border-color: color-mix(in srgb, #ffb67a 25%, var(--border-d)) }
.dark .mini{background:var(--tile-d);border-color:var(--tile-border-d)}
.dark .mini--pos{ background:var(--pos-bg-d); border-color:var(--pos-bd-d); color:var(--pos-fg-d); }
.dark .mini--neg{ background:var(--neg-bg-d); border-color:var(--neg-bd-d); color:var(--neg-fg-d); }
.dark .mini--neu{ background:var(--neu-bg-d); border-color:var(--neu-bd-d); color:var(--neu-fg-d); }
.dark .mini-title{color:inherit}
.dark .mini-sub{color:inherit;opacity:.9}
.dark .deck-cat{background:var(--panel-d);border-color:var(--tile-border-d)}
.dark .card{background:var(--tile-d);border-color:var(--tile-border-d);color:var(--text-d)}
.dark .card--pos{ background:var(--pos-bg-d); border-color:var(--pos-bd-d); color:var(--pos-fg-d); }
.dark .card--neg{ background:var(--neg-bg-d); border-color:var(--neg-bd-d); color:var(--neg-fg-d); }
.dark .card--neu{ background:var(--neu-bg-d); border-color:var(--neu-bd-d); color:var(--neu-fg-d); }

/* Responsiveness for very small screens */
@media (max-width:359px){
  .site-title{font-size:1.25rem}
  .site-tagline{font-size:.9rem}
  .mini-num,.card-num{font-size:clamp(18px, 8vw, 28px)}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
html{scroll-behavior:smooth}