/* ==========================================================================
   TrainerPlatform - Client portal
   --------------------------------------------------------------------------
   One narrow column, like a page in a notebook. Sections are separated by
   rules, labelled quietly, and written in sentences. No cards, no metrics,
   no badges: the same restraint as the public site (D-035), in a smaller
   room. Every colour is a semantic token, so both themes are complete.
   ========================================================================== */

.ptl {
  --ptl-gutter: clamp(1.25rem, 0.8rem + 2vw, 2rem);

  min-height: 100vh;
  background: var(--tp-pub-page);
  color: var(--tp-text-primary);
  font-family: "Inter", var(--tp-font-sans);
  -webkit-font-smoothing: antialiased;
}

:where(.ptl) a { color: inherit; text-decoration: none; }
:where(.ptl) p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }

.ptl .tp-icon-sm { width: 0.9375rem; height: 0.9375rem; flex: 0 0 auto; }
.ptl h1:focus, .ptl h1:focus-visible { outline: none; }

.ptl :focus-visible {
  outline: 2px solid var(--tp-brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.ptl-wrap {
  width: 100%;
  max-width: calc(36rem + 2 * var(--ptl-gutter));
  margin-inline: auto;
  padding-inline: var(--ptl-gutter);
}

/* Page rhythm: one sheet, read top to bottom. Parts are separated by space, not rules. */
.ptl-page { padding-block: clamp(2.5rem, 1.75rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.ptl-empty { padding-block: 4rem; color: var(--tp-text-secondary); }

.ptl-welcome { padding-bottom: clamp(2rem, 1.5rem + 2vw, 2.75rem); border-bottom: 1px solid var(--tp-pub-hairline-strong); }

.ptl-date {
  font-size: 0.875rem;
  color: var(--tp-text-muted);
}

.ptl-welcome__title {
  margin: 0.375rem 0 0;
  font-size: clamp(2rem, 1.6rem + 1.8vw, 2.625rem);
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--tp-pub-ink);
}

.ptl-welcome__summary {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--tp-text-secondary);
  text-wrap: pretty;
}

.ptl-lead {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--tp-pub-ink);
}


.ptl-text {
  margin-top: 0.375rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tp-text-secondary);
  text-wrap: pretty;
}

.ptl-meta {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--tp-text-muted);
}

.ptl-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 44px;
  margin-top: 0.5rem;
  font-weight: 560;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tp-pub-hairline-strong);
  text-underline-offset: 0.22em;
}

/* Workout: a numbered list, read top to bottom in the gym. */
.ptl-workout {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: item;
}

.ptl-workout li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.125rem 1rem;
  padding: 0.75rem 0 0.75rem 1.75rem;
  border-top: 1px solid var(--tp-pub-hairline);
  counter-increment: item;
}

.ptl-workout li::before {
  content: counter(item);
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--tp-text-muted);
}

.ptl-workout__name { font-weight: 560; }
.ptl-workout__dose { font-variant-numeric: tabular-nums; color: var(--tp-text-primary); text-align: right; }
.ptl-workout__cue { grid-column: 1 / -1; font-size: 0.875rem; color: var(--tp-text-muted); }

@media (max-width: 26rem) {
  .ptl-workout li { grid-template-columns: 1fr; }
  .ptl-workout__dose { text-align: left; color: var(--tp-text-secondary); }
}

/* Marking something done. */
.ptl-button {
  min-height: 48px;
  margin-top: 1.25rem;
  padding: 0 1.25rem;
  border: 1px solid var(--tp-pub-ink);
  border-radius: 999px;
  background: transparent;
  color: var(--tp-pub-ink);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 560;
  cursor: pointer;
}

/* Outlined, not filled: marking something done is quiet, not a call to action. */
.ptl-button:hover { background: var(--tp-pub-ink); color: var(--tp-pub-page); }

@media (max-width: 29.99rem) {
  .ptl-button { width: 100%; }
}

.ptl-done {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  margin-top: 1.25rem;
}

.ptl-done__text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 560;
  color: var(--tp-text-primary);
}

.ptl-done__text .tp-icon-sm { color: var(--tp-brand); width: 1.125rem; height: 1.125rem; }

.ptl-done__undo {
  min-height: 44px;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: var(--tp-text-secondary);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-decoration-color: var(--tp-pub-hairline-strong);
  text-underline-offset: 0.22em;
  cursor: pointer;
}

/* A part of the page: no label, no rule - a lead-in sentence carries the reader in. */
.ptl-part { padding-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); }

.ptl-lead-in { color: var(--tp-text-muted); }
.ptl-nowrap { white-space: nowrap; }

.ptl-text strong { font-weight: 600; color: var(--tp-pub-ink); }
.ptl-part > .ptl-text:first-of-type { margin-top: 0; font-size: 1.0625rem; }

/* The coach's note for the next session: set in from the margin, not boxed. */
.ptl-note {
  margin-top: 0.875rem;
  padding-left: 1rem;
  border-left: 2px solid var(--tp-brand);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tp-text-primary);
}

/* A little reading: title, then the reason, like a footnote list. */
.ptl-reading { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.875rem; }

.ptl-reading a {
  font-weight: 600;
  color: var(--tp-pub-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tp-pub-hairline-strong);
  text-underline-offset: 0.22em;
}

.ptl-reading span { display: block; margin-top: 0.125rem; font-size: 0.9375rem; line-height: 1.55; color: var(--tp-text-secondary); }

/* Sign-off: the page ends the way a note from a coach would. */
.ptl-signoff { padding-top: clamp(2.25rem, 1.75rem + 2vw, 3rem); }
.ptl-signoff__line { font-size: 1.125rem; color: var(--tp-text-primary); }
.ptl-signoff__name { margin-top: 0.125rem; font-size: 1.125rem; font-weight: 600; color: var(--tp-pub-ink); }
.ptl-signoff__name::before { content: "— "; font-weight: 400; color: var(--tp-text-muted); }
.ptl-signoff__more { margin-top: 1.5rem; font-size: 0.9375rem; }

.ptl-signoff__more a {
  color: var(--tp-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tp-pub-hairline-strong);
  text-underline-offset: 0.22em;
}

/* One quiet line at the foot of the sheet. */
.ptl-foot {
  padding-block: 1.5rem 2.5rem;
  font-size: 0.8125rem;
  color: var(--tp-text-muted);
}

.ptl-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.ptl-foot a:hover { color: var(--tp-text-primary); }

/* --------------------------------------------------------------------------
   Coach Home (D-037) - the same sheet, for the coach's day.
   -------------------------------------------------------------------------- */

/* Preparation: a few lines a coach reads in the two minutes before a client arrives. */
.ptl-prep {
  margin: 1rem 0 0;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--tp-brand);
  list-style: none;
  display: grid;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tp-text-primary);
}

.ptl-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin-top: 0.5rem; }

/* The day: time, who and what, state in a word. One row is one link to the session. */
.ptl-schedule { margin: 0.75rem 0 0; padding: 0; list-style: none; }

.ptl-schedule a {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  min-height: 48px;
  padding: 0.75rem 0;
}

.ptl-schedule__time { font-variant-numeric: tabular-nums; color: var(--tp-text-secondary); white-space: nowrap; }
.ptl-schedule__who { display: flex; flex-direction: column; min-width: 0; }
.ptl-schedule__who strong { font-weight: 600; color: var(--tp-pub-ink); }
.ptl-schedule__who span { font-size: 0.875rem; color: var(--tp-text-muted); }
.ptl-schedule__state { font-size: 0.875rem; color: var(--tp-text-muted); white-space: nowrap; }

.ptl-schedule a:hover .ptl-schedule__who strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* The session in focus is marked by weight and a word, never colour alone. */
.ptl-schedule .is-focus .ptl-schedule__time,
.ptl-schedule .is-focus .ptl-schedule__state { color: var(--tp-pub-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Schedule (D-038) - the week, and the booking and moving forms.
   -------------------------------------------------------------------------- */

.ptl-back { display: inline-flex; align-items: center; min-height: 44px; }
.ptl-back::before { content: "← "; white-space: pre; }
.ptl-back:hover { color: var(--tp-text-primary); }

.ptl-inline {
  color: var(--tp-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tp-pub-hairline-strong);
  text-underline-offset: 0.22em;
}

.ptl-confirm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-weight: 560;
}

.ptl-confirm .tp-icon-sm { color: var(--tp-brand); width: 1.125rem; height: 1.125rem; }

/* A day: its date as a quiet heading, then its sessions. Today is marked by a word and weight. */
.ptl-day { padding-top: 1.5rem; }

.ptl-day__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--tp-text-secondary);
}

.ptl-day.is-today .ptl-day__title { color: var(--tp-pub-ink); }
.ptl-day .ptl-meta { margin-top: 0.375rem; }
.ptl-day .ptl-meta .ptl-day__title { font-size: inherit; }

/* "Move" sits on its own short line under the row, aligned with the name, so it never squeezes
   the row on a phone. The rule belongs to the item, so a row with a Move link stays one unit. */
.ptl-schedule li { border-top: 1px solid var(--tp-pub-hairline); }
.ptl-schedule li:last-child { border-bottom: 1px solid var(--tp-pub-hairline); }

.ptl-schedule__move {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: -0.5rem 0 0.375rem 5.5rem;
  font-size: 0.875rem;
  font-weight: 560;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tp-pub-hairline-strong);
  text-underline-offset: 0.22em;
}

.ptl-weeknav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 560;
}

.ptl-weeknav a { display: inline-flex; align-items: center; min-height: 44px; }
.ptl-weeknav a:hover { text-decoration: underline; text-underline-offset: 0.22em; }

/* Forms: labels above fields, generous targets, errors in words with an icon. */
.ptl-form { display: grid; gap: 1.25rem; padding-top: 1.75rem; }

.ptl-field { display: grid; gap: 0.375rem; min-width: 0; align-content: start; }
.ptl-field label { font-size: 0.875rem; font-weight: 560; }
.ptl-field__optional { font-weight: 400; color: var(--tp-text-muted); }

.ptl-field input,
.ptl-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 0.875rem;
  border: 1px solid var(--tp-pub-hairline-strong);
  border-radius: 0.5rem;
  background: var(--tp-pub-page);
  color: var(--tp-text-primary);
  font: inherit;
}

.ptl-field input:focus,
.ptl-field select:focus { outline: none; border-color: var(--tp-brand); box-shadow: 0 0 0 3px var(--tp-focus-ring); }

.ptl-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

@media (max-width: 29.99rem) {
  .ptl-field-row { grid-template-columns: 1fr; gap: 1.25rem; }
}

.ptl-field__error,
.ptl-form__error {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tp-danger);
}

.ptl-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

.ptl-button--solid { margin-top: 0; background: var(--tp-pub-ink); color: var(--tp-pub-page); }
.ptl-button--solid:hover { background: color-mix(in srgb, var(--tp-pub-ink) 85%, var(--tp-pub-page)); }

@media (max-width: 29.99rem) {
  .ptl-form__actions .ptl-button { width: 100%; }
}

/* Consultation (D-040): contact details are selectable text, not links that may do nothing. */
.ptl-select { user-select: all; }
.ptl-part > form { margin-top: 1.25rem; }

/* Product Builder (D-041): plain lists and plain text fields. The long fields use the monospace
   face because their few conventions ("## ", "- ", "|") are meant to be seen. */
.ptl-builder { margin: 0.75rem 0 0.5rem; padding: 0; list-style: none; border-top: 1px solid var(--tp-pub-hairline); }
.ptl-builder li { border-bottom: 1px solid var(--tp-pub-hairline); }
.ptl-builder a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.125rem 1rem;
  align-items: baseline;
  min-height: 44px;
  padding: 0.75rem 0;
  color: inherit;
  text-decoration: none;
}
.ptl-builder a:hover .ptl-builder__name { text-decoration: underline; text-underline-offset: 0.22em; }
.ptl-builder__name { font-weight: 560; }
.ptl-builder__note { grid-column: 1; grid-row: 2; font-size: 0.875rem; color: var(--tp-text-muted); }
.ptl-builder__state { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.875rem; color: var(--tp-text-muted); }

.ptl-field textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--tp-pub-hairline-strong);
  border-radius: 0.5rem;
  background: var(--tp-pub-page);
  color: var(--tp-text-primary);
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}
.ptl-field textarea:focus { outline: none; border-color: var(--tp-brand); box-shadow: 0 0 0 3px var(--tp-focus-ring); }
.ptl-field textarea.ptl-field__long { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.875rem; }

.ptl-check { display: flex; align-items: center; gap: 0.625rem; min-height: 44px; font-weight: 560; }
.ptl-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--tp-pub-ink); }

.ptl-problems { align-items: flex-start; }
.ptl-problems p { margin: 0; }
.ptl-problems ul { margin: 0.25rem 0 0; padding-left: 1.1rem; font-weight: 400; }

/* --------------------------------------------------------------------------
   The coach's frame (D-042). Inherited from the BuildProof boards: navigation
   is always present. Expressed Align's way: no dark slab, no pills - ink on
   paper, a hairline, and weight for "you are here".
   -------------------------------------------------------------------------- */
.ptl-frame {
  position: fixed;
  z-index: 20;
  inset: auto 0 0 0;
  display: flex;
  background: var(--tp-pub-page);
  border-top: 1px solid var(--tp-pub-hairline-strong);
  padding-bottom: env(safe-area-inset-bottom);
}

.ptl-frame__brand,
.ptl-frame__site { display: none; }

.ptl-frame__items { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; margin: 0; padding: 0; list-style: none; }

.ptl-frame__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 3.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tp-text-muted);
  text-decoration: none;
}
.ptl-frame__item .ptl-icon { width: 1.25rem; height: 1.25rem; }
.ptl-frame__item.is-current { color: var(--tp-pub-ink); font-weight: 650; }
.ptl-frame__item.is-current::before {
  content: "";
  position: absolute;
  inset: -1px 30% auto;
  height: 2px;
  background: var(--tp-pub-ink);
}

.ptl-frame__count {
  position: absolute;
  top: 0.375rem;
  left: calc(50% + 0.5rem);
  min-width: 1.125rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--tp-pub-ink);
  color: var(--tp-pub-page);
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1.125rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ptl-coach__body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }

@media (min-width: 64rem) {
  .ptl-frame {
    inset: 0 auto 0 0;
    width: 14rem;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem 1rem;
    border-top: 0;
    border-right: 1px solid var(--tp-pub-hairline);
  }

  .ptl-frame__brand { display: block; padding-inline: 0.75rem; font-weight: 650; letter-spacing: -0.01em; color: var(--tp-pub-ink); text-decoration: none; }
  .ptl-frame__site { display: block; margin-top: auto; padding-inline: 0.75rem; font-size: 0.8125rem; color: var(--tp-text-muted); }
  .ptl-frame__site:hover { color: var(--tp-text-primary); }

  .ptl-frame__items { display: grid; grid-template-columns: 1fr; gap: 0.125rem; }

  .ptl-frame__item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: 2.5rem;
    padding-inline: 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    color: var(--tp-text-secondary);
  }
  .ptl-frame__item:hover { color: var(--tp-pub-ink); }
  .ptl-frame__item.is-current { background: color-mix(in srgb, var(--tp-pub-ink) 6%, transparent); }
  .ptl-frame__item.is-current::before { display: none; }
  .ptl-frame__item .ptl-icon { width: 1.125rem; height: 1.125rem; }

  .ptl-frame__count { position: static; margin-left: auto; background: transparent; color: var(--tp-text-secondary); font-size: 0.8125rem; }
  .ptl-frame__item.is-current .ptl-frame__count { color: var(--tp-pub-ink); }

  .ptl-coach__body { padding-bottom: 0; padding-left: 14rem; }
}

/* --------------------------------------------------------------------------
   Shared pieces inherited from the BuildProof boards (D-042), Align's way.
   -------------------------------------------------------------------------- */

/* Eyebrow: what kind of screen this is, above its headline. */
.ptl-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tp-text-muted);
}

/* A state in a word. Quiet: an outline, never a fill colour carrying meaning. */
.ptl-pill {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--tp-pub-hairline-strong);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 560;
  line-height: 1.4;
  color: var(--tp-text-secondary);
  white-space: nowrap;
}

/* Attention counts: a numeral and what it counts, leading to the people. Not a KPI. */
.ptl-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0; margin: 1.75rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--tp-pub-hairline); }
.ptl-counts a { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 0.625rem; padding: 0.875rem 0.25rem; border-bottom: 1px solid var(--tp-pub-hairline); color: inherit; text-decoration: none; min-height: 44px; }
.ptl-counts a:hover .ptl-counts__label { text-decoration: underline; text-underline-offset: 0.22em; }
.ptl-counts__n { font-size: 1.75rem; font-weight: 620; line-height: 1; letter-spacing: -0.02em; color: var(--tp-pub-ink); font-variant-numeric: tabular-nums; }
.ptl-counts__label { font-size: 0.875rem; font-weight: 560; line-height: 1.3; }

/* Consequence: what happens if you press the button next to it. */
.ptl-callout {
  display: flex;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-left: 2px solid var(--tp-pub-hairline-strong);
  background: color-mix(in srgb, var(--tp-pub-ink) 3%, transparent);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tp-text-secondary);
}
.ptl-callout .tp-icon-sm { flex: none; margin-top: 0.15rem; }

/* A secondary action next to the one filled button. */
.ptl-button--outline { margin-top: 0; background: transparent; color: var(--tp-pub-ink); border: 1px solid var(--tp-pub-ink); }
.ptl-button--outline:hover { background: color-mix(in srgb, var(--tp-pub-ink) 6%, transparent); }
.ptl-button--text { margin-top: 0; padding-inline: 0.25rem; background: transparent; border: 0; color: var(--tp-text-secondary); text-decoration: underline; text-underline-offset: 0.22em; font-weight: 500; }
.ptl-button--text:hover { color: var(--tp-pub-ink); }

/* The finished state: what happened, and that nothing else is waiting. */
.ptl-finished { display: grid; justify-items: start; gap: 0.5rem; padding-block: 2.5rem 1rem; }
.ptl-finished .ptl-icon { width: 2rem; height: 2rem; color: var(--tp-brand); }
.ptl-finished__title { margin: 0; font-size: 1.375rem; font-weight: 620; letter-spacing: -0.015em; color: var(--tp-pub-ink); }
.ptl-finished p { margin: 0; color: var(--tp-text-secondary); }

/* Attention (D-042): a person, the reason in a sentence, and how long it has been true. */
.ptl-eyebrow + .ptl-people { margin-top: 0.75rem; }
.ptl-eyebrow--spaced { margin-top: 0.75rem; }
.ptl-people { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tp-pub-hairline); }
.ptl-people li { border-bottom: 1px solid var(--tp-pub-hairline); }
.ptl-people a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.125rem 1rem;
  align-items: baseline;
  min-height: 44px;
  padding: 0.875rem 0;
  color: inherit;
  text-decoration: none;
}
.ptl-people a:hover .ptl-people__name { text-decoration: underline; text-underline-offset: 0.22em; }
.ptl-people__name { font-weight: 600; }
.ptl-people__why { grid-column: 1 / -1; color: var(--tp-text-secondary); font-size: 0.9375rem; }
.ptl-people__since { grid-column: 2; grid-row: 1; font-size: 0.8125rem; color: var(--tp-text-muted); white-space: nowrap; }

.ptl-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; margin: 1.75rem 0 0; }
.ptl-facts dt { font-size: 0.8125rem; color: var(--tp-text-muted); }
.ptl-facts dd { margin: 0.125rem 0 0; font-weight: 500; }
@media (max-width: 29.99rem) { .ptl-facts { grid-template-columns: 1fr; } }

.ptl-step__title { margin: 0.375rem 0 0; font-size: 1.375rem; font-weight: 620; line-height: 1.25; letter-spacing: -0.015em; color: var(--tp-pub-ink); }

a.ptl-button { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
a.ptl-button--solid:hover { color: var(--tp-pub-page); }

.ptl-note-draft { margin-top: 1.75rem; }
.ptl-note-draft blockquote {
  margin: 0.5rem 0 0;
  padding: 0.875rem 1rem;
  border: 1px solid var(--tp-pub-hairline-strong);
  border-radius: 0.5rem;
  line-height: 1.55;
}
.ptl-note-draft .ptl-meta { margin-top: 0.5rem; }
.ptl-eyebrow + .ptl-welcome__title { margin-top: 0.5rem; }

/* ==========================================================================
   Quality pass (2026-10-03)
   ========================================================================== */

/* The brand, as on the website: the mark and the name. */
.ptl-brand { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; font-weight: 650; letter-spacing: -0.01em; color: var(--tp-pub-ink); text-decoration: none; }
.ptl-brand__mark { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; background: var(--tp-pub-ink); color: var(--tp-pub-page); font-size: 0.8125rem; font-weight: 700; }
.ptl-top { display: flex; align-items: center; padding-block: 1rem 0; }
.ptl-top + .ptl-main .ptl-page { padding-top: clamp(1.5rem, 1rem + 2vw, 2.75rem); }

/* Coach screens are working screens: a wider column, anchored to the frame, not floating. */
@media (min-width: 64rem) {
  .ptl-coach .ptl-wrap { max-width: calc(46rem + 2 * var(--ptl-gutter)); margin-left: clamp(1.5rem, 5vw, 5rem); margin-right: auto; }
  .ptl-frame__brand.ptl-brand { display: inline-flex; padding-inline: 0.5rem; }
}

/* Headlines: heavier and tighter, one confident voice across client and coach. */
.ptl-welcome__title { font-weight: 700; letter-spacing: -0.034em; }
.ptl-step__title, .ptl-finished__title { font-weight: 680; }

/* Long forms read in groups: a labelled break, not one undifferentiated column. */
.ptl-form__group { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--tp-pub-hairline); }
.ptl-form > .ptl-form__group:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }

/* The frame's brand shows only in the sidebar; the phone's bottom bar is for places, not names. */
.ptl-frame .ptl-frame__brand { display: none; }
@media (min-width: 64rem) { .ptl-frame .ptl-frame__brand { display: inline-flex; } }

/* --------------------------------------------------------------------------
   One person, as a relationship (Relationship Engine). The Align standard on
   the coach side: headings carry the page, the coach's own words are set in
   the serif (as on the website), the person's own words are quoted.
   -------------------------------------------------------------------------- */
.rel-goal { margin: 1rem 0 0; color: var(--tp-text-muted); }
.rel-goal__words {
  display: block;
  margin-top: 0.125rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.375rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--tp-text-primary);
}
.rel-contact { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: 0.75rem; }
.rel-contact a { color: var(--tp-text-secondary); text-decoration: underline; text-decoration-color: var(--tp-border-subtle, rgb(0 0 0 / 0.15)); text-underline-offset: 0.2em; }
.rel-also { display: flex; flex-wrap: wrap; gap: 0 0.75rem; margin-top: 1rem; }
.rel-also a { color: var(--tp-text-primary); text-decoration: underline; text-underline-offset: 0.2em; }
.rel-lead { margin: 0; font-size: 1rem; font-weight: 400; }
.rel-standing { margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); }

.rel-story { padding-top: clamp(2.75rem, 2rem + 3vw, 4rem); }
.rel-story__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.025em;
}
.rel-month {
  margin: 2rem 0 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--tp-pub-hairline-strong);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tp-text-muted);
}
.rel-moments { margin: 0; padding: 0; list-style: none; }
.rel-moment {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--tp-pub-hairline);
}
.rel-moment__date { font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--tp-text-muted); padding-top: 0.125rem; }
.rel-moment__text { color: var(--tp-text-primary); }
a.rel-moment__text { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; }
a.rel-moment__text:hover { text-decoration-color: currentColor; }
.rel-moment--missed .rel-moment__text,
.rel-moment--cancelled .rel-moment__text,
.rel-moment--measured .rel-moment__text { color: var(--tp-text-secondary); }
.rel-moment--started .rel-moment__text,
.rel-moment--asked .rel-moment__text { font-weight: 600; }
.rel-words {
  margin: 0.375rem 0 0;
  max-width: 34rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--tp-text-primary);
}
.rel-words--theirs { font-family: inherit; font-size: 0.9375rem; font-style: italic; color: var(--tp-text-secondary); }
.rel .ptl-step__title + .ptl-text { margin-bottom: 1.25rem; }
.rel-earlier { margin-top: 2rem; }
.rel-earlier > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 560;
  color: var(--tp-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--tp-pub-hairline-strong);
  text-underline-offset: 0.2em;
}
.rel-earlier[open] > summary { color: var(--tp-text-muted); }

/* --------------------------------------------------------------------------
   The month, told to the client (Reporting, part one): a letter. The coach
   writes in the serif, on paper, and signs it, as on the website.
   -------------------------------------------------------------------------- */
.ptl-field .let-editor {
  width: 100%;
  min-height: 22rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--tp-pub-hairline-strong);
  border-radius: 0.5rem;
  background: color-mix(in srgb, var(--tp-pub-page) 94%, #a67c4e);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--tp-text-primary);
  resize: vertical;
}
.ptl-field .let-editor:focus { outline: 2px solid var(--tp-pub-ink); outline-offset: 2px; }
.let-sign {
  margin: 1.25rem 0 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.375rem;
  font-style: italic;
  color: var(--tp-text-primary);
}
.let-sign--editor { margin-top: 0.5rem; padding-left: clamp(1.25rem, 1rem + 1.5vw, 2rem); }

.let-sheet,
.let-paper {
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  padding: clamp(1.75rem, 1rem + 4vw, 3.5rem);
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--tp-pub-page) 93%, #a67c4e);
}
.let-sheet p,
.let-body p {
  margin: 0 0 1.1em;
  max-width: 34rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.65;
  color: var(--tp-text-primary);
}
.let-sheet .let-sign { margin-top: 0.5rem; }
.let-sheet + .ptl-link { margin-top: 1.25rem; }

.let-read .let-paper { margin-top: 1rem; }
.let-month { margin: 0; font-size: 0.875rem; color: var(--tp-text-muted); }
.let-title {
  margin: 0.25rem 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  font-weight: 450;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--tp-text-primary);
}

/* On the Client Home: the letter announces itself once, quietly, as a line on paper. */
.let-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 1.125rem 1.25rem;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--tp-pub-page) 93%, #a67c4e);
  color: var(--tp-text-primary);
  text-decoration: none;
}
.let-invite__lead { font-family: "Source Serif 4", Georgia, serif; font-size: 1.1875rem; font-style: italic; }
.let-invite__open { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 560; white-space: nowrap; }
.let-invite:hover .let-invite__open { text-decoration: underline; text-underline-offset: 0.2em; }
.ptl-empty .let-invite { margin-top: 1.5rem; }

/* --------------------------------------------------------------------------
   The month, told to the coach (Reporting, part two): questions in the
   coach's own hand, a few names under each, every name a way into a story.
   -------------------------------------------------------------------------- */
.mon .ptl-part { padding-top: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
.mon-q {
  margin: 0 0 0.75rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--tp-text-primary);
}
.mon-people { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tp-pub-hairline); }
.mon-people a {
  display: grid;
  gap: 0.125rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--tp-pub-hairline);
  color: var(--tp-text-primary);
  text-decoration: none;
}
.mon-people strong { font-weight: 600; }
.mon-people span { color: var(--tp-text-secondary); }
.mon-people a:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.mon-empty { margin: 0; font-style: italic; }

/* Tomorrow: the action the whole page leads to, on paper. */
.mon-tomorrow {
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) !important;
  border-radius: 0.25rem;
  background: color-mix(in srgb, var(--tp-pub-page) 93%, #a67c4e);
}
.mon-tomorrow .mon-people { border-top-color: var(--tp-pub-hairline-strong); }

/* --------------------------------------------------------------------------
   One session, on the gym floor (Mobile polish): person first, the plan as a
   ruled list, what happened today in the coach's hand.
   -------------------------------------------------------------------------- */
.ses-when { margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--tp-text-secondary); }
.ses .rel-goal + .ptl-link { margin-top: 1rem; }
.ses-actions { margin-top: 0.75rem; }
.ses-last { font-size: 1.125rem; }
.ses-h {
  display: block;
  margin: 0 0 0.25rem;
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--tp-text-primary);
}
.ses-plan { margin: 0; padding: 0; list-style: none; }
.ses-plan li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.125rem 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--tp-pub-hairline);
}
.ses-plan__name { font-weight: 560; color: var(--tp-text-primary); }
.ses-plan__dose { font-variant-numeric: tabular-nums; color: var(--tp-text-primary); text-align: right; white-space: nowrap; }
.ses-plan__cue { grid-column: 1 / -1; font-size: 0.875rem; color: var(--tp-text-secondary); }
.ptl-field .ses-editor { min-height: 9rem; }
.ses-undo { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: 1rem; border-top: 1px solid var(--tp-pub-hairline); }
.ses-undo > summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--tp-text-secondary); text-decoration: underline; text-underline-offset: 0.2em; }
.ses-undo__body { display: grid; justify-items: start; gap: 0.5rem; padding-top: 0.5rem; }
.ses-undo__body .ptl-meta { margin: 0.5rem 0 0; }

/* Mobile polish: a drafted note is the coach's own words, so it is set in his hand. */
.ptl-note-draft blockquote {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.55;
}
.ptl-send { gap: 0.25rem 1.5rem; }
.ptl-send .ptl-link { min-height: 44px; display: inline-flex; align-items: center; }

/* Mobile polish: on the client's page, Dalton's own lines are in his hand, as on the website. */
.ptl:not(.ptl-coach) .ptl-note,
.ptl:not(.ptl-coach) .ptl-signoff__line,
.ptl:not(.ptl-coach) .ptl-signoff__name {
  font-family: "Source Serif 4", Georgia, serif;
}
.ptl:not(.ptl-coach) .ptl-note { font-size: 1.0625rem; line-height: 1.55; }
.ptl:not(.ptl-coach) .ptl-signoff__name { font-style: italic; font-weight: 450; }