/* Components. Every colour and size references a §12.2 token from
   tokens.css — no literals. */

/* ---- Plan ---- */

.plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.plan-head h2 {
  margin: 0;
  font-size: var(--fs-name);
  font-weight: 650;
}

.plan-field {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.plan-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-3) 0;
}

.plan-meta,
.lib-summary,
.sched-note,
.tpl-level,
.gym-meta,
.sess-count,
.slot-ref {
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.lib-summary,
.sched-note {
  margin: 0 0 var(--s-3);
}

/* template chooser */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col-card), 100%), 1fr));
  gap: var(--s-3);
}

.tpl-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--card-pad);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

.tpl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

.tpl-name {
  font-size: var(--fs-name);
  font-weight: 600;
}

.tpl-days {
  color: var(--accent);
  font-size: var(--fs-label);
}

.tpl-note {
  margin: 0;
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.tpl-warn {
  margin: 0;
  color: var(--warn);
  font-size: var(--fs-label);
}

.tpl-card .btn {
  margin-top: auto;
}

/* ---- Scheduling ---- */

.sched {
  margin: var(--s-4) 0;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-day), 100%), 1fr));
  gap: var(--s-2);
}

.day-cell {
  padding: var(--s-2);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

.day-name {
  margin-bottom: var(--s-1);
  color: var(--text-dim);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.day-cell .sel {
  width: 100%;
  padding: 0 var(--s-2);
}

.rot-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.rot-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: var(--hair) dashed var(--line);
  border-left: var(--edge-active) solid transparent;
  border-radius: var(--r-md);
  color: var(--text-dim);
}

/* The next session is the one bright thing — committed vs projected (§7.3). */
.rot-item--next {
  border-style: solid;
  border-color: var(--line);
  border-left-color: var(--accent);
  box-shadow: var(--elev-1);
  color: var(--text);
}

.rot-idx {
  min-width: var(--s-5);
  color: var(--text-dim);
}

/* ---- Sessions & slots ---- */

.sess-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.sess {
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

.sess-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-2) var(--card-pad);
  list-style: none;
  cursor: pointer;
}

.sess-head::-webkit-details-marker {
  display: none;
}

.sess-name {
  font-size: var(--fs-name);
  font-weight: 600;
}

.sess-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 0 var(--card-pad) var(--s-3);
}

.slot {
  padding-top: var(--s-3);
  border-top: var(--hair) solid var(--line-soft);
  border-left: var(--edge-active) solid transparent;
}

/* The edge is already reserved on .slot, so flagging one only changes its
   colour — no content shift against the slots above and below. */
.slot--warn {
  border-left-color: var(--warn);
}

.slot-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.slot-type {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.slot-name {
  font-size: var(--fs-name);
  font-weight: 550;
  overflow-wrap: anywhere;
}

.slot-head .btn-sm {
  margin-left: auto;
}

.slot-note {
  margin-top: var(--s-1);
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.slot-note--warn {
  color: var(--warn);
}

.slot-ref {
  margin-top: var(--s-2);
}

/* Numeric cells: large, tabular, thumb-sized. The tap-to-step control the
   set row uses (§12.3) lands with mobile logging in step 4.
   Tracks size off --col-num-pair, not --col-num: the Reps field is two inputs
   wide and every track here is the same width, so the pair is what the minimum
   has to clear. At 360px that lands Sets/Reps on one row and Weight/RIR on the
   next rather than clipping the rep range. */
.slot-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--col-num-pair), 100%), 1fr));
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
}

.slot-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}

/* Mobile keeps the fields fluid and thumb-wide; desktop caps them so a wide
   card doesn't stretch a 2-digit field across a quarter of the screen. The
   pair carries twice the cap, for the same reason it carries twice the min. */
@media (min-width: 700px) {
  .slot-field {
    max-width: var(--w-field-max);
  }

  .slot-field--pair {
    max-width: var(--w-field-pair-max);
  }
}

.slot-label {
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.slot-num {
  width: 100%;
  min-width: 0;
  padding: 0 var(--s-2);
  font-size: var(--fs-input);
  font-weight: 600;
  text-align: center;
}

.slot-reps {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-1);
}

.dash {
  color: var(--text-dim);
}

.slot-flags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-2);
}

/* ---- §7.2a plan editing ---- */

.tpl-card--blank {
  border-left: var(--edge-active) solid var(--accent);
}

/* §12.5a: the active plan gets an accent edge, not a filled background — an
   edge reads "you are here", a fill reads "button". Same treatment the blank
   card uses, so the marked plan and the lead action look like one family. */
.tpl-card--active {
  border-left: var(--edge-active) solid var(--accent);
}

.tpl-card .plan-bar {
  margin: auto 0 0;
}

/* Which plan Today reads from, stated on the plan itself. */
.plan-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-3) 0;
  padding: var(--s-2) var(--s-3);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-dim);
  font-size: var(--fs-label);
}

.plan-active--on {
  border-left: var(--edge-active) solid var(--accent);
}

.plan-active .btn {
  margin-left: auto;
}

.plan-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.sess-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
}

.sess-rename {
  flex: 1 1 var(--w-gym-name);
}

.slot-order {
  display: inline-flex;
  gap: var(--s-1);
}

.slot-order .btn-sm {
  min-width: var(--tap);
  padding: 0 var(--s-2);
}

button[disabled] {
  opacity: var(--op-dim);
  cursor: default;
}