/* X Protocol W2 — конструктор утреннего ритуала и библиотека шагов.
   Loaded after design-w2-morning.css. */

.mr-edit-row {
  display: grid;
  grid-template-columns: var(--w2-s8) var(--w2-s8) minmax(0, 1fr) auto var(--w2-s8);
  align-items: center;
  gap: var(--w2-s2);
  padding: var(--w2-s2);
  border: 1px solid var(--mr-line);
  border-radius: var(--w2-s1);
  background: var(--mr-card);
  transition: opacity .15s, border-color .15s, transform .15s;
}
.mr-edit-row.dragging { opacity: .45; transform: scale(.99); }
.mr-edit-row.drop-target { border-color: var(--mr-action); }
.mr-handle,
.mr-remove {
  width: var(--w2-s8);
  height: var(--w2-s9);
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--mr-muted);
  cursor: grab;
  touch-action: none;
}
.mr-handle svg {
  width: var(--w2-s5);
  height: var(--w2-s6);
  fill: currentColor;
}
.mr-order {
  display: flex;
  flex-direction: column;
  gap: var(--w2-s1);
}
.mr-order button {
  width: var(--w2-s8);
  height: var(--w2-s8);
  padding: 0;
  border: 1px solid var(--mr-line);
  border-radius: var(--w2-s1);
  background: var(--mr-bg);
  color: var(--mr-soft);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.mr-order button:disabled { opacity: .2; }
.mr-edit-main {
  display: grid;
  grid-template-columns: var(--w2-s9) minmax(0, 1fr);
  align-items: center;
  gap: var(--w2-s2);
}
.mr-edit-main input { width: 100%; }
.mr-duration {
  display: grid;
  grid-template-columns: var(--w2-s8) minmax(var(--w2-s9), auto) var(--w2-s8);
  align-items: center;
  text-align: center;
}
.mr-duration button {
  min-width: var(--w2-s8);
  height: var(--w2-s8);
  border: 1px solid var(--mr-line);
  background: var(--mr-bg);
  color: var(--w2-text);
  font-size: 18px;
  cursor: pointer;
}
.mr-duration button:first-child { border-radius: var(--w2-s1) 0 0 var(--w2-s1); }
.mr-duration button:last-child { border-radius: 0 var(--w2-s1) var(--w2-s1) 0; }
.mr-duration b {
  min-height: var(--w2-s8);
  border-top: 1px solid var(--mr-line);
  border-bottom: 1px solid var(--mr-line);
  font: 800 12px/var(--w2-s8) 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.mr-remove {
  color: var(--mr-muted);
  cursor: pointer;
}
.mr-constructor-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--w2-s4);
  padding: var(--w2-s4) var(--w2-s1);
  border-top: 1px solid var(--mr-line);
}
.mr-constructor-total span { margin: 0; }
.mr-add-step {
  width: 100%;
  min-height: var(--w2-s9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--w2-s2);
  border: 1px dashed rgba(200, 241, 53, .4);
  border-radius: var(--w2-s1);
  background: rgba(200, 241, 53, .05);
  color: var(--mr-action);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
/* Нижний лист библиотеки */
.mr-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  visibility: hidden;
  background: rgba(0, 0, 0, .72);
  opacity: 0;
  transition: opacity .22s, visibility .22s;
}
.mr-sheet-backdrop.open { visibility: visible; opacity: 1; }
.mr-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10021;
  width: min(100%, 640px);
  max-height: min(82dvh, 720px);
  display: block;
  margin: auto;
  padding: var(--w2-s5) var(--w2-s5) calc(var(--w2-s6) + env(safe-area-inset-bottom));
  overflow: auto;
  border: 1px solid var(--mr-line);
  border-bottom: 0;
  border-radius: var(--w2-s5) var(--w2-s5) 0 0;
  background: var(--mr-card);
  box-shadow: 0 calc(var(--w2-s6) * -1) 80px rgba(0, 0, 0, .48);
  transform: translateY(105%);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.mr-sheet.open { transform: translateY(0); }
