/* SG Law Cookies — the counter map (PRD §7, mockups/h-counter-map.html).
   Page-only stylesheet, linked from counter_map.html.j2 on top of site.css.
   The mockup's local palette is aliased onto the site.css design tokens so
   the parchment look stays in lock-step with the rest of the shopfront. */

:root {
  /* mockup-name → site-token aliases (do not restyle, re-point) */
  --ink: var(--color-ink);
  --ink-dim: var(--color-text-secondary);
  --ink-faint: var(--color-text-muted);
  --line: var(--color-border);
  --line-strong: var(--color-border-hover);
  --cream: var(--color-bg);
  --terracotta: var(--color-terracotta);
  --terracotta-hot: #D96A3C; /* no site token; from mockup h */
  --ochre: var(--color-ochre);
  --mono: var(--font-mono);
  --serif: var(--font-body);
  /* --chip, --pricecard, --pricecard-edge come straight from site.css */
}

/* ── heading block ───────────────────────────────── */
.skyhead { text-align: center; padding: 26px 0 4px; }
.skyhead .kick { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--terracotta); }
.skyhead h1 { font-size: clamp(28px, 4.4vw, 44px); font-weight: 700; letter-spacing: -.015em; margin: 6px 0 4px; }
.skyhead h1 em { font-style: italic; color: var(--terracotta); }
.skyhead .sub { font-style: italic; color: var(--ink-dim); font-size: 15px; }
#stats { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-dim); text-align: center; padding-top: 10px; }
#stats b { color: var(--ink); }
#stats .hot { color: var(--terracotta); }

/* ── the spread ──────────────────────────────────── */
#sky { display: block; width: 100%; height: auto; }
#sky .lbl { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-dim); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
#sky .cnt { font-family: var(--serif); font-weight: 700; fill: var(--chip); pointer-events: none; }

.sky-empty { text-align: center; font-style: italic; color: var(--ink-faint); padding: 60px 0; font-size: 18px; }

/* ── price-tag date scrubber ─────────────────────── */
.scrub { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 6px 0 16px; }
.day {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; cursor: pointer;
  background: linear-gradient(180deg, #FAEA92, var(--pricecard));
  color: var(--ink);
  border: 1px solid var(--pricecard-edge); border-radius: 2px; padding: 6px 10px 5px;
  opacity: .45; transform: rotate(-1deg); transition: all .15s ease;
}
.day:nth-child(even) { transform: rotate(1.2deg); }
.day b { display: block; font-size: 13px; }
.day:hover { opacity: .8; }
.day.active { opacity: 1; transform: rotate(0) translateY(-2px); box-shadow: 0 6px 14px -6px rgba(20, 32, 31, .4); }

/* ── legend + kuih bangkit link ──────────────────── */
.legend { text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding-top: 6px; }
.legend .t { color: var(--terracotta); }
.legend .o { color: var(--ochre); }
a.kuih { color: inherit; text-decoration: underline dotted var(--terracotta); text-underline-offset: 3px; }
a.kuih:hover { color: var(--terracotta); }

/* ── tooltip ─────────────────────────────────────── */
#tip { position: fixed; pointer-events: none; background: var(--cream); color: var(--ink); border-radius: 3px;
  padding: 10px 13px; font-size: 13px; max-width: 300px; opacity: 0; transition: opacity .12s; z-index: 10;
  box-shadow: 0 14px 30px -12px rgba(20, 32, 31, .35); border: 1px solid var(--line); }
#tip .a { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta); display: block; margin-bottom: 5px; }
#tip li { margin-left: 14px; line-height: 1.45; margin-bottom: 3px; }