:root {
  color-scheme: light;
  --bg: #f3efe8;
  --ink: #1a1714;
  --dim: #716a60;
  --line: #ded7ca;
  --paper: #fffdf9;
  --accent: #bd4623;
  --good: #257254;
  --bad: #a52f40;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
a {
  color: var(--accent);
}
button {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper);
  padding: 10px 15px;
  font-weight: 650;
  color: var(--ink);
}
button:hover {
  border-color: var(--accent);
  background: #f9e9df;
}
button:disabled {
  opacity: 0.5;
  cursor: default;
}
.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.primary:hover {
  background: #a43a1b;
  color: white;
}
.danger {
  color: var(--bad);
}
.small {
  padding: 6px 10px;
  font-size: 12px;
}
.plain {
  background: none;
  border: 0;
  padding: 3px;
  color: var(--accent);
  text-align: left;
}
.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 225px 1fr;
}
.rail {
  background: #252620;
  color: #f7f2e8;
  padding: 32px 24px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.brand {
  font-size: 23px;
  letter-spacing: -1px;
  font-weight: 800;
}
.brand span {
  color: #ec8657;
}
.eyebrow {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 2px;
  color: var(--dim);
}
.rail .eyebrow {
  color: #bbb8a8;
  margin-top: 7px;
}
.rail nav {
  display: grid;
  gap: 8px;
}
.rail nav a {
  display: block;
  color: #cfcec1;
  text-decoration: none;
  padding: 13px 15px;
  border-radius: 5px;
  font-size: 14px;
}
.rail nav a.active {
  background: #f4eee0;
  color: #24251e;
  font-weight: 750;
}
.rail footer {
  margin-top: auto;
  font-size: 13px;
  line-height: 1.8;
}
.rail button {
  background: transparent;
  color: #f7f2e8;
  border-color: #585a4e;
  margin-top: 14px;
}
.main {
  max-width: 1500px;
  width: 100%;
  padding: 35px 46px 80px;
  min-width: 0;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 30px;
}
.top .eyebrow {
  letter-spacing: 1.3px;
}
.intro {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-end;
  margin: 25px 0;
}
.intro h1 {
  font-size: 34px;
  letter-spacing: -1.3px;
  margin: 6px 0 8px;
  line-height: 1.1;
}
p {
  line-height: 1.65;
  color: var(--dim);
  font-size: 14px;
  margin: 8px 0;
}
h2 {
  font-size: 20px;
  letter-spacing: -0.45px;
  margin: 0 0 14px;
}
h3 {
  font-size: 16px;
  margin: 0 0 7px;
}
.muted {
  color: var(--dim);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 25px 0;
}
.stat,
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 23px;
}
.stat strong {
  font-size: 32px;
  display: block;
  letter-spacing: -1px;
  margin-top: 14px;
}
.stat span {
  font-size: 12px;
  color: var(--dim);
}
.stack {
  display: grid;
  gap: 18px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.rows {
  display: grid;
  gap: 0;
}
.row {
  padding: 17px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.row:first-child {
  border-top: 0;
}
.row p {
  margin: 4px 0;
  font-size: 12px;
}
.actions {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}
.tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-radius: 4px;
  background: #eee9df;
  color: #6f6657;
  padding: 5px 7px;
  white-space: nowrap;
}
.tag.completed {
  background: #e3f0e5;
  color: var(--good);
}
.tag.accepted {
  background: #e5eef6;
  color: #23597a;
}
.tag.overdue,
.tag.declined {
  background: #fae8dc;
  color: var(--bad);
}
.empty {
  text-align: center;
  padding: 40px 22px;
  color: var(--dim);
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.empty strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  margin-bottom: 9px;
}
.table-wrap {
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
th {
  text-align: left;
  padding: 12px 10px;
  color: var(--dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td {
  padding: 16px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.number {
  font-variant-numeric: tabular-nums;
}
.error {
  padding: 13px 17px;
  background: #fff0ed;
  border: 1px solid #df9e91;
  border-radius: 7px;
  color: #933726;
  margin: 16px 0;
  font-size: 14px;
}
.notice {
  padding: 15px 20px;
  border-left: 3px solid var(--accent);
  background: #ebe5d9;
  color: #655742;
  font-size: 13px;
  line-height: 1.65;
  margin: 18px 0;
}
.success {
  padding: 12px;
  background: #e6f0e3;
  color: var(--good);
  border-radius: 6px;
  margin: 12px 0;
}
label {
  font-size: 12px;
  font-weight: 650;
  display: grid;
  gap: 7px;
}
input:not([type="checkbox"]),
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: white;
  border-radius: 5px;
  padding: 11px 12px;
  color: var(--ink);
  min-width: 0;
}
input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}
.check {
  display: flex;
  align-items: center;
  font-weight: 450;
  gap: 8px;
}
textarea {
  min-height: 85px;
  resize: vertical;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.full {
  grid-column: 1/-1;
}
.login {
  max-width: 480px;
  margin: 10vh auto;
  padding: 35px;
}
.login h1 {
  font-size: 36px;
  letter-spacing: -1.3px;
}
.login form {
  display: grid;
  gap: 18px;
  margin: 28px 0;
}
.loading {
  padding: 30px;
}
.block {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8f5ee;
  padding: 18px;
  margin-top: 14px;
}
.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.step {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: 10px;
  align-items: end;
  margin: 14px 0;
}
.practice-step {
  grid-template-columns: 1fr 1fr 0.7fr auto;
}
.code {
  font-family: ui-monospace, monospace;
  font-size: 17px;
  overflow-wrap: anywhere;
  user-select: all;
  color: var(--ink);
}
.split {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 22px;
  align-items: start;
}
.preview li {
  padding: 7px 0;
  font-size: 13px;
}
.nowrap {
  white-space: nowrap;
}
.chart {
  width: 100%;
  height: 150px;
  display: block;
  margin-top: 15px;
}
.chart-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--dim);
}
.note {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.filters {
  display: flex;
  gap: 12px;
  margin: 15px 0;
  flex-wrap: wrap;
}
.filters input {
  max-width: 270px;
}
.filters select {
  width: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 1050px) {
  .app {
    grid-template-columns: 180px 1fr;
  }
  .main {
    padding: 28px;
  }
  .rail {
    padding: 25px 15px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .split {
    grid-template-columns: 1fr;
  }
  .grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .app {
    display: block;
  }
  .rail {
    position: static;
    height: auto;
    padding: 18px;
    gap: 16px;
  }
  .rail .brand {
    font-size: 20px;
  }
  .rail nav {
    display: flex;
    overflow: auto;
    gap: 4px;
  }
  .rail nav a {
    padding: 9px 12px;
    font-size: 12px;
    white-space: nowrap;
  }
  .rail footer {
    display: none;
  }
  .main {
    padding: 20px 16px 50px;
  }
  .intro h1 {
    font-size: 28px;
  }
  .intro {
    align-items: start;
    flex-direction: column;
  }
  .top {
    margin-bottom: 16px;
  }
  .top .eyebrow {
    font-size: 9px;
  }
  .card {
    padding: 17px;
  }
  .row {
    flex-wrap: wrap;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .full {
    grid-column: auto;
  }
  .step,
  .practice-step {
    grid-template-columns: 1fr 1fr;
  }
  .login {
    margin: 5vh 16px;
    padding: 24px;
  }
  .stats {
    gap: 10px;
  }
  .stat {
    padding: 17px;
  }
  .stat strong {
    font-size: 26px;
  }
}

/* Shared gym clock and live, consent-based fighter status. */
.gym-toolbar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.gym-toolbar label {
  min-width: 230px;
  margin: 0;
}
.gym-toolbar time {
  margin-left: auto;
  font-size: 27px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.gym-connection {
  color: var(--good);
  font-size: 13px;
}
.gym-connection::before {
  content: "●";
  margin-right: 8px;
}
.gym-connection.stale {
  color: var(--bad);
}
.gym-layout {
  display: grid;
  gap: 32px;
}
.gym-session {
  background: #191b20;
  color: #f3f2f0;
  border: 1px solid #363940;
  border-radius: 18px;
  overflow: hidden;
  color-scheme: dark;
}
.gym-session button,
.gym-session select {
  background: #292c33;
  border-color: #464951;
  color: #e8e9ed;
  border-radius: 10px;
}
.gym-session button:hover {
  background: #363941;
  border-color: #747984;
}
.gym-session button.primary {
  background: #ed985f;
  color: #17191d;
  border-color: #ed985f;
}
.gym-session button.primary:hover {
  background: #ffaf78;
}
.gym-session .eyebrow {
  color: #9b9ea8;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.gym-session-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.25fr);
}
.gym-clock {
  text-align: center;
  padding: 30px;
  align-self: start;
  position: sticky;
  top: 24px;
}
.gym-clock-kicker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gym-clock-state {
  font-size: 11px;
  color: var(--block-color);
  background: #292c33;
  border: 1px solid #363940;
  border-radius: 20px;
  padding: 5px 10px;
}
.gym-phase {
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 700;
  color: var(--block-color);
  margin: 40px 0 10px;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.gym-digits {
  font-size: clamp(70px, 7vw, 116px);
  font-weight: 750;
  letter-spacing: -0.07em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.gym-clock-caption {
  font-size: 12px;
  color: #9b9ea8;
  margin-top: 14px;
}
.gym-round {
  font-size: 20px;
  font-weight: 650;
  margin: 28px 0 22px;
}
.gym-round span {
  color: #808590;
}
.gym-clock-track {
  height: 5px;
  background: #353840;
  border-radius: 8px;
  overflow: hidden;
}
.gym-clock-track i {
  display: block;
  height: 100%;
  background: var(--block-color);
  transition: width 0.2s linear;
}
.gym-next {
  margin: 24px 0;
  padding: 14px 0;
  border-bottom: 1px solid #353840;
  display: grid;
  grid-template-columns: 1fr auto;
  text-align: left;
  gap: 6px 10px;
}
.gym-next > span {
  grid-column: 1/-1;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9b9ea8;
}
.gym-next strong {
  font-size: 14px;
  font-weight: 550;
}
.gym-next b {
  font-size: 13px;
  color: #b5b8c2;
  font-variant-numeric: tabular-nums;
}
.gym-clock .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gym-clock [data-clock-main] {
  grid-column: 1/-1;
  padding: 14px;
  font-size: 16px;
}
.gym-clock [data-clock-reset] {
  color: #aeb1ba;
}
.gym-queue-panel {
  padding: 30px;
  border-left: 1px solid #353840;
  background: #1f2127;
  min-width: 0;
}
.gym-queue-heading {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: start;
  margin-bottom: 22px;
}
.gym-queue-heading h2 {
  font-size: 24px;
  margin: 6px 0;
  color: #f4f3f1;
  letter-spacing: -0.035em;
}
.gym-queue-heading p {
  font-size: 12px;
  color: #a3a7b1;
  margin: 0;
}
.gym-queue-heading p span {
  margin: 0 5px;
}
.gym-queue-heading > button {
  font-size: 12px;
  white-space: nowrap;
}
.gym-queue {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gym-queue-row {
  background: #292c33;
  border: 1px solid #3e414a;
  border-left: 3px solid var(--block-color);
  border-radius: 12px;
  overflow: hidden;
}
.gym-queue-row.current {
  border-color: var(--block-color);
  background: #303138;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--block-color) 15%, transparent);
}
.gym-queue-row.complete {
  opacity: 0.53;
}
.gym-queue-main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 15px;
  flex-wrap: wrap;
}
.gym-queue-number {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--block-color);
  font-weight: 700;
}
.gym-queue-label {
  flex: 1;
  min-width: 100px;
}
.gym-queue-label strong {
  display: block;
  font-size: 14px;
  color: #f4f3f1;
}
.gym-queue-label small {
  display: block;
  color: #a6aab5;
  font-size: 11px;
  margin-top: 4px;
}
.gym-queue-duration {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gym-queue-status {
  font-size: 9px;
  letter-spacing: 0.09em;
  font-weight: 750;
  color: var(--block-color);
}
.gym-queue-status:empty {
  display: none;
}
.gym-circuit {
  border-top: 1px solid #41444d;
  margin: 0 15px 12px 39px;
}
.gym-circuit summary {
  padding: 12px 0;
  font-size: 11px;
  color: #c9ccd4;
  cursor: pointer;
}
.gym-circuit summary > span {
  font-size: 10px;
  margin-left: 8px;
  color: #a1a6b2;
}
.gym-circuit-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gym-circuit-step {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.gym-circuit-step i,
.gym-exercise-chips i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--block-color);
  flex: none;
}
.gym-circuit-step > span {
  font-size: 12px;
  flex: 1;
}
.gym-circuit-step b {
  color: #b7bbc5;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.gym-circuit-step > select {
  width: auto;
  flex: 1;
  min-width: 70px;
  font-size: 12px;
  padding: 7px 4px;
  margin: 0;
}
.gym-circuit-step > button {
  padding: 4px 6px;
  background: transparent;
  border: 0;
  color: #a6aab5;
}
.gym-circuit-edit {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 1px solid #41444d;
  margin-top: 12px;
  padding-top: 12px;
  font-size: 12px;
  color: #a6aab5;
}
.gym-circuit-edit label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  margin: 0;
  color: #b7bbc5;
}
.gym-circuit-edit input {
  accent-color: #83aaf2;
  width: 14px;
  margin: 0;
}
.gym-circuit-edit > button {
  font-size: 11px;
  padding: 7px;
}
.gym-session .gym-time-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  border: 1px solid #545965;
  background: #202228;
  overflow: hidden;
  flex: none;
}
.gym-session .gym-time-pill button {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #aeb4c2;
  padding: 6px 9px;
  font-size: 15px;
  min-height: 36px;
}
.gym-session .gym-time-pill button:hover {
  background: #404550;
  color: white;
}
.gym-session .gym-time-pill input {
  appearance: none;
  width: 57px;
  padding: 5px 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: #f4f3f1;
  text-align: center;
  font-size: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  border-radius: 0;
}
.gym-session .gym-time-pill input[data-count-value="true"] {
  width: 27px;
}
.gym-session .gym-time-pill input:focus {
  outline-offset: -2px;
  outline: 1px solid #ed985f;
}
.gym-row-actions {
  display: flex;
  gap: 2px;
}
.gym-row-actions button {
  border: 0;
  background: transparent;
  padding: 6px;
  color: #adb2bd;
  font-size: 14px;
}
.gym-composer {
  background: #191b20;
  border: 1px solid #3e414a;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.gym-library-label {
  color: #a6aab5;
  font-size: 11px;
}
.gym-composer select {
  margin: 6px 0 16px;
  font-size: 13px;
  padding: 10px;
}
.gym-exercise-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.gym-exercise-chips button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 550;
  padding: 8px;
  border-color: #454952;
}
.gym-exercise-chips button:hover {
  border-color: var(--block-color);
  color: var(--block-color);
}
.gym-queue-hint {
  font-size: 11px;
  color: #999eaa;
  line-height: 1.6;
  margin: 20px 0 0;
}
.gym-queue-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 16px;
}
.gym-queue-footer small {
  font-size: 11px;
  color: #999eaa;
}
.gym-builder-error {
  color: #ffb0b4;
  font-size: 12px;
  line-height: 1.5;
}
.gym-draft-tag {
  color: #ed985f;
  font-size: 11px;
  background: #332b26;
  border-radius: 20px;
  padding: 6px 10px;
}
.gym-queue-empty {
  color: #999eaa;
  font-size: 13px;
  padding: 20px 10px;
}
.gym-people-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.gym-people-title h2 {
  margin: 0;
}
.gym-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.gym-cards .empty {
  grid-column: 1/-1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.gym-person {
  min-width: 0;
  padding: 22px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: 10px;
}
.gym-person.rest {
  border-top-color: var(--good);
}
.gym-person.paused,
.gym-person.ready {
  border-top-color: #a28b55;
}
.gym-person.signal-lost {
  border-top-color: #999;
  opacity: 0.72;
}
.gym-person-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 8px;
}
.gym-person-top strong {
  font-size: 20px;
  overflow-wrap: anywhere;
}
.gym-person h3 {
  margin: 20px 0 12px;
  font-size: 15px;
  overflow-wrap: anywhere;
}
.gym-person-time {
  font-variant-numeric: tabular-nums;
  font-size: 40px;
  font-weight: 700;
}
.gym-person-time small {
  display: block;
  font-size: 11px;
  color: var(--dim);
  font-weight: 500;
}
.gym-person-meta {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  margin-top: 22px;
  color: var(--dim);
}
.gym-seen {
  font-size: 11px;
  margin-top: 14px;
  color: var(--dim);
}
.gym-wall .rail,
.gym-wall .top,
.gym-wall .notice {
  display: none;
}
.gym-wall .app {
  grid-template-columns: 1fr;
}
.gym-wall .main {
  max-width: none;
  padding: 24px 32px;
}
.gym-wall .gym-queue-heading > button {
  display: none;
}
.gym-wall .gym-digits {
  font-size: clamp(90px, 10vw, 165px);
}
.gym-wall .gym-person-time {
  font-size: clamp(40px, 4vw, 70px);
}
/* Keep the clock, queue and live roster visible together on a gym screen. */
.gym-wall .intro {
  margin-bottom: 16px;
  align-items: center;
}
.gym-wall .intro h1 {
  font-size: 28px;
  margin: 0;
}
.gym-wall .intro p,
.gym-wall .intro .eyebrow {
  display: none;
}
.gym-wall .gym-toolbar {
  margin-bottom: 20px;
}
.gym-wall .gym-layout {
  grid-template-columns: minmax(670px, 2.3fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: start;
}
.gym-wall .gym-cards {
  grid-template-columns: 1fr;
}
.gym-wall .gym-digits {
  font-size: clamp(84px, 8vw, 128px);
}
.gym-wall .gym-person-time {
  font-size: 44px;
}
.gym-wall .gym-people > p {
  font-size: 11px;
  line-height: 1.5;
}
.gym-circuit-step.is-current {
  color: var(--block-color);
}
.gym-circuit-step.is-current > span {
  font-weight: 700;
}
.gym-circuit-step.is-current > i {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--block-color) 18%, transparent);
}
[hidden] {
  display: none !important;
}
@media (max-width: 1150px) {
  .gym-wall .gym-layout {
    grid-template-columns: 1fr;
  }
  .gym-session-grid {
    grid-template-columns: 1fr;
  }
  .gym-clock {
    position: static;
  }
  .gym-queue-panel {
    border-left: 0;
    border-top: 1px solid #353840;
  }
  .gym-digits {
    font-size: 110px;
  }
}
@media (max-width: 600px) {
  .gym-toolbar {
    gap: 12px;
  }
  .gym-toolbar time {
    margin-left: 0;
  }
  .gym-cards {
    grid-template-columns: 1fr;
  }
  .gym-clock,
  .gym-queue-panel {
    padding: 22px 16px;
  }
  .gym-queue-heading h2 {
    font-size: 22px;
  }
  .gym-queue-main {
    gap: 8px;
    padding: 14px 10px;
  }
  .gym-queue-number {
    display: none;
  }
  .gym-circuit {
    margin-left: 12px;
    margin-right: 12px;
  }
  .gym-circuit-step {
    gap: 6px;
  }
  .gym-session .gym-time-pill button {
    padding: 5px 6px;
  }
  .gym-session .gym-time-pill input {
    font-size: 14px;
    width: 49px;
  }
  .gym-queue-heading > button {
    padding: 9px;
  }
  .gym-wall .main {
    padding: 16px;
  }
}

/* Session Builder uses the mobile app's exercise accents and time pills. */
.mobile-program > section > .card { background:#202124; color:#f6f4ef; border-color:#36373b; }
.mobile-program .block { background:#292a2e; color:#f6f4ef; border:1px solid #424349; border-left:4px solid var(--exercise-color); border-radius:14px; padding:18px; }
.mobile-program .block-head { margin-bottom:18px; }
.mobile-program .block-head strong { color:var(--exercise-color); font-size:18px; }
.queue-index { color:#a8aab6; font-variant-numeric:tabular-nums; margin-right:10px; }
.mobile-program button { background:#34353b; color:#f6f4ef; border-color:#505158; }
.mobile-program button:hover { background:#44464e; }
.mobile-program input:not([type=checkbox]), .mobile-program select { background:#191a1e; color:#f6f4ef; border-color:#4a4c54; }
.mobile-program .exercise-chips { display:flex; flex-wrap:wrap; gap:8px; }
.mobile-program .exercise-chips button { border-radius:24px; padding:9px 13px; font-size:13px; }
.mobile-program .exercise-chips button::before { content:""; display:inline-block; width:8px; height:8px; background:var(--exercise-color); border-radius:50%; margin-right:7px; }
.mobile-program .exercise-chips button[aria-pressed=true] { border-color:var(--exercise-color); color:var(--exercise-color); background:#17181c; }
.duration-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:20px 0; }
.duration-pill { display:flex; align-items:center; border-radius:28px; background:#17181c; border:1px solid #4a4c54; overflow:hidden; }
.mobile-program .duration-pill input { width:85px; padding:10px 0; text-align:center; border:0; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.mobile-program .duration-pill button { border:0; border-radius:0; background:transparent; padding:10px 17px; font-size:22px; }
.mobile-program .block-options { color:#c2c3ca; font-size:13px; }
.mobile-program input:focus-visible, .mobile-program button:focus-visible { outline:2px solid #ed985f; outline-offset:3px; }
.mobile-program aside input:not([type=checkbox]), .mobile-program aside select { background:white; color:#202124; }
@media(max-width:600px) { .mobile-program .block { padding:12px; } .mobile-program .block-head { flex-wrap:wrap; gap:10px; } }

select[hidden] { display:none !important; }
.touch-choices { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.touch-choices button { min-height:48px; padding:10px 16px; touch-action:manipulation; }
.touch-choices button[aria-pressed=true] { border-color:#b34e2e; background:#f1ded1; color:#632a18; box-shadow:inset 0 0 0 1px #b34e2e; }
.mobile-program .touch-choices button[aria-pressed=true], .gym-session .touch-choices button[aria-pressed=true] { background:#4a382c; color:#ffc08c; border-color:#ed985f; }
.account-options { display:grid; gap:14px; margin:28px 0; }
.account-options button { display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:22px; min-height:100px; gap:8px; }
.account-options strong { font-size:22px; }
.account-options span { font-weight:400; line-height:1.5; }
.join-code-input { text-transform:uppercase; letter-spacing:0.2em; font-size:24px; }
button, .login input:not([type=checkbox]) { min-height:44px; }
.demo-entry {border-top:1px solid var(--border,#d9d0c4);margin-top:24px;padding-top:24px;display:grid;gap:8px}.demo-entry p{margin:0}.payment-choices{display:flex;flex-wrap:wrap;gap:10px}.payment-choices label{position:relative;cursor:pointer}.payment-choices input{position:absolute;opacity:0;width:1px;height:1px}.payment-choices span{display:block;padding:14px 18px;border:1px solid #c7bba9;border-radius:8px;min-height:48px}.payment-choices input:checked+span{background:#f3e2d6;border:2px solid #bd461f;color:#782d18}.payment-choices input:focus-visible+span{outline:3px solid #276fbc;outline-offset:3px}fieldset{border:0;padding:0;margin:0}legend{font-weight:700;margin-bottom:10px}
/* One training workspace: clock, queue, and app-style live cards. */
.gym-wall .gym-layout,.gym-layout{grid-template-columns:minmax(0,1fr)}
.gym-session .gym-people{padding:28px;border-top:1px solid #363940}
.gym-session .gym-people h2{color:inherit}
.gym-session .gym-cards,.gym-wall .gym-session .gym-cards{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.gym-session .gym-person{background:#25272d;border:1px solid #3b3e46;color:#f3f2f0;border-radius:12px;padding:18px}
.gym-session .gym-person h3{color:#75ced5;margin:12px 0}
.gym-session .gym-person-time{font-size:26px;display:flex;align-items:baseline;gap:8px}
.gym-session .gym-person-time small{font-size:11px}
.gym-session .gym-person-meta,.gym-session .gym-seen,.gym-session .muted{color:#b3b5bf}
.app-heart-output{background:#303238;border-radius:10px;padding:16px;margin-top:18px}
.ho-header{display:flex;gap:14px;align-items:flex-start}.ho-header h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin:0 auto 0 0;line-height:1.5}.ho-readout{text-align:right;white-space:nowrap}.ho-readout strong{font-size:21px;display:block}.ho-readout small{font-size:10px;font-weight:400}.ho-readout>span{font-size:10px;color:#b3b5bf;text-transform:uppercase}.ho-orange{color:#f2a35f}.ho-red{color:#ed6c75}.app-heart-output svg{width:100%;display:block;margin-top:12px}.ho-grid{stroke:#50525b;stroke-width:.5;fill:none}.ho-axis{font:9px sans-serif;fill:#b3b5bf}.ho-energy{fill:none;stroke:#f2a35f;stroke-width:2.5;stroke-linejoin:round}.ho-heart{fill:none;stroke:#ed6c75;stroke-width:2;stroke-linejoin:round}.ho-legend{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#b3b5bf}.ho-legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}.ho-energy-dot{background:#f2a35f}.ho-heart-dot{background:#ed6c75}
.gym-light .gym-session{background:#fffdf9;color:#26251f;color-scheme:light;border-color:#d8d0c3}
.gym-light .gym-queue-panel,.gym-light .gym-people{background:#f6f1e8;border-color:#d8d0c3}
.gym-light .gym-person,.gym-light .gym-queue-block{background:#fffdf9;color:#26251f;border-color:#d8d0c3}
.gym-light .app-heart-output{background:#f2ece3;color:#26251f}
.gym-light .gym-session button{background:#f5efe6;color:#26251f;border-color:#c9c0b4}.gym-light .gym-session button.primary{background:#bd461f;color:white}
.gym-light .gym-session .eyebrow,.gym-light .gym-clock-caption,.gym-light .gym-next,.gym-light .gym-round span,.gym-light .gym-person-meta,.gym-light .gym-seen,.gym-light .gym-session .muted,.gym-light .ho-legend,.gym-light .ho-readout>span{color:#656159}
.gym-light .gym-digits,.gym-light .gym-round,.gym-light .gym-queue-panel h2{color:#26251f}.gym-light .ho-axis{fill:#656159}.gym-light .ho-grid{stroke:#c6bfb4}.gym-light .ho-orange{color:#b45a15}.gym-light .ho-red{color:#b92e40}.gym-light .gym-phase,.gym-light .gym-person h3{color:#24767f}
@media(max-width:680px){.gym-session .gym-cards,.gym-wall .gym-session .gym-cards{grid-template-columns:1fr}.gym-session .gym-people{padding:14px}.ho-header{gap:8px}}
.gym-light .gym-queue-row{background:#fffdf9;border-color:#d8d0c3}.gym-light .gym-queue-row.current{background:#ece8e0}.gym-light .gym-queue-label strong,.gym-light .gym-queue-duration,.gym-light .gym-next strong{color:#26251f}.gym-light .gym-queue-label small,.gym-light .gym-queue-heading p,.gym-light .gym-queue-hint,.gym-light .gym-circuit,.gym-light .gym-circuit-step b{color:#656159}.gym-light .gym-clock-state{background:#e7e2d8;color:#286e62}.gym-light .gym-clock-track{background:#ded8ce}.gym-light .gym-session input{background:#fffdf9;color:#26251f;border-color:#c9c0b4}
.gym-session .gym-person-time small{color:#b3b5bf}.gym-light .gym-person-time small{color:#656159}
.calendar-layout{display:grid;grid-template-columns:minmax(380px,1fr) minmax(300px,1fr);gap:24px;align-items:start}.training-calendar{background:#262525;color:white;border-radius:12px;padding:24px}.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.calendar-heading h2{font-size:20px;text-align:center;margin:0}.calendar-heading button{background:transparent;color:white;border-color:#565454;font-size:12px;min-height:44px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.calendar-weekday{text-align:center;color:#aaa;font-size:12px;padding:8px 0}.calendar-day{background:transparent;color:white;border:0;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px;border-radius:50%}.calendar-day:hover{background:#444}.calendar-day[aria-pressed=true]{background:white;color:#262525}.calendar-day i{width:5px;height:5px;border-radius:50%;background:currentColor}.calendar-day.is-today{box-shadow:inset 0 0 0 1px #ed985f}.calendar-legend{font-size:12px;color:#ccc;margin:20px 0 0}@media(max-width:1000px){.calendar-layout{grid-template-columns:1fr}}.notice .code{font-size:32px;letter-spacing:.14em;font-weight:700}
.revenue-bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:24px}.revenue-bar{text-align:center;min-width:0}.revenue-bar strong{font-size:12px;white-space:nowrap}.revenue-track{height:150px;display:flex;align-items:end;margin:12px 6px;background:#f2ece3;border-radius:8px;overflow:hidden}.revenue-track i{display:block;width:100%;background:#bd461f;border-radius:8px 8px 0 0}.revenue-bar span{font-size:12px;color:#676257}.stat small{display:block;font-size:12px;color:#676257;margin-top:8px}

.program-card { display: flex; flex-direction: column; }
.program-card > .actions { margin-top: auto; padding-top: 16px; }
.calendar-class { padding: 18px 0; border-top: 1px solid var(--border, #ddd5c7); }
.calendar-class h3 { margin: 0 0 8px; }
.calendar-class p { margin: 6px 0; }
.calendar-class summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.summary-heart { background: #272f3e; color: #f4f4f6; margin-bottom: 24px; }
.summary-heart .actions { justify-content: space-between; }
.summary-heart h2 { margin: 0; }
.summary-heart svg { display: block; width: 100%; max-height: 320px; margin-top: 20px; }
.summary-heart p { color: #c8cdd7; }
.summary-heart .ho-orange { color: #f2a35f; }
.summary-heart .ho-red { color: #ed6c75; }
.summary-heart .summary-grid { stroke: #50525b; }
.summary-heart .summary-output-line { stroke: #f2a35f; }
.summary-heart .summary-heart-line { stroke: #ed6c75; }

.invite-compact { width: min(100%, 320px); min-height: 300px; margin-bottom: 18px; }
.invite-compact .stack { gap: 12px; }
.invite-compact p { margin: 0; }
.invite-history { margin: 0 0 20px; }
.invite-history summary { cursor: pointer; font-weight: 600; min-height: 28px; }
.fighter-statistics { background: #20232b; color: #f4f4f6; border-radius: 12px; padding: 24px; margin-bottom: 24px; }
.fighter-statistics p, .fighter-statistics .eyebrow { color: #b7bbc5; }
.performance-overview, .statistic-card { background: #2d313b; padding: 20px; border-radius: 8px; margin-bottom: 18px; }
.statistic-value { font-size: 32px; font-weight: 700; }
.statistic-value small { font-size: 16px; color: #b7bbc5; }
.statistic-bars { height: 150px; display: flex; align-items: end; gap: 10px; padding-bottom: 26px; }
.statistic-bars button { position: relative; height: 100%; flex: 1; max-width: 80px; background: transparent; border: 0; padding: 0; display: flex; align-items: end; }
.statistic-bars i { display: block; width: 100%; background: #efa05e; border-radius: 4px 4px 0 0; }
.statistic-bars span { position: absolute; top: 100%; font-size: 10px; color: #c9ccd4; padding-top: 5px; white-space: nowrap; }

/* Shared portal layout and action hierarchy. */
:root { --bg: #f6f5f1; --paper: #fffefa; --line: #e5e2da; --ink: #252722; --dim: #73766d; --accent: #b74425; }
.main { max-width: 1480px; padding: 24px 40px 64px; }
.top { min-height: 48px; padding-bottom: 20px; margin-bottom: 32px; }
.workspace-name { font-size: 13px; font-weight: 650; color: var(--dim); }
.top .muted { font-size: 12px; }
.intro { margin: 0 0 28px; align-items: center; }
.intro > div:first-child { min-width: 0; }
.intro > div > .eyebrow { display: none; }
.intro h1 { font-size: 32px; margin: 0 0 8px; letter-spacing: -1.1px; text-wrap: balance; }
.intro p { margin: 0; }
.card, .stat { border-radius: 14px; padding: 24px; box-shadow: 0 2px 5px #24272203; }
.grid, .stack { gap: 20px; align-items: start; }
.grid > .program-card { align-self: stretch; }
.main > .card, .main > .grid, .main > .stack { margin-bottom: 24px; }
.stats { grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 16px; margin: 24px 0; }
.stat strong { font-variant-numeric: tabular-nums; font-size: 30px; }
.stat small { line-height: 1.5; display: block; margin-top: 8px; color: var(--dim); }
button, summary, .rail nav a { touch-action: manipulation; }
button { min-height: 44px; border-radius: 9px; font-size: 14px; padding: 10px 16px; }
button.small { min-height: 44px; font-size: 13px; }
button:focus-visible, summary:focus-visible, a:focus-visible { outline: 3px solid #dd8a4f; outline-offset: 3px; }
button.quiet { background: transparent; border-color: transparent; color: var(--accent); }
button.quiet:hover { background: #f6ebe4; }
.primary { box-shadow: 0 2px 3px #7e2a1810; }
.rail { background: #272a25; padding: 28px 20px; gap: 32px; }
.rail nav { gap: 4px; }
.rail nav a { min-height: 46px; border-radius: 9px; padding: 13px 14px; }
.rail nav a.active { background: #f0eee4; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 20; background: white; padding: 12px; }
.skip-link:focus { top: 12px; }
.people-list { padding: 0 24px; }
.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; }
.list-toolbar h2 { margin: 0; font-size: 17px; }
.search-field { width: min(300px,50%); }
.search-field input { background: var(--bg); border-color: transparent; border-radius: 9px; min-height: 44px; }
.person-row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); min-width: 0; }
.person-avatar { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #edece3; font-weight: 650; font-size: 13px; color: #686f5e; }
.person-copy { flex: 1; min-width: 0; }
.person-copy h3 { font-size: 15px; margin: 0 0 4px; overflow-wrap: anywhere; }
.person-copy p { font-size: 13px; margin: 0; overflow-wrap: anywhere; }
.invite-history { border: 0; background: transparent; padding: 0 4px; box-shadow: none; margin: 16px 0 24px; }
.invite-history summary { min-height: 44px; padding: 12px 0; color: var(--dim); font-size: 13px; }
.history-count { margin-left: 8px; padding: 2px 6px; background: #eae8df; border-radius: 5px; font-size: 11px; }
.invite-compact { width: min(100%,360px); min-height: 0; margin: 0 0 24px; }
.invite-compact h2 { font-size: 18px; }
.invite-compact .notice { margin-bottom: 0; padding: 16px; }
.inline-options { margin-left: auto; }
.inline-options summary, .workspace-tools summary { color: var(--dim); padding: 12px 8px; min-height: 44px; font-size: 13px; cursor: pointer; }
.program-card .inline-options[open] { flex-basis: 100%; margin-left: 0; }
.person-row > .inline-options { flex: 0 0 auto; margin-left: 0; }
.person-row > .inline-options .actions { justify-content: flex-end; }
.inline-options .actions { padding: 8px 0; }
.workspace-tools { display: flex; }
.workspace-tools[open] > .actions { padding: 8px 0; }
.program-card { background: #24272f; color: #f4f4f6; border-color: #3e424c; }
.program-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.program-heading h2 { margin: 0 0 8px; font-size: 21px; }
.program-heading p { margin: 0; color: #b5bac4; font-size: 12px; }
.program-total { flex-shrink: 0; border-radius: 8px; padding: 8px 10px; background: #353941; color: #f2ae78; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.program-timeline { display: flex; gap: 4px; height: 5px; margin: 20px 0; overflow: hidden; border-radius: 4px; }
.program-timeline span { min-width: 6px; background: var(--block-color); }
.program-blocks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.program-block { background: #2d313b; border: 1px solid #414550; border-left: 3px solid var(--block-color); border-radius: 10px; overflow: hidden; }
.program-block-main { display: flex; gap: 12px; align-items: center; padding: 13px 14px; }
.program-block-index { flex: 0 0 22px; color: var(--block-color); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.program-block-name { flex: 1; min-width: 0; }
.program-block-name strong { display: block; font-size: 14px; }
.program-block-name small { display: block; margin-top: 4px; font-size: 12px; color: #bec2cb; }
.program-block-time { white-space: nowrap; color: #e6e8ee; font-weight: 650; font-size: 14px; font-variant-numeric: tabular-nums; }
.program-circuit { margin: 0 14px 13px 48px; padding-top: 10px; border-top: 1px solid #444853; display: grid; gap: 9px; }
.program-circuit > div { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.program-circuit i { width: 6px; height: 6px; border-radius: 50%; background: var(--block-color); flex-shrink: 0; }
.program-circuit time { margin-left: auto; color: #bec2cb; font-variant-numeric: tabular-nums; }
.program-circuit > small { font-size: 11px; color: #bec2cb; }
.program-card > .actions { border-top: 1px solid #444853; padding-top: 18px; gap: 8px; }
.program-card button { background: #343841; color: #f4f4f6; border-color: #515661; }
.program-card button:hover { background: #424752; }
.program-card button.danger { color: #ffb0b5; }
.program-card .inline-options summary { color: #bec2cb; }
.theme-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 11px; background: #ebe9e2; }
.theme-switch button { padding: 8px 13px; border: 0; background: transparent; color: #686c62; box-shadow: none; }
.theme-switch button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px #25272218; }
.settings-grid { margin-bottom: 20px; }
.settings-security summary { cursor: pointer; font-weight: 600; min-height: 44px; padding: 10px 0; }
.settings-security form { margin-top: 20px; }
.gym-summary { display: flex; gap: 32px; margin-top: 24px; }
.gym-summary a { color: var(--dim); text-decoration: none; font-size: 13px; min-height: 44px; }
.gym-summary strong { display: block; font-size: 30px; color: var(--ink); margin-bottom: 6px; }
.training-calendar { border-radius: 14px; }
.calendar-grid > .calendar-day { width: min(100%, 52px); aspect-ratio: 1; height: auto; min-height: 0; justify-self: center; padding: 0; border-radius: 50%; }
.calendar-class h3 { font-size: 17px; }
.calendar-class details > .row { padding: 16px 0; }
.section-title { margin: 28px 0 18px; }
.dues-list > .card { padding: 20px 24px; }
.dues-list .intro { margin-bottom: 14px; }
.dues-list .intro h2 { margin-bottom: 4px; font-size: 17px; }
.dues-list .actions > button { margin-left: auto; }
@media(max-width:1100px) {
 .app { grid-template-columns: 190px minmax(0,1fr); }
 .main { padding: 24px; }
 .rail { padding: 26px 14px; }
 .person-row { gap: 12px; }
 .calendar-layout { grid-template-columns: 1fr; }
}
@media(max-width:700px) {
 .app { display: block; }
 .rail { position: static; width: auto; height: auto; gap: 18px; padding: 20px; }
 .rail nav { display: flex; overflow-x: auto; }
 .rail nav a { flex-shrink: 0; }
 .rail footer { display: none; }
 .main { padding: 20px 16px 48px; }
 .top { margin-bottom: 24px; }
 .top > .actions > .muted { display: none; }
 .intro h1 { font-size: 27px; }
 .intro { gap: 12px; align-items: flex-start; }
 .intro > button { flex-shrink: 0; }
 .grid, .settings-grid { grid-template-columns: 1fr; }
 .person-avatar { display: none; }
 .card { padding: 20px; }
 .people-list { padding: 0 16px; }
 .person-row > .tag { font-size: 9px; }
 .workspace-name { max-width: 55%; }
}

/* Progress comes first; records and administrative controls stay folded. */
.fighter-progress { background: #252a32; color: #f8f8fa; border-radius: 16px; padding: 28px; margin-bottom: 24px; }
.progress-heading { display: flex; justify-content: space-between; gap: 24px; align-items: start; margin-bottom: 24px; }
.progress-kicker { text-transform: uppercase; letter-spacing: 1.4px; font-size: 11px; font-weight: 700; color: #b5bac5; margin: 0 0 10px; }
.progress-heading h2 { font-size: 25px; margin: 0 0 8px; }
.progress-heading p:not(.progress-kicker), .progress-updated { color: #b9bdc6; font-size: 13px; }
.progress-updated { white-space: nowrap; padding-top: 2px; }
.progress-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 16px; }
.progress-metric { background: #323741; border: 1px solid #454a5344; padding: 20px; border-radius: 12px; min-width: 0; }
.progress-metric h3 { font-size: 14px; font-weight: 550; color: #c2c6cf; margin-bottom: 14px; }
.progress-value { font-size: 30px; font-weight: 750; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.progress-value small { font-size: 12px; color: #b9bdc6; font-weight: 500; letter-spacing: 0; }
.progress-delta { font-weight: 650; font-size: 13px; margin: 8px 0 12px; }
.progress-delta.rising { color: #8ed2b1; }
.progress-delta.falling { color: #f2af89; }
.progress-delta.steady, .progress-delta.unknown { color: #c2c6cf; }
.progress-metric svg { width: 100%; display: block; }
.progress-metric .progress-caption { font-size: 12px; color: #c2c6cf; margin: 10px 0 4px; }
.progress-metric small { color: #aeb4c0; }
.progress-period { margin: 20px 0 0; color: #aeb4c0; font-size: 12px; }
.profile-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-disclosure > summary { min-height: 44px; cursor: pointer; padding: 10px 0; font-weight: 650; }
.profile-disclosure > summary span { font-size: 12px; font-weight: 400; color: var(--dim); margin-left: 8px; }
.profile-disclosure[open] > summary { margin-bottom: 20px; }
@media(max-width:1100px) { .profile-sections { grid-template-columns: 1fr; } .progress-heading { display: block; } .progress-updated { display: block; margin-top: 10px; } }
@media(max-width:700px) { .fighter-progress { padding: 20px; } .progress-metrics { grid-template-columns: 1fr; } .progress-metric svg { max-height: 120px; } }

/* Calendar: month picker and a shared hourly agenda. */
.calendar-layout { grid-template-columns: minmax(280px,360px) minmax(0,1fr); }
.calendar-heading { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; gap: 8px; }
.calendar-heading h2 { font-size: 18px; }
.calendar-heading button { padding: 0; font-size: 26px; }
.calendar-day-column { min-width: 0; display: grid; gap: 20px; }
.day-schedule { padding: 22px 20px 16px; min-width: 0; }
.schedule-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.schedule-panel-heading h2 { margin: 0; font-size: 20px; }
.schedule-panel-heading p { margin: 7px 0 0; font-size: 12px; }
.schedule-view-label { font-size: 11px; color: var(--dim); white-space: nowrap; }
.hour-view { max-height: 590px; overflow: auto; padding-top: 10px; overscroll-behavior: contain; }
.hour-canvas { position: relative; min-width: 0; }
.hour-line { position: absolute; left: 52px; right: 0; height: 1px; background: var(--line); }
.hour-line time { position: absolute; right: calc(100% + 10px); top: -7px; width: 42px; text-align: right; color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.hour-events { position: absolute; inset: 0 0 0 56px; }
.calendar-event { --event-color:#5577b5; position: absolute; display: flex; flex-direction: column; align-items: start; justify-content: start; gap: 5px; padding: 9px 11px; min-height: 0; border: 1px solid color-mix(in srgb,var(--event-color) 30%,var(--paper)); border-left: 3px solid var(--event-color); border-radius: 8px; color: var(--ink); text-align: left; background: color-mix(in srgb,var(--event-color) 10%,var(--paper)); overflow: hidden; }
.calendar-event:hover { background: color-mix(in srgb,var(--event-color) 18%,var(--paper)); }
.calendar-event time { font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.calendar-event strong { font-size: 14px; }
.calendar-event > * { display: block; max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.calendar-event > span { font-size: 12px; color: var(--dim); }
.event-kids { --event-color:#52815b; }
.event-private { --event-color:#8a65ad; }
.event-sparring { --event-color:#bf5339; }
.event-other { --event-color:#73766d; }
.event-compact { padding: 5px 9px; gap: 2px; }
.event-compact strong { font-size: 12px; }
.event-compact > span { display: none; }
.schedule-empty { background: var(--bg); border-radius: 8px; padding: 12px; font-size: 13px; }
.schedule-editor { scroll-margin-top: 24px; }
.schedule-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.schedule-fields label { min-width: 0; }
.schedule-fields input, .schedule-fields select { width: 100%; min-width: 0; }
.schedule-timezone { margin: -6px 0 0; font-size: 12px; }
.schedule-fighters summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-size: 14px; font-weight: 650; }
.schedule-fighters summary span { margin-left: 6px; font-weight: 400; font-size: 12px; color: var(--dim); }
.schedule-fighters > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; margin: 8px 0; }
.schedule-fighters label { display: flex; gap: 8px; align-items: center; min-height: 36px; }
.schedule-fighters input { width: auto; }
.untimed-training { margin-top: 14px; border-top: 1px solid var(--line); }
.untimed-training summary { padding: 16px 0 4px; cursor: pointer; font-size: 13px; color: var(--dim); }
@media(max-width:1100px) { .calendar-layout { grid-template-columns: 1fr; } }
@media(max-width:700px) {
 .schedule-fields { gap: 12px; }
 .schedule-panel-heading { align-items: start; }
 .schedule-view-label { display: none; }
 .day-schedule { padding: 18px 12px; }
 .hour-line { left: 44px; }
 .hour-events { left: 47px; }
 .calendar-event { padding: 7px; }
 .calendar-event strong { font-size: 12px; }
 .calendar-event > span { font-size: 10px; }
}
.schedule-fields { align-items: start; }
.schedule-fields input, .schedule-fields select { min-height: 44px; }

.profile-sections { align-items: start; }
.profile-sections > .stack { min-width: 0; }
.history-toolbar { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.history-toolbar > :first-child:not(:last-child) { margin-right: auto; }
.history-calendar-content { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 24px; align-items: start; }
.history-view { display: inline-flex; padding: 4px; gap: 4px; border-radius: 11px; background: #eeece5; }
.history-view button { min-width: 84px; border-color: transparent; background: transparent; color: var(--dim); }
.history-view button[aria-pressed=true] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 4px #24272212; }
.history-calendar { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.history-calendar-heading { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; margin-bottom: 16px; }
.history-calendar-heading h3 { text-align: center; font-size: 16px; margin: 0; }
.history-calendar-heading button { padding: 0; font-size: 24px; background: transparent; }
.history-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }
.history-weekday { text-align: center; color: var(--dim); font-size: 11px; padding: 8px 0; }
.history-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%,48px); aspect-ratio: 1; min-height: 0; padding: 0; border: 0; border-radius: 50%; justify-self: center; background: transparent; font-variant-numeric: tabular-nums; }
.history-day.has-sessions { background: #f4e3d7; color: #8b361b; }
.history-day[aria-pressed=true] { background: var(--ink); color: white; }
.history-day i { position: absolute; bottom: 4px; min-width: 4px; height: 4px; background: currentColor; border-radius: 50%; font-size: 0; }
.history-calendar-legend { display: flex; align-items: center; gap: 7px; font-size: 12px; margin: 16px 0 0; }
.history-calendar-legend i { width: 7px; height: 7px; border-radius: 50%; background: #b86637; }
.history-day-sessions { min-width: 0; }
.history-day-sessions h3 { font-size: 15px; margin: 0 0 8px; }
.history-session { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.history-session > div { min-width: 0; overflow-wrap: anywhere; }
.history-session > button { flex-shrink: 0; }
.history-session strong { font-size: 14px; }
.history-session p, .history-empty, .history-more p { font-size: 13px; margin: 5px 0 0; }
.history-more { margin-top: 20px; }
.removal-dialog { width: min(480px,calc(100% - 32px)); padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 80px #0003; }
.removal-dialog::backdrop { background: #171c2073; }
.removal-dialog h2 { font-size: 22px; line-height: 1.3; margin: 0 0 16px; }
.removal-dialog p { font-size: 14px; line-height: 1.6; }
.removal-dialog .actions { margin-top: 24px; justify-content: flex-end; }
button.danger { border-color: #d9a9b0; }
button.danger:hover { background: #faecee; border-color: var(--bad); }
button.danger-solid { color: white; background: var(--bad); border-color: var(--bad); }
button.danger-solid:hover { background: #892438; }
@media(max-width:600px) { .history-calendar { padding: 12px; } .history-calendar-grid { gap: 3px; } .removal-dialog { padding: 22px; } }

.perceived-exertion { margin: 20px 0; padding: 16px; border-radius: 10px; background: var(--bg); }
.perceived-exertion > span { display: block; font-weight: 650; font-size: 13px; }
.perceived-exertion > strong { display: block; font-size: 28px; margin-top: 8px; }
.perceived-exertion strong small { font-size: 15px; font-weight: 500; color: var(--dim); }
.perceived-exertion p { margin: 6px 0 0; font-size: 12px; }
.coach-person { width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; font-weight: 400; }
.coach-person:hover { background: #f5f3ed; border-color: var(--line); }
.coach-person .person-copy > strong { display: block; font-size: 15px; margin-bottom: 4px; }
.coach-person .person-copy > span { display: block; font-size: 13px; color: var(--dim); }
.person-avatar svg { width: 28px; height: 28px; opacity: .65; }
.person-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.coach-row-arrow { margin-left: 6px; font-size: 25px; color: var(--dim); }
.coach-identity { display: flex; align-items: center; gap: 22px; min-width: 0; }
.coach-identity h1 { overflow-wrap: anywhere; }
.coach-portrait { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: #e8e8df; color: #9b9e91; overflow: hidden; }
.coach-portrait svg { width: 70px; height: 70px; }
.coach-portrait img { width: 100%; height: 100%; object-fit: cover; }
.photo-upload { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; color: var(--accent); font-weight: 650; font-size: 13px; cursor: pointer; position: relative; }
.photo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-upload:focus-within { outline: 3px solid #dd8a4f; outline-offset: 3px; border-radius: 4px; }
.coach-week-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.coach-week-heading h2 { margin: 0; font-size: 18px; }
.coach-week-heading p { margin: 6px 0 0; font-size: 13px; }
.coach-week-heading .actions button:first-child, .coach-week-heading .actions button:last-child { min-width: 44px; }
.coach-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.coach-metrics > div { padding-left: 24px; border-left: 1px solid var(--line); }
.coach-metrics > div:first-child { padding-left: 0; border: 0; }
.coach-metrics span { display: block; font-size: 13px; color: var(--dim); }
.coach-metrics strong { display: block; font-size: 32px; margin: 12px 0 8px; font-variant-numeric: tabular-nums; }
.coach-metrics small { color: var(--dim); font-size: 12px; font-weight: 400; }
.coach-management { margin-top: 24px; }
.coach-management summary { color: var(--dim); font-size: 13px; cursor: pointer; padding: 12px 0; }
@media(max-width:600px) {
 .coach-portrait { flex-basis: 72px; width: 72px; height: 72px; }
 .coach-identity { gap: 14px; }
 .coach-metrics { gap: 12px; }
 .coach-metrics > div { padding-left: 12px; }
 .coach-metrics strong { font-size: 26px; }
 .coach-schedule .history-view { width: 100%; }
 .coach-schedule .history-view button { flex: 1; padding-inline: 10px; }
}

.calendar-intro { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 28px 0 22px; }
.calendar-intro h2 { margin: 0; font-size: 24px; }
.calendar-intro p { margin: 8px 0 0; font-size: 14px; }

.community-grid{margin-top:24px;align-items:start}.community-request{padding:18px 0;border-top:1px solid var(--line,#ddd)}.community-request:first-of-type{margin-top:16px}.community-copy{white-space:pre-wrap;overflow-wrap:anywhere}

/* Shared coach availability and fighter booking calendar. */
.portal-entry, .booking-tabs, .booking-coaches { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.portal-entry a { padding:10px 12px; border:1px solid var(--line); border-radius:8px; }
.booking-coaches button, .booking-tabs button { padding:8px 13px; font-size:13px; }
.booking-coaches [aria-pressed="true"], .booking-tabs [aria-pressed="true"] { background:#242a28; color:white; border-color:#242a28; }
.availability-panel { margin:16px 0; }
.availability-panel > summary { font-weight:700; cursor:pointer; }
.availability-form { margin:20px 0; }
.availability-form form { max-width:680px; margin-top:18px; }
.booking-slot { flex:1; min-width:0; border-left:4px solid; padding:10px 14px; border-radius:6px; }
.booking-slot h3, .booking-slot p { margin:5px 0 0; }
.mode-instant { background:#edf6ef; border-color:#2d8a59; }
.mode-request { background:#fff8da; border-color:#ba931e; }
.booking-calendar { margin:24px 0; }
.booking-calendar .history-calendar-content { grid-template-columns:minmax(240px,340px) minmax(0,1fr); }
.booking-gym { display:block; max-width:440px; }
.booking-gym select { margin-top:8px; width:100%; }
.booking-date { font-size:12px; color:var(--muted); }
.booking-dialog { border:1px solid var(--line); border-radius:16px; background:var(--surface,#fffefa); color:var(--ink); padding:26px; width:min(92vw,480px); max-height:88dvh; overflow:auto; }
.booking-dialog::backdrop { background:rgba(20,25,22,.5); }
.booking-dialog .heading-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.booking-public { display:flex; align-items:center; gap:10px; }
.booking-public input { width:auto; }
.booking-notification { background:#fff1c3; color:#654e12; padding:8px 12px; border-radius:8px; font-size:13px; font-weight:600; }
.booking-notification[hidden] { display:none; }
.fighter-portal .rail nav button { margin:10px 0; color:inherit; border-color:#555b4b; }
@media(max-width:760px) {
 .booking-calendar .history-calendar-content { grid-template-columns:1fr; }
 .booking-dialog { padding:20px; }
 .booking-slot { padding:10px; }
 .booking-calendar .history-session { flex-wrap:wrap; }
}

/* Keep the same identity while switching between gym and personal planning. */
.top { flex-wrap: wrap; }
.workspace-switch { flex-shrink: 0; }
.workspace-switch button { min-width: 0; padding: 8px 12px; font-size: 12px; }
#coach-availability { scroll-margin-top: 24px; }

/* Availability uses a shared month picker and a directly editable hourly timeline. */
.availability-panel { padding:26px; margin:26px 0; }
.availability-heading { display:flex; justify-content:space-between; align-items:start; flex-wrap:wrap; gap:16px; margin-bottom:26px; }
.availability-heading h2 { margin:0 0 7px; font-size:22px; }
.availability-heading p { margin:0; font-size:14px; }
.availability-preview { font-size:13px; padding:8px 0; white-space:nowrap; }
.availability-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:28px; align-items:start; }
.availability-coach { display:flex; flex-direction:column; gap:6px; margin-bottom:20px; }
.availability-coach select { margin:0; width:100%; }
.availability-date-picker .history-calendar { padding:0; border:0; }
.availability-date-picker .history-calendar-heading { gap:5px; }
.availability-date-picker .history-calendar-heading h3 { font-size:16px; }
.availability-date-picker .history-calendar-heading button { width:36px; min-height:36px; padding:0; }
.availability-date-picker .history-day { width:min(100%,38px); }
.availability-date-picker .history-day.has-sessions { background:#e8f5ed; color:#21613e; }
.availability-date-picker .history-day.has-request { background:#fff3c8; color:#7a5911; }
.availability-date-picker .history-day.has-instant.has-request i { background:linear-gradient(90deg,#24845a 50%,#b58112 50%); width:8px; }
.availability-date-picker .history-day[aria-pressed=true] { background:var(--ink); color:white; }
.availability-date-picker .history-day[aria-current=date]:not([aria-pressed=true]) { box-shadow:inset 0 0 0 1px var(--accent); }
.availability-legend { display:flex; flex-direction:column; gap:10px; font-size:12px; color:var(--dim); margin-top:24px; }
.availability-legend span { display:flex; align-items:center; gap:8px; }
.availability-legend i, .availability-paint-mode i { display:inline-block; width:8px; height:8px; border-radius:50%; flex:none; }
.instant-dot, .mode-instant i { background:#24845a; }.request-dot, .mode-request i { background:#b58112; }
.availability-zone { margin:20px 0; font-size:12px; color:var(--dim); }
.availability-guide { border-top:1px solid var(--line); padding-top:20px; margin-top:20px; font-size:13px; }
.availability-guide p { font-size:12px; line-height:1.6; margin:8px 0; }
.availability-day-editor { min-width:0; border-left:1px solid var(--line); padding-left:28px; }
.availability-date-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.availability-date-heading h3 { font-size:20px; margin:0; }
.availability-save-state { font-size:12px; color:var(--dim); }
.availability-tools { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.availability-paint-mode { display:flex; gap:5px; flex-wrap:wrap; }
.availability-paint-mode button { display:flex; align-items:center; gap:7px; padding:8px 10px; min-height:36px; font-size:12px; font-weight:600; }
.availability-paint-mode .mode-instant[aria-pressed=true] { background:#e2f2e9; border-color:#24845a; color:#185436; }
.availability-paint-mode .mode-request[aria-pressed=true] { background:#fff0bb; border-color:#b58112; color:#72510d; }
.availability-lesson-length { margin:0; }
.availability-lesson-length select { margin:0; min-height:36px; padding:8px; font-size:12px; width:auto; }
.availability-selection { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; min-height:45px; color:var(--dim); font-size:12px; }
.availability-selection button { flex-shrink:0; font-size:12px; min-height:44px; padding:8px 12px; white-space:normal; overflow-wrap:anywhere; max-width:100%; }
.availability-notices:empty { display:none; }
.availability-notices p { margin:0 0 12px; font-size:12px; }
.availability-clock-scroll { height:520px; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:10px; background:var(--paper); padding:12px 0; scrollbar-gutter:stable; }
.availability-clock { position:relative; margin:0 10px; }
.availability-hour { position:absolute; left:52px; right:0; height:1px; background:var(--line); pointer-events:none; }
.availability-hour time { position:absolute; top:-8px; right:calc(100% + 10px); width:40px; text-align:right; font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums; }
.availability-track { position:absolute; inset:0 0 0 54px; cursor:crosshair; touch-action:none; user-select:none; outline:none; background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,color-mix(in srgb,var(--line) 50%,transparent) 35px,color-mix(in srgb,var(--line) 50%,transparent) 36px); }
.availability-track[aria-disabled=true] { cursor:default; background-color:color-mix(in srgb,var(--bg) 50%,transparent); }
.availability-keyboard-cursor { position:absolute; left:0; right:0; border-top:2px solid #3379ba; z-index:3; display:none; pointer-events:none; }
.availability-keyboard-cursor span { font-size:11px; background:#fff; color:#245c8e; padding:3px 8px; }
[data-availability-keyboard="true"] .availability-track:focus-visible .availability-keyboard-cursor { display:block; }
.availability-time-block { --block-ink:#185b3a; --block-line:#39986a; --block-bg:#dff1e6; position:absolute; left:6px; right:8px; border:1px solid var(--block-line); border-left:4px solid var(--block-line); border-radius:6px; color:var(--block-ink); background:var(--block-bg); min-height:0; overflow:hidden; z-index:1; touch-action:none; }
.availability-time-block.mode-request { --block-ink:#73510c; --block-line:#c49a2b; --block-bg:#fff0bd; }
.availability-time-block.is-selected { box-shadow:0 0 0 2px var(--block-line); z-index:2; }
.availability-time-block.is-dragging { box-shadow:0 3px 12px #18261d30; z-index:4; opacity:.9; padding:12px; }
.availability-time-block.is-dragging:has(.availability-block-body) { padding:0; }
.availability-time-block.is-invalid { --block-line:#bd3648; --block-bg:#fbe4e7; --block-ink:#9d2030; }
.availability-time-block > strong,.availability-time-block > span { display:block; font-size:12px; }
.availability-block-body { border:0; border-radius:0; color:inherit; background:transparent; width:100%; height:100%; min-height:0; padding:12px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:5px; cursor:grab; text-align:left; touch-action:none; box-shadow:none; }
.availability-block-body:hover { background:#ffffff25; }
.availability-block-body strong { font-size:14px; font-variant-numeric:tabular-nums; }
.availability-block-body span { font-size:11px; font-weight:400; }
.availability-resize { position:absolute; left:0; right:0; width:100%; height:11px; min-height:0; padding:0; border:0; border-radius:0; background:transparent; cursor:ns-resize; touch-action:none; z-index:2; display:flex; justify-content:center; align-items:center; }
.availability-resize.edge-start { top:0; }.availability-resize.edge-end { bottom:0; }
.availability-resize span { width:25px; height:3px; border-radius:2px; background:var(--block-line); opacity:.5; }
.availability-resize:hover span,.availability-resize:focus-visible span { opacity:1; }
.availability-save-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; padding-top:16px; }
.availability-save-actions .availability-hint { margin:0 auto 0 0; font-size:11px; }
.availability-hint { color:var(--dim); font-size:12px; line-height:1.6; }
@media(max-width:1000px) {
 .availability-layout { grid-template-columns:235px minmax(0,1fr); gap:20px; }
 .availability-day-editor { padding-left:20px; }
 .availability-panel { padding:22px; }
 .availability-date-heading h3 { font-size:18px; }
}
@media(max-width:820px) {
 .availability-layout { grid-template-columns:1fr; }
 .availability-date-picker { max-width:400px; width:100%; margin:auto; }
 .availability-day-editor { border-left:0; border-top:1px solid var(--line); padding:24px 0 0; }
 .availability-guide { display:none; }
 .availability-legend { flex-direction:row; flex-wrap:wrap; margin-top:12px; }
 .availability-panel { padding:18px; }
 .availability-clock-scroll { height:470px; }
}

/* Weekly availability uses the same draggable clock as date overrides. */
.availability-view { margin-bottom:20px; }
.availability-view button { font-size:12px; padding:9px; }
.availability-repeat { display:flex; flex-wrap:wrap; align-items:end; gap:14px; padding-bottom:20px; }
.availability-repeat label { font-size:12px; }
.availability-repeat input { min-height:36px; padding:8px; margin-top:6px; }
.availability-repeat p { flex-basis:100%; font-size:12px; margin:0; }
.availability-week-scroll { overflow-x:auto; }
.availability-week-head { display:grid; grid-template-columns:54px repeat(7,minmax(84px,1fr)); min-width:650px; padding-right:16px; }
.availability-week-head button { border:0; border-radius:6px 6px 0 0; background:transparent; font-size:11px; font-weight:400; min-height:56px; padding:7px; }
.availability-week-head button strong { display:block; margin-top:4px; font-size:16px; }
.availability-week-head button[aria-pressed=true] { background:var(--bg); color:var(--accent); }
.availability-week-scroll .availability-clock-scroll { min-width:650px; border-radius:0 0 10px 10px; }
.availability-week-clock { margin:0; }
.availability-week-columns { position:absolute; inset:0 0 0 54px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.availability-week-column { position:relative; border-left:1px solid var(--line); }
.availability-week-column .availability-track { inset:0; }
.availability-week-column .availability-time-block { left:2px; right:2px; border-left-width:3px; }
.availability-week-column .availability-block-body { padding:13px 3px; gap:4px; }
.availability-week-column .availability-block-body strong { font-size:11px; }
.availability-week-column .availability-block-body span { font-size:10px; }
.availability-week-column .availability-time-block.is-dragging { padding:13px 3px; }
.availability-exceptions { margin-top:20px; font-size:12px; }
.availability-exceptions button { display:block; }
@media (min-width:1100px) { .availability-layout { grid-template-columns:220px minmax(0,1fr); gap:20px; } .availability-day-editor { padding-left:20px; } }

.invite-qr { width: 200px; max-width: 100%; margin: 18px 0; }
.invite-qr svg { display: block; width: 100%; height: auto; border-radius: 8px; }
.login a.button { display: inline-flex; justify-content: center; text-decoration: none; padding: 14px 20px; border-radius: 8px; font-weight: 700; }

.online-billing { margin: 24px 0; }
.online-billing h3 { margin-top: 24px; }
.online-billing details { margin-top: 24px; }
.online-billing form { margin: 20px 0; max-width: 640px; }
.online-billing .row { gap: 16px; flex-wrap: wrap; }

/* Match the app's progress period controls. */
.progress-range { margin-bottom:24px; }
.progress-range > span { display:block; color:#b9bdc6; font-size:12px; margin-bottom:8px; }
.progress-range .actions { flex-wrap:wrap; gap:8px; }
.progress-range button { background:#323741; border-color:#505663; color:#f5f5f5; }
.progress-range button[aria-pressed="true"] { background:#f1a468; border-color:#f1a468; color:#202329; }
.progress-range label { display:block; margin-top:12px; max-width:240px; color:#f5f5f5; }
.progress-range input { color-scheme:dark; background:#323741; color:#fff; border-color:#505663; }
.progress-range p { color:#b9bdc6; font-size:13px; margin:8px 0 0; }

.statistics-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:20px 0}.statistics-overview>div{background:#313641;padding:16px;border-radius:10px}.statistics-overview span{display:block;color:#c5cad3;font-size:13px}.statistics-overview strong{display:block;font-size:24px;margin-top:8px}.statistics-charts{display:grid;gap:16px}.statistics-charts .progress-metric svg{display:block;width:100%;height:auto;max-height:280px}.statistics-charts h3 small{color:#c5cad3;font-weight:400}.statistics-empty{padding:32px;color:#c5cad3;text-align:center}@media(max-width:700px){.statistics-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}

.statistics-delta{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-top:18px}.statistics-delta span{color:#c5cad3;font-size:11px}.statistics-plot{display:flex;height:181px}.statistics-axis{position:relative;width:52px;flex:none;color:#c5cad3;font-size:11px}.statistics-axis small{position:absolute;top:45px;right:6px}.statistics-axis span{position:absolute;right:6px;transform:translateY(-50%)}.statistics-scroll{flex:1;min-width:0;overflow-x:auto}.statistics-canvas{position:relative;height:181px;width:100%}.statistics-charts .statistics-canvas svg{width:100%;height:181px;max-height:none}.statistics-point{position:absolute;top:0;height:181px;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;display:flex;align-items:flex-end;justify-content:center;color:#c5cad3!important;font-size:12px;font-weight:400;cursor:pointer}.statistics-point:hover,.statistics-point[aria-pressed=true]{background:rgba(241,164,104,.08)!important}.statistics-point:focus-visible{outline:2px solid #f1a468;outline-offset:-2px}.statistics-point span{padding-bottom:2px}.statistics-selection{display:block;min-height:28px;padding-top:12px;font-size:13px;color:#f4f4f5}

.statistics-point::before{content:"";position:absolute;left:50%;top:var(--point-y);transform:translate(-50%,-50%);width:6px;height:6px;border-radius:50%;background:#f1a468;box-sizing:content-box}.statistics-point[aria-pressed=true]::before{width:10px;height:10px;border:2px solid white}

/* Keep charts readable at desktop widths without stretching phone geometry. */
.statistics-charts{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}.statistics-chart{min-width:0}.statistics-chart .progress-caption{min-height:48px;line-height:1.5}.statistics-plot,.statistics-canvas,.statistics-point,.statistics-charts .statistics-canvas svg{height:210px}.statistics-axis small{top:6px}.statistics-point:hover,.statistics-point[aria-pressed=true]{background:transparent!important}.statistics-point[aria-pressed=true]::after{content:"";position:absolute;left:50%;top:20px;bottom:28px;border-left:1px dashed rgba(241,164,104,.35);pointer-events:none}.statistics-point::before{z-index:1}.statistics-selection{min-height:40px;line-height:1.5}.statistics-delta{flex-wrap:wrap;min-height:36px;align-items:start}.statistics-progress .progress-heading{margin-bottom:0}.statistics-progress .progress-range{margin-bottom:20px}@media(max-width:1100px){.statistics-charts{grid-template-columns:1fr}.statistics-chart .progress-caption{min-height:0}}

/* Phone workspace: visible navigation, compact summaries and comfortable controls. */
.mobile-menu-toggle{display:none}
@media(max-width:700px){
 .app,.main,.card,.stack,.split>*,.grid>*,.calendar-layout>*,.availability-layout>*,.availability-day-editor{min-width:0}
 .rail{display:grid;grid-template-columns:1fr auto;gap:0;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));position:relative}
 .rail-brand{align-self:center}.rail .brand{font-size:23px}.rail .eyebrow{font-size:9px;margin:4px 0 0}
 .mobile-menu-toggle{display:block;min-height:44px;color:#f8f6ee;background:transparent;border-color:#697062;padding:10px 16px}
 .rail nav{display:none;grid-column:1/-1;overflow:visible;padding-top:12px}.rail.menu-open nav{display:grid;grid-template-columns:1fr;gap:4px}
 .rail nav a{min-height:48px;display:flex;align-items:center;font-size:15px}.rail.menu-open footer{display:flex;grid-column:1/-1;flex-wrap:wrap;align-items:center;gap:10px;padding-top:16px;margin-top:12px;border-top:1px solid #555b4b}.rail footer>div{display:none}.rail footer button{margin-left:auto}
 .main{padding:16px max(16px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
 .top{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:20px;padding-bottom:14px;min-height:0}.workspace-name{max-width:100%;font-size:13px;overflow-wrap:anywhere}.top>.actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%}.workspace-switch{display:flex;min-width:0;flex-wrap:nowrap}.workspace-switch button{flex:1;padding:8px 6px;min-height:44px;font-size:12px;white-space:nowrap}.workspace-tools summary{min-height:44px;display:flex;align-items:center;font-size:12px}.workspace-tools{position:relative}.workspace-tools[open]>.actions{position:absolute;right:0;top:100%;min-width:170px;background:var(--paper,#fff);padding:12px;border:1px solid var(--line);border-radius:10px;z-index:10;box-shadow:0 6px 20px #0002}
 .intro{flex-wrap:wrap;margin-bottom:20px}.intro h1{font-size:25px}.intro>div{min-width:0}.intro p{font-size:14px}.intro>.actions{flex-wrap:wrap}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.stat{padding:16px;min-width:0}.stat span{font-size:10px;line-height:1.4}.stat strong{font-size:26px;margin-top:8px}
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;max-width:100%;min-height:44px}button,.button{min-height:44px}summary{min-height:44px;align-content:center}
 .card{padding:16px}.fighter-progress{padding:16px}.progress-range .actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.progress-range button{padding:8px 4px;font-size:12px}.progress-range label{width:100%}.progress-range input{width:100%}
 .statistics-overview{gap:8px}.statistics-overview>div{padding:12px}.statistics-overview strong{font-size:21px}.statistics-overview span{font-size:12px}.statistics-chart{padding:14px}.statistics-selection{font-size:13px}.statistics-axis{width:42px}.statistics-delta{gap:6px}
 .row,.person-row{min-width:0}.person-row>div{min-width:0}.person-row h3,.person-row p,.note{overflow-wrap:anywhere}.person-row{flex-wrap:wrap}.people-heading{flex-wrap:wrap;gap:12px}.people-heading input{width:100%}
 .calendar-intro{flex-wrap:wrap;gap:12px}.calendar-intro>.actions{width:100%}.calendar-intro>.actions .primary{flex:1}.calendar-grid{gap:2px}.training-calendar{padding:14px}.calendar-day{min-height:38px}.calendar-heading{gap:6px}.calendar-heading h2{font-size:17px}
 dialog{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}.removal-dialog{padding:20px}.removal-dialog .actions{flex-wrap:wrap}
 .availability-repeat{display:grid;grid-template-columns:1fr 1fr;gap:10px}.availability-repeat label{min-width:0}.availability-repeat input{width:100%}.availability-repeat p{grid-column:1/-1}.availability-panel{padding:14px}.availability-paint-mode{flex-wrap:wrap}.availability-save-actions .primary{flex:1}.availability-preview{white-space:normal}
}
@media(max-width:374px){.top>.actions{grid-template-columns:1fr}.workspace-tools{justify-self:end}.statistics-overview strong{font-size:19px}.statistics-chart{padding:10px}.workspace-switch button{font-size:12px}.main{padding-left:12px;padding-right:12px}}

.availability-time-entry{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin:16px 0}.availability-time-entry p,.availability-time-entry small{grid-column:1/-1;margin:0}.availability-time-entry label{min-width:0}.availability-time-entry small{color:var(--dim);font-size:12px}
@media(pointer:coarse){.availability-track{touch-action:pan-x pan-y}.availability-time-block,.availability-block-body{touch-action:none}.availability-resize{height:18px}}
@media(max-width:700px){.rail{position:sticky;top:0;z-index:30}.rail.menu-open{max-height:90dvh;overflow-y:auto}.availability-time-entry{grid-template-columns:1fr 1fr}.availability-time-entry button{grid-column:1/-1}.availability-tools{flex-wrap:wrap}.availability-week-scroll{max-width:100%;overscroll-behavior-x:contain}.availability-block-body{min-height:0}.availability-resize{min-height:0}.calendar-day,.history-day{min-height:0} .schedule-panel{scroll-margin-top:96px}}

@media(max-width:700px){.schedule-editor,#coach-availability,#gym-community{scroll-margin-top:96px}.schedule-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:374px){.schedule-fields{grid-template-columns:1fr}}
/* Reserve room for horizontal chart browsing without a nested vertical scrollbar. */
.statistics-plot{height:226px}.statistics-scroll{overflow-y:hidden;scrollbar-color:#626975 transparent;scrollbar-width:thin}

/* Current local time only on today's availability column. */
.availability-now { position:absolute; left:0; right:0; border-top:2px solid #c03528; z-index:5; pointer-events:none; }
.availability-now[hidden] { display:none; }
.availability-now::before { content:""; position:absolute; left:-4px; top:-5px; width:8px; height:8px; border-radius:50%; background:#c03528; }
.availability-now span { position:absolute; right:2px; bottom:3px; background:#fffefa; color:#a62c20; border-radius:3px; padding:1px 4px; font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; }

.availability-week-clock > .availability-now { left:54px; }

/* Long drop-in labels must wrap on narrow phones. */
.booking-slot .tag{white-space:normal;overflow-wrap:anywhere;line-height:1.5}

/* Gym sessions share the availability calendar's month picker and week grid. */
.gym-week-events { position:absolute; inset:0; }
.gym-week-events .calendar-event { padding:5px; min-height:0; font-size:11px; overflow:hidden; }
.gym-week-events .calendar-event strong { font-size:12px; overflow-wrap:anywhere; }
.gym-week-calendar .schedule-panel { margin-bottom:16px; }
.gym-week-events .calendar-event strong,.gym-week-events .calendar-event span { white-space:normal; text-overflow:clip; }
.gym-week-events .calendar-event time { font-size:10px; }

.schedule-editor .schedule-repeat { display:flex; flex-direction:row; align-items:center; gap:8px; }
.schedule-editor .schedule-repeat input { width:18px; height:18px; margin:0; flex:0 0 18px; }
.gym-class-preview { position:absolute; left:2px; right:2px; border:2px solid var(--accent); background:#f4e2d6; pointer-events:none; z-index:2; }

.public-class-schedule { max-width:1100px; margin:0 auto; padding:24px; min-width:0; }
.public-class-schedule h1 { font-size:clamp(22px,4vw,32px); overflow-wrap:anywhere; }
.public-class-schedule header p { color:var(--dim); font-size:14px; }
.public-class-schedule .history-calendar-content { display:grid; grid-template-columns:300px minmax(0,1fr); gap:24px; }
.public-class { padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }
.public-class h3 { margin:6px 0 0; overflow-wrap:anywhere; }
.public-class time { font-variant-numeric:tabular-nums; color:var(--dim); }
@media(max-width:600px){.public-class-schedule{padding:16px}.public-class-schedule .history-calendar-content{grid-template-columns:1fr;gap:16px}}

.public-class-schedule header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.public-class-schedule h2 { font-size:18px; margin:20px 0; }
.public-week-scroll { overflow-x:auto; padding-bottom:12px; }
.public-week-head { display:grid; grid-template-columns:54px repeat(7,minmax(110px,1fr)); min-width:824px; }
.public-week-head>div { text-align:center; padding:10px; background:var(--paper); border:1px solid var(--line); border-bottom:0; font-size:13px; }
.public-week-head strong { display:block; font-size:18px; margin-top:5px; }
.public-week-head .is-today { color:var(--accent); background:#f5e7df; }
.public-week-grid { position:relative; min-width:824px; background:var(--paper); margin-bottom:10px; }
.public-hour { position:absolute; left:54px; right:0; border-top:1px solid var(--line); pointer-events:none; }
.public-hour time { position:absolute; right:calc(100% + 8px); top:-8px; font-size:11px; color:var(--dim); }
.public-week-columns { position:absolute; inset:0 0 0 54px; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.public-week-columns>section { position:relative; border-left:1px solid var(--line); }
.public-week-class { position:absolute; border:1px solid #d29b78; border-left:3px solid var(--accent); background:#f5e7df; border-radius:6px; padding:6px; overflow:auto; font-size:12px; }
.public-week-class time { display:block; font-size:10px; margin-bottom:5px; font-variant-numeric:tabular-nums; }
.public-week-class strong { overflow-wrap:anywhere; }
@media(min-width:700px){.public-week-head{grid-template-columns:54px repeat(7,minmax(0,1fr));min-width:0}.public-week-grid{min-width:0}}

.gym-logo{display:block;max-width:160px;height:80px;object-fit:contain;object-position:left center;margin-bottom:12px}.public-gym-brand{display:flex;align-items:center;gap:18px;min-width:0}.public-gym-brand .gym-logo{max-width:120px;margin:0;flex-shrink:0}@media(max-width:600px){.public-gym-brand{gap:12px}.public-gym-brand .gym-logo{max-width:72px;height:60px}}
/* Calendar workspace: full week, with the whole training day visible. */
.main{max-width:none}.calendar-week-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:16px 0}.calendar-week-toolbar h3{margin:0;font-size:18px}.calendar-legend{display:flex;gap:16px;font-size:13px;color:var(--dim)}.calendar-legend span:before{content:'';display:inline-block;width:12px;height:12px;border-radius:4px;background:#f8bea0;margin-right:7px}.calendar-legend .private:before{background:#aee2df}.gym-week-calendar .availability-week-scroll{border:1px solid var(--line);border-radius:12px;padding-bottom:14px;background:white}.gym-week-calendar .availability-week-head{margin:0}.gym-week-calendar .availability-week-head button{border-radius:0;border-bottom:1px solid var(--line);padding:12px}.gym-week-calendar .availability-week-clock{border:0}.gym-week-events .calendar-event{background:#ffdac5;border:1px solid #efbd9f;border-left:3px solid #c24a22;border-radius:6px;padding:7px 9px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;text-align:left;color:#252923}.gym-week-events .event-private{background:#c6ece8;border-color:#93d6ce;border-left-color:#168b83}.gym-week-events .calendar-event strong{font-size:13px;line-height:1.2;overflow-wrap:normal}.gym-week-events .calendar-event time{font-size:11px}.public-class-schedule{max-width:1600px;padding:32px 40px}.public-week-scroll{border:1px solid var(--line);border-radius:12px;background:white;padding:0 0 14px}.public-week-head>div{background:white}.public-week-grid{margin-bottom:0}.public-week-class{background:#ffdac5;border-color:#efbd9f;padding:8px;overflow:hidden}.public-week-class strong{overflow-wrap:normal;font-size:14px}.public-week-class time{font-size:12px}.public-class-schedule .gym-logo{height:64px}
/* Keep day columns readable and scroll the header and time grid together. */
.gym-week-calendar { min-width:0; }
.gym-week-calendar .availability-week-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-color:var(--dim) var(--bg); }
.gym-week-calendar .availability-week-head { grid-template-columns:54px repeat(7,minmax(0,1fr)); min-width:1120px; padding-right:0; }
.gym-week-calendar .availability-week-clock { min-width:1120px; }
.gym-week-calendar .availability-week-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(max-width:700px){.public-class-schedule{padding:20px 16px}.calendar-week-toolbar h3{font-size:15px}.gym-week-calendar{padding:14px}.gym-week-calendar .availability-heading{align-items:flex-start}.calendar-week-toolbar .actions{gap:6px}}

/* Keep compact event labels readable within their actual duration. */
.gym-week-events .calendar-event{padding:4px 5px;gap:2px}.gym-week-events .calendar-event strong{font-size:12px;line-height:14px;white-space:nowrap;flex-shrink:0;width:100%;text-overflow:ellipsis}.gym-week-events .calendar-event time{font-size:10px;line-height:12px;flex-shrink:0;overflow:visible;white-space:nowrap}.public-week-class{padding:4px 6px}.public-week-class strong{font-size:12px;line-height:14px}.public-week-class time{font-size:10px;line-height:12px}

.calendar-coach-slot{position:absolute;display:flex;align-items:center;justify-content:flex-start;gap:5px;padding:3px;border:1px dashed color-mix(in srgb,var(--coach-color) 45%,white);background:color-mix(in srgb,var(--coach-color) 6%,white);border-radius:6px;min-height:0;overflow:hidden;color:var(--ink)}
.coach-circle{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--coach-color);color:white;font-size:10px;font-weight:700}.coach-slot-name{font-size:11px;line-height:13px;overflow:hidden;text-overflow:ellipsis}.calendar-coach-slot:focus-visible{outline:2px solid var(--coach-color);outline-offset:2px}.calendar-legend .available:before{border-radius:50%;background:#287f89}

.gym-week-events .calendar-draft-preview{left:3px;width:calc(100% - 6px);z-index:5;border:2px dashed #bb4421;background:#fff1e6;pointer-events:none;box-shadow:0 0 0 2px #fff}.calendar-draft-preview strong{font-style:italic}
.schedule-popover{position:fixed;z-index:100;width:360px;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px #0003;margin:0;max-height:calc(100vh - 24px);overflow:auto}.schedule-popover .schedule-panel-heading{margin-bottom:10px}.schedule-popover .schedule-panel-heading button{padding:4px 8px;font-size:12px}.schedule-popover label{display:block;font-size:11px;margin:0 0 8px}.schedule-popover input,.schedule-popover select{padding:7px;min-width:0;margin-top:3px;font-size:13px}.schedule-popover input[name=title]{font-size:16px;font-weight:600}.popover-fields{display:grid;grid-template-columns:1fr .7fr 1.3fr;gap:8px}.schedule-popover .schedule-repeat{display:flex;align-items:center;gap:6px;font-size:12px}.schedule-popover summary{font-size:12px;color:var(--dim);margin:8px 0}.popover-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}.popover-footer span,.popover-note{font-size:12px;color:var(--dim)}.popover-footer button{padding:8px 12px}

/* Google sign-in follows the existing login card width and keyboard controls. */
.login-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #8c8c8c; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: #ddd; }
.google-signin { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 44px; background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 4px; font-weight: 500; }
.google-signin:hover { background: #f5f5f5; }
.google-signin:focus-visible { outline: 3px solid #4285f4; outline-offset: 3px; }
.google-signin svg { flex-shrink: 0; }

/* Let horizontal gestures reach the week scroller around the vertical hour grid. */
.availability-week-scroll .availability-clock-scroll { overscroll-behavior-x:auto; }
.availability-week-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }