/* css/day.css
 *
 * The day view: masthead, mode picker, the two-day columns and their add
 * row, checklist/timeline/matrix modes, and the habit rings.
 */

.dayhead {
  padding: 20px 20px 14px; margin: -16px -20px 0;
  border-bottom: .5px solid var(--sep-soft);
}
.dayhead .dow {
  font-size: 0.9643em; font-weight: 640; letter-spacing: .055em;
  text-transform: uppercase; color: var(--text-3);
}
.dayhead.is-today .dow { color: var(--accent); }
.dayhead h2 {
  margin: 3px 0 0; font-family: var(--display);
  font-size: 2.8571em; font-weight: 680; letter-spacing: -.026em;
  line-height: 1.08; font-variant-numeric: tabular-nums;
}
/* The year is a qualifier, not part of the date, so it does not need the
   masthead's size. At 2.86em "13 сентября 2027" could not fit a half-width
   column and pushed the whole grid sideways — the page scrolled horizontally.
   Smaller and baseline-aligned, it reads as the aside it is. */
/* An `em` here is measured against the h2's own 2.86em, so a value that looks
   small compounds: 1.35em rendered the year at 65.6px beside a 48.6px date —
   the qualifier bigger than the date it qualifies. `rem` is not the fix
   either, since the app's scale knob lives on `body`, not `:root`, so a rem
   would silently follow the browser's 16px instead of the design's 17.
   A fraction of the parent, chosen so the year reads as an aside. */
.dayhead .year {
  font-family: var(--display);
  font-size: 0.46em; font-weight: 620; letter-spacing: -.01em;
  color: var(--text-3); margin-left: 8px; white-space: nowrap;
}
/* The date wraps rather than overflow — `nowrap` pushed "14 сентября 2027" out
   of a half-width column and scrolled the whole pane sideways. Wrapping alone
   made the two mastheads different heights, so in two-day mode the columns are
   also height-matched below; that is the pair of rules, and neither works
   without the other. */
.dayhead h2 { overflow-wrap: break-word; }
/* "Сегодня" / "Завтра" under the date, in the two-day view only.
   Deliberately quiet — small, uppercase, dim: it labels the column, and drawn
   any louder it would compete with the date it is labelling. It replaces the
   `4 tasks · 2 left · 1 of 6 habits` line, which restated in words what the
   rows, the ticks and the rings on the same screen already showed. */
.dayrel {
  margin-top: 5px; font-size: 0.7857em; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-3);
}
@media (max-width: 700px) {
  .dayhead h2 { font-size: 2.2857em; }
  /* Not folded in with the h2 above: `.year` is a child of it, so a shared
     em value scales the year by the heading twice over. */
  .dayhead .year { font-size: 0.5em; }
}

/* ---- day mode + 2-day switch (toolbar) -------------------------------
 *
 * Both used to be drawn inside the day, which is why the rules here used to
 * fight a half-width column: the pill wrapped "Matrix" onto its own line, the
 * switch got sliced off at the column edge, and the two overlapped. In the
 * toolbar there is one full-width row and none of that arises.
 *
 * The mode pill is `.segmented`, styled with the view picker and the density
 * picker in css/task.css — three segmented controls in one row that looked like
 * three different controls was the reason to stop styling this one separately.
 * The switch is NOT segmented: it composes with whichever mode is chosen
 * (2 days of Timeline is meaningful), so it is a switch beside the group rather
 * than a fifth option inside it, and it carries the accent when on to say so. */
.appbar .daymodebar { flex: 0 1 auto; min-width: 0; }
/* The mode radios use aria-checked, which the shared `.segmented` rules do not
   style — so the chosen mode looked exactly like the other three. Accent tint
   rather than the white-card pressed look on purpose: it sits beside the 2-day
   switch, and the pair reading as one family ("what is on right now") beats
   matching the view picker it never shows next to. */
.daymodebar button[aria-checked="true"],
.daymodebar button[aria-checked="true"]:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); font-weight: 620;
}
.twodaybtn {
  font: inherit; font-size: 0.8571em; font-weight: 500; cursor: pointer;
  padding: 5px 12px; border-radius: 7px; background: var(--fill);
  border: 0; color: var(--text-2); white-space: nowrap; flex: none;
  transition: background .18s ease, color .18s ease;
}
.twodaybtn:hover { filter: none; color: var(--text); }
.twodaybtn.on {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent); font-weight: 620;
}
.twodaybtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Two days side by side. `minmax(0,1fr)` twice, never `1fr 1fr`: a long task
   title has no wrapping opportunity, and an auto-sized track would let it push
   its own column wider and squeeze the other one. */
/* `align-items: start` so a short day does not stretch its column to match a
   long one — each column is as tall as its own content. */
.twoday {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 26px; align-items: start;
}
/* Keeping the two habit strips level.
 *
 * A day with a holiday carries a marker banner the other day has no equivalent
 * of, which pushed its strip 39px down while the other stayed put.
 *
 * The three approaches that do NOT work here, in the order they were tried:
 *  - an invisible ghost copy of the banner: it has to be told a height, and the
 *    banner's height depends on how many markers there are and whether they
 *    wrap onto a second line;
 *  - `min-height` on an empty banner: the same guess, spelled differently;
 *  - `subgrid`: it pairs children by POSITION, and the two days hold different
 *    numbers of tasks by definition, so every row below the strip was matched
 *    against something with no counterpart and the task rows piled up on top of
 *    one another.
 *
 * What works is measuring rather than predicting. The three elements the two
 * days DO have one-for-one — date, banner, strip — are wrapped in `.dayhead-wrap`
 * (two-day mode only), and the two wrappers share a three-row subgrid: each row
 * is as tall as the taller column's version of it, so the strips start on the
 * same line whatever the banner turns out to be. The empty banner still has to
 * be in the DOM, because subgrid pairs children by position. */
.twoday { grid-template-rows: auto auto auto auto; }
.twoday > .day-view { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
.twoday .dayhead-wrap {
  display: grid; grid-row: 1 / 4; grid-template-rows: subgrid;
  /* Grid rows do not collapse adjacent margins the way block flow does, so the
     banner's 12px and the strip's 13px stopped cancelling against each other
     and the head grew by ~65px. The spacing between these three is the row gap
     now — one place, one number — and each element's own vertical margin is
     dropped inside the wrapper. */
  row-gap: 12px;
}
/* The head bleeds to the pane's edges in the single-day view; inside a
   subgrid column those negative margins overhang the track and its hairline
   crosses the column divider, so the bleed is dropped with the rest of the
   wrapper's flow margins. */
.twoday .dayhead { margin: 0; }
.twoday .dayhead-wrap > .daymarkers { margin: 0; }
.twoday .dayhead-wrap > .habitstrip { margin: 0; }
/* The tasks are one child taking the last row, laid out in ordinary flow inside
   it — the two days' lists have no correspondence to preserve, and as loose
   grid children they all landed in the same cell. */
.twoday .daybody { grid-row: 4; min-width: 0; }
/* A half-width column cannot carry a 48px masthead: "14 сентября 2027" wrapped
   to three lines while "13 сентября 2027" took two, so the two days sat a whole
   line out of step. Smaller here — still clearly the masthead, but it fits on
   one line in both columns, which is what actually keeps them level. The
   two-line floor stays as insurance for the longest month names. */
.twoday .dayhead h2 { font-size: 1.9em; min-height: 2.16em; }
.twoday .dayhead .year { font-size: 0.62em; }
/* Nothing is drawn above the pair now — the mode picker and the switch are in
   the toolbar — so there is no wrapper and nothing left to keep in step. */

/* The divider is drawn with a pseudo-element, NOT `border-left` + padding.
   Padding is subtracted from the column's own content box, so the second
   column was 26px narrower INSIDE than the first (321px against 347px) — and
   since the habit strip lays its rings out on fixed 76px tracks, that one
   missing track is precisely why the same six habits broke 4+2 on the left
   and 3+3 on the right. Both columns are now equally wide inside, so the two
   strips cannot disagree; the rule is painted in the gutter the `gap` already
   provides, where it costs no width at all. */
.twoday .day-view.is-second { position: relative; }
.twoday .day-view.is-second::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -13px;
  border-left: 1px solid var(--sep-soft); pointer-events: none;
}
/* Below this each column is narrower than a comfortable task row, so the pair
   stacks instead of shrinking. It does NOT hide the second day: the switch is
   on, and a control that visibly does nothing reads as broken. Stacked still
   answers the question the mode exists for — tomorrow without navigating. */
@media (max-width: 1100px) {
  .twoday { grid-template-columns: minmax(0,1fr); gap: 8px; }
  /* Stacked, the columns are one above the other, so there is nothing to keep
     level and the subgrid must be undone — `grid-row: 1 / -1` on both of them
     put the second day BESIDE the first in a one-column grid, which is how a
     "stacked" layout ended up side by side with its dates out of step. Each
     day is a plain block again and the wrappers stop being grids. */
  .twoday { grid-template-rows: none; }
  .twoday > .day-view { display: block; grid-row: auto; grid-template-rows: none; }
  .twoday .dayhead-wrap { display: block; grid-row: auto; grid-template-rows: none; }
  .twoday .daybody { grid-row: auto; }
  /* Back to flow spacing, since the row gap that replaced these margins is gone
     with the grid. */
  .twoday .dayhead-wrap > .daymarkers { margin: 0 0 12px; }
  .twoday .dayhead-wrap > .habitstrip { margin: 13px 0 4px; }
  /* An empty banner has nothing to line up with once stacked, so it should not
     occupy a row at all. */
  .twoday .daymarkers.is-empty { display: none; }
  /* Stacked, the divider belongs above the second day, not beside it. */
  .twoday .day-view.is-second::before {
    left: 0; right: 0; bottom: auto; border-left: 0;
    border-top: 1px solid var(--sep-soft);
  }
  .twoday .day-view.is-second { padding-top: 18px; margin-top: 10px; }
}

/* Per-column add row, only present in two-day mode.
 *
 * Quiet at rest, a real field once you mean it — the same progressive
 * disclosure the phone's composer uses (AddTaskField reveals its extra
 * controls on focus and collapses them on blur). At rest it is a "+" and a
 * label that read as one more line in the list; a permanently bordered box
 * with a filled blue button beside it shouted louder than the tasks it files,
 * which is what made the column look assembled rather than designed. */
.colad {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 0 10px; border-radius: 9px;
  border: 1px solid transparent;
  transition: border-color .14s ease, background .14s ease;
}
/* The `+` is drawn, not typed, so it never inherits an emoji fallback and
   stays optically centred against the label. */
.colad-plus {
  flex: 0 0 auto; width: 22px; height: 22px; margin-left: 7px;
  display: grid; place-items: center; color: var(--text-3);
  transition: color .14s ease;
}
.colad-plus svg { width: 13px; height: 13px; display: block; }
/* THE SIZE FIX. `.colad-in` alone is specificity (0,1,0); the global
   `input[type=text]` rule is (0,1,1) because an attribute selector counts as
   a class. It therefore won regardless of source order, and the field
   rendered at 19.4px — the sign-in field's size, LARGER than the 17px task
   rows underneath it. Qualifying the selector with the element name matches
   that specificity and, being later in the file, wins on order. This is the
   same shape `.addbar input` and `.daysheet .sheet-add input` already use,
   which is why those two were the correct size all along and this one was
   not. */
input.colad-in {
  flex: 1 1 auto; min-width: 0; font: inherit;
  /* Exactly a task row. The add line is the same kind of thing as the rows
     it sits above, so it is the same size — never bigger. */
  font-size: 1em;
  padding: 7px 4px 7px 0; border: 0; background: none; color: var(--text);
  border-radius: 0;
}
input.colad-in:focus, input.colad-in:focus-visible {
  outline: none; box-shadow: none; border: 0;
}
.colad:hover { background: var(--fill); }
.colad:hover .colad-plus { color: var(--text-2); }
/* Focus moves the emphasis to the row itself rather than ringing the input,
   so the whole line reads as one control. */
.colad:focus-within {
  background: var(--canvas); border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.colad:focus-within .colad-plus { color: var(--accent); }
/* Submit is Enter. The button exists for pointer users and for anyone who
   does not know that, but it has no reason to occupy the row while the field
   is empty and untouched — so it appears on focus, in the flow, without
   changing the row's height. */
.colad-btn {
  flex: 0 0 auto; font: inherit; font-size: 0.82em; font-weight: 580;
  padding: 5px 11px; margin-right: 5px; border-radius: 7px; border: 0;
  cursor: pointer; background: var(--accent); color: #fff;
  display: none;
}
.colad:focus-within .colad-btn { display: block; }
/* A pointer user who reaches for the button would otherwise lose focus on
   mousedown and watch it disappear from under the cursor. */
.colad-btn:active { display: block; }

/* Checklist: one uninterrupted column, so it gets the top margin the
   time-of-day heading would otherwise have provided. */
.day-view .checklist { margin-top: 14px; }

/* Timeline: an hour gutter and the tasks that fall in it. `align-items:
   start` keeps the hour label pinned to the first task rather than floating
   to the middle of a tall stack. */
.day-view .timeline { margin-top: 14px; }
.day-view .tl-row {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  align-items: start; gap: 0 10px;
}
.day-view .tl-row + .tl-row { margin-top: 2px; }
.day-view .tl-hour {
  font-size: 0.8214em; font-weight: 590; color: var(--text-3);
  font-variant-numeric: tabular-nums; padding-top: 11px; text-align: right;
  /* The rule is the ruler: a hairline down the gutter reads as a time axis
     without drawing a full grid. */
  border-right: .5px solid var(--sep-soft); padding-right: 9px;
}
.day-view .tl-items { min-width: 0; }
.day-view .tl-loose { margin-bottom: 6px; }
/* The gutter carries the time in this mode, so the row's own clock would be
   the same fact printed twice.

   Hiding it with `display: none` removes it from the grid's flow, which
   SHIFTS every remaining child up a track: `.trow` declares `44px 3px 1fr`,
   so the rail landed in the 44px clock slot and the title cell in the 3px
   rail slot — which is what wrapped titles one character per line. The track
   list has to be rewritten to match the two children that actually remain,
   and at the same specificity as the base rule or it simply loses. */
.day-view .timeline .tl-items .trow .clock { display: none; }
.day-view .timeline .tl-items .trow {
  grid-template-columns: 3px minmax(0, 1fr);
}
/* Consecutive tasks in the same hour: the time is still printed (they differ
   by minute) but dimmed, so the eye groups them under the first. */
.day-view .tl-hour.cont { color: var(--text-3); opacity: .55; }

/* Matrix: 2×2 on urgent × important. Collapses to one column when the pane
   is too narrow for two readable cells. */
.day-view .matrix {
  margin-top: 14px; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.day-view .mx-cell {
  background: var(--chrome); border-radius: 14px; padding: 11px 12px 8px;
  box-shadow: 0 0 0 .5px var(--sep-soft); min-width: 0;
}
.day-view .mx-head {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.day-view .mx-title { font-size: 0.95em; font-weight: 620; }
.day-view .mx-sub {
  font-size: 0.74em; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .04em;
}
.day-view .mx-n {
  margin-left: auto; font-size: 0.78em; font-weight: 590; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
/* "Do" is the quadrant that should pull the eye first. */
.day-view .mx-do { box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 34%, transparent); }
.day-view .mx-body:empty::after {
  content: "—"; color: var(--text-3); font-size: 0.86em;
  display: block; padding: 4px 2px 8px;
}

/* Part-of-day heading inside the day column. */
.day-view .tod {
  font-size: 0.7857em; font-weight: 620; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3);
  margin: 18px 0 7px;
}
.day-view .tod:first-child { margin-top: 13px; }

/* A timed row: the clock is its own column so every title starts on the same
   x, whatever the time reads. tabular-nums keeps 08:00 and 11:15 the same
   width — without it the colons drift and the column stops looking like one. */
.trow {
  display: grid; grid-template-columns: 44px 3px minmax(0, 1fr); gap: 0 10px;
  align-items: start; padding: 7px 9px; margin: 0 -9px; border-radius: 6px;
}
.trow:hover { background: var(--fill); }
.trow .clock {
  font-size: 0.8571em; color: var(--text-2); text-align: right;
  font-variant-numeric: tabular-nums; padding-top: 2px; line-height: 1.5;
}
/* The colour rail. `align-self: stretch` ties its height to the row's own
   content, so a task with a subtitle grows the rail with it. */
.trow .rail { align-self: stretch; border-radius: 2px; background: var(--sep); min-height: 20px; }
/* NOT `.cell` — the month grid already owns that name and sets
   flex-direction: column, which stacked the checkbox above the title. */
.trow-cell {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: 10px; min-width: 0;
}
.trow-cell .body { min-width: 0; flex: 1 1 auto; }
.trow .name { font-size: 0.9643em; line-height: 1.35; overflow-wrap: anywhere; }
.trow .sub { font-size: 0.8214em; color: var(--text-2); margin-top: 1px; }
.trow.done .name { text-decoration: line-through; color: var(--text-3); }
.trow.pending { opacity: .55; }
/* A marker row — holiday, observance, coffee day — sits IN the list with the
   tasks but is not one of them: no tick, no delete, and the whole row washed
   with its own colour (thinned, like a month chip) so it reads as a fact about
   the date rather than a thing to do. `--mk` is set inline by dayRow. */
.trow.marker {
  background: color-mix(in srgb, var(--mk, var(--sep)) 13%, transparent);
  margin: 2px -9px; padding: 8px 9px;
}
.trow.marker:hover { background: color-mix(in srgb, var(--mk, var(--sep)) 18%, transparent); }
.trow.marker .rail { background: var(--mk, var(--sep)); }
.trow.marker .name { color: var(--text); }
.mx-markers { margin: 0 0 12px; }
.trow .badges { white-space: nowrap; }

/* Checkbox, matching the phone: a filled accent square when ticked. */
.cbox {
  width: 19px; height: 19px; border-radius: 5px; flex: 0 0 auto; margin-top: 1px;
  border: 1.6px solid var(--sep); background: transparent; cursor: pointer;
  display: grid; place-items: center; padding: 0; box-shadow: none;
}
.cbox svg { width: 13px; height: 13px; opacity: 0; }
.cbox[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.cbox[aria-checked="true"] svg { opacity: 1; }
.cbox:hover { border-color: var(--accent); filter: none; }
.cbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A marker (holiday, nameday) cannot be completed — it gets a glyph where the
   checkbox would be, so the difference is visible before you try to click. */
.trow .glyph { width: 19px; text-align: center; flex: 0 0 auto; font-size: 1.0em; line-height: 1.35; }

.trow .del {
  opacity: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer;
  color: var(--text-3); font-size: 1.2143em; line-height: 1; padding: 0 2px; flex: 0 0 auto;
}
.trow:hover .del, .trow .del:focus-visible { opacity: 1; }
.trow .del:hover { color: var(--danger); filter: none; }
/* Hover is the only reveal above, and a touch screen has none — the button
   was simply unreachable on a phone or iPad. Same rule task.css gives
   `li.task .del`. */
@media (hover: none) { .trow .del { opacity: 1; } }

/* ---- habit rings ------------------------------------------------------- */
/* Rings, as on the phone: a ring reads as "how much of today", which a
   checkbox cannot say for a habit done 3 times out of 5. */
/* A GRID, not wrapped flex. Flex packed as many 76px rings per row as each
   container happened to fit, so in two-day mode the same habit list broke
   4+1 on the left and 3+3 on the right — two days that should read as a pair
   looked like two different layouts. `auto-fill` with a fixed track means the
   column count follows the column WIDTH, so equal-width columns always agree,
   and `justify-content: start` keeps the rings left-aligned instead of
   spreading them across the row. */
.habitstrip {
  display: grid; grid-template-columns: repeat(auto-fill, 76px);
  gap: 12px 6px; justify-content: start;
  background: var(--canvas); border-radius: 10px;
  box-shadow: 0 0 0 .5px var(--sep-soft);
  padding: 12px 12px 14px; margin: 13px 0 4px;
}
.habitstrip .hs-head {
  grid-column: 1 / -1; font-size: 0.7857em; font-weight: 620; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: -2px;
}
/* Wide enough for a real habit name. Eva's are sentences as often as words
   ("интересно, какое везение ждет меня сегодня?"), and at 62px every one of
   them clipped to two ellipsised fragments. */
.hring {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 76px; border: 0; background: transparent; box-shadow: none;
  cursor: pointer; padding: 0; font: inherit; color: inherit;
}
.hring .dial { position: relative; width: 54px; height: 54px; }
.hring svg { width: 54px; height: 54px; display: block; transform: rotate(-90deg); }
.hring .track { stroke: var(--sep-soft); }
/* The dash offset is set inline per ring: the fraction is data, not style. */
.hring .fill { transition: stroke-dashoffset .28s ease; }
@media (prefers-reduced-motion: reduce) { .hring .fill { transition: none; } }
/* The tinted disc behind the glyph. Its colour is the habit's own highlight
   at low alpha, set inline (it is data). Inset so it sits INSIDE the ring's
   3.4px stroke rather than under it — a disc flush to the dial's edge reads
   as a filled ring and destroys the progress signal. */
.hring .disc {
  position: absolute; inset: 5px; border-radius: 50%;
  background: var(--fill);
}
.hring .mid {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 0.9286em; line-height: 1;
}
/* The emoji keeps the CENTRE of the dial in every state — it is what says
   WHICH habit this is, and a ✓ that replaces it makes five finished habits
   into five identical ticks with only the caption to tell them apart.
   Progress therefore moves OUT of the centre (see `.badge`) rather than
   fighting the emoji for it. */
.hring .emo { font-size: 1.55em; line-height: 1; }

/* Progress as a badge on the ring's lower-right, the way a count sits on an
   app icon. Outside the disc, so it never covers the emoji; inside the
   button, so it still reads as belonging to this ring. */
.hring .badge {
  position: absolute; right: -2px; bottom: -1px; z-index: 2;
  min-width: 19px; height: 17px; padding: 0 4px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: 0.74em; font-weight: 650; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-2); background: var(--canvas);
  box-shadow: 0 0 0 1.5px var(--canvas), inset 0 0 0 .5px var(--sep);
}
/* Finished reads as the accent tick, which is the one state worth colouring:
   it is the answer to "am I done", asked far more often than "how many". */
.hring.done .badge {
  color: var(--accent-ink); background: var(--accent);
  box-shadow: 0 0 0 1.5px var(--canvas);
}

/* NO EMOJI: the disc would be an empty tinted hole and a badge on the rim
   would float beside nothing, so the ring falls back to exactly its previous
   form — progress in the centre, no disc, no chip. Deliberate, not broken.
   Only the styling branches; the markup is the same two nodes either way. */
.hring.noemo .disc { display: none; }
.hring.noemo .badge {
  inset: 0; right: auto; bottom: auto; min-width: 0; height: auto;
  padding: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 0.8929em; font-weight: 500; color: var(--text);
}
.hring.noemo.done .badge { color: var(--accent); background: none; }
.hring .lbl {
  font-size: 0.7857em; line-height: 1.25; color: var(--text-2); text-align: center;
  max-width: 100%;
  /* Two lines, then ellipsis — a habit called "маме на револют" must not push
     its neighbours out of the row. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.hring.done .lbl { color: var(--text-3); }
.hring:hover .lbl { color: var(--text); }
.hring:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.hring.pending { opacity: .55; }

/* ---- digest rail -------------------------------------------------------- */
/* The rail scrolls on its own rather than setting the window's height. A full
   digest is a dozen cards tall; letting it drive the frame would stretch the
   whole app past a day holding three tasks. */
/* No `max-height` here. It was harmless while `.win` hugged its content — the
   window was usually shorter than the cap, so the cap never bound. Once `.win`
   became `height: 100%` the rail stopped at 78vh inside a full-height frame,
   ending its background and its border a fifth of the way up from the bottom:
   a bare notch in the corner. `min-height: 0` is what actually keeps a long
   digest from stretching the frame — that is the grid-child override the
   comment above is about, and it does the job on its own. */

/* The now rule in the timeline: a hairline in the accent with a dot at the
   gutter, slotted between the rows it separates. */
.timeline .tl-now { position: relative; height: 0; border-top: 1.5px solid var(--danger); margin: 5px 0; }
.timeline .tl-now span {
  position: absolute; left: -2px; top: -4px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--danger);
}