/* Calendar completion colours (Tin, 2026-10-15). computeDayCell paints a day by its
   completion (calCompletionColor) and tags it .scaled. Every band is a bright fill,
   so every painted cell takes dark ink: the old split (.full/.deep dark text only
   from 60%) would leave the red 0–59% cells with muted grey text. WCAG contrast of
   this ink: #FF0000 4.9:1 (the floor), #FF9900 9.2:1, the greens 14–16:1, #FFFF00 18:1. */
.cal-cell.scaled{color:#0b0a10; font-weight:600;}
/* the small % keeps a hint of hierarchy: at .9 it is 4.7:1 on red, still above 4.5 */
.cal-cell.scaled .cell-pct{opacity:.9;}
/* a fully missed day is red like the rest of 0–59%; its bar turns dark to stay visible */
.cal-cell.scaled.missed::after{background:#0b0a10;}
/* the dashed emergency ring would disappear into its own fill colour */
.cal-cell.scaled.emerg{border-color:rgba(11,10,16,.7) !important;}
/* Batch 2 (2026-10-16): the 0–30% steps are deep reds, too dark for the dark ink, so they
   take the light ink (#ede9e0: 10.8:1 on #6A0000 down to 4.57:1 on #D20C00), and a missed
   day's bar and an emergency ring turn light with it. The bright steps keep the dark ink
   (4.76:1 on #F81000 up to 18.4:1 on #FFFF00). */
.cal-cell.scaled.ink-light{color:var(--text);}
.cal-cell.scaled.ink-light.missed::after{background:var(--text);}
.cal-cell.scaled.ink-light.emerg{border-color:rgba(237,233,224,.75) !important;}
/* Today is never a verdict (batch 2, Tin: "I don't think it should be in red until you do the
   habit"). All day it is this neutral dark indigo tile with the rank-coloured .today border and
   its live % in muted ink (#9a93a8 on #261f45 is 5.2:1); tomorrow, finished, it takes its step. */
.cal-cell.today.live{background:#261f45; color:var(--text); font-weight:600;}
.cal-cell.today.live .cell-pct{color:var(--muted); opacity:1;}
.year-month .ym-cell.today-live{background:#261f45;}

/* Rank-change days (Tin, 2026-10-15: "somehow mark it in the calendar, like B to A, or an
   arrow pointing upwards; same for rank down"). The .rankup/.derank classes stay (RECONCILE
   counts them); their old small ::after caret is replaced by a real badge: a dark disc with a
   green ▲ or red ▼, riding the cell's top-right corner half outside it, so it never covers the
   day number even in 31px phone cells. The siren keeps ::before (top-left). Where the cell has
   room (375px and wider) the from→to letters ("B→A") form a third line under the %, large and
   bold (Tin: "a bit bigger", "below the %"). */
.cal-cell.rankup::after, .cal-cell.derank::after{content:none;}
.cal-cell.rankup, .cal-cell.derank{box-shadow:inset 0 0 0 1.5px rgba(11,10,16,.55);}
/* 11px at top:-4px / right:-5px: in a 31px cell (320px screen) it clears a two-digit day by
   1px and the next cell across the 5px gap by 1px (verify.cjs measures both) */
.cal-cell .cell-rank-badge{position:absolute; top:-4px; right:-5px; z-index:1; width:11px; height:11px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; background:#0b0a10;
  box-shadow:0 0 0 1.5px currentColor; font-size:6.5px; line-height:1; pointer-events:none;}
.cal-cell .cell-rank-badge.up{color:var(--gain);}
.cal-cell .cell-rank-badge.down{color:var(--loss);}
/* Batch 2 (Tin: "the colour of the letter matches the colour of that rank"): the letters take
   RANKS[to].color inline. A 1px dark halo keeps them legible on every step, the green they would
   otherwise vanish into included (B's green on #00FF00 is 1.7:1 bare): each glyph is ringed by
   #0b0a10, and every rank colour clears it by at least 4.08:1 (E #dc2626; GM 18.8:1). */
.cal-cell .cell-rank{display:none; font-size:12px; font-weight:800; line-height:1; white-space:nowrap;
  text-shadow:1px 0 0 #0b0a10, -1px 0 0 #0b0a10, 0 1px 0 #0b0a10, 0 -1px 0 #0b0a10, 0 0 2px #0b0a10;}
.cal-cell .cell-rank.long{font-size:10px;}
/* 2026-10-17 (Tin: "the colours of the letters are the colours of the ranks"): each letter now
   wears ITS OWN rank's colour (rankChangeLetters), "D" orange then "C" gold; the arrow between
   them is light ink inside the same dark halo, so it reads on every step. */
.cal-cell .cell-rank .rk-arrow{color:#f3f0f7;}
.dd-rank-to .rk-arrow{color:var(--muted);}
@media (min-width:375px){ .cal-cell .cell-rank{display:block;} }
@media (min-width:430px){   /* 46px cells and up: a larger badge and letters */
  .cal-cell .cell-rank-badge{width:14px; height:14px; top:-5px; font-size:8px;}
  .cal-cell .cell-rank{font-size:14px;}
  .cal-cell .cell-rank.long{font-size:12px;}
}
/* year view: a dark ▲ / ▼ centred in the tiny cell (the title names the ranks) */
.year-month .ym-cell.rankup, .year-month .ym-cell.derank{position:relative;}
.year-month .ym-cell.rankup::after, .year-month .ym-cell.derank::after{content:'▲'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; font-size:7px; line-height:1; color:#0b0a10;}
.year-month .ym-cell.derank::after{content:'▼';}
.year-month .ym-cell.ink-light::after, .year-month .ym-cell.today-live::after{color:var(--text);}

/* day detail: the Net and Rank rows read as a loss or a gain, like the Progress popover */
.day-detail .dd-row .pts.dd-xp-loss{color:var(--loss);}
.day-detail .dd-row .pts.dd-xp-gain{color:var(--gain);}
.day-detail .dd-row .pts.dd-rank{font-size:14px; font-weight:700;}
/* legend: the rank-change swatches are the same badge */
.cal-legend i.cal-lg-rank{display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  background:#0b0a10; box-shadow:0 0 0 1.5px currentColor; font-style:normal; font-size:7px; line-height:1;}
.cal-legend i.cal-lg-rank.up{color:var(--gain);}
.cal-legend i.cal-lg-rank.down{color:var(--loss);}
/* the stepped scale as one strip (21 hard-edged 4px steps) between its two ends */
.cal-legend .cal-lg-scale{gap:4px;}
.cal-legend .cal-lg-scale em{font-style:normal;}
.cal-legend i.cal-lg-ramp{width:84px; height:11px; border-radius:3px;}
.cal-legend i.cal-lg-live{background:#261f45; box-shadow:inset 0 0 0 1.5px var(--rank);}