/* W2 · Утренний ритуал: выбор, прохождение, финиш и конструктор. */
#screen-morning,
#screen-morning * {
  font-variant-numeric: tabular-nums;
}
#screen-morning {
  --mr-bg: var(--w2-bg);
  --mr-card: var(--w2-surface);
  --mr-card-raised: var(--w2-surface-raised);
  --mr-line: var(--w2-line);
  --mr-muted: var(--w2-text-quiet);
  --mr-soft: var(--w2-text-muted);
  --mr-action: var(--w2-lime);
  --mr-alert: var(--w2-fire);
  min-height: calc(100dvh - var(--w2-s9) - var(--w2-s6));
  padding: 0 !important;
  background: var(--mr-bg);
  color: var(--w2-text);
}
#screen-morning.active { display: block; }
.mr-shell {
  position: relative;
  width: min(100%, var(--w2-overview-width));
  min-height: inherit;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -12%, rgba(200, 241, 53, .07), transparent 34%),
    var(--mr-bg);
  font-family: 'Inter', system-ui, sans-serif;
}
.mr-view {
  min-height: inherit;
  padding: var(--w2-s6) var(--w2-s6) calc(var(--w2-s9) + var(--w2-s1));
}
.mr-view[hidden],
.mr-custom[hidden],
.mr-library[hidden],
.mr-loading[hidden],
#mr-overview-body[hidden] {
  display: none !important;
}
/* Шапка как у остальных экранов: заголовок слева, действие справа
   (после снятия кнопки «назад» трёхколоночная сетка ломала раскладку) */
