/* css/digest.css
 *
 * The digest rail and the year grid.
 */

.digest {
  border-left: .5px solid var(--sep); background: var(--chrome);
  padding: 14px; display: flex; flex-direction: column; gap: 9px;
  overflow-y: auto; min-height: 0; min-width: 0;
}
.digest .d-title {
  font-size: 0.7857em; font-weight: 620; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
}
.dcard {
  background: var(--canvas); border-radius: 10px; padding: 11px 12px;
  box-shadow: 0 0 0 .5px var(--sep-soft);
}
.dcard h4 {
  margin: 0 0 5px; font-size: 0.75em; font-weight: 590; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
}
/* The city doubles as the "change city" control. Styled as the label it
   replaces, not as a button — it must not look like an action bar inside a
   read-only card, but it must respond when reached. */
.dcard h4.cityhead { margin: 0 0 5px; }
.citybtn {
  font: inherit; font-size: 0.75em; font-weight: 590; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
  background: none; border: 0; box-shadow: none; padding: 0; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.citybtn:hover { color: var(--accent); filter: none; }
.citybtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.dcard .temp { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.dcard .temp b {
  font-family: var(--display);
  /* 400, not the 350 this asked for before: Madefor's variable axis starts at
     400, so a lighter request rendered at 400 anyway — with the declaration
     lying about what is on screen. */
  font-size: 2.0714em; font-weight: 400; letter-spacing: -.028em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dcard .temp span { font-size: 0.8929em; color: var(--text-2); }
.dcard .wx {
  margin-top: 8px; font-size: 0.8214em; color: var(--text-2);
  display: flex; flex-wrap: wrap; gap: 4px 13px;
  font-variant-numeric: tabular-nums;
}
/* Label left, value right, on one baseline. */
.drow {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 0.8929em; padding: 3px 0;
}
.drow + .drow { border-top: .5px solid var(--sep-soft); }
.drow .k { color: var(--text-2); }
.drow .v {
  margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 500;
  text-align: right;
}
/* Biorhythm bar: a number alone does not say "high" or "low" at a glance. */
.drow .bar {
  flex: 1 1 auto; height: 4px; border-radius: 2px; background: var(--sep-soft);
  overflow: hidden; min-width: 40px;
}
.drow .bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
/* The city prompt's own field. Not `.searchbox` — that class carries
   `flex: 1 1 150px` for the command bar, which is inert inside a non-flex card
   and left the input narrower than the card holding it. */
.cityfield {
  margin-top: 9px; background: var(--fill); border-radius: 8px;
  padding: 0 10px; height: 30px; display: flex; align-items: center;
}
.cityfield input {
  font: inherit; font-size: 0.9286em; border: 0; outline: 0; background: transparent;
  color: var(--text); width: 100%; min-width: 0; padding: 0; box-shadow: none;
}
.cityfield:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.digest .skel { height: 62px; border-radius: var(--radius); background: var(--fill); }
.digest .dmsg { font-size: 0.8571em; color: var(--text-3); padding: 2px; }

/* ---- year -------------------------------------------------------------- */
.yeargrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(182px, 1fr)); gap: 18px;
}
.ymonth {
  background: var(--canvas); border-radius: 14px; box-shadow: var(--shadow);
  /* Concentric with the 8px cell radius below: 14 outer − 6 padding = 8. */
  padding: 14px 14px 16px;
}
.ymonth h4 {
  margin: 0 0 10px; font-size: 0.8929em; font-weight: 620; letter-spacing: -.01em;
  text-transform: capitalize;
}
.ymonth .yg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ymonth .yc {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: 8px;
  font-size: 0.75em; color: var(--text-2); font-variant-numeric: tabular-nums;
  transition: background .12s ease;
  cursor: pointer; border: 0; background: transparent; box-shadow: none; padding: 0;
  font-family: inherit;
}
.ymonth .yc.blank { visibility: hidden; cursor: default; }
/* Birthday mark. The cell keeps its number and the glyph sits over the
   top-right corner, half outside the padding box — at 14px there is no room
   to place both side by side, and shrinking the date to make room would cost
   the thing the grid is actually read for. `position: relative` on the cell
   comes from the rule below; `pointer-events: none` keeps the whole cell one
   click target. */
.ymonth .yc.bday { position: relative; }
.ymonth .yc.bday > i {
  position: absolute; top: -3px; right: -2px;
  font-size: 8.5px; line-height: 1; font-style: normal;
  pointer-events: none;
  /* A hairline of the card colour behind the glyph, so it reads as sitting ON
     the cell rather than colliding with the digit underneath it. */
  text-shadow: 0 0 2px var(--canvas), 0 0 2px var(--canvas);
}
.ymonth .yc:hover:not(.blank) { background: var(--fill); filter: none; }
/* Load is a four-step wash, not a weight change. Weight was the whole signal
   before, and at this size 500-vs-620 is invisible — the year view could not
   answer the one question it exists for ("where are the busy stretches?")
   without leaning in. A graded fill is the calendar-heatmap convention: light
   for a light day, saturated for a full one, so the eye reads the SHAPE of a
   busy month before it reads any single date. Four steps because more than
   that is not distinguishable in a 14px cell, and fewer is the binary this
   replaces. Ink darkens with the fill so contrast holds at every step. */
.ymonth .yc.has { color: var(--text); font-weight: 560; }
.ymonth .yc.l1 { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ymonth .yc.l2 { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ymonth .yc.l3 { background: color-mix(in srgb, var(--accent) 38%, transparent); }
/* The deepest step: one rule, not two. The ink is NOT blended toward
   `--accent-ink` — mixing the text 88% toward white over a 58% wash measured
   3.6:1 in the Things palette, under the 4.5:1 floor, and it was the darkest
   cell that read worst. Full-strength `--text` over this wash measures above
   4.5:1 in every palette, and the weight carries the emphasis instead. */
.ymonth .yc.l4 {
  background: color-mix(in srgb, var(--accent) 58%, transparent);
  color: var(--text); font-weight: 650;
}
/* Hover has to DEEPEN whatever step the cell is on, never flatten it. A single
   30% hover was lighter than l3 and l4, so pointing at the busiest day made it
   look emptier — the exact inverse of the signal. Each step gets its own. */
.ymonth .yc.l1:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ymonth .yc.l2:hover { background: color-mix(in srgb, var(--accent) 34%, transparent); }
.ymonth .yc.l3:hover { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.ymonth .yc.l4:hover { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.ymonth .yc.today {
  background: var(--accent); color: var(--accent-ink); font-weight: 650;
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 3.5px color-mix(in srgb, var(--accent) 40%, transparent);
}
.ymonth .yc.today:hover { background: var(--accent); }