/* 2026-10-15 21:55 | y6y.io v2.14 | strength layout (theme-neutral: colours, lines and shapes come from the shared theme.css tokens)
   Large touch targets for use mid-session: the weight is the largest thing on the page, rep buttons are 64 px tall.
   From 900 px wide the set in progress and the session's log sit side by side. Graph colours: Day A line --ui-done,
   Day B line --ui-active, estimated 1RM --ui-muted (dashed), deloads --ui-failed (dashed). */

.sg-page { display: flex; flex-direction: column; gap: 16px; }
.sg-tabs { align-self: flex-start; }
.sg-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sg-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; min-width: 0; }
.sg-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.sg-card > .ui-btn--primary { min-height: 56px; font-size: 18px; justify-content: center; }

/* ---------- deload notices ---------- */
.sg-notices { display: flex; flex-direction: column; gap: 8px; }
.sg-notice {
  margin: 0; padding: 12px 14px; font-weight: 700; line-height: 1.45;
  background: var(--ui-danger-bg); color: var(--ui-danger-ink); border: var(--ui-line-thick); border-color: var(--ui-danger-line); border-radius: var(--ui-r-panel);
}

/* ---------- next session ---------- */
.sg-plan { display: flex; flex-direction: column; gap: 10px; }
.sg-plan__block { display: flex; flex-direction: column; gap: 8px; }
.sg-plan__block.is-superset { padding: 8px 10px 10px; border: var(--ui-line); border-style: dashed; border-radius: var(--ui-r-control); }
.sg-plan__tag { text-transform: var(--ui-chrome-case); }
.sg-plan__row, .sg-prog__row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sg-plan__label {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 28px; padding: 0 4px;
  font-weight: 800; font-size: var(--ui-fs-label); background: var(--ui-invert-bg); color: var(--ui-invert-ink); border-radius: var(--ui-r-tag);
}
.sg-plan__main, .sg-prog__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sg-plan__name { font-weight: var(--ui-strong-weight); font-size: 16px; }
.sg-plan__weight { font-weight: var(--ui-strong-weight); font-size: 20px; white-space: nowrap; text-align: right; }
.sg-plan__weight.is-estimate { font-size: var(--ui-fs-label); color: var(--ui-muted); }
.sg-first__note { margin: 0; font-size: var(--ui-fs-label); font-weight: 700; color: var(--ui-done); }
.sg-first__row { display: grid; grid-template-columns: 1fr 1fr minmax(110px, 1.4fr) 1fr 1fr; gap: 8px; align-items: stretch; }
.sg-first__row .ui-btn { min-height: 56px; font-size: 18px; justify-content: center; padding: 0 4px; min-width: 0; }
.sg-first__field { display: flex; align-items: center; gap: 4px; }
.sg-first__input { width: 100%; min-height: 56px; font-size: 22px; font-weight: 800; text-align: center; }
.sg-plates-host:empty { display: none; }
.sg-plates { margin: 0; font-size: var(--ui-fs-label); font-weight: 600; color: var(--ui-muted); }

/* ---------- session in progress ---------- */
.sg-sess { display: flex; flex-direction: column; gap: 14px; }
.sg-sess__bar { display: flex; flex-direction: column; gap: 8px; }
.sg-sess__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sg-progress { height: 10px; }
.sg-progress .ui-progress__fill { background: var(--ui-done); }
.sg-sess__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) { .sg-sess__grid { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); } }
.sg-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.sg-current { gap: 8px; }
.sg-current__top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.sg-current__name { font-size: 20px; font-weight: var(--ui-strong-weight); }
.sg-current__set { font-size: 18px; font-weight: 800; color: var(--ui-muted); white-space: nowrap; }
.sg-weight { margin: 4px 0 0; font-size: clamp(44px, 13vw, 76px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.sg-target { margin: 0; font-size: 22px; font-weight: 800; }
.sg-current .sg-plates { font-size: 16px; color: var(--ui-ink); }
.sg-warn {
  margin: 4px 0 0; padding: 10px 12px; font-weight: 700; line-height: 1.45;
  background: var(--ui-highlight-bg); color: var(--ui-highlight-ink); border: var(--ui-line); border-radius: var(--ui-r-control);
}

.sg-rest { align-items: center; text-align: center; gap: 6px; }
.sg-rest__time { font-size: clamp(64px, 22vw, 112px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.sg-rest__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 8px; }
.sg-rest__btns .ui-btn { min-height: 56px; font-size: 18px; justify-content: center; }

.sg-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.sg-key {
  min-height: 64px; font: inherit; font-size: 26px; font-weight: 800; cursor: pointer; touch-action: manipulation;
  background: var(--ui-surface); color: var(--ui-ink); border: var(--ui-line); border-radius: var(--ui-r-control); box-shadow: var(--ui-shadow-sm);
}
.sg-key.is-target { border: 3px solid var(--ui-done); }
.sg-key.is-top { background: var(--ui-done); color: var(--ui-surface); }
.sg-key:active { transform: translate(1px, 1px); box-shadow: none; }
.sg-key:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 2px; }
.sg-key:disabled { opacity: 0.5; cursor: progress; }

.sg-log__rows, .sg-hist__rows { display: flex; flex-direction: column; gap: 8px; }
.sg-log__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; }
.sg-log__name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-log__w { text-align: right; white-space: nowrap; }
.sg-log__cells { grid-column: 1 / -1; display: flex; gap: 6px; }
.sg-log__cell {
  min-width: 34px; padding: 2px 6px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums;
  border: var(--ui-line); border-radius: var(--ui-r-tag); background: var(--ui-surface);
}
.sg-log__cell.is-top { background: var(--ui-done); color: var(--ui-surface); }
.sg-log__cell.is-low { background: var(--ui-failed); color: var(--ui-surface); }
.sg-log__cell.is-empty { color: var(--ui-muted); border-style: dashed; }
.sg-log__btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- progress ---------- */
.sg-progress-page { display: flex; flex-direction: column; gap: 14px; }
.sg-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sg-charts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1100px) { .sg-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sg-chart__plot { width: 100%; min-height: 190px; touch-action: pan-y; }
.sg-chart__svg { display: block; font-family: var(--ui-font); }
.sg-chart__readout { margin: 0; min-height: 1.4em; }
.sg-grid { stroke: var(--ui-line-color); stroke-opacity: 0.15; stroke-width: 1; }
.sg-base { stroke: var(--ui-line-color); stroke-width: 1.5; }
.sg-axis { fill: var(--ui-muted); font-size: 11px; }
.sg-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sg-line--a { stroke: var(--ui-done); }
.sg-line--b { stroke: var(--ui-active); }
.sg-line--e { stroke: var(--ui-muted); stroke-width: 1.8; }
.sg-pt--a { fill: var(--ui-done); }
.sg-pt--b { fill: var(--ui-active); stroke: var(--ui-line-color); stroke-width: 1; }
.sg-pt--e { fill: var(--ui-muted); }
.sg-deload { stroke: var(--ui-failed); stroke-width: 2; }
.sg-deload__label { fill: var(--ui-failed); font-size: 11px; font-weight: 800; }
.sg-guide { stroke: var(--ui-ink); stroke-opacity: 0.35; stroke-width: 1; }
.sg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--ui-fs-label); font-weight: 600; }
.sg-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.sg-legend__swatch { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--ui-done); }
.sg-legend__item--b .sg-legend__swatch { border-top-color: var(--ui-active); }
.sg-legend__item--e .sg-legend__swatch { border-top: 2px dashed var(--ui-muted); }
.sg-legend__item--d .sg-legend__swatch { width: 0; height: 14px; border-top: 0; border-left: 2px dashed var(--ui-failed); }

/* ---------- history ---------- */
.sg-history { display: flex; flex-direction: column; gap: 12px; }
.sg-hist__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 12px; align-items: center; }
.sg-hist__w { white-space: nowrap; font-weight: 600; }
.sg-hist__reps { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 6em; text-align: right; }

/* ---------- settings ---------- */
.sg-inline { display: inline-flex; align-items: center; gap: 6px; }
.sg-num { width: 92px; min-height: var(--ui-control-sm); padding-top: 4px; padding-bottom: 4px; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-chip {
  min-height: var(--ui-control-sm); padding: 0 12px; font: inherit; font-size: var(--ui-fs-label); font-weight: 700; cursor: pointer;
  background: var(--ui-surface); color: var(--ui-ink); border: var(--ui-line); border-radius: var(--ui-r-control);
}
.sg-chip[aria-pressed="true"] { background: var(--ui-invert-bg); color: var(--ui-invert-ink); }
.sg-prog__day { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.sg-prog__dayname { margin: 6px 0 0; font-size: var(--ui-fs-label); text-transform: var(--ui-chrome-case); }
.sg-rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* ---------- phones ---------- */
@media (max-width: 520px) {
  .sg-tabs { align-self: stretch; }
  .sg-card { padding: 12px; }
  .sg-plan__row, .sg-prog__row { grid-template-columns: 32px minmax(0, 1fr); }
  .sg-plan__weight { grid-column: 2; text-align: left; }
  .sg-prog__row .sg-inline { grid-column: 2; }
  .sg-hist__row { grid-template-columns: minmax(0, 1fr) auto; }
  .sg-hist__reps { text-align: left; }
  .sg-first__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sg-first__field { grid-column: 1 / -1; order: -1; }
}