/* ============================================================
   Today's climb (v240), inside the Today box: the score and its count, the climb drawn by
   js/today-climb.js (340 x 214 logical units), and the purpose under it. The climb runs edge to edge
   on the box's own surface; on a light or translucent surface it sits on a dark panel instead.
   ============================================================ */

:root .ember-gauge.today-arc.today-climb { align-items: stretch; gap: 0; text-align: left; }

/* the score: a big number, then its label with a small ember square; a button to the habits */
.climb-score { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; width: fit-content; min-height: 44px; margin: 4px 0 6px; padding: 0; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.climb-score .ta-num { font-size: 46px; font-weight: 700; line-height: .88; letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var(--tx); }
.today-climb.is-zero .ta-num:not([data-score]) { color: var(--tx-2); }
.climb-num-row { display: inline-flex; align-items: flex-start; gap: 7px; }
.climb-score small { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--tx-2); }
.climb-score small::before { content: ''; width: 6px; height: 6px; flex: none; background: #ff7a3d; }
.climb-score .ta-delta { margin-top: 1px; }

/* the week sits beside the score (v241), in the space the score leaves; on a narrow phone it takes its own
   row under the score. Small rings, still a full-height tap target each. */
.climb-top { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 14px; row-gap: 6px; margin: 4px 0 6px; }
.climb-top .climb-score { flex: none; margin: 0; }
:root[data-skin] .climb-top .ember-week { flex: 1 1 150px; max-width: 240px; margin: 0; gap: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.climb-top .ember-day { justify-content: center; gap: 5px; min-width: 0; min-height: 50px; }
.climb-top .ember-day-ring { width: min(30px, 100%); height: auto; aspect-ratio: 1; }
.climb-top .ember-day-ring b { font-size: 11px; }
.climb-top .ember-day small { font-size: 10px; line-height: 1; }
:root .climb-top .ember-day.today .ember-day-ring { box-shadow: 0 0 10px rgba(255, 106, 26, .4); }
/* beside the score on a narrow phone the days go by their first letter (the full name stays in the label) */
@container (min-width: 297px) and (max-width: 312px) { .climb-top .ember-day-rest { display: none; } }
@container (max-width: 296px) {
  :root[data-skin] .climb-top .ember-week { flex-basis: 100%; max-width: none; }
  .climb-top .ember-day-ring { width: min(34px, 100%); }
}

/* the climb: edge to edge across the box, a button to readiness */
.climb-scene { display: block; width: calc(100% + 28px); max-width: none; margin: 0 -14px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.climb-scene.is-panel { width: 100%; margin: 0; border-radius: 18px; overflow: hidden; background: #070a12; }
.climb-canvas { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 340 / 150; }
.climb-score:focus-visible, .climb-scene:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* the purpose, the summit of the climb */
:root .today-climb .today-arc-purpose { max-width: 40ch; margin: 10px auto 0; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--tx); }
.today-climb .today-arc-purpose em { margin-right: 8px; font-size: 11px; font-weight: 600; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-2); }

/* ============================================================
   v242 "Lista": the day row and the score with its week sit on the screen, no box; one card holds the
   climb, the purpose and the trackers as chips; the habits follow as rows (todayView 'list').
   ============================================================ */
:root .today-arc-section.today-lista { margin-top: 12px; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
:root .today-lista .today-meta { min-height: 36px; }
.today-lista .climb-top { margin: 0 0 12px; }
:root .climb-card.hero-card.hero-v2 { margin: 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; }
.climb-card::before, .climb-card::after { display: none !important; }
:root .today-climb .climb-card .today-arc-purpose { margin-top: 8px; }

/* the trackers as chips along the bottom of the card; a narrow phone scrolls them sideways */
:root .today-arc-section .climb-card .tr-strip.tr-row { display: flex; gap: 8px; margin: 12px -14px 14px; padding: 0 14px; border: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: none; }
.climb-card .tr-strip.tr-row::-webkit-scrollbar { display: none; }
:root .climb-card .tr-strip.tr-row.tr-row > .tr-tile.tr-tile { flex-direction: row-reverse; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 1px solid color-mix(in srgb, var(--tx) 16%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--tx) 4%, transparent); }
:root .climb-card .tr-strip.tr-row.tr-row > .tr-tile.tr-tile.kept { border-color: color-mix(in srgb, var(--area) 55%, transparent); }
.climb-card .tr-row > .tr-tile + .tr-tile::before { display: none; }
.climb-card .tr-row .tr-ring { display: none; }
.climb-card .tr-row .tr-ring-wrap { width: auto; height: auto; }
.climb-card .tr-row .tr-value, .climb-card .tr-row .tr-value[data-len] { font-size: 12.5px; }
.climb-card .tr-row .tr-value .mood-face, .climb-card .tr-row .tr-value .energy-icon { width: 18px; height: 18px; }
.climb-card .tr-row .tr-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0; }

/* a ticked habit's dust, on its way to the climber's light (js/today-climb.js) */
.climb-dust { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 40; }