/* ============================================================
   Today's arc (v239), in one box with the trackers: three concentric arcs over one span, left to right
   over the top. Outside, the 90-day arc with a marker where today is; then today's Arc score; inside,
   readiness. Hairline tracks, a thin trail to each value, a dot at its end; dashed when nothing is
   planned or logged. The numbers sit in the bowl, the purpose under it. Geometry is the 340 x 188 svg
   in js/app.js (TODAY_ARC): centre 170, 170, radii 152, 130 and 108.
   ============================================================ */

:root {
  --arc-out: #f2a07f; --arc-in: #8ea9ff;
  --arc-line: color-mix(in srgb, var(--tx) 24%, transparent);
  --arc-line-soft: color-mix(in srgb, var(--tx) 30%, transparent);
  --arc-up: #7be3b9; --arc-down: #ff7b72;
}
:root[data-palette="wine"] { --arc-out: #ef9a8f; --arc-in: #b9a6ff; --arc-up: #8fe6c4; --arc-down: #ff7d93; }
:root[data-palette="sky"] { --arc-out: #ffab78; --arc-in: #7fd3ff; --arc-up: #8fe3c8; --arc-down: #ff8c78; }
:root[data-palette="greyblack"] { --arc-out: #ffffff; --arc-in: #9e9e9e; --arc-up: #ffffff; --arc-down: #a3a3a3; --arc-line: rgba(255, 255, 255, .22); }
[data-theme="light"] { --arc-out: #1f5534; --arc-in: #3b64d9; --arc-up: #087455; --arc-down: #b32b49; --arc-line: rgba(32, 39, 44, .2); --arc-line-soft: rgba(32, 39, 44, .3); }

/* ---------------- Section shell ---------------- */
/* One box (v239): the day row on top, the orbit chart, the goal, and the trackers along the bottom,
   each under its side. The box takes each look's card surface (.hero-card.hero-v2 in ember.css,
   premium.css and palettes.css). */
:root .hero-card.hero-v2.today-arc-section {
  margin-top: 12px; padding: 0 14px; border: 1px solid var(--line); border-radius: 28px; overflow: hidden;
}
.today-arc-section::before, .today-arc-section::after { display: none !important; }
:root .today-arc-section > .hero { display: none; }
:root .ember-gauge.today-arc { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0; text-align: center; }

/* ---------------- The arc ---------------- */
.tarc-chart { position: relative; width: 100%; max-width: 420px; aspect-ratio: 340 / 188; margin: 2px auto 0; }
:root .today-arc .tarc-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; overflow: visible; }
.tarc-track { fill: none; stroke: var(--arc-line); stroke-width: 1; }
.tarc-track.is-empty { stroke: var(--arc-line-soft); stroke-dasharray: 1.5 4.5; stroke-linecap: round; }
.tarc-trail { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* outside the 90 days in ink, then the score and readiness in their colours */
.tarc-days { color: var(--tx); }
.tarc-days .tarc-trail { opacity: .55; }
.tarc-score { color: var(--arc-out); }
.tarc-ready { color: var(--arc-in); }
.tarc-dot { fill: currentColor; transform-box: view-box; }
.tarc-halo { opacity: .16; }
.tarc-end { font-size: 10px; font-weight: 500; letter-spacing: 0; fill: var(--tx-2); }

/* The two numbers in the bowl, divided by a hairline; a dot in each arc's colour names it. */
.tarc-nums { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; display: flex; align-items: stretch; justify-content: center; gap: 12px; pointer-events: none; }
.tarc-num { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.tarc-num strong { display: block; font-size: 36px; font-weight: 600; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--tx); white-space: nowrap; }
.tarc-num small { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; color: var(--tx-2); }
.tarc-num small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.tarc-num-score small::before { background: var(--arc-out); }
.tarc-num-ready small::before { background: var(--arc-in); }
.tarc-split { width: 1px; margin: 2px 0 4px; background: var(--line); }
.tarc-ready-num.is-empty, .today-dial.is-zero .ta-num { color: var(--tx-2); }
.ta-delta { display: inline-flex; align-items: center; gap: 3px; margin-top: 5px; font-size: 11px; font-weight: 500; font-style: normal; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ta-delta.up { color: var(--arc-up); }
.ta-delta.down { color: var(--tx-2); }

/* Each half is a button; pressing dims its arc. */
.tarc-hit { position: absolute; top: 0; bottom: 0; width: 50%; margin: 0; padding: 0; border: 0; border-radius: 28px; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tarc-hit-score { left: 0; }
.tarc-hit-ready { right: 0; }
:root .today-arc .tarc-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tarc-line { transition: opacity .2s; }
.tarc-chart:has(.tarc-hit-score:active) .tarc-score, .tarc-chart:has(.tarc-hit-ready:active) .tarc-ready { opacity: .55; }

/* ---------------- Trackers, along the bottom of the box ---------------- */
/* Equal columns divided by hairlines, under a hairline across the box. What you do sits on the left in the
   Arc score's colour, what you take in (sleep, water, mood) on the right in readiness's (js/trackers.js sets
   --area by side); a taller hairline marks where the sides meet. Columns never go below 44px or their
   label, so a narrow phone scrolls inside the row instead of cutting one. */
:root .today-arc-section .tr-strip.tr-row {
  display: grid; grid-template-columns: repeat(var(--n), minmax(min-content, 1fr)); gap: 0;
  margin: 12px -14px 0; padding: 4px 8px 6px; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-mask-image: none; mask-image: none;
}
/* (0,6,0): the look rules reach .tr-tile through :is() lists as heavy as (0,5,0) */
:root .tr-strip.tr-row.tr-row > .tr-tile.tr-tile {
  position: relative; flex: none; min-width: 44px; min-height: 0; padding: 7px 3px 6px; gap: 4px;
  border: 0; border-radius: 18px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  scroll-snap-align: start;
}
:root .tr-strip.tr-row.tr-row > .tr-tile.tr-tile:active { background: color-mix(in srgb, var(--tx) 7%, transparent); transform: scale(.95); }
.tr-row > .tr-tile + .tr-tile::before { content: ''; position: absolute; left: 0; top: 26%; bottom: 26%; width: 1px; background: var(--line); pointer-events: none; }
.tr-row > .tr-tile:not(.tr-sleep, .tr-water, .tr-mood) + :is(.tr-sleep, .tr-water, .tr-mood)::before { top: 8%; bottom: 8%; }
.tr-row > .tr-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.tr-row .tr-ring-wrap, .tr-row .tr-ring { width: 36px; height: 36px; }
.tr-row .tr-value { font-size: 13px; }
.tr-row .tr-value small { font-size: 9px; }
.tr-row .tr-value[data-len="5"] { font-size: 10.5px; }
.tr-row .tr-value[data-len="6"], .tr-row .tr-value[data-len="7"] { font-size: 9.5px; }
.tr-row .tr-value .mood-face, .tr-row .tr-value .energy-icon { width: 21px; height: 21px; }
.tr-row .tr-label { font-size: 11px; line-height: 1.2; letter-spacing: 0; white-space: nowrap; }
/* the box arrives as one; its columns do not each rise on their own */
.screen.anim .tr-row > .tr-tile { animation: none; }

/* ---------------- Purpose, check-in, meta row ---------------- */
.today-arc-purpose { max-width: 36ch; margin: 2px auto 0; font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--tx-2); overflow-wrap: anywhere; text-wrap: pretty; }
.today-arc button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
:root .today-arc-section .today-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin: 2px 0 0; padding: 0; border: 0; }
.today-arc-section .today-meta .arc-progress { display: none; }
/* the box's header, small capitals like the reference's chart titles */
.today-arc-section .today-meta .day-chip, :root section.today-arc-section .today-meta .day-mode-trigger { font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--tx-2); }
:root section.today-arc-section .today-meta .day-mode-trigger { min-height: 44px; border: 0; background: none; box-shadow: none; border-radius: 8px; padding: 0 0 0 12px; }
:root section.today-arc-section .today-meta .day-chip { padding: 0; border: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Motion runs in js/chart-motion.js (the score counts; WAAPI moves each dot and its trail). The
   markup is always the final frame, so reduced motion is simply no animation. */
@media (prefers-reduced-motion: reduce) { .today-arc * { animation: none !important; transition: none !important; } }
[data-motion="reduced"] .today-arc * { animation: none !important; transition: none !important; }

/* Device matrix 2026-10-19, reduced motion: styles.css stops the comeback pulse for the OS setting only; the in-app "Reduce motion" switch (data-motion) left it pulsing forever. */
[data-motion="reduced"] .comeback-btn.urgent .cb-ico { animation: none; }