.mr-sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--w2-s3);
}
.mr-sheet > header b { font-size: 17px; }
.mr-sheet-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--w2-s1);
  margin-bottom: var(--w2-s4);
  padding: var(--w2-s1);
  border-radius: var(--w2-s1);
  background: var(--mr-bg);
}
.mr-sheet-tabs button {
  min-height: var(--w2-s8);
  border: 0;
  border-radius: var(--w2-s1);
  background: transparent;
  color: var(--mr-muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.mr-sheet-tabs button.active {
  background: var(--mr-card-raised);
  color: var(--mr-action);
}
.mr-library h3 {
  margin: var(--w2-s5) 0 var(--w2-s2);
  color: var(--mr-muted);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mr-library-item {
  width: 100%;
  min-height: 64px;
  display: grid;
  grid-template-columns: var(--w2-s9) 1fr auto var(--w2-s8);
  align-items: center;
  gap: var(--w2-s3);
  padding: var(--w2-s2);
  border: 0;
  border-bottom: 1px solid var(--mr-line);
  background: transparent;
  color: var(--w2-text);
  text-align: left;
  cursor: pointer;
}
.mr-library-item .mr-thumb {
  width: var(--w2-s9);
  height: var(--w2-s9);
}
.mr-library-item span { font-size: 12px; font-weight: 700; }
.mr-library-item strong {
  color: var(--mr-muted);
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.mr-library-item i {
  width: var(--w2-s8);
  height: var(--w2-s8);
  display: grid;
  place-items: center;
  border: 1px solid rgba(200, 241, 53, .36);
  border-radius: var(--w2-s1);
  color: var(--mr-action);
  font-size: 20px;
  font-style: normal;
}
.mr-custom {
  display: flex;
  flex-direction: column;
  gap: var(--w2-s3);
  padding: var(--w2-s3) 0;
}
.mr-custom label {
  color: var(--mr-muted);
  font: 700 12px/1.3 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mr-custom label input {
  width: 100%;
  display: block;
  margin-top: var(--w2-s2);
}
.mr-custom .mr-duration { width: 180px; }
.mr-custom > .mr-primary { margin-top: var(--w2-s2); }
.mr-toast {
  position: fixed;
  right: var(--w2-s5);
  bottom: var(--w2-s7);
  z-index: 10030;
  max-width: calc(100% - var(--w2-s8));
  padding: var(--w2-s3) var(--w2-s4);
  border: 1px solid rgba(200, 241, 53, .35);
  border-radius: var(--w2-s1);
  background: var(--mr-card-raised);
  color: var(--mr-action);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--w2-s2));
  transition: opacity .18s, transform .18s;
}
.mr-toast.show { opacity: 1; transform: translateY(0); }
@media (max-width: 900px) {
  .mr-step-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  #screen-morning { min-height: calc(100dvh - var(--w2-s9) - var(--w2-s5)); }
  .mr-view {
    padding: var(--w2-s5) var(--w2-s3) calc(var(--w2-s9) + var(--w2-s9));
  }
  .mr-picker { grid-template-columns: 1fr; }
  .mr-overview-foot { grid-template-columns: 1fr; }
  .mr-overview-foot .mr-primary { width: 100%; }
  .mr-guided { padding-bottom: calc(var(--w2-s9) + var(--w2-s9)); }
  .mr-guided-top {
    grid-template-columns: var(--w2-s9) 1fr auto var(--w2-s9);
    gap: var(--w2-s2);
  }
  .mr-guided-main { min-height: 390px; }
  .mr-guided-gif { width: 180px; height: 128px; }
  .mr-ring { width: 136px; height: 136px; }
  #screen-morning .mr-time { font-size: 31px; }
  .mr-ritual-bar { grid-template-columns: 1fr repeat(3, var(--w2-s9)); }
  .mr-ritual-bar label { grid-column: 1 / -1; }
  .mr-signal-bar { grid-template-columns: 1fr var(--w2-s9); }
  .mr-signal-bar label { grid-column: 1 / -1; }
  .mr-edit-row {
    grid-template-columns: var(--w2-s8) var(--w2-s8) minmax(0, 1fr) var(--w2-s8);
  }
  .mr-edit-row > .mr-duration {
    grid-column: 3 / 4;
    width: 168px;
  }
  .mr-edit-main { grid-template-columns: 1fr; }
  .mr-edit-thumb { display: none; }
  .mr-remove {
    grid-column: 4;
    grid-row: 1 / 3;
  }
}
@media (max-width: 500px) {
  /* Плавающий виджет пользователя живёт сверху. */
  .mr-view { padding-top: calc(var(--w2-s9) + var(--w2-s3)); }
  .mr-toast { bottom: calc(var(--w2-s9) + var(--w2-s9)); }
  .mr-edit-main {
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
  }
  .mr-handle { grid-column: 1; grid-row: 2; }
  .mr-order { grid-column: 2; grid-row: 2; }
  .mr-edit-row > .mr-duration { grid-column: 3; grid-row: 2; }
  .mr-remove { grid-column: 4; grid-row: 2; }
  .mr-step {
    grid-template-columns: var(--w2-s7) var(--w2-s8) minmax(0, 1fr) auto;
    gap: var(--w2-s2);
  }
  .mr-thumb { width: var(--w2-s8); height: var(--w2-s8); }
}
@media (prefers-reduced-motion: reduce) {
  .mr-icon-btn,
  .mr-primary,
  .mr-ritual-card,
  .mr-step,
  .mr-guided-actions > div button,
  .mr-sheet,
  .mr-sheet-backdrop,
  .mr-toast,
  .mr-edit-row,
  .mr-ritual-bar select,
  .mr-signal-bar select,
  .mr-edit-main input,
  .mr-custom input {
    transition: none;
  }
  .mr-flash.go,
  .mr-ring.rang { animation: none; }
}

/* Миниатюра шага в конструкторе кликабельна: назначить/сменить гифку */
.mr-thumb-editable { cursor: pointer; transition: border-color 160ms ease-out, color 160ms ease-out; }
.mr-thumb-editable:hover { border-color: rgba(200, 241, 53, .4); color: var(--w2-lime); }
.mr-edit-thumb.mr-no-gif { font: 700 12px/1.2 'JetBrains Mono', monospace; letter-spacing: .04em; text-align: center; }