/* Styles for the Exercises and Workouts screens. */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.req { color: var(--accent); }

/* ---------- badges ---------- */
.badge-warn { color: var(--warn); background: var(--warn-soft); border-color: rgba(232, 163, 23, 0.45); }
.badge-danger { color: var(--danger); background: var(--danger-soft); border-color: rgba(229, 72, 77, 0.45); }
.badge-info { color: var(--info); background: var(--info-soft); border-color: rgba(91, 157, 255, 0.4); }
.badge .icon { vertical-align: -2px; }

/* ---------- lists ---------- */
.count-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 16px; }
.count-grid .metric-value { font-size: 1.6rem; }
.filters { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 12px; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.filters-compact { padding: 0; background: transparent; border: 0; margin-bottom: 8px; }
.filter { display: flex; flex-direction: column; gap: 4px; min-width: 120px; flex: 0 1 150px; }
.filter-grow { flex: 1 1 220px; }
.filter label { font-size: 0.78rem; color: var(--muted); font-weight: 550; }
.hint.duration-hint { margin: 0 0 8px; }
.action-status:empty { display: none; }
.action-status { margin-bottom: 10px; }
.paged-info { margin: 0 0 8px; }
.content-table { min-width: 560px; }
.content-table td { padding: 10px 8px; }
.content-table th { padding-left: 8px; padding-right: 8px; letter-spacing: 0.03em; }
.content-table .badge { font-size: 0.72rem; padding: 1px 7px; }
.col-thumb { width: 64px; padding-right: 0 !important; }
.row-title { color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.row-title:hover { color: var(--accent); text-decoration: underline; }
.row-hidden .row-title, .row-hidden .col-thumb { opacity: 0.6; }
.row-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.row-btn { white-space: nowrap; }
.row-actions .row-btn:not(.btn-edit) span { display: none; }
.row-actions .row-btn:not(.btn-edit) { padding: 0 9px; }
.thumb { width: 44px; height: 44px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: none; color: var(--muted); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-ph { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
@media (max-width: 900px) {
  .hide-md { display: none; }
  .row-btn span { display: none; }
  .row-btn { padding: 0 10px; }
}
@media (max-width: 600px) {
  .filters { padding: 10px; }
  .filter { flex: 1 1 130px; }
  .content-table { min-width: 0; }
  .col-thumb { width: 52px; }
  .thumb { width: 38px; height: 38px; }
  .content-table .td-actions { white-space: normal; }
}

/* ---------- dialogs ---------- */
.dialog-wide { max-width: min(560px, calc(100vw - 32px)); width: 100%; }
.dialog-p { margin-bottom: 10px; color: var(--muted); }
.dialog-list { margin: 8px 0 12px; padding-left: 20px; color: var(--text); max-height: 240px; overflow: auto; overflow-wrap: anywhere; }
.dialog-picker { max-width: min(640px, calc(100vw - 24px)); width: 100%; padding: 18px; max-height: calc(100vh - 32px); }
.picker { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.picker-scroll { overflow-y: auto; max-height: min(52vh, 460px); border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.picker-list { list-style: none; margin: 0; padding: 0; }
.picker-list li + li { border-top: 1px solid var(--border); }
.picker-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: transparent; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-height: 56px; }
.picker-item:hover, .picker-item:focus-visible { background: var(--surface-2); }
.picker-item:focus-visible { outline-offset: -2px; }
.picker-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.picker-name { font-weight: 600; overflow-wrap: anywhere; }
.picker-add { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; font-size: 0.88rem; flex: none; }
.picker-empty { padding: 16px; }
.dialog-picker .dialog-actions { align-items: center; justify-content: space-between; margin-top: 8px; }

/* ---------- editor layout ---------- */
.edit-meta { margin: -8px 0 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.edit-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1000px) {
  .edit-layout { grid-template-columns: minmax(0, 1fr) 330px; }
  .edit-aside { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}
.edit-aside .card { margin-bottom: 12px; }
.row-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0 16px; }
.field-label { font-size: 0.88rem; font-weight: 550; }
.counter { text-align: right; }
.builtin-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); }
.builtin-line .builtin-text { overflow-wrap: anywhere; }
.builtin-line.is-changed .builtin-text { color: var(--accent); }
.builtin-line .btn { min-height: 28px; padding: 0 10px; font-size: 0.78rem; }
input[readonly] { color: var(--muted); }
.save-bar { position: sticky; bottom: 0; z-index: 10; display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 14px; margin-top: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45); }

/* ---------- pictures ---------- */
.pic { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 520px) { .pic { grid-template-columns: minmax(0, 1fr); } }
.pic-preview { width: 100%; aspect-ratio: 1 / 1; background: var(--bg); border: 1px dashed var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pic-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pic-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; text-align: center; color: var(--muted); font-size: 0.8rem; }
.pic-controls { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pic-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pic-info { overflow-wrap: anywhere; }
.pic-problem:empty { display: none; }

/* ---------- video ---------- */
.video-view { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.video-view:empty { display: none; }
.video-preview { width: 100%; max-width: 420px; max-height: 300px; border-radius: 10px; background: #000; }
.video-view .notice { margin: 0; }

/* ---------- muscles and exercise steps ---------- */
.muscle-picker { display: flex; flex-direction: column; gap: 10px; }
.muscle-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.muscle-list li { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; }
.muscle-rank { min-width: 44px; font-size: 0.75rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.muscle-name { flex: 1; font-weight: 550; }
.muscle-choices { gap: 6px; }
.chip-btn { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.85rem; cursor: pointer; min-height: 34px; }
.chip-btn:hover:not(:disabled) { border-color: var(--accent); }
.chip-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.steps-list, .wsteps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.step-row { display: flex; gap: 10px; align-items: flex-start; }
.step-num { flex: none; width: 26px; height: 26px; margin-top: 8px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; }
.step-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.step-tools { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.step-tools .counter { margin-right: auto; }
.steps-add { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- workout steps ---------- */
.wstep { display: flex; gap: 10px; align-items: flex-start; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px; flex-wrap: wrap; }
.wstep.is-missing { border-color: rgba(229, 72, 77, 0.6); background: var(--danger-soft); }
.wstep .step-num { margin-top: 10px; }
.wstep-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wstep-name { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; overflow-wrap: anywhere; }
.wstep-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wstep-tools { display: flex; gap: 6px; flex: none; margin-left: auto; }
.num-in { width: 88px !important; min-height: 38px !important; text-align: center; }
.seg-group { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg-btn { background: var(--surface-2); color: var(--muted); border: 0; padding: 0 12px; min-height: 38px; font: inherit; font-size: 0.88rem; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.seg-btn:focus-visible { outline-offset: -2px; }

/* ---------- summary and preview ---------- */
.summary-block { margin-top: 10px; }
.summary-block .small-title { display: block; margin: 0 0 6px; }
.live-summary .notice { margin: 10px 0 0; }
.app-preview { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.ap-pic { aspect-ratio: 4 / 3; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ap-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-nopic { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 0.82rem; text-align: center; padding: 12px; }
.ap-text { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ap-head { display: flex; gap: 10px; align-items: center; }
.ap-title { font-size: 1.05rem; overflow-wrap: anywhere; }
.ap-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; overflow-wrap: anywhere; }
.ap-tip { background: var(--accent-soft); border-radius: 10px; padding: 8px 10px; font-size: 0.88rem; overflow-wrap: anywhere; }

/* ---------- coverage bar ---------- */
.coverage-card { padding: 16px 18px; margin-bottom: 16px; }
.cov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; }
.cov { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cov-row { display: flex; justify-content: space-between; gap: 8px; font-size: 0.9rem; }
.cov-note { margin-top: 12px; }
.cbar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.cbar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; }
.cbar-ok i { background: var(--success); }

/* ---------- view toggle and filters ---------- */
.filter-view { flex: 0 0 auto; min-width: 0; }
.filter-label { font-size: 0.78rem; color: var(--muted); font-weight: 550; }
.seg-icon { display: inline-flex; align-items: center; gap: 6px; }
.filter-view .seg-btn { min-height: 42px; }

/* ---------- exercise cards ---------- */
.card-grid { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.card-grid-item { min-width: 0; display: flex; }
.ex-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; width: 100%; min-width: 0; }
.ex-card:hover { border-color: #3a3a3a; }
.ex-card.is-draft { border-style: dashed; border-color: rgba(232, 163, 23, 0.55); }
.ex-card.row-hidden .cover { opacity: 0.55; }
.ex-card-link { display: block; text-decoration: none; }
.ex-card-link:focus-visible { outline-offset: -3px; }
.cover { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; color: var(--muted); }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover .thumb-ph svg { width: 36px; height: 36px; }
.ex-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.ex-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ex-card-head .row-title { min-width: 0; }
.ex-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ex-card-actions { margin-top: auto; justify-content: flex-start; padding-top: 4px; }
.media-flags { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); }
.media-flag { display: inline-flex; }

/* ---------- save bar ---------- */
.save-bar { align-items: center; justify-content: space-between; }
.savebar-chip { display: inline-flex; flex: none; }
.savebar-note { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.savebar-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 600px) {
  .save-bar { padding: 10px; }
  .savebar-actions { width: 100%; }
  .savebar-note:not(.is-reason) { display: none; }
  .savebar-actions .btn { flex: 1 1 auto; }
}

/* ---------- checklist, usage, history ---------- */
.ready-list, .history-list, .used-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ready-item { display: flex; gap: 8px; align-items: flex-start; font-size: 0.9rem; }
.ready-mark { flex: none; display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; margin-top: 1px; }
.ready-item.is-ok .ready-mark { background: var(--success-soft); color: var(--success); }
.ready-item.is-todo .ready-mark { background: var(--danger-soft); color: var(--danger); }
.ready-item.is-optional .ready-mark { background: var(--surface-2); color: var(--muted); }
.ready-text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ready-item.is-optional .ready-text { color: var(--muted); }
.ready-note { margin-top: 10px; }
.ready-note.is-ready { color: var(--success); }
.used-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.9rem; }
.used-list a { color: var(--text); overflow-wrap: anywhere; }
.used-list a:hover { color: var(--accent); }
.history-list li { font-size: 0.9rem; color: var(--muted); }
.history-list b { color: var(--text); font-weight: 600; }

/* ---------- phone preview ---------- */
.ap-mode { display: flex; justify-content: center; margin-bottom: 10px; }
.ap-mode[hidden] { display: none; }
.phone { width: min(100%, 270px); margin: 0 auto; border: 7px solid #262626; border-radius: 32px; background: #070707; padding: 12px 10px 16px; box-shadow: 0 0 0 1px #3a3a3a; }
.phone-notch { width: 70px; height: 5px; background: #222; border-radius: 9px; margin: -2px auto 10px; }
.phone .ap-pic { border-radius: 12px; aspect-ratio: 4 / 3; border: 1px solid var(--border); }
.phone .ap-pic video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.phone .ap-text { padding: 12px 4px 0; gap: 8px; }
.ap-headtext { min-width: 0; }
.ap-thumb-row { display: flex; align-items: center; gap: 8px; }
.ap-thumb { width: 36px; height: 36px; border-radius: 8px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); flex: none; display: inline-flex; align-items: center; justify-content: center; }
.ap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-desc { color: var(--muted); overflow-wrap: anywhere; }
.phone .ap-steps { font-size: 0.82rem; padding-left: 18px; }

/* ---------- workout builder ---------- */
.wsum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.wsum { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wsum-label { color: var(--muted); font-size: 0.78rem; }
.wsum-value { font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.grip { flex: none; display: inline-flex; align-items: center; margin-top: 8px; color: var(--muted); cursor: grab; touch-action: none; }
.wstep.is-dragging { opacity: 0.45; }
.wstep.is-drop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.wstep .wstep-name .badge { font-size: 0.7rem; padding: 1px 7px; }
@media (max-width: 520px) { .grip { display: none; } }