/* tracker.css — fitness-tracker / Apple-Health style presentation for the fortune sections.
   Loads after collection.css. Same "premium mooncake box" theme: ivory paper cards, antique-gold
   hairline + inner frame, lacquer-red accents, Kanit headings, Oswald numerals, Sarabun text.
   Mobile-first; 2-column metric grid on phones, 4-column from 720px. */

:root {
  --trk-paper: #FFFDF8;
  --trk-ivory: #FAF6EE;
  --trk-gold: #B99B60;
  --trk-gold-pale: #E4D2A9;
  --trk-line: #D9C8A8;
  --trk-red: #951A22;
  --trk-ink: #382C27;
  --trk-muted: #86715E;
  --trk-track: #EDE3CC;
}

/* shared card shell — outer hairline + inner gold frame (matches collection panels) */
.trk-hero, .trk-trend, .trk-timeline {
  position: relative;
  background: var(--trk-paper);
  border: 1px solid var(--trk-line);
  border-radius: 8px;
  padding: 18px 16px 16px;
  margin: 0 0 14px;
  box-shadow: 0 1px 0 rgba(120, 80, 30, .06);
}
.trk-hero::before, .trk-trend::before, .trk-timeline::before {
  content: ""; position: absolute; inset: 5px; border: 1px solid var(--trk-gold-pale); border-radius: 5px; pointer-events: none;
}

/* ---------- 1) summary rings hero ---------- */
.trk-hero { display: grid; grid-template-columns: auto 1fr; gap: 14px 18px; align-items: center; }
.trk-hero-rings { position: relative; width: 150px; height: 150px; }
.trk-rings { width: 100%; height: 100%; display: block; }
.trk-hero-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1;
}
.trk-big { font-family: 'Oswald', 'Kanit', sans-serif; font-weight: 600; font-size: 40px; color: var(--trk-red); letter-spacing: .5px; }
.trk-of { font-family: 'Oswald', sans-serif; font-size: 13px; color: var(--trk-muted); margin-top: 2px; }
.trk-cap { font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 11px; color: var(--trk-ink); margin-top: 6px; }
.trk-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trk-legend li { display: flex; align-items: center; gap: 9px; font-family: 'Kanit', sans-serif; font-size: 13.5px; color: var(--trk-ink); }
.trk-legend i { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px var(--trk-paper), 0 0 0 3px var(--trk-gold-pale); }
.trk-legend span { flex: 1; }
.trk-legend b { font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 16px; color: var(--trk-red); }

/* ---------- 2) metric cards (the 4 dimensions) ---------- */
.trk-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trk-metric {
  position: relative; background: var(--trk-paper); border: 1px solid var(--trk-line); border-radius: 8px; padding: 14px 14px 12px;
}
.trk-metric::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--trk-gold-pale); border-radius: 5px; pointer-events: none; }
.trk-metric .top { font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 13px; color: var(--trk-ink); }
.trk-metric .st { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; }
.trk-ring { flex: none; display: block; }
.trk-score { font-family: 'Oswald', sans-serif; line-height: 1; color: var(--trk-red); }
.trk-score b { font-weight: 600; font-size: 28px; }
.trk-score small { font-size: 12px; color: var(--trk-muted); margin-left: 2px; }
.trk-metric .msg { font-family: 'Sarabun', sans-serif; font-size: 13px; line-height: 1.5; color: var(--trk-muted); }

/* ---------- 3) 7-day trend bars ---------- */
.trk-trend-head, .trk-tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.trk-trend-head span, .trk-tl-head span { font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 14px; color: var(--trk-ink); }
.trk-trend-head small, .trk-tl-head small { font-family: 'Sarabun', sans-serif; font-size: 12px; color: var(--trk-muted); }
.trk-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 118px; }
.trk-bar {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%;
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
}
.trk-bar-fill {
  width: 60%; max-width: 26px; border-radius: 6px 6px 3px 3px; background: var(--trk-gold-pale); transition: height .35s ease, background .2s ease;
  box-shadow: inset 0 0 0 1px rgba(185, 155, 96, .35);
}
.trk-bar.sel .trk-bar-fill { background: var(--trk-red); box-shadow: inset 0 0 0 1px rgba(114, 18, 27, .5); }
.trk-bar.today .trk-bar-d { color: var(--trk-red); font-weight: 600; }
.trk-bar-v { font-family: 'Oswald', sans-serif; font-size: 11px; color: var(--trk-muted); margin: 0 0 3px; order: -1; }
.trk-bar.sel .trk-bar-v { color: var(--trk-red); font-weight: 600; }
.trk-bar-d { font-family: 'Kanit', sans-serif; font-size: 11px; color: var(--trk-muted); margin-top: 5px; }

/* ---------- 4) ยาม timeline ---------- */
.trk-tl-head small i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: -1px; }
.trk-tl-head small i.g { background: var(--trk-gold); }
.trk-tl-head small i.b { background: var(--trk-track); border: 1px solid var(--trk-line); }
.trk-tl-track { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; height: 26px; }
.trk-seg { display: block; border-radius: 4px; background: var(--trk-track); border: 1px solid var(--trk-line); }
.trk-seg.good { background: var(--trk-gold); border-color: var(--trk-gold); }
.trk-seg.now { outline: 2px solid var(--trk-red); outline-offset: 1px; }
.trk-tl-scale { display: flex; justify-content: space-between; margin-top: 6px; font-family: 'Oswald', sans-serif; font-size: 10.5px; color: var(--trk-muted); letter-spacing: .3px; }

/* ---------- 5) ดวงฉัน: element balance progress bars ---------- */
.trk-elem-bars { display: grid; gap: 10px; }
.trk-eb { display: grid; grid-template-columns: 34px 1fr auto; grid-template-areas: "ico name pct" "ico bar bar"; column-gap: 10px; row-gap: 5px; align-items: center; text-align: left; }
.trk-eb .ei { grid-area: ico; }
.trk-eb .en { grid-area: name; font-family: 'Kanit', sans-serif; font-size: 13px; color: var(--trk-ink); }
.trk-eb .ep { grid-area: pct; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; color: var(--trk-red); }
.trk-ebar { grid-area: bar; height: 9px; border-radius: 5px; background: var(--trk-track); border: 1px solid var(--trk-line); overflow: hidden; }
.trk-ebar span { display: block; height: 100%; border-radius: 5px; transition: width .4s ease; }

/* ---------- สมพงษ์ bars — match the tracker look ---------- */
.cpl-dim .bar { height: 9px; border-radius: 5px; background: var(--trk-track); border: 1px solid var(--trk-line); overflow: hidden; }
.cpl-dim .bar span { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--trk-gold), var(--trk-red)); }

/* ---------- responsive ---------- */
@media (max-width: 359px) {
  .trk-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .trk-legend { grid-template-columns: repeat(2, auto); column-gap: 16px; }
}
@media (min-width: 720px) {
  .trk-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trk-hero-rings { width: 176px; height: 176px; }
  .trk-big { font-size: 46px; }
  .trk-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .trk-bar-fill, .trk-ebar span { transition: none; }
}