/* X Protocol W2 — редактор программы: дни, упражнения, разминка. */

.tr-star-modal-overlay {
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  animation:fadeIn .14s
}

.tr-star-modal-overlay.open {
  display:flex
}

.tr-star-modal {
  width:25vw;
  max-width:94vw;
  background:#26282B;
  border:1px solid rgba(255,215,64,.25);
  border-radius:var(--w2-s3);
  overflow:hidden
}

.tr-star-modal-head {
  padding:var(--w2-s4) var(--w2-s5);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between
}

.tr-star-modal-head h3 {
  font:700 14px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  margin:0
}

.tr-star-modal-body {
  padding:var(--w2-s5);
  display:flex;
  flex-direction:column;
  gap:var(--w2-s4)
}

.tr-star-level {
  padding:var(--w2-s3) var(--w2-s3);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  background:var(--surface-el);
  display:flex;
  flex-direction:column;
  gap:var(--w2-s2);
}

.tr-star-level:nth-child(1) {
  border-color:rgba(255,215,64,.15)
}

.tr-star-level:nth-child(2) {
  border-color:rgba(255,215,64,.28)
}

.tr-star-level:nth-child(3) {
  border-color:rgba(255,215,64,.42)
}

.tr-star-level.is-current {
  border-color:rgba(255,215,64,.4);
  background:rgba(255,215,64,.04)
}

.tr-star-level-head {
  display:flex;
  align-items:center;
  gap:var(--w2-s2)
}

.tr-star-level-stars {
  display:flex;
  gap:var(--w2-s1)
}

.tr-star-level-stars .star-icon {
  width:max(11px,0.62vw);
  height:max(11px,0.62vw);
  fill:#FFD740
}

.tr-load-mark {
  color:var(--w2-text-muted)
}

.tr-inline-star {
  display:inline-flex;
  color:var(--w2-gold);
  vertical-align:-.12em
}

.tr-inline-star svg {
  width:1em;
  height:1em;
  fill:currentColor
}

.tr-star-lv-input {
  flex:1;
  min-width:0;
  font:500 14px/1.2 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  background:transparent;
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  padding:var(--w2-s1) var(--w2-s1);
  transition:border-color .14s,background .14s;
}

.tr-star-lv-input:hover {
  border-bottom-color:var(--border)
}

.tr-star-lv-input:focus {
  outline:0;
  border-bottom-color:#FFD740;
  background:rgba(255,215,64,.04)
}

.tr-star-level-weight {
  transition: color .14s
}

.tr-star-level-weight:hover {
  opacity:.8, background-color .14s
}

.tr-star-level-weight:hover {
  opacity:.8, border-color .14s
}

.tr-star-level-weight:hover {
  opacity:.8, box-shadow .14s
}

.tr-star-level-weight:hover {
  opacity:.8, transform .14s
}

.tr-star-level-weight:hover {
  opacity:.8, opacity .14s
}

.tr-star-level-weight:hover {
  opacity:.8;
  transform:scale(1.05)
}

.tr-star-level-weight {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:var(--w2-s1) var(--w2-s2);
  border-radius:var(--w2-s1);
  border:1px solid var(--border);
  cursor:pointer;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
}

.tr-star-level-weight.w-ext {
  color:rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.3)
}

.tr-star-level-weight.w-body,.tr-star-level-weight.w-none {
  color:var(--text-mute)
}

.tr-star-level-weight.w-band,.tr-star-level-weight.w-bw-band {
  color:rgba(255,255,255,.55);
  border-color:rgba(255,255,255,.3)
}

.tr-star-users {
  display:flex;
  flex-wrap:wrap;
  gap:var(--w2-s1);
  padding-top:var(--w2-s1);
  border-top:1px dashed var(--border)
}

.tr-star-user {
  display:inline-flex;
  align-items:center;
  gap:var(--w2-s1);
  padding:var(--w2-s1) var(--w2-s2);
  border-radius:var(--w2-s3);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  font:500 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-mute);
}

.tr-star-user .user-dot {
  width:max(10px,0.31vw);
  height:max(10px,0.31vw);
  border-radius:50%;
  background:var(--green)
}

.tr-star-users-section {
  padding-top:var(--w2-s3);
  border-top:1px solid var(--border)
}

.tr-star-users-title {
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:var(--w2-s3)
}

.tr-star-user-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--w2-s2) 0
}

.tr-star-user-name {
  font:500 14px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text);
  display:inline-flex;
  align-items:center;
  gap:var(--w2-s2)
}

.user-bullet {
  width:max(10px,0.52vw);
  height:max(10px,0.52vw);
  border-radius:var(--w2-s1);
  flex-shrink:0
}

.tr-star-user-stars {
  display:flex;
  gap:var(--w2-s1)
}

.star-icon-btn {
  width:max(16px,0.94vw);
  height:max(16px,0.94vw);
  cursor:pointer;
  fill:rgba(255,215,64,.15);
  transition:fill .14s
}

.star-icon-btn.active {
  fill:#FFD740
}

.star-icon-btn:hover {
  fill:rgba(255,215,64,.6)
}

.tr-star-add-level {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--w2-s2);
  padding:var(--w2-s2);
  border:1px dashed rgba(255,215,64,.2);
  border-radius:var(--w2-s2);
  background:transparent;
  color:rgba(255,215,64,.5);
  cursor:pointer;
  font:500 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
}

.tr-star-add-level:hover {
  border-color:rgba(255,215,64,.4);
  color:rgba(255,215,64,.8);
  background:rgba(255,215,64,.04)
}

.tr-star-add-level svg {
  width:max(11px,0.62vw);
  height:max(11px,0.62vw);
  stroke:currentColor;
  fill:none;
  stroke-width:2
}

.tr-star-level-del {
  width:max(18px,1.04vw);
  height:max(18px,1.04vw);
  border:0;
  border-radius:var(--w2-s1);
  background:transparent;
  color:rgba(255,255,255,.2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: color .14s, background-color .14s, border-color .14s, box-shadow .14s, transform .14s, opacity .14s;
  padding:0;
  flex-shrink:0;
  margin-left:var(--w2-s1);
}

.tr-star-level-del svg {
  width:max(10px,0.57vw);
  height:max(10px,0.57vw);
  stroke:currentColor;
  fill:none;
  stroke-width:2
}

.tr-star-level-del:hover {
  color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.08)
}

.tr-star-level-gif {
  display:flex;
  align-items:center;
  gap:var(--w2-s2);
  margin-top:var(--w2-s1);
}

.tr-star-level-gif img {
  width:max(35px,2.08vw);
  height:max(35px,2.08vw);
  object-fit:cover;
  border-radius:var(--w2-s1);
  border:1px solid var(--border)
}

.tr-star-level-gif input {
  flex:1;
  min-width:0;
  font:400 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  color:var(--text-mute);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--w2-s1);
  padding:var(--w2-s1) var(--w2-s2);
}

.tr-star-level-gif input:focus {
  outline:0;
  border-color:#FFD740
}

.tr-star-level-gif .gif-label {
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  white-space:nowrap
}

.tr-star-foot {
  padding:var(--w2-s3) var(--w2-s5);
  border-top:1px solid var(--border);
  display:flex;
  justify-content:flex-end;
  background:#1E2023
}

.tr-star-foot .btn {
  padding:var(--w2-s2) var(--w2-s4)
}

/* Muscle tags */
.ex-meta-row {
  display:inline-flex;
  flex-wrap:wrap;
  gap:var(--w2-s1);
  align-items:center
}

.ex-meta-row .tag {
  font:500 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  padding:var(--w2-s1) var(--w2-s1);
  border-radius:var(--w2-s1);
  white-space:nowrap
}

.ex-meta-row .tag.primary {
  color:var(--green);
  background:rgba(200,241,53,.08);
  border:1px solid rgba(200,241,53,.2)
}

.ex-meta-row .tag.secondary {
  color:var(--text-dim);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border)
}

/* Exercise GIF thumbnail */
.ex-gif-cell {
  width:max(35px,2.08vw);
  height:max(28px,1.67vw);
  flex-shrink:0;
  border-radius:var(--w2-s1);
  overflow:hidden;
  position:relative;
  cursor:pointer
}

.ex-gif-cell img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}

.ex-gif-cell.empty {
  border:1px dashed var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  font:600 12px/1 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text-dim);
  letter-spacing:.04em
}

.ex-gif-cell.empty:hover {
  border-color:var(--green);
  color:var(--green)
}

/* GIF popup */
.ex-gif-popup {
  position:fixed;
  z-index:9998;
  background:#26282B;
  border:1px solid var(--border-hi);
  border-radius:var(--w2-s3);
  overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
  width:16.67vw
}

.ex-gif-popup-close {
  position:absolute;
  top:var(--w2-s2);
  right:var(--w2-s2);
  z-index:2;
  background:rgba(0,0,0,.6);
  border:0;
  color:var(--text-mute);
  cursor:pointer;
  font-size:14px;
  width:max(25px,1.46vw);
  height:max(25px,1.46vw);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: color .14s
}

.ex-gif-popup-close:hover {
  color:#fff;
  background:rgba(0,0,0,.8)
}

.ex-gif-popup img {
  width:100%;
  height:10.42vw;
  object-fit:cover;
  display:block;
  background:#16181A
}

.ex-gif-popup-empty {
  width:100%;
  height:6.25vw;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-dim);
  font:500 12px/1 'Inter',sans-serif; font-variant-numeric: tabular-nums;
  background:#16181A
}

.ex-gif-popup-body {
  padding:var(--w2-s3);
  display:flex;
  flex-direction:column;
  gap:var(--w2-s2)
}

.ex-gif-popup-body input {
  width:100%;
  padding:var(--w2-s2);
  font:500 12px/1.2 'JetBrains Mono',monospace; font-variant-numeric: tabular-nums;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--w2-s2);
  box-sizing:border-box
}

.ex-gif-popup-body input:focus {
  outline:0;
  border-color:var(--green)
}

/* M-02: mobile exercise cards */
@media (max-width:500px) {
  #ss-center .prog-editor,
  #ss-center .prog-day,
  #ss-center .prog-day-ex,
  .tr-add-day-btn {
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box
  }

  #ss-center .prog-day {
    padding:var(--w2-s3)
  }

  .prog-day-head {
    flex-wrap:wrap
  }

  .prog-day-weekday,
  .prog-day-title-input,
  .tr-add-btn,
  .tr-add-ex-btn,
  .tr-day-del,
  .tr-add-day-btn {
    min-height:var(--w2-s8)
  }

  .prog-day-weekday,
  .tr-day-del {
    min-width:var(--w2-s8)
  }

  #ss-center .prog-day-ex {
    align-items:center;
    flex-wrap:wrap;
    gap:var(--w2-s2);
    padding:var(--w2-s2)
  }

  #ss-center .prog-day-ex input.ex-name {
    order:1;
    flex:1 0 100%;
    width:100%;
    min-width:0;
    height:var(--w2-s8);
    box-sizing:border-box;
    font-size:14px
  }

  #ss-center .prog-day-ex .ex-gif-cell {
    order:2;
    width:var(--w2-s8);
    height:var(--w2-s8)
  }

  #ss-center .prog-day-ex .ex-inline-controls {
    order:2;
    flex:1 1 240px;
    min-width:0;
    margin-left:0;
    flex-wrap:wrap
  }

  #ss-center .prog-day-ex .ex-sets,
  #ss-center .prog-day-ex .ex-reps-field {
    width:56px;
    min-width:56px;
    height:var(--w2-s8);
    box-sizing:border-box;
    font-variant-numeric:tabular-nums
  }

  #ss-center .prog-day-ex .ex-star-badge,
  #ss-center .prog-day-ex .ex-rest-type,
  #ss-center .prog-day-ex .ex-weight {
    min-width:var(--w2-s8);
    min-height:var(--w2-s8);
    box-sizing:border-box
  }

  #ss-center .prog-day-ex .ex-muscle-tag {
    flex:1 0 100%;
    width:auto;
    max-width:100%;
    min-width:0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere
  }

  #ss-center .prog-day-ex .ex-drag-handle {
    order:3;
    width:var(--w2-s8);
    height:var(--w2-s8)
  }

  #ss-center .prog-day-ex .ex-reorder-btns {
    order:3;
    flex-direction:row;
    margin-right:0
  }

  #ss-center .prog-day-ex .ex-reorder-btn,
  #ss-center .prog-day-ex .ex-del {
    width:var(--w2-s8);
    min-width:var(--w2-s8);
    height:var(--w2-s8);
    box-sizing:border-box
  }

  #ss-center .prog-day-ex .ex-del {
    order:3;
    margin-left:auto
  }

  /* M-02: mobile settings and program header stacks */
  #sub-programs .tr-config-grid {
    grid-template-columns:minmax(0,1fr);
    gap:var(--w2-s4);
    width:100%;
    max-width:100%;
    min-width:0
  }

  #sub-programs .tr-config-col,
  #sub-programs .tr-config-col > .item-list,
  #sub-programs .tr-config-col > .item-list > .item-row,
  #sub-programs .tr-rest-bar {
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box
  }

  #sub-programs .tr-config-col > .item-list > .item-row {
    grid-template-columns:var(--w2-s8) minmax(0,1fr) auto;
    gap:var(--w2-s2)
  }

  #sub-programs .item-row > :nth-child(2) {
    min-width:0
  }

  #sub-programs .item-row .name {
    white-space:normal;
    overflow-wrap:anywhere
  }

  #sub-programs .item-row > .actions {
    grid-column:1 / -1;
    width:100%;
    max-width:100%;
    min-width:0;
    justify-content:flex-end;
    flex-wrap:wrap;
    box-sizing:border-box
  }

  #sub-programs .item-row > .actions > button {
    width:var(--w2-s8);
    min-width:var(--w2-s8);
    height:var(--w2-s8);
    min-height:var(--w2-s8);
    box-sizing:border-box
  }

  #sub-programs .tr-rest-bar {
    flex-direction:column;
    gap:var(--w2-s2)
  }

  #sub-programs .tr-rest-item {
    width:100%;
    min-width:0;
    justify-content:space-between
  }

  #sub-programs .tr-rest-item .value > input {
    width:56px;
    min-width:56px;
    height:var(--w2-s8);
    box-sizing:border-box;
    font-variant-numeric:tabular-nums
  }

  #sub-programs input#bandColorInp {
    width:var(--w2-s8) !important;
    min-width:var(--w2-s8);
    height:var(--w2-s8) !important;
    min-height:var(--w2-s8);
    box-sizing:border-box
  }

  #sub-programs input#bandNameInp {
    width:100% !important;
    max-width:100%;
    min-width:0;
    height:var(--w2-s8);
    box-sizing:border-box
  }

  #sub-active .tr-prog-header {
    width:100%;
    max-width:100%;
    min-width:0;
    flex-wrap:wrap
  }

  #sub-active .tr-prog-header > input.tr-prog-name {
    order:1;
    flex:1 0 100%;
    width:100%;
    min-width:0;
    height:var(--w2-s8);
    box-sizing:border-box;
    font-size:14px
  }

  #sub-active .tr-prog-weeks {
    order:2;
    flex-wrap:wrap
  }

  #sub-active .tr-prog-weeks > input {
    width:56px;
    min-width:56px;
    height:var(--w2-s8);
    box-sizing:border-box;
    font-variant-numeric:tabular-nums
  }

  #ss-center .prog-day-head > input.prog-day-title-input {
    order:1;
    flex:1 0 100%;
    width:100%;
    min-width:0;
    height:var(--w2-s8);
    box-sizing:border-box;
    font-size:14px
  }

  #ss-center .prog-day-head > .prog-day-weekday,
  #ss-center .prog-day-head > .prog-day-actions {
    order:2
  }

  #ss-center .prog-day-head > .prog-day-actions {
    flex:1 1 auto;
    max-width:100%;
    min-width:0;
    flex-wrap:wrap
  }

  #ss-center .prog-day-head > .prog-day-weekday > select {
    min-width:var(--w2-s8);
    height:var(--w2-s8);
    min-height:var(--w2-s8);
    box-sizing:border-box
  }

  #ss-center .warmup-card-list,
  #ss-center .warmup-card {
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box
  }

  #ss-center .warmup-card {
    flex-wrap:wrap
  }

  #ss-center .warmup-card > input.w-name {
    order:1;
    flex:1 0 100%;
    width:100%;
    min-width:0;
    height:var(--w2-s8);
    box-sizing:border-box;
    font-size:14px
  }

  #ss-center .warmup-card > .w-num,
  #ss-center .warmup-card > .ex-gif-cell,
  #ss-center .warmup-card > .w-time-group,
  #ss-center .warmup-card > .ex-del {
    order:2
  }

  #ss-center .warmup-card > .ex-gif-cell {
    width:var(--w2-s8);
    height:var(--w2-s8);
    box-sizing:border-box
  }

  #ss-center .warmup-card > .w-time-group > input.w-time {
    width:calc(var(--w2-s9) + var(--w2-s2));
    min-width:calc(var(--w2-s9) + var(--w2-s2));
    height:var(--w2-s8);
    min-height:var(--w2-s8);
    box-sizing:border-box
  }

  #ss-center .warmup-card > .ex-del {
    width:var(--w2-s8);
    min-width:var(--w2-s8);
    height:var(--w2-s8);
    min-height:var(--w2-s8);
    padding:0;
    box-sizing:border-box
  }

  #ss-center .warmup-head > button.icon-btn {
    width:var(--w2-s8);
    min-width:var(--w2-s8);
    height:var(--w2-s8);
    min-height:var(--w2-s8);
    box-sizing:border-box
  }

  #sub-records .rec-grid {
    grid-template-columns:minmax(0,1fr);
    width:100%;
    max-width:100%;
    min-width:0
  }

  #sub-records .rec-grid > .rec-card,
  #sub-records .rec-card-info {
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box
  }

  #sub-records .rec-card-info {
    display:grid;
    grid-template-columns:minmax(0,1fr) var(--w2-s8)
  }

  #sub-records .rec-card-name {
    min-width:0;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere
  }

  #sub-records .rec-card-info > button.tr-day-del {
    width:var(--w2-s8);
    min-width:var(--w2-s8);
    height:var(--w2-s8);
    min-height:var(--w2-s8);
    box-sizing:border-box
  }
}