/* ==========================================================================
   GLOW · № 03 — Рутина. Owner: "routine". Every rule is scoped to .scr-routine.
   Atelier frame 6 + amendment 25: streak hero, 14-day history with the streak
   dimension line, checklist grouped «Ежедневно» / «Раз в неделю», «Изменить» mode,
   own items, empty state with the outline «0».
   State is told by form (fill, outline, strike, a tick), never by colour.
   Shared parts come from components.css: .btn--small («Изменить»), .field (own item),
   .legend--inline + .sw (history key), .check / .box / .check__x (rows), .state (empty).
   ========================================================================== */

/* The today square fills smoothly from the bottom when a check lands (registered so it can animate). */
@property --rt-fill {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.scr-routine {
  --rt-sq: 20px;                      /* history square: a whole pixel, so the row of dates stays level */
  overflow-x: clip;                   /* insurance: nothing here may widen the page (clip ≠ a scroll box) */
}
@media (max-width: 379.98px) { .scr-routine { --rt-sq: 19px; } }
@media (max-width: 339.98px) { .scr-routine { --rt-sq: 17px; } }
@media (min-width: 410px)    { .scr-routine { --rt-sq: 22px; } }
@media (min-width: 600px)    { .scr-routine { --rt-sq: 28px; } }

/* ---------- 1. Streak hero ----------------------------------------------- */

.scr-routine .rt-hero {
  margin: var(--sp-4) var(--gutter) 0;
  padding-bottom: var(--sp-4);
  border-bottom: var(--hair) solid var(--rule);
}
.scr-routine .rt-hero__main {
  display: flex;
  align-items: flex-end;
  align-items: last baseline;          /* the phrase's last line sits on the numeral's baseline */
  gap: var(--sp-4);
}
.scr-routine .rt-num {
  flex: none;
  margin-left: -.045em;               /* the serif's side bearing: the stem lands on the gutter */
  font-family: var(--serif);
  font-size: var(--fs-hero);          /* clamp(96px, 30vw, 150px) */
  font-weight: var(--fw-serif-display);
  line-height: var(--lh-hero);
  letter-spacing: var(--tr-hero);
  font-variant-numeric: lining-nums proportional-nums;
  color: var(--ink);
}
.scr-routine .rt-num.is-counting { font-variant-numeric: lining-nums tabular-nums; }
.scr-routine .rt-num--long { font-size: clamp(72px, 22vw, 112px); }
/* 0 — "not yet": the same outline ghost as the gates' «9» / «991» (components .gate__ghost):
   a 2 px stroke under a paper fill leaves a clean contour, the variable font's overlaps never show */
.scr-routine .rt-num--ghost {
  color: var(--bg);
  -webkit-text-stroke: 2px var(--ink-4);
  paint-order: stroke fill;
}
.scr-routine .rt-num.is-bump { animation: rt-bump 560ms var(--e-out) both; }

.scr-routine .rt-hero__side { min-width: 0; padding-bottom: 1px; }
.scr-routine .rt-hero__t {
  margin-top: var(--sp-2);
  font-family: var(--serif);
  font-size: var(--fs-voice);
  font-style: italic;
  font-weight: var(--fw-serif-text);
  line-height: var(--lh-voice);
  letter-spacing: var(--tr-item);
  color: var(--ink);
}

/* Today: «Сегодня 2/4» + one segment per daily item */
.scr-routine .rt-today {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--hair) solid var(--rule-2);
}
.scr-routine .rt-today__k { display: flex; align-items: center; gap: var(--sp-2); }
.scr-routine .rt-today__ok {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink);
}
.scr-routine .rt-today__ok svg { width: 12px; height: 12px; }
.scr-routine .rt-today__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}
.scr-routine .rt-today__num {
  font-family: var(--serif);
  font-size: var(--fs-num-l);
  font-weight: var(--fw-serif-title);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-title);
  font-variant-numeric: lining-nums proportional-nums;
  white-space: nowrap;
}
.scr-routine .rt-today__num small {
  margin-left: 2px;
  font-size: .55em;
  color: var(--ink-3);
}
.scr-routine .rt-bar {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-1);
  flex: 0 1 220px;
  min-width: 0;
  margin-bottom: 7px;
}
.scr-routine .rt-bar i {
  flex: 0 1 36px;
  min-width: 6px;
  height: var(--bar);
  background: var(--rule-2);
  transform-origin: left center;
}
.scr-routine .rt-bar--dense { gap: 3px; }
.scr-routine .rt-bar i.on { background: var(--ink); }
.scr-routine .rt-bar i.is-new { animation: rt-seg 420ms var(--e-out) both; }
/* a wide column (desktop Telegram): the scale stays next to its number instead of drifting away */
@media (min-width: 600px) {
  .scr-routine .rt-today__row { justify-content: flex-start; gap: var(--sp-6); }
  .scr-routine .rt-bar { justify-content: flex-start; }
}

/* ---------- 2. 14-day history -------------------------------------------- */

.scr-routine .rt-hist { margin: var(--sp-5) var(--gutter) 0; }
.scr-routine .rt-hist__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
}
/* 14 whole-pixel squares, first and last on the gutters, the spare width shared out between them */
.scr-routine .rt-days {
  display: grid;
  grid-template-columns: repeat(14, var(--rt-sq));
  justify-content: space-between;
  gap: 0;
  margin-top: var(--sp-3);
}
.scr-routine .rt-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.scr-routine .rt-day__sq {
  flex: none;
  width: var(--rt-sq);
  height: var(--rt-sq);
  border: var(--stroke) solid var(--ink-3);
  /* partial day = filled from the bottom by the share of daily items done */
  background: linear-gradient(to top, var(--ink) var(--rt-fill), transparent var(--rt-fill));
}
.scr-routine :is(.rt-day--full, .rt-day--part) .rt-day__sq { border-color: var(--ink); }   /* = the legend's .sw */
.scr-routine .rt-day--today .rt-day__sq {
  border-color: var(--ink);
  outline: var(--stroke) solid var(--ink);
  outline-offset: 2px;
}
.scr-routine .rt-day.is-anim .rt-day__sq { animation: rt-fill 520ms var(--e-out) both; }
.scr-routine .rt-day__d {
  font: var(--fw-regular) var(--fs-micro)/1 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-3);
}
.scr-routine .rt-day--today .rt-day__d { color: var(--ink); font-weight: var(--fw-semibold); }

/* The streak dimension line, a tailor's measure under the run of full days.
   Square i spans [i·step, i·step + sq] with step = (100% − sq) / 13 (see .rt-days). */
.scr-routine .rt-span {
  --x0: calc((100% - var(--rt-sq)) / 13 * var(--a, 0));
  --x1: calc((100% - var(--rt-sq)) / 13 * var(--b, 0) + var(--rt-sq));
  position: relative;
  height: 15px;
  margin-top: var(--sp-2);
}
.scr-routine .rt-span--none { height: 0; margin: 0; }
.scr-routine .rt-span::before {
  content: "";
  position: absolute;
  top: 7px;
  left: var(--x0);
  right: calc(100% - var(--x1));
  border-top: var(--stroke) solid var(--ink);
}
.scr-routine .rt-span--none::before { content: none; }
.scr-routine .rt-span--open::before { left: 0; }
.scr-routine .rt-span__a,
.scr-routine .rt-span__b {
  position: absolute;
  top: 3px;
  width: var(--stroke);
  height: 9px;
  background: var(--ink);
}
.scr-routine .rt-span__a { left: var(--x0); }
.scr-routine .rt-span__b { left: calc(var(--x1) - var(--stroke)); }
.scr-routine .rt-span--open .rt-span__a { display: none; }
.scr-routine .rt-span__l {
  position: absolute;
  top: 0;
  padding: 0 var(--sp-2);
  background: var(--bg);              /* knocks the line out behind the words */
  font: var(--fw-medium) var(--fs-micro)/15px var(--sans);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}
.scr-routine .rt-span--c .rt-span__l {
  left: calc((var(--x0) + var(--x1)) / 2);
  transform: translateX(-50%);
}
.scr-routine .rt-span--l .rt-span__l {     /* a short run: the words stand left of it */
  right: calc(100% - var(--x0) + 2px);
  padding-left: 0;
}
.scr-routine .rt-span--r .rt-span__l {
  left: calc(var(--x1) + 2px);
  padding-right: 0;
}
/* Legend «■ всё ◧ часть □ пропуск» = components .legend--inline + .sw (drawn squares, never glyphs) */

/* ---------- 3. Checklist ------------------------------------------------- */
/* Rows are the shared .check / .box / .check__x (components.css); only routine extras live here. */

.scr-routine .rt-list { margin-top: var(--sp-6); }
.scr-routine .rt-head {               /* «ЕЖЕДНЕВНО 2 / 4 ………… ИЗМЕНИТЬ» */
  justify-content: flex-start;
  align-items: center;
  column-gap: var(--sp-3);
}
.scr-routine .group__head.rt-head { min-height: 36px; padding-bottom: 6px; }
.scr-routine .group__sub.rt-head { padding-top: var(--sp-5); }
.scr-routine .rt-count { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }

/* «Изменить» = .btn.btn--small (32 px, ink outline, 12 px icon); on = .btn--primary «Готово» */
.scr-routine .rt-edit { flex: none; margin-left: auto; white-space: nowrap; }

/* Row: the whole label is the tap target; pressed = a bg-2 band to the screen edges */
.scr-routine .rt-item { isolation: isolate; }
.scr-routine .rt-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(-1 * var(--gutter));
  background: var(--bg-2);
  opacity: 0;
  transition: opacity var(--d-row) var(--e-std);
  pointer-events: none;
}
.scr-routine .rt-item:has(.check__l:active)::before { opacity: 1; }
.scr-routine .rt-item .check__l { -webkit-user-select: none; user-select: none; }

/* info (tip-linked items) ↔ delete (in «Изменить» mode) share the right-hand 44 px slot */
.scr-routine .rt-info svg,
.scr-routine .rt-del svg { width: 18px; height: 18px; }
.scr-routine .rt-del { display: none; color: var(--ink); }
.scr-routine .rt-del:active { background: var(--bg-3); }
.scr-routine .is-editing .rt-del { display: grid; }
.scr-routine .is-editing .rt-info { display: none; }
/* the delete buttons fade in only when the mode is switched on (JS sets .is-edit-in for 320 ms) */
.scr-routine .is-editing.is-edit-in .rt-del { animation: rt-del-in 240ms var(--e-out) both; }

.scr-routine .rt-item.is-new { animation: rt-row-in 520ms var(--e-out) both; }
/* A deleted row folds up in place (JS pins its height, then sets 0): no sideways slide, so the
   full-bleed press band and the delete button never push past the screen edge. */
.scr-routine .rt-item.is-leaving {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  border-bottom-color: transparent;
  pointer-events: none;
  transition: opacity 140ms var(--e-std), height 200ms var(--e-in);
}

/* ---------- 4. Own item ---------------------------------------------------- */
/* input = components .field (1 px --line-2 underline, ink + doubled in focus) */

.scr-routine .rt-add {
  display: flex;
  align-items: stretch;
  margin: var(--sp-5) var(--gutter) 0;
}
.scr-routine .rt-add__in {
  flex: 1;
  width: auto;
  padding-right: var(--sp-3);
}
.scr-routine .rt-add__in::placeholder { font-size: var(--fs-body-s); }
.scr-routine .rt-add__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--ink);
  color: var(--bg);
  transition: transform var(--d-press) var(--e-std), background-color var(--d-press) var(--e-std);
}
.scr-routine .rt-add__btn svg { width: 18px; height: 18px; }
.scr-routine .rt-add__btn:active { transform: scale(.96); background: var(--ink-2); }
.scr-routine .rt-add__btn:disabled { background: var(--bg-3); color: var(--ink-3); }
.scr-routine .rt-add[aria-busy="true"] .rt-add__in { color: var(--ink-3); }

/* ---------- 5. Empty -------------------------------------------------------- */

.scr-routine .rt-empty .state__mark {      /* the outline «0», same recipe as the gate ghosts */
  font-size: var(--fs-hero);
  line-height: .78;
  color: var(--bg);
  -webkit-text-stroke: 2px var(--ink-4);
  paint-order: stroke fill;
}
.scr-routine .rt-starter {
  height: auto;
  min-height: 64px;
  flex-direction: column;
  gap: 7px;
  padding: var(--sp-3) var(--sp-5);
  white-space: normal;
}
.scr-routine .rt-starter__t { display: inline-flex; align-items: center; gap: 10px; }
.scr-routine .rt-starter__t svg { width: 14px; height: 14px; }
.scr-routine .rt-starter__s {
  font: var(--fw-regular) var(--fs-note)/1.3 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}
.scr-routine .rt-starter:disabled { background: transparent; color: var(--ink-3); }

/* ---------- 6. Gate --------------------------------------------------------- */
/* One digit has the room the shared clamp keeps for «991»: the «9» at Atelier's 210 px on a tall
   phone. A short Telegram viewport caps it by height (25 % of the stable visible height), so the
   «Открыть в Premium» button is never pushed lower than the shared size would put it. */
.scr-routine--gate .gate__ghost { font-size: clamp(150px, min(54vw, calc(var(--vh, 100vh) * .25)), 210px); }

/* ---------- 7. Loading ------------------------------------------------------ */
/* The skeleton is the real markup with the text made invisible: same lines, same columns. */

.scr-routine .rt-sk .sk { vertical-align: middle; }
.scr-routine .rt-sk__num { position: relative; color: transparent; }
.scr-routine .rt-sk__num .sk { position: absolute; inset: 0 .06em 0 .04em; }
.scr-routine .rt-sk__k { display: inline-block; height: 9px; }
.scr-routine .rt-sk__line { display: inline-block; width: 160px; max-width: 100%; height: 14px; }
.scr-routine .rt-sk__line--short { width: 120px; }
.scr-routine .rt-sk .rt-sk__today { display: inline-block; width: 1.3em; height: .7em; vertical-align: baseline; }   /* «2/4» */
.scr-routine .rt-sk__d { display: inline-block; width: 12px; height: 9px; }
.scr-routine .rt-sk .rt-day__sq { border-color: var(--rule-2); }
.scr-routine .rt-sk .rt-span::before { content: none; }
.scr-routine .rt-sk .rt-legend { min-height: calc(var(--fs-note) * 1.3); }
.scr-routine .rt-sk__legend { display: inline-block; width: 190px; height: 9px; }
.scr-routine .rt-sk .group__head { min-height: calc(var(--btn-h-s, 32px) + 6px); }   /* = the head with «Изменить» */
.scr-routine .rt-sk__row .box { border-color: var(--rule-2); }
.scr-routine .rt-sk__t { display: inline-block; height: 12px; }

/* ---------- 8. Motion -------------------------------------------------------- */

@keyframes rt-bump { from { opacity: .2; transform: translateY(.08em); } }
@keyframes rt-seg { from { transform: scaleX(0); } }
@keyframes rt-fill { from { --rt-fill: var(--rt-from, 0%); } }
@keyframes rt-del-in { from { opacity: 0; } }
@keyframes rt-row-in { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .scr-routine .rt-num.is-bump,
  .scr-routine .rt-bar i.is-new,
  .scr-routine .rt-day.is-anim .rt-day__sq,
  .scr-routine .is-editing.is-edit-in .rt-del,
  .scr-routine .rt-item.is-new { animation: none; }
}