.mr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w2-s4);
  margin-bottom: var(--w2-s6);
}
.mr-head h1 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--w2-s3);
  margin: 0;
  color: var(--w2-text);
  font: 700 30px/1.08 'Inter', sans-serif;
  letter-spacing: -.025em;
  text-align: left;
}
.mr-head h1 span {
  display: inline-block;
  margin-top: 0;
  color: var(--mr-muted);
  font: 600 12px/1.2 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mr-head-spacer { width: var(--w2-s9); }
.mr-icon-btn {
  width: var(--w2-s9);
  height: var(--w2-s9);
  display: grid;
  padding: 0;
  place-items: center;
  border: 1px solid var(--mr-line);
  border-radius: var(--w2-s1);
  background: rgba(255, 255, 255, .03);
  color: var(--mr-soft);
  cursor: pointer;
  transition: border-color .16s, background-color .16s, color .16s, transform .16s;
}
.mr-icon-btn:hover,
.mr-icon-btn:focus-visible {
  border-color: rgba(200, 241, 53, .34);
  background: rgba(200, 241, 53, .08);
  color: var(--w2-text);
}
.mr-icon-btn:active { transform: scale(.96); }
.mr-icon-btn svg,
.mr-primary svg,
.mr-add-step svg,
.mr-ritual-bar svg,
.mr-signal-bar svg,
.mr-remove svg {
  width: var(--w2-s5);
  height: var(--w2-s5);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}
.mr-loading {
  min-height: 55vh;
  display: grid;
  place-items: center;
  color: var(--mr-muted);
  font: 600 12px/1.5 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
/* Обзор */
.mr-streak {
  width: max-content;
  max-width: 100%;
  margin: 0 auto var(--w2-s5);
  padding: var(--w2-s2) var(--w2-s3);
  border: 1px solid rgba(200, 241, 53, .28);
  border-radius: var(--w2-s9);
  background: rgba(200, 241, 53, .07);
  color: var(--mr-action);
  font: 700 12px/1.2 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.mr-section-label {
  margin: 0 0 var(--w2-s2) var(--w2-s1);
  color: var(--mr-muted);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mr-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--w2-s2);
  margin-bottom: var(--w2-s4);
}
.mr-picker .mr-section-label { grid-column: 1 / -1; }
.mr-ritual-card {
  min-height: var(--w2-s9);
  display: grid;
  grid-template-columns: var(--w2-s6) 1fr auto;
  align-items: center;
  gap: var(--w2-s2);
  padding: var(--w2-s3);
  border: 1px solid var(--mr-line);
  border-radius: var(--w2-s1);
  background: var(--mr-card);
  color: var(--w2-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, background-color .16s, transform .16s;
}
.mr-ritual-card:hover,
.mr-ritual-card:focus-visible {
  border-color: rgba(200, 241, 53, .32);
  background: var(--mr-card-raised);
}
.mr-ritual-card:active { transform: scale(.985); }
.mr-ritual-card.selected {
  border-color: var(--mr-action);
  background: rgba(200, 241, 53, .06);
}
.mr-index {
  color: var(--mr-action);
  font: 800 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.mr-ritual-card b {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}
.mr-ritual-card small {
  display: block;
  margin-top: var(--w2-s1);
  overflow: hidden;
  color: var(--mr-muted);
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mr-ritual-card strong {
  color: var(--mr-soft);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.mr-note {
  margin: 0 0 var(--w2-s3);
  padding: var(--w2-s2) var(--w2-s3);
  border-left: 2px solid rgba(200, 241, 53, .5);
  color: var(--mr-muted);
  font-size: 12px;
  line-height: 1.5;
  text-wrap: pretty;
}
.mr-step-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: var(--w2-s2);
}
.mr-step {
  width: 100%;
  min-height: var(--w2-s9);
  display: grid;
  grid-template-columns: var(--w2-s7) var(--w2-s9) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--w2-s3);
  padding: var(--w2-s3) var(--w2-s4);
  border: 1px solid var(--mr-line);
  border-radius: var(--w2-s3);
  background: var(--mr-card);
  color: var(--w2-text);
  text-align: left;
  cursor: pointer;
  transition: opacity .16s, border-color .16s, background-color .16s;
}
.mr-step:hover,
.mr-step:focus-visible {
  border-color: rgba(255, 255, 255, .18);
  background: var(--mr-card-raised);
}
.mr-step.off { opacity: .4; }
.mr-check {
  width: var(--w2-s7);
  height: var(--w2-s7);
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--w2-s1);
  color: transparent;
}
.mr-step.on .mr-check {
  border-color: var(--mr-action);
  background: var(--mr-action);
  color: var(--w2-bg);
}
.mr-check svg {
  width: var(--w2-s4);
  height: var(--w2-s4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}
.mr-thumb,
.mr-edit-thumb {
  width: var(--w2-s9);
  height: var(--w2-s9);
  display: grid;
  overflow: hidden;
  place-items: center;
  border-radius: var(--w2-s1);
  background: var(--mr-card-raised);
  color: var(--mr-muted);
}
.mr-thumb img,
.mr-edit-thumb img,
.mr-guided-gif img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mr-no-gif {
  padding: var(--w2-s1);
  color: var(--mr-muted);
  font: 600 12px/1.25 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  text-align: center;
  text-transform: uppercase;
}
.mr-step-name {
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: pretty;
}
.mr-step > strong {
  color: var(--mr-soft);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.mr-empty {
  padding: var(--w2-s7) var(--w2-s5);
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: var(--w2-s1);
  color: var(--mr-muted);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
}
.mr-overview-foot {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 220px);
  align-items: center;
  gap: var(--w2-s4);
  margin-top: var(--w2-s5);
  padding-top: var(--w2-s4);
  border-top: 1px solid var(--mr-line);
}
.mr-overview-foot > div span,
.mr-constructor-total span {
  display: block;
  margin-bottom: var(--w2-s1);
  color: var(--mr-muted);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.mr-overview-foot > div b,
.mr-constructor-total b {
  font: 800 15px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.mr-primary {
  min-height: var(--w2-s9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--w2-s2);
  padding: 0 var(--w2-s5);
  border: 1px solid var(--mr-action);
  border-radius: var(--w2-s1);
  background: var(--mr-action);
  color: var(--w2-bg);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .16s, color .16s, filter .16s, transform .16s;
}
.mr-primary:hover,
.mr-primary:focus-visible {
  filter: brightness(1.06);
}
.mr-primary:active { transform: translateY(1px) scale(.99); }
.mr-primary:disabled {
  opacity: .3;
  cursor: not-allowed;
}
.mr-primary svg {
  fill: currentColor;
  stroke: none;
}
/* Пошаговое ведение */
.mr-guided {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--w2-s7);
  background: radial-gradient(circle at 50% 38%, rgba(200, 241, 53, .05), transparent 34%);
}
.mr-guided-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--w2-s9) 1fr auto var(--w2-s9);
  align-items: center;
  gap: var(--w2-s3);
  color: var(--mr-muted);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
}
.mr-left b { color: var(--w2-text); }
#mr-sound.off { opacity: .35; }
.mr-pips {
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--w2-s1);
  margin: var(--w2-s5) 0;
}
.mr-pips span {
  height: var(--w2-s1);
  flex: 1;
  border-radius: var(--w2-s1);
  background: rgba(255, 255, 255, .12);
}
.mr-pips .current,
.mr-pips .done { background: var(--mr-action); }
.mr-pips .skip { background: var(--mr-alert); }
.mr-flash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(200, 241, 53, 0);
}
.mr-flash.go { animation: mrW2Flash .65s ease-out; }
@keyframes mrW2Flash {
  0% { background: rgba(200, 241, 53, .16); }
  100% { background: rgba(200, 241, 53, 0); }
}
.mr-guided-main {
  position: relative;
  z-index: 2;
  min-height: 440px;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mr-badge {
  margin-bottom: var(--w2-s3);
  padding: var(--w2-s2) var(--w2-s3);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--w2-s9);
  background: rgba(255, 255, 255, .04);
  color: var(--mr-soft);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#screen-morning .mr-guided:has(.mr-ring.up) .mr-badge { border-color: rgba(241, 70, 44, .38); background: rgba(241, 70, 44, .09); color: var(--mr-alert); }
.mr-guided h2 {
  max-width: 520px;
  margin: 0 0 var(--w2-s5);
  color: var(--w2-text);
  font-size: clamp(24px, 5vw, 36px);
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.mr-guided-gif {
  width: 210px;
  height: 150px;
  display: grid;
  margin-bottom: var(--w2-s5);
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--mr-line);
  border-radius: var(--w2-s2);
  background: var(--mr-card);
}
.mr-ring {
  --mr-progress: 0%;
  position: relative;
  width: 152px;
  height: 152px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--mr-action) var(--mr-progress), rgba(255, 255, 255, .09) 0);
}
.mr-ring::after {
  content: '';
  position: absolute;
  inset: var(--w2-s2);
  border-radius: 50%;
  background: var(--mr-bg);
}
.mr-ring.rang { animation: mrW2Ring .65s ease-out; }
/* remaining <= 0: шаг просрочен, поэтому здесь огонь, а не цвет успеха. */
.mr-ring.up {
  background: conic-gradient(var(--mr-alert) 100%, var(--mr-alert) 0);
}
@keyframes mrW2Ring {
  0%, 100% { outline: 0 solid rgba(200, 241, 53, 0); }
  35% { outline: var(--w2-s4) solid rgba(200, 241, 53, .12); }
}
#screen-morning .mr-time {
  position: relative;
  z-index: 1;
  color: var(--w2-text);
  font: 800 36px/1 'Orbitron', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
#screen-morning :is(#mr-left-time, #mr-total, #mr-complete-time, #mr-complete-steps, #mr-complete-streak, #mr-constructor-total) {
  font-variant-numeric: tabular-nums;
}
.mr-next {
  min-height: var(--w2-s4);
  margin-top: var(--w2-s4);
  color: var(--mr-muted);
  font-size: 12px;
}
.mr-guided-actions {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  margin: var(--w2-s3) auto 0;
}
.mr-guided-actions > .mr-primary { width: 100%; }
.mr-guided-actions > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--w2-s2);
  margin-top: var(--w2-s2);
}
.mr-guided-actions > div button {
  min-height: var(--w2-s9);
  border: 1px solid var(--mr-line);
  border-radius: var(--w2-s1);
  background: var(--mr-card);
  color: var(--mr-soft);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s, background-color .16s, color .16s;
}
.mr-guided-actions > div button:hover,
.mr-guided-actions > div button:focus-visible {
  border-color: rgba(255, 255, 255, .18);
  background: var(--mr-card-raised);
  color: var(--w2-text);
}
.mr-guided-actions > div button:last-child {
  border-color: rgba(241, 70, 44, .25);
  color: var(--mr-alert);
}
.mr-guided-actions button:disabled {
  opacity: .45;
  pointer-events: none;
}
/* Финиш */
.mr-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.mr-complete-mark {
  width: 72px;
  height: 72px;
  display: grid;
  margin-bottom: var(--w2-s5);
  place-items: center;
  border-radius: 50%;
  background: var(--mr-action);
  color: var(--w2-bg);
}
.mr-complete-mark svg {
  width: var(--w2-s7);
  height: var(--w2-s7);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}
.mr-complete h2 {
  margin: 0;
  color: var(--w2-text);
  font-size: 34px;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.mr-complete > p {
  margin: var(--w2-s3) 0 var(--w2-s6);
  color: var(--mr-muted);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}
.mr-complete-stats {
  width: min(100%, 480px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: var(--w2-s5);
  overflow: hidden;
  border: 1px solid var(--mr-line);
  border-radius: var(--w2-s1);
  background: var(--mr-card);
}
.mr-complete-stats > div {
  padding: var(--w2-s4) var(--w2-s2);
  border-right: 1px solid var(--mr-line);
}
.mr-complete-stats > div:last-child { border-right: 0; }
.mr-complete-stats b {
  display: block;
  margin-bottom: var(--w2-s2);
  color: var(--mr-action);
  font: 800 17px/1 'Orbitron', monospace; font-variant-numeric: tabular-nums;
}
.mr-complete-stats span {
  color: var(--mr-muted);
  font: 600 12px/1.25 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.mr-complete-list {
  width: min(100%, 480px);
  margin-bottom: var(--w2-s5);
}
.mr-complete-list > div {
  min-height: var(--w2-s9);
  display: grid;
  grid-template-columns: var(--w2-s7) 1fr auto;
  align-items: center;
  gap: var(--w2-s2);
  padding: var(--w2-s2) var(--w2-s1);
  border-bottom: 1px solid var(--mr-line);
  text-align: left;
}
.mr-complete-list span {
  width: var(--w2-s6);
  height: var(--w2-s6);
  display: grid;
  place-items: center;
  border-radius: var(--w2-s1);
  background: var(--mr-action);
  color: var(--w2-bg);
}
.mr-complete-list svg {
  width: var(--w2-s4);
  height: var(--w2-s4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 3;
}
.mr-complete-list b { font-size: 12px; }
.mr-complete-list strong {
  color: var(--mr-muted);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.mr-complete-list .skipped { opacity: .62; }
.mr-complete-list .skipped span {
  border: 1px solid rgba(241, 70, 44, .35);
  background: rgba(241, 70, 44, .1);
  color: var(--mr-alert);
}
.mr-complete > .mr-primary { width: min(100%, 320px); }
/* Конструктор */
.mr-ritual-bar,
.mr-signal-bar {
  display: grid;
  align-items: center;
  gap: var(--w2-s2);
  margin-bottom: var(--w2-s4);
  padding: var(--w2-s3);
  border: 1px solid var(--mr-line);
  border-radius: var(--w2-s1);
  background: var(--mr-card);
}
.mr-ritual-bar { grid-template-columns: auto minmax(0, 1fr) repeat(3, var(--w2-s9)); }
.mr-signal-bar { grid-template-columns: auto minmax(0, 1fr) var(--w2-s9); }
.mr-ritual-bar label,
.mr-signal-bar label {
  color: var(--mr-muted);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mr-ritual-bar select,
.mr-signal-bar select,
.mr-edit-main input,
.mr-custom input {
  min-width: 0;
  height: var(--w2-s9);
  padding: 0 var(--w2-s3);
  border: 1px solid var(--mr-line);
  border-radius: var(--w2-s1);
  outline: none;
  background: var(--mr-bg);
  color: var(--w2-text);
  font-size: 12px;
  transition: border-color .16s;
}
.mr-ritual-bar select:focus,
.mr-signal-bar select:focus,
.mr-edit-main input:focus,
.mr-custom input:focus { border-color: var(--mr-action); }
.mr-ritual-bar button,
.mr-signal-bar button {
  width: var(--w2-s9);
  height: var(--w2-s9);
  display: grid;
  padding: 0;
  place-items: center;
  border: 1px solid var(--mr-line);
  border-radius: var(--w2-s1);
  background: var(--mr-bg);
  color: var(--mr-soft);
  cursor: pointer;
}
.mr-ritual-bar button:disabled { opacity: .25; cursor: not-allowed; }
.mr-ritual-bar .mr-danger { color: var(--mr-muted); }
.mr-constructor-list {
  display: flex;
  flex-direction: column;
  gap: var(--w2-s2);
}