/*
 * clay.css - the Asia Atlas visual system, single source of truth.
 *
 * Linked by both index.html (the app) and design-board.html (the board), so the board
 * is never a picture of the design - it is the design, running.
 *
 * THE RECIPE. Every raised surface needs all five layers or the illusion collapses:
 *   1. vertical gradient body      light on top, saturated at the bottom
 *   2. inner highlight             a bright band just inside the top edge
 *   3. inner shade                 a cool dark band just inside the bottom edge
 *   4. the gold ring               two stacked shadow rings, warm then dark
 *   5. cast shadow                 soft, tinted blue, never grey and never sharp
 * Plus a glossy ellipse as ::after, which is what reads as "sculpted", not "flat".
 */

:root {
  --sky: #8FCFEE;
  --sky-deep: #4A9BD1;
  --sky-ink: #1E5C86;
  --sand: #EFCF9A;
  --sand-deep: #C9A163;
  --sand-pale: #F9EBD2;
  --leaf: #7FBE55;
  --leaf-deep: #58913A;
  --coral: #EE8071;
  --coral-deep: #C85445;
  --gold: #F5CC63;
  --gold-deep: #C79A2E;
  --grape: #A98BDC;
  --grape-deep: #7D62B0;
  --cream: #FFFAF0;
  --ink: #2B4257;
  --ink-soft: #64809A;

  --risk-0: #5FBF7D;
  --risk-1: #F0C64A;
  --risk-2: #F0973E;
  --risk-3: #E4614C;
  --risk-4: #B03030;

  --font-display: 'Comfortaa', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;

  /*
   * Type scale.
   *
   * The first build shipped 10-11px body text, which is unreadable on a laptop and
   * absurd on a TV-sized monitor. Base is 17px and nothing in the product goes below
   * --text-sm; captions that "need" to be smaller are captions that need to be cut.
   */
  --text-xs: 0.8125rem;   /* 13px - the floor, labels only */
  --text-sm: 0.9375rem;   /* 15px - secondary text */
  --text-base: 1.0625rem; /* 17px - body */
  --text-lg: 1.25rem;     /* 20px - card titles */
  --text-xl: 1.5rem;      /* 24px - section heads */
  --text-2xl: 2rem;       /* 32px - country name */
  --text-3xl: 2.75rem;    /* 44px - the number that matters */
  --text-4xl: 3.75rem;    /* 60px - the live countdown */

  /* spacing rhythm, 4px based */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;

  /* the gold ring: warm band, then a thin dark keyline so it reads at any size */
  --ring: 0 0 0 5px var(--sand), 0 0 0 7px rgba(146, 104, 44, 0.45);
  --ring-thin: 0 0 0 3.5px var(--sand), 0 0 0 5px rgba(146, 104, 44, 0.4);
  --lift: 0 14px 26px -8px rgba(22, 60, 95, 0.45), 0 4px 8px -2px rgba(22, 60, 95, 0.3);
  --lift-sm: 0 8px 16px -6px rgba(22, 60, 95, 0.4);
}

/* ========================================================================== */
/* CLAY CONTROLS                                                              */
/* ========================================================================== */

.clay {
  position: relative;
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  display: grid;
  place-items: center;
  isolation: isolate;
  background: linear-gradient(177deg, var(--c-light) 0%, var(--c-mid, var(--c-light)) 42%, var(--c-dark) 100%);
  box-shadow:
    inset 0 4px 9px rgba(255, 255, 255, 0.62),
    inset 0 -7px 12px rgba(0, 48, 88, 0.3),
    var(--ring),
    var(--lift);
  transition:
    transform 0.17s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter 0.17s ease,
    box-shadow 0.17s ease;
}

/* the sculpted highlight - an ellipse of light sitting on the upper dome */
.clay::after {
  content: '';
  position: absolute;
  inset: 9% 22% 52% 22%;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 74%);
  pointer-events: none;
  z-index: 1;
}

.clay > * { position: relative; z-index: 2; }

.clay:hover { transform: translateY(-3px); filter: brightness(1.06) saturate(1.04); }
.clay:active { transform: translateY(2px) scale(0.975); box-shadow: inset 0 4px 9px rgba(255,255,255,0.5), inset 0 -4px 8px rgba(0,48,88,0.34), var(--ring), var(--lift-sm); }
.clay:focus-visible { outline: none; box-shadow: inset 0 4px 9px rgba(255,255,255,0.62), inset 0 -7px 12px rgba(0,48,88,0.3), 0 0 0 5px var(--sand), 0 0 0 7px var(--sky-deep), var(--lift); }

.clay.blue  { --c-light: #A2DCF6; --c-mid: #6FC0E9; --c-dark: #3389C5; }
.clay.coral { --c-light: #FBAE9D; --c-mid: #F28879; --c-dark: #CC5040; }
.clay.leaf  { --c-light: #AEE083; --c-mid: #8CCB5E; --c-dark: #52913A; }
.clay.grape { --c-light: #CDB5F0; --c-mid: #AA8FDD; --c-dark: #7358A8; }
.clay.gold  { --c-light: #FCE7A2; --c-mid: #F6CF6C; --c-dark: #CF9C28; }
.clay.sand  { --c-light: #FAEBCF; --c-mid: #EED8AF; --c-dark: #CBA366; color: #6B4E23; }
.clay.risk  { --c-light: #F0A091; --c-mid: #DE6E5B; --c-dark: #A82F2A; }

/* shapes */
.clay-round { width: 76px; height: 76px; border-radius: 999px; }
.clay-round.sm { width: 52px; height: 52px; box-shadow: inset 0 3px 6px rgba(255,255,255,.6), inset 0 -5px 9px rgba(0,48,88,.28), var(--ring-thin), var(--lift-sm); }
.clay-round.lg { width: 98px; height: 98px; }
.clay-pill { height: 62px; padding: 0 34px; border-radius: 999px; font-size: 18px; grid-auto-flow: column; gap: 11px; letter-spacing: 0.3px; }
.clay-pill.sm { height: 46px; padding: 0 22px; font-size: 14px; box-shadow: inset 0 3px 6px rgba(255,255,255,.6), inset 0 -5px 9px rgba(0,48,88,.28), var(--ring-thin), var(--lift-sm); }
.clay-pill.wide { width: 100%; }

.clay svg { width: 34px; height: 34px; fill: #fff; filter: drop-shadow(0 2px 0 rgba(0, 48, 88, 0.35)); }
.clay-round.sm svg { width: 24px; height: 24px; }
.clay-round.lg svg { width: 44px; height: 44px; }
.clay-pill svg { width: 24px; height: 24px; }
.clay.sand svg { fill: #6B4E23; filter: drop-shadow(0 2px 0 rgba(140, 100, 40, 0.3)); }

/* ========================================================================== */
/* PANELS                                                                     */
/* ========================================================================== */

.clay-panel {
  position: relative;
  background: linear-gradient(178deg, #FFFEFA 0%, #FDF4E4 62%, #F8EAD3 100%);
  border-radius: 30px;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.98),
    inset 0 -5px 12px rgba(176, 136, 76, 0.16),
    0 0 0 5px rgba(239, 207, 154, 0.95),
    0 0 0 7px rgba(146, 104, 44, 0.32),
    0 20px 36px -12px rgba(22, 60, 95, 0.4);
}
.clay-panel.tight { border-radius: 22px; box-shadow: inset 0 2px 0 rgba(255,255,255,.95), inset 0 -4px 9px rgba(176,136,76,.14), var(--ring-thin), var(--lift-sm); }

.clay-card {
  background: linear-gradient(178deg, #FFFFFF 0%, #FFFBF3 100%);
  border-radius: 18px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.9),
    0 0 0 2.5px #F1E3C8,
    0 7px 14px -6px rgba(22, 60, 95, 0.26);
}

/* ========================================================================== */
/* BADGES, CHIPS, RISK                                                        */
/* ========================================================================== */

.clay-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #fff;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.16), 0 0 0 2px rgba(255,255,255,.85), 0 3px 7px -3px rgba(22,60,95,.4);
}
.clay-badge.ok   { background: linear-gradient(180deg, #7FD79A, #3F9E5C); }
.clay-badge.warn { background: linear-gradient(180deg, #F7DC7E, #D9A62E); color: #5B4210; }
.clay-badge.bad  { background: linear-gradient(180deg, #F08877, #CE5140); }
.clay-badge.info { background: linear-gradient(180deg, #9AD5F2, #3F94CE); }

.clay-gauge {
  width: 100%;
  height: 18px;
  border-radius: 999px;
  position: relative;
  background: linear-gradient(90deg, var(--risk-0) 0%, var(--risk-1) 27%, var(--risk-2) 50%, var(--risk-3) 74%, var(--risk-4) 100%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.28), 0 0 0 3.5px rgba(255,255,255,.95), 0 5px 12px -5px rgba(22,60,95,.45);
}
.clay-needle {
  position: absolute;
  top: -7px;
  width: 7px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, #E6EDF3);
  box-shadow: 0 0 0 2.5px rgba(43, 66, 87, 0.6), 0 4px 8px rgba(0, 0, 0, 0.34);
  transform: translateX(-50%);
  transition: left 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* ========================================================================== */
/* INPUTS                                                                     */
/* ========================================================================== */

.clay-input {
  font-family: var(--font-body);
  font-weight: 700;
  border: none;
  border-radius: 15px;
  background: linear-gradient(180deg, #FFFFFF, #FBF6EC);
  padding: 11px 14px;
  color: var(--ink);
  box-shadow: inset 0 3px 6px rgba(150, 120, 70, 0.16), 0 0 0 2.5px #EEDFC2, 0 2px 0 rgba(255,255,255,.9);
  transition: box-shadow 0.16s ease;
}
.clay-input:focus {
  outline: none;
  box-shadow: inset 0 3px 6px rgba(150,120,70,.12), 0 0 0 3px var(--sky-deep), 0 0 0 6px rgba(74,155,209,.24);
}

/* ========================================================================== */
/* MOTION                                                                     */
/* ========================================================================== */

@keyframes clay-pop {
  0% { opacity: 0; transform: translateY(22px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes clay-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-9px) rotate(1deg); }
}
@keyframes clay-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.anim-pop { animation: clay-pop 420ms cubic-bezier(0.34, 1.4, 0.64, 1) both; }
.anim-float { animation: clay-float 4.2s ease-in-out infinite; }
.anim-breathe { animation: clay-breathe 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .anim-pop, .anim-float, .anim-breathe { animation: none; }
  .clay, .clay-needle { transition: none; }
}

/* ========================================================================== */
/* SCROLLBAR                                                                  */
/* ========================================================================== */

.clay-scroll { scrollbar-width: thin; scrollbar-color: #E2CFA8 transparent; }
.clay-scroll::-webkit-scrollbar { width: 11px; }
.clay-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #EFD9B2, #D8BA84);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}