/* CoffeeDaddy — stats page styles.
 * Extracted verbatim from the inline <style> in stats.html (Phase 5). */
/* Playfair for section titles, DM Mono for numeric stat values */
  .section-head h2{font-family:'Playfair Display',serif;font-weight:700;letter-spacing:-.01em}
  .statbox b{font-family:'DM Mono',monospace;letter-spacing:-.01em}

  main{max-width:1080px;margin:0 auto;padding:24px 20px 60px}
  .section{margin-bottom:32px}
  .section-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
  .section-head h2{font-size:20px}
  .section-head svg{color:var(--accent-ink);flex:none}
  .statgrid{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));margin-bottom:16px}
  .statbox{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:15px 16px;box-shadow:var(--shadow-sm);
  }
  /* The figure is the point of the tile, so it gets the room. At 27px with a
     12px label underneath, each tile read as a label with a number attached and
     the grid looked half-empty; the number now carries the tile and the label
     steps back to a caption. */
  .statbox b{display:block;font-size:34px;color:var(--ink);line-height:1;letter-spacing:-.02em}
  .statbox span{
    font-size:10.5px;color:var(--ink-soft);text-transform:uppercase;
    letter-spacing:1.1px;font-weight:600;margin-top:7px;display:block;
  }
  .panel{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    padding:16px 18px;box-shadow:var(--shadow-sm);margin-bottom:16px;
  }
  .panel h3{font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft);margin-bottom:13px}
  .bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px}
  .bar-row:last-child{margin-bottom:0}
  .bar-label{
    width:130px;flex:none;font-size:13px;font-weight:600;text-align:right;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .bar-track{flex:1;height:22px;background:var(--surface-2);border-radius:7px;overflow:hidden}
  .bar-fill{height:100%;background:linear-gradient(90deg,var(--caramel),var(--caramel-dk));border-radius:7px;min-width:3px}
  .bar-val{width:34px;flex:none;font-size:13px;font-weight:700;text-align:right}
  .hi-row{display:flex;flex-wrap:wrap;gap:12px}
  .hi-card{
    flex:1 1 220px;background:var(--surface);border:1px solid var(--line);
    border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-sm);
  }
  .hi-card .hl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--accent-ink);font-weight:700}
  .hi-card .hv{font-size:17px;font-weight:700;margin-top:4px;line-height:1.25}
  .hi-card .hs{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
  .empty-note{color:var(--ink-soft);font-size:13px;padding:6px 2px}
  .loading{text-align:center;color:var(--ink-soft);padding:60px 20px;font-size:14px}
  footer{text-align:center;padding:0 20px 30px;color:var(--ink-soft);font-size:12.5px}

  /* ---------- Bottom navigation: replaced by .glass-nav in theme.css ---------- */
  .bottom-nav{display:none!important}

  /* ---------- Mobile polish (phone screens) ---------- */
  @media(max-width:640px){
    /* Tighter header on mobile */
    header{padding:10px 14px}
    .header-inner{gap:9px}

    main{padding:16px 14px 16px}

    /* Sections pack tighter so two fit on screen */
    .section{margin-bottom:24px}
    .section-head h2{font-size:18px}
    .statgrid{gap:10px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
    .statbox{padding:13px 14px}
    .statbox b{font-size:24px}
    .panel{padding:14px 14px}

    /* Bar chart: shrink the label column so the bars get more space */
    .bar-label{width:96px;font-size:12.5px}
    .bar-track{height:20px}
    .bar-val{font-size:12.5px}

    /* Highlight cards stack two-wide on smaller screens */
    .hi-card{flex:1 1 100%;padding:13px 14px}
  }

  /* ---------- Column chart (brew activity over time) ---------- */
  .colchart{display:flex;align-items:flex-end;gap:7px;height:120px;padding-top:4px}
  .colchart .col{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
    height:100%;justify-content:flex-end;min-width:0;
  }
  .colchart .col-bar{
    width:100%;max-width:46px;border-radius:7px 7px 3px 3px;
    background:linear-gradient(180deg,var(--caramel),var(--caramel-dk));
    min-height:3px;
  }
  .colchart .col-bar.zero{background:var(--surface-2)}
  .colchart .col-n{font-size:11.5px;font-weight:700;font-family:'DM Mono',monospace}
  .colchart .col-lbl{
    font-size:10px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.3px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
  }
  @media (prefers-reduced-motion: no-preference){
    @keyframes colUp{from{height:0}}
    .colchart .col-bar{animation:colUp .6s cubic-bezier(.22,.7,.3,1) backwards;animation-delay:.2s}
  }

/* DES-12: DM Mono draws 0 with a slash. In a 27px stat tile that reads as an
   error symbol rather than a number — and there is no capital O next to it for
   the slash to be disambiguating. Off for display figures; the genuinely
   tabular readouts (brew times) keep the mono face and are small enough that
   the slash never reads as anything else. */
.statbox b, .stat b, .hv, .ring-num{
  font-variant-numeric: lining-nums;
  font-feature-settings: "zero" 0;
}

/* DES-08: an empty figure recedes instead of shouting a zero — but it still
   has to be readable. The first attempt used opacity:.55 on --ink-soft, which
   dropped it to 2.36:1 and traded one accessibility problem for another.
   --ink-soft on its own is 4.8:1 at this size; the recession comes from weight
   and scale instead of from fading the text out. */
.statbox.empty b{ color:var(--ink-soft); font-weight:600; }
.statbox.empty span{ color:var(--ink-soft); }

/* ---------- Origin atlas (v1.28.0) ----------
 *
 * A vendored SVG, not map tiles: no third-party request on every view, no CSP
 * img-src hole, and it still draws with no network — which for a PWA is the
 * case it most needs to handle.
 *
 * Everything here is a theme token, so the map inverts with the app instead of
 * being a bright rectangle punched into the dark theme. Land is deliberately
 * low-contrast: it is context, and the only things meant to read at a glance
 * are the countries the user has actually brewed from. */
.atlas-wrap{
  width:100%;
  /* The projection is 1000x420; letting the SVG set its own height from the
     viewBox avoids a reflow when it finishes parsing. */
  aspect-ratio:1000 / 420;
  overflow:hidden;
  border-radius:10px;
  background:var(--surface-2);
}
.atlas-map{display:block;width:100%;height:100%}

.atlas-land{
  fill:var(--line);
  stroke:none;
}
/* A coffee country you have not brewed sits between land and highlight: present,
   so the map reads as a map, but clearly not one of yours. */
.atlas-origin{
  fill:var(--line);
  stroke:var(--surface-2);
  stroke-width:.6;
}
.atlas-origin.on{
  fill:var(--caramel);
  stroke:var(--caramel-dk);
  stroke-width:.8;
}
/* The dot exists for Rwanda and Burundi, which are a few pixels wide at this
   size and unreadable as fill alone. Over a large lit country it disappears
   into the fill, which is correct — Brazil needs no help being found. The thin
   ring is separation from the land beneath, not decoration. */
.atlas-dot{
  fill:var(--caramel);
  stroke:var(--surface-2);
  stroke-width:1.5;
}

@media (prefers-reduced-motion: no-preference){
  /* Only the highlights animate, and only on the first paint — the map itself
     appearing piece by piece would be noise, not information. */
  .atlas-origin.on, .atlas-dot{
    animation:atlasIn .45s cubic-bezier(.22,.7,.3,1) backwards;
    animation-delay:.15s;
  }
  @keyframes atlasIn{ from{ opacity:0 } to{ opacity:1 } }
  html.cd-booted .atlas-origin.on, html.cd-booted .atlas-dot{ animation:none }
}