:root {
  /* ---- Warm-dark "coach's ledger" palette (whole interface) ---- */
  /* Base */
  --bg-app: #141310;
  --bg-sidebar: #100f0c;
  --bg-panel: #1a1813;
  --bg-card: #1c1a15;
  --bg-card-hover: #221f19;
  --bg-card-selected: #221f19;

  /* Borders */
  --border-subtle: #2b2921;
  --border-medium: #3a382e;
  --border-strong: #c9c3b6;

  /* Text */
  --text-primary: #eee9df;
  --text-secondary: #9c9689;
  --text-muted: #8a8578;
  --text-disabled: #5c5749;

  /* Signals — chroma means training state only */
  --signal-green: #93c16a;
  --signal-green-soft: rgba(147, 193, 106, 0.13);
  --signal-amber: #e0a64c;
  --signal-amber-soft: rgba(224, 166, 76, 0.13);
  --signal-red: #de6247;
  --signal-red-soft: rgba(222, 98, 71, 0.13);
  --signal-blue: #7aa7ff;
  --signal-blue-soft: rgba(122, 167, 255, 0.12);

  /* Attention accent (needs-you / current) */
  --attn: #e2542a;
  --attn-soft: rgba(226, 84, 42, 0.13);

  /* Workout-shape intensity ramp — same warm palette, warmer = harder */
  --z-rest: #6d6759;
  --z-easy: #8d8468;
  --z-steady: #b6975a;
  --z-tempo: #e0a64c;
  --z-hard: #e2542a;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-panel: 0 24px 80px rgba(0, 0, 0, 0.5);
  --measure-read: 680px;
  --measure-data: 1080px;

  /* Typography */
  --font-data: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale — four steps. Reach for a token, not a new decimal: the
     dashboard had accumulated 16 distinct sizes between 0.60 and 1.02rem. */
  --fs-label: 0.75rem;  /* uppercase eyebrows, figure keys, section labels */
  --fs-micro: 0.78rem;  /* metadata, sub-labels, chart keys */
  --fs-small: 0.82rem;  /* secondary prose and controls */
  --fs-body: 0.92rem;   /* primary prose */
  --fs-figure: 1.02rem; /* headline values */

  /* ---- Legacy aliases mapped onto the palette ---- */
  --bg: var(--bg-app);
  --surface: var(--bg-panel);
  --surface-subtle: var(--bg-card);
  --text: var(--text-primary);
  --border: var(--border-subtle);
  --primary: var(--signal-blue);
  --primary-hover: #98baff;
  --accent: var(--signal-green);
  --success: var(--signal-green);
  --success-bg: var(--signal-green-soft);
  --warning: var(--signal-amber);
  --warning-bg: var(--signal-amber-soft);
  --danger: var(--signal-red);
  --danger-bg: var(--signal-red-soft);
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--attn);
  outline-offset: 2px;
}

button,
input,
textarea,
select {
  font: inherit;
}

small { font-size: inherit; }

.hidden {
  display: none !important;
}

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

/* ---- Top bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 10px 24px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-subtle);
}

.workspace {
  flex: 1 1 auto;
  min-width: 0;
  padding: 32px 36px 64px;
}

.workspace > main {
  max-width: 1240px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  flex: 0 0 auto;
}

.brand-copy {
  display: grid;
  gap: 1px;
}

.brand h1 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.brand .eyebrow {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar-nav::-webkit-scrollbar {
  display: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 500;
  font-size: var(--fs-body);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.nav-item:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.nav-item:focus-visible {
  outline: 2px solid var(--signal-blue-soft);
  outline-offset: 1px;
}

.nav-item[aria-current="page"] {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

/* ---- Account menu ---- */
.usermenu {
  position: relative;
  margin-left: auto;
  flex: 0 0 auto;
}

.usermenu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.usermenu-trigger:hover,
.usermenu-trigger[aria-expanded="true"] {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.usermenu-trigger:focus-visible {
  outline: 2px solid var(--signal-blue-soft);
  outline-offset: 1px;
}

.usermenu-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.usermenu-label {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usermenu-caret {
  width: 10px;
  height: 6px;
  flex: 0 0 auto;
  opacity: 0.75;
}

.usermenu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.usermenu-panel[hidden] {
  display: none;
}

.usermenu-email {
  margin: 0;
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--fs-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usermenu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  cursor: pointer;
}

.usermenu-item:hover:not(:disabled) {
  background: var(--bg-card);
  color: var(--text-primary);
}

.usermenu-item:focus-visible {
  outline: 2px solid var(--signal-blue-soft);
  outline-offset: 1px;
}

.usermenu-item[aria-current="page"] {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.usermenu-item:disabled {
  color: var(--text-disabled);
  cursor: default;
}

.usermenu-item-quiet {
  margin-top: 2px;
  color: var(--text-muted);
}

.usermenu-soon {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-disabled);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-label);
  font-weight: 600;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: none;
  padding: 22px 24px;
}

.hero {
  background: var(--bg-card-selected);
}

.decision-panel {
  border-color: rgba(122, 167, 255, 0.28);
  background: var(--bg-card-selected);
}

.onboarding-panel {
  display: grid;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}

.panel-copy {
  display: grid;
  gap: 16px;
}

.panel-copy h2,
.panel h2,
.panel h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.panel-copy h2 {
  font-size: clamp(2rem, 3vw, 2.5rem);
}

.panel h2 {
  font-size: 2rem;
}

.panel h3 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.panel p {
  margin: 0;
}

.muted {
  color: var(--text-secondary);
}

.revise-form,
.wizard-form,
.compact-form {
  display: grid;
  gap: 16px;
}

.revise-form label,
.wizard-form label {
  display: grid;
  gap: 8px;
}

.revise-form span,
.wizard-form span {
  color: var(--text-secondary);
  font-size: var(--fs-body);
  font-weight: 500;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text);
  padding: 11px 14px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--signal-blue-soft);
  border-color: var(--signal-blue);
}

.primary,
.ghost {
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  font-weight: 600;
}

.primary {
  background: var(--signal-blue-soft);
  color: var(--signal-blue);
  border-color: rgba(122, 167, 255, 0.28);
}

.primary:hover {
  background: rgba(122, 167, 255, 0.2);
  border-color: rgba(122, 167, 255, 0.45);
  transform: translateY(-1px);
}

.ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-medium);
}

.ghost:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.message {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: var(--fs-body);
}

.message.success {
  color: var(--success);
  background: var(--success-bg);
  border: 1px solid rgba(155, 229, 100, 0.28);
}

.message.error,
.error {
  color: var(--danger);
}

.message.error {
  background: var(--danger-bg);
  border: 1px solid rgba(255, 95, 87, 0.28);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.hero,
.wide {
  grid-column: span 12;
}

.grid > .panel:not(.hero):not(.wide) {
  grid-column: span 6;
}

.panel-heading,
.history-topline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.action-stack {
  display: grid;
  gap: 16px;
  margin-top: 20px;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.admin-inline-field {
  display: grid;
  gap: 8px;
  min-width: 280px;
}

.admin-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.admin-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-tabbar button.active {
  border-color: var(--text-primary);
  color: var(--text-primary);
  background: var(--surface-subtle);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.checkbox-row input {
  width: auto;
}

.admin-output {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--fs-body);
}

.route-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.onboarding-body {
  display: grid;
  gap: 16px;
}

.setup-help-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.setup-tooltip {
  max-width: 28rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.setup-tooltip summary {
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

.setup-tooltip p {
  margin: 0.65rem 0 0;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.telegram-link-layout {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.telegram-qr-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  color: #202020;
  text-align: center;
}

.telegram-qr-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.telegram-qr-card p,
.telegram-link-options p {
  margin: 0;
}

.telegram-link-options {
  display: grid;
  gap: 16px;
}

.telegram-link-status {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  color: var(--muted);
}

.telegram-link-status.success {
  color: var(--signal-green);
}

@media (max-width: 640px) {
  .telegram-link-layout {
    grid-template-columns: 1fr;
  }

  .telegram-qr-card {
    max-width: 240px;
  }
}

.step-card {
  display: grid;
  gap: 16px;
  padding: 20px;
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.method-card {
  display: grid;
  gap: 8px;
  text-align: left;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
}

.method-card.selected {
  border-color: var(--border-strong);
  background: var(--bg-card-selected);
}

.method-card strong {
  font-size: 1rem;
}

.method-card span {
  color: var(--text-secondary);
  font-size: var(--fs-body);
}

.inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.template-preview {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  padding: 14px 16px;
}

.template-preview summary {
  cursor: pointer;
  font-weight: 600;
}

.template-preview pre {
  margin: 16px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-secondary);
  font-size: var(--fs-body);
}

.session-list,
.history-list {
  display: grid;
  gap: 12px;
}

.session,
.history-item,
.summary-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.session strong,
.summary-item strong {
  display: block;
  margin-bottom: 6px;
}

.session strong {
  font-size: 1rem;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.summary-item strong {
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.summary-item span {
  display: block;
  line-height: 1.4;
  margin-top: 2px;
}

.history-item {
  display: grid;
  gap: 8px;
}

.history-diff {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
}

.history-diff li {
  margin-bottom: 4px;
}

.insight-engine-list {
  display: grid;
  gap: 12px;
}

.insight-engine-item {
  display: grid;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.insight-engine-item.ie-status-saved {
  border-color: var(--accent, #4f7cff);
}

.ie-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ie-summary {
  margin: 0;
  line-height: 1.45;
}

.ie-sowhat {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.45;
}

.ie-sowhat-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 6px;
}

.ie-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ie-actions {
  display: flex;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-proposed {
  color: var(--signal-blue);
  background: var(--signal-blue-soft);
  border: 1px solid rgba(122, 167, 255, 0.28);
}

.badge-approved,
.badge-uploaded {
  color: var(--signal-green);
  background: var(--signal-green-soft);
  border: 1px solid rgba(155, 229, 100, 0.28);
}

.badge-superseded {
  color: var(--signal-amber);
  background: var(--signal-amber-soft);
  border: 1px solid rgba(245, 167, 66, 0.28);
}

.badge-neutral {
  color: var(--text-secondary);
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
}

.badge-error {
  color: var(--signal-red);
  background: var(--signal-red-soft);
  border: 1px solid rgba(255, 95, 87, 0.28);
}

.empty-state {
  color: var(--text-muted);
  background: transparent;
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: var(--fs-small);
}

#blockView {
  gap: 16px;
}

#blockActionRow {
  margin-top: 18px;
}

#dashboardBlockLink {
  margin-top: 16px;
}

#blockPlannerPanel fieldset {
  min-width: 0;
  margin: 0;
}

#blockPlannerPanel legend,
#blockPlannerPanel .field-label {
  color: var(--text-secondary);
  font-size: var(--fs-body);
  font-weight: 600;
}

#blockPlannerPanel details > summary {
  cursor: pointer;
  color: var(--text-primary);
}

#blockWarningsBox .message {
  margin-top: 10px;
}

#blockGuardrailsPanel h4 {
  margin: 20px 0 10px;
  color: var(--text-secondary);
}

.block-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.block-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  text-align: left;
}

.block-table th,
.block-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.block-table th {
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.block-row-current {
  background: var(--signal-blue-soft);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#blockView .panel-disclosure > summary {
  cursor: pointer;
  list-style: none;
}

#blockView .muted-list {
  margin: 8px 0 0;
  padding-left: 20px;
  color: var(--text-secondary);
}

/* ---------- Admin surface: clean, minimal, dark ---------- */

#adminView {
  /* Map the admin-local tokens onto the shared dark palette */
  --a-bg: var(--bg-app);
  --a-surface: var(--bg-panel);
  --a-surface-2: var(--bg-card);
  --a-surface-3: var(--bg-card-hover);
  --a-border: var(--border-subtle);
  --a-border-strong: var(--border-medium);
  --a-text: var(--text-primary);
  --a-text-2: var(--text-secondary);
  --a-muted: var(--text-muted);
  --a-accent: var(--signal-blue);
  --a-danger: var(--signal-red);
  --a-warn: var(--signal-amber);
  --a-success: var(--signal-green);
  gap: 16px;
  color: var(--a-text);
}

/* Same ledger language as the dashboard: sections are a label, a hairline and
   content. The console was three levels of box deep — page, panel, and then a
   card per key/value pair. */
#adminView .panel {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 10px 0 0;
  color: var(--a-text);
}

#adminView .panel.hero {
  background: none;
  padding: 0;
}

#adminView .panel.hero h2 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--a-text);
}

#adminView .panel h3 {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0;
  color: var(--a-text-2);
}

#adminView .muted,
#adminView .panel p,
#adminView .panel p.muted {
  color: var(--a-text-2);
}

#adminView .eyebrow {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--a-muted);
  font-weight: 600;
  margin-bottom: 0;
}

/* Category and section name read as one label rather than two stacked lines. */
#adminView .panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--a-border);
}
/* Grid, not flex-wrap: this div is an auto-width flex item, so a percentage
   flex-basis on the description resolves against an indefinite size and never
   forces its own line. */
#adminView .panel-heading > div:first-child {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 8px;
  min-width: 0;
}
/* Some headings carry a description. It belongs under the label, not beside it. */
#adminView .panel-heading > div:first-child > p:not(.eyebrow) {
  grid-column: 1 / -1;
  margin: 7px 0 0;
  max-width: 74ch;
  font-size: var(--fs-small);
  line-height: 1.5;
}
#adminView .panel-heading .eyebrow::after {
  content: "\203A";
  margin-left: 8px;
  opacity: 0.55;
}

/* Tabbar: underline tabs */
#adminView .admin-tabbar {
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--a-border);
  flex-wrap: wrap;
}

#adminView .admin-tabbar button.ghost {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 9px 14px;
  color: var(--a-muted);
  font-weight: 500;
  font-size: var(--fs-small);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 140ms ease, border-color 140ms ease;
}

#adminView .admin-tabbar button.ghost:hover {
  background: transparent;
  color: var(--a-text);
}

#adminView .admin-tabbar button.active {
  color: var(--a-text);
  background: transparent;
  border-bottom-color: var(--a-accent);
  font-weight: 600;
}

/* Operator command cards */
/* align-items: start — stretched rows left a third of each card empty just to
   line the bottoms up. */
#adminView .admin-actions-grid {
  gap: 14px 16px;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* These stay grouped — they are forms, and a grid of forms needs an edge — but
   one hairline is enough; the fill made them read as another card layer. */
#adminView .step-card {
  background: none;
  border: 1px solid var(--a-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  gap: 10px;
  transition: border-color 140ms ease;
}

#adminView .step-card:hover {
  border-color: var(--a-border-strong);
  background: none;
}

/* In a grid card a button stretches edge-to-edge and reads as a banner. */
#adminView .step-card .primary,
#adminView .step-card .ghost {
  justify-self: start;
}

#adminView .step-card strong {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-muted);
  font-weight: 600;
}

/* Inputs */
#adminView input,
#adminView textarea,
#adminView select {
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: var(--fs-body);
  background: var(--a-surface-3);
  border: 1px solid var(--a-border-strong);
  color: var(--a-text);
  transition: border-color 140ms ease, outline-color 140ms ease;
}

#adminView input::placeholder,
#adminView textarea::placeholder {
  color: var(--a-muted);
}

#adminView input:focus,
#adminView textarea:focus,
#adminView select:focus {
  outline: 2px solid var(--signal-blue-soft);
  border-color: var(--a-accent);
}

/* Most inputs here carry no explicit type, so match on what they are not. */
#adminView input:not([type="checkbox"]):not([type="radio"]),
#adminView select { max-width: 380px; }

#adminView label > span {
  font-size: var(--fs-small);
  color: var(--a-muted);
  font-weight: 500;
}

/* Buttons */
#adminView .primary,
#adminView .ghost {
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: var(--fs-small);
  font-weight: 500;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
  cursor: pointer;
}

/* Primary: restrained, signal-blue accent (status colours stay reserved for status) */
#adminView .primary {
  background: var(--signal-blue-soft);
  color: var(--a-accent);
  border: 1px solid rgba(122, 167, 255, 0.28);
}

#adminView .primary:hover {
  background: rgba(122, 167, 255, 0.2);
  border-color: rgba(122, 167, 255, 0.45);
  transform: none;
}

#adminView .ghost {
  background: transparent;
  border: 1px solid var(--a-border-strong);
  color: var(--a-text-2);
}

#adminView .ghost:hover {
  background: var(--a-surface-3);
  border-color: var(--border-strong);
  color: var(--a-text);
}

/* === Compact list / table rows === */
#adminView .history-list,
#adminView .session-list {
  gap: 0;
  display: block;
  border: none;
  border-radius: 0;
}

#adminView .history-list.empty-state,
#adminView .session-list.empty-state {
  display: block;
  border-style: dashed;
  border-color: var(--a-border-strong);
  background: transparent;
  color: var(--a-muted);
  padding: 16px;
  font-size: var(--fs-body);
}

#adminView .history-item,
#adminView .session {
  background: none;
  border: none;
  border-bottom: 1px solid var(--a-border);
  border-radius: 0;
  padding: 11px 8px;
  font-size: var(--fs-small);
  display: grid;
  gap: 3px;
  transition: background-color 120ms ease;
}

#adminView .history-item:last-child,
#adminView .session:last-child {
  border-bottom: none;
}

#adminView .history-item:hover {
  background: var(--a-surface-3);
}

#adminView .history-item strong {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--a-text);
  margin: 0;
}

#adminView .history-item .muted {
  font-size: var(--fs-small);
  color: var(--a-text-2);
}

#adminView .history-topline {
  align-items: center;
  gap: 10px;
}

#adminView .history-topline strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#adminView .route-actions {
  gap: 8px;
}

#adminView .route-actions .ghost {
  padding: 4px 10px;
  font-size: var(--fs-small);
}

/* Empty states */
#adminView .empty-state {
  background: transparent;
  border-style: dashed;
  border-color: var(--a-border-strong);
  color: var(--a-muted);
  padding: 16px;
  font-size: var(--fs-body);
  border-radius: var(--radius-sm);
}

/* Key/value pairs are figures, not cards — a 20-character value did not need
   its own bordered box. */
#adminView .summary-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
}

#adminView .summary-item {
  flex: 1 1 135px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

#adminView .summary-item strong {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--a-muted);
  text-transform: uppercase;
  font-weight: 600;
}

#adminView .summary-item span {
  font-family: var(--font-data);
  font-size: var(--fs-small);
  color: var(--a-text);
  margin-top: 0;
  overflow-wrap: anywhere;
}

/* Badges: soft signal fills with a hairline border */
#adminView .badge {
  font-size: var(--fs-label);
  min-height: 20px;
  padding: 3px 9px;
  letter-spacing: 0.06em;
  font-weight: 600;
  border-radius: 999px;
}

#adminView .badge-neutral {
  background: var(--a-surface-3);
  color: var(--a-text-2);
  border: 1px solid var(--a-border);
}

#adminView .badge-proposed {
  background: var(--signal-blue-soft);
  color: var(--a-accent);
  border: 1px solid rgba(122, 167, 255, 0.28);
}

#adminView .badge-approved,
#adminView .badge-uploaded {
  background: var(--signal-green-soft);
  color: var(--a-success);
  border: 1px solid rgba(155, 229, 100, 0.28);
}

#adminView .badge-superseded {
  background: var(--signal-amber-soft);
  color: var(--a-warn);
  border: 1px solid rgba(245, 167, 66, 0.28);
}

/* Output block */
#adminView .admin-output {
  background: var(--a-bg);
  border: 1px solid var(--a-border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: var(--fs-small);
  color: var(--a-text-2);
  max-height: 360px;
  overflow: auto;
}

#adminView .checkbox-row span {
  font-size: var(--fs-small);
  color: var(--a-text);
}

#adminView .action-row {
  gap: 10px;
}

/* Messages inside admin */
#adminView .message {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: var(--fs-small);
}

#adminView .message.success {
  background: var(--signal-green-soft);
  border: 1px solid rgba(155, 229, 100, 0.28);
  color: var(--a-success);
}

#adminView .message.error {
  background: var(--signal-red-soft);
  border: 1px solid rgba(255, 95, 87, 0.28);
  color: var(--a-danger);
}

/* Inline athlete picker */
#adminView .admin-inline-field {
  min-width: 220px;
}

/* Compact tables for the high-density lists */
#adminView .admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  background: none;
  border: none;
  border-radius: 0;
  display: table;
}

#adminView .admin-table thead th {
  text-align: left;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-muted);
  font-weight: 600;
  padding: 9px 12px 9px 8px;
  background: none;
  border-bottom: 1px solid var(--a-border);
}

#adminView .admin-table tbody td {
  padding: 9px 12px 9px 8px;
  border-bottom: 1px solid var(--a-border);
  color: var(--a-text);
  vertical-align: middle;
}

#adminView .admin-table tbody tr:last-child td {
  border-bottom: none;
}

#adminView .admin-table tbody tr:hover td {
  background: var(--a-surface-3);
}

#adminView .admin-table td.num,
#adminView .admin-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#adminView .admin-table td.muted {
  color: var(--a-text-2);
  font-size: var(--fs-small);
}

#adminView .admin-table .row-actions {
  text-align: right;
  white-space: nowrap;
}

#adminView .admin-table .row-actions .ghost {
  padding: 3px 10px;
  font-size: var(--fs-micro);
}

#adminView .admin-table-wrap {
  overflow-x: auto;
}

#adminView .admin-table-summary {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 4px 14px;
  font-size: var(--fs-small);
  color: var(--a-text-2);
}

#adminView .admin-table-summary strong {
  color: var(--a-text);
  font-weight: 600;
  margin-right: 4px;
}

/* Roster: keep open button visible */
#adminView .roster-name {
  font-weight: 600;
  color: var(--a-text);
}

#adminView .log-level {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
}

#adminView .log-level.info { color: var(--a-text-2); }
#adminView .log-level.warn,
#adminView .log-level.warning { color: var(--a-warn); }
#adminView .log-level.error { color: var(--a-danger); }
#adminView .log-level.debug { color: var(--a-muted); }

#adminView .log-ts {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--fs-micro);
  color: var(--a-text-2);
  white-space: nowrap;
}

#adminView .log-source {
  font-size: var(--fs-micro);
  color: var(--a-text-2);
  white-space: nowrap;
}

#adminView .log-message {
  color: var(--a-text);
}

@media (max-width: 1100px) {
  #adminView .admin-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #adminView .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .method-grid,
  .admin-actions-grid,
  .inline-grid {
    grid-template-columns: 1fr;
  }

  .grid > .panel:not(.hero):not(.wide) {
    grid-column: span 12;
  }
}

/* Narrow viewports: brand + account on row one, nav scrolls on row two */
@media (max-width: 860px) {
  .topbar {
    gap: 6px 12px;
    padding: 10px 16px;
  }

  .topbar-nav {
    order: 3;
    flex: 1 0 100%;
    gap: 4px;
    /* ponytail: horizontal scroll instead of a drawer; add the drawer above ~6 items */
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .workspace {
    padding: 22px 18px 48px;
  }
}

@media (max-width: 520px) {
  .brand-copy .eyebrow {
    display: none;
  }

  .usermenu-label {
    display: none;
  }

  .usermenu-trigger {
    padding: 5px 8px 5px 5px;
  }

  .usermenu-panel {
    min-width: min(260px, calc(100vw - 32px));
  }
}

@media (max-width: 640px) {
  .brand h1 {
    font-size: 1.05rem;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-row,
  .history-topline,
  .panel-heading {
    flex-direction: column;
    align-items: start;
  }

  .primary,
  .ghost {
    width: 100%;
  }
}

/* Collapsible secondary panels (reference data) */
#adminView .panel-disclosure > summary {
  list-style: none;
  cursor: pointer;
  align-items: center;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
#adminView .panel-disclosure > summary::-webkit-details-marker { display: none; }
#adminView .panel-disclosure > summary::after {
  content: "\27E9";
  color: var(--text-muted);
  font-size: var(--fs-small);
  transition: transform 140ms ease;
}
#adminView .panel-disclosure[open] > summary::after { transform: rotate(90deg); }
#adminView .panel-disclosure[open] > summary {
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--a-border);
}
#adminView .panel-disclosure > summary .muted { font-size: var(--fs-micro); }

/* ----- Triage feed (observability landing) ----- */
#adminView .triage { display: block; }
#adminView .triage-verdict {
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  padding: 16px 18px;
  margin-bottom: 16px;
}
#adminView .triage-verdict-text { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); }
#adminView .triage-verdict-ctx { font-size: var(--fs-small); color: var(--text-muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
#adminView .triage-verdict.sev-ok { border-left-color: var(--signal-green); }
#adminView .triage-verdict.sev-ok .triage-verdict-text { color: var(--signal-green); }
#adminView .triage-verdict.sev-error { border-left-color: var(--signal-red); background: var(--signal-red-soft); }
#adminView .triage-verdict.sev-error .triage-verdict-text { color: var(--signal-red); }
#adminView .triage-verdict.sev-warn { border-left-color: var(--signal-amber); background: var(--signal-amber-soft); }
#adminView .triage-verdict.sev-warn .triage-verdict-text { color: var(--signal-amber); }
#adminView .triage-verdict.sev-info { border-left-color: var(--signal-blue); }

/* "What this was / What JeZR did" facts under the verdict headline. */
#adminView .verdict-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 12px;
}
#adminView .verdict-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#adminView .verdict-fact .vf-label {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}
#adminView .verdict-fact .vf-value { font-size: var(--fs-body); color: var(--text-primary); }
#adminView .triage-verdict-action {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-subtle);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.5;
}
#adminView .vf-action-label {
  display: inline-block;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--signal-blue);
  margin-right: 6px;
}

/* Plain-English decision/shadow interpretation inside the detail drawer. */
#adminView .decision-insight {
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-app);
  padding: 12px 14px;
  margin: 0 0 14px;
}
#adminView .decision-insight.sev-warn { border-left-color: var(--signal-amber); background: var(--signal-amber-soft); }
#adminView .decision-insight.sev-ok { border-left-color: var(--signal-green); }
#adminView .decision-insight.sev-info { border-left-color: var(--signal-blue); }
#adminView .insight-headline { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); margin-bottom: 10px; }
#adminView .insight-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
#adminView .insight-line {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 10px;
  row-gap: 1px;
  align-items: baseline;
}
#adminView .insight-line-label {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}
#adminView .insight-line-value { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
#adminView .insight-line-gloss { grid-column: 2; font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.4; }
#adminView .insight-why { margin: 0 0 8px; font-size: var(--fs-small); color: var(--text-secondary); line-height: 1.5; }
#adminView .insight-action {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.5;
}

#adminView .triage-list { display: flex; flex-direction: column; gap: 8px; }
#adminView .triage-item {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
#adminView .triage-dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; background: var(--text-muted); }
#adminView .triage-item.sev-error .triage-dot { background: var(--signal-red); }
#adminView .triage-item.sev-warn .triage-dot { background: var(--signal-amber); }
#adminView .triage-item.sev-info .triage-dot { background: var(--signal-blue); }
#adminView .triage-head { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
#adminView .triage-so { font-size: var(--fs-small); color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
#adminView .triage-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
#adminView .triage-when { font-size: var(--fs-micro); color: var(--text-muted); }
#adminView .triage-aside .ghost { padding: 4px 10px; font-size: var(--fs-micro); }
#adminView .triage-allclear { padding: 14px; color: var(--text-muted); font-size: var(--fs-body); }

#adminView .triage-recent { margin-top: 16px; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
#adminView .triage-recent summary {
  cursor: pointer;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}
#adminView .triage-recent-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
#adminView .triage-recent-row:last-child { border-bottom: none; }

/* ----- Investigation console (dark, scoped to admin) ----- */
#adminView .investigation-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
#adminView .investigation-controls select,
#adminView .investigation-controls input,
#adminView .investigation-searchbar input {
  font: inherit;
}
#adminView .investigation-controls input { min-width: 280px; }
#adminView .investigation-searchbar {
  display: flex;
  gap: 0.5rem;
  margin: 0.8rem 0;
  align-items: center;
  position: relative;
}
#adminView .investigation-searchbar input { flex: 1; min-width: 240px; }
#adminView .investigation-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  max-height: 260px;
  overflow-y: auto;
  z-index: 10;
  display: none;
  box-shadow: var(--shadow-panel);
}
#adminView .investigation-search-results.visible { display: block; }
#adminView .investigation-search-results .row {
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
}
#adminView .investigation-search-results .row:last-child { border-bottom: none; }
#adminView .investigation-search-results .row:hover { background: var(--bg-card-hover); }
#adminView .investigation-search-results .row .label { font-weight: 500; color: var(--text-primary); }
#adminView .investigation-search-results .row .subtitle { font-size: var(--fs-small); color: var(--text-muted); }

/* Shared status chips (pathway markers + drawer header) */
#adminView .chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: var(--fs-label);
  background: var(--bg-card-hover);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
#adminView .chip.status-present  { background: var(--signal-green-soft); color: var(--signal-green); }
#adminView .chip.status-missing  { background: var(--bg-card-hover); color: var(--text-muted); }
#adminView .chip.status-skipped  { background: var(--signal-blue-soft); color: var(--signal-blue); }
#adminView .chip.status-failed   { background: var(--signal-red-soft); color: var(--signal-red); }
#adminView .chip.status-stale    { background: var(--signal-amber-soft); color: var(--signal-amber); }
#adminView .chip.status-inferred { background: rgba(176, 140, 255, 0.14); color: #b08cff; }
#adminView .chip.status-warning  { background: var(--signal-amber-soft); color: var(--signal-amber); }

/* Workspace: decision pathway (left) + collapsing detail drawer (right) */
#adminView .investigation-workspace {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 16px;
}
#adminView .investigation-pathway {
  flex: 1 1 auto;
  min-width: 0;
}

#adminView .pathway-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
#adminView .pathway-title {
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
}
#adminView .pathway-counts {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
#adminView .pathway-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
#adminView .pathway-toggle {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: var(--fs-micro);
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}
#adminView .pathway-toggle:hover { border-color: var(--border-strong); color: var(--text-primary); }
#adminView .pathway-step.decisive {
  background: var(--bg-card-selected);
  border-color: var(--border-medium);
}
#adminView .pathway-step.decisive .pathway-step-title::after {
  content: "decisive";
  margin-left: 8px;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  padding: 1px 6px;
  vertical-align: middle;
}

#adminView .pathway-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
#adminView .pathway-step {
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding: 10px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
#adminView .pathway-step:hover { background: var(--bg-card); }
#adminView .pathway-step.active {
  background: var(--bg-card-selected);
  border-color: var(--border-medium);
}
#adminView .pathway-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 24px;
}
#adminView .pathway-marker {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  font-weight: 600;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
}
#adminView .pathway-rail::after {
  content: "";
  width: 2px;
  flex: 1 1 auto;
  min-height: 8px;
  margin-top: 6px;
  background: var(--border-subtle);
  border-radius: 1px;
}
#adminView .pathway-step:last-child .pathway-rail::after { display: none; }
#adminView .pathway-step[data-status="present"] .pathway-marker { border-color: var(--signal-green); color: var(--signal-green); background: var(--signal-green-soft); }
#adminView .pathway-step[data-status="failed"] .pathway-marker  { border-color: var(--signal-red); color: var(--signal-red); background: var(--signal-red-soft); }
#adminView .pathway-step[data-status="warning"] .pathway-marker,
#adminView .pathway-step[data-status="stale"] .pathway-marker   { border-color: var(--signal-amber); color: var(--signal-amber); background: var(--signal-amber-soft); }
#adminView .pathway-step[data-status="skipped"] .pathway-marker { border-color: var(--signal-blue); color: var(--signal-blue); background: var(--signal-blue-soft); }
#adminView .pathway-step[data-status="missing"] .pathway-marker { border-style: dashed; color: var(--text-muted); }
#adminView .pathway-step[data-status="inferred"] .pathway-marker { border-color: #b08cff; color: #b08cff; background: rgba(176, 140, 255, 0.14); }
#adminView .pathway-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 6px;
  min-width: 0;
}
#adminView .pathway-step-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-primary);
}
#adminView .pathway-step-meta {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Stage-grouped pathway (rolls up 100+ raw steps into a handful of stages) */
#adminView .pathway-stage { list-style: none; }
#adminView .stage-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding: 10px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background-color 120ms ease, border-color 120ms ease;
}
#adminView .stage-row:hover { background: var(--bg-card); }
#adminView .stage-row[data-empty] { cursor: default; }
#adminView .stage-row[data-empty]:hover { background: transparent; }
#adminView .pathway-stage.decisive > .stage-row {
  background: var(--bg-card-selected);
  border-color: var(--border-medium);
}
#adminView .stage-caret { color: var(--text-muted); font-size: var(--fs-small); align-self: center; }
#adminView .pathway-stage[data-status="present"] .pathway-marker { border-color: var(--signal-green); color: var(--signal-green); background: var(--signal-green-soft); }
#adminView .pathway-stage[data-status="failed"] .pathway-marker  { border-color: var(--signal-red); color: var(--signal-red); background: var(--signal-red-soft); }
#adminView .pathway-stage[data-status="warning"] .pathway-marker,
#adminView .pathway-stage[data-status="stale"] .pathway-marker   { border-color: var(--signal-amber); color: var(--signal-amber); background: var(--signal-amber-soft); }
#adminView .pathway-stage[data-status="skipped"] .pathway-marker { border-color: var(--signal-blue); color: var(--signal-blue); background: var(--signal-blue-soft); }
#adminView .pathway-stage[data-status="missing"] .pathway-marker { border-style: dashed; color: var(--text-muted); }
#adminView .pathway-stage[data-status="inferred"] .pathway-marker { border-color: #b08cff; color: #b08cff; background: rgba(176, 140, 255, 0.14); }
#adminView .pathway-stage:last-child .pathway-rail::after { display: none; }

#adminView .pathway-substeps {
  list-style: none;
  margin: 0 0 4px 0;
  padding: 0 0 0 46px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#adminView .pathway-substep {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
#adminView .pathway-substep:hover { background: var(--bg-card); }
#adminView .pathway-substep.active { background: var(--bg-card-selected); border-color: var(--border-medium); }
#adminView .substep-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--text-muted); flex: 0 0 auto; }
#adminView .pathway-substep[data-status="failed"] .substep-dot { background: var(--signal-red); }
#adminView .pathway-substep[data-status="warning"] .substep-dot,
#adminView .pathway-substep[data-status="stale"] .substep-dot { background: var(--signal-amber); }
#adminView .pathway-substep[data-status="present"] .substep-dot { background: var(--signal-green); }
#adminView .pathway-substep[data-status="skipped"] .substep-dot { background: var(--signal-blue); }
#adminView .pathway-substep[data-status="inferred"] .substep-dot { background: #b08cff; }
#adminView .substep-title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#adminView .pathway-substep.active .substep-title { color: var(--text-primary); }
#adminView .pathway-substep.decisive .substep-title { font-weight: 600; }

#adminView .pathway-signals {
  margin-top: 16px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}
#adminView .pathway-signals summary {
  cursor: pointer;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}
#adminView .pathway-signals h4 {
  margin: 0.8rem 0 0.3rem;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}
#adminView .pathway-signals .muted-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: var(--fs-small);
}
#adminView .pathway-signals .muted-list li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

/* Collapsing detail drawer */
#adminView .investigation-drawer {
  position: sticky;
  top: 16px;
  align-self: flex-start;
  flex: 0 0 440px;
  min-height: 300px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: flex-basis 160ms ease;
}
#adminView .investigation-drawer.collapsed { flex-basis: 44px; }
#adminView .drawer-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-medium);
  background: var(--bg-card-hover);
  color: var(--text-secondary);
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-small);
  line-height: 1;
}
#adminView .drawer-toggle:hover { border-color: var(--border-strong); color: var(--text-primary); }
#adminView .drawer-toggle::before { content: "\27E9"; }
#adminView .investigation-drawer.collapsed .drawer-toggle::before { content: "\27E8"; }
#adminView .investigation-drawer.collapsed .drawer-inner { display: none; }
#adminView .drawer-inner { padding: 16px; }
#adminView .drawer-empty { padding: 8px 0; }

#adminView .drawer-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 32px 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}
#adminView .drawer-header .chip { align-self: flex-start; }
#adminView .drawer-header h4 { margin: 0; font-size: 1.05rem; color: var(--text-primary); }
#adminView .drawer-header p { margin: 0; font-size: var(--fs-micro); }

#adminView .drawer-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 14px;
}
#adminView .drawer-tab.ghost {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 7px 11px;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
#adminView .drawer-tab.ghost:hover { background: transparent; color: var(--text-primary); }
#adminView .drawer-tab.ghost.active {
  color: var(--text-primary);
  border-bottom-color: var(--signal-blue);
  font-weight: 600;
}

#adminView .drawer-panel { display: none; }
#adminView .drawer-panel.active { display: block; }
#adminView .drawer-summary { margin: 0 0 10px; color: var(--text-secondary); line-height: 1.5; }
#adminView .drawer-notes p { margin: 0 0 6px; color: var(--text-muted); font-size: var(--fs-small); }

#adminView .drawer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
#adminView .drawer-link {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: var(--fs-micro);
  cursor: pointer;
}
#adminView .drawer-link:hover { border-color: var(--signal-blue); color: var(--signal-blue); }

#adminView .keys {
  font-size: var(--fs-small);
  background: var(--bg-app);
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.8rem;
  row-gap: 0.3rem;
  margin: 0;
}
#adminView .keys dt { color: var(--text-muted); }
#adminView .keys dd { margin: 0; word-break: break-word; color: var(--text-primary); }

#adminView .raw-body {
  margin: 0;
  padding: 0.7rem;
  background: var(--bg-app);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-micro);
  max-height: 400px;
  overflow: auto;
  white-space: pre;
}

#adminView .drawer-footer {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
#adminView .drawer-footer .ghost {
  font-size: var(--fs-micro);
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#adminView .state-diff-row {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  margin-bottom: 0.4rem;
  background: var(--bg-app);
  font-size: var(--fs-small);
}
#adminView .state-diff-row .path { font-weight: 600; word-break: break-word; color: var(--text-primary); }
#adminView .state-diff-row .delta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.3rem;
  margin-top: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-micro);
}
#adminView .state-diff-row .delta .before { color: var(--signal-red); }
#adminView .state-diff-row .delta .after  { color: var(--signal-green); }
#adminView .state-diff-row .meta { color: var(--text-muted); font-size: var(--fs-micro); margin-top: var(--fs-label); }

@media (max-width: 980px) {
  #adminView .investigation-workspace { flex-direction: column; }
  #adminView .investigation-drawer { flex-basis: auto; width: 100%; }
  #adminView .investigation-drawer.collapsed { flex-basis: auto; }
}

/* ----- Embedded Superset dashboards ----- */
#adminView .superset-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#adminView .superset-scope { margin: 0; }
#adminView #supersetEmbedStatus { margin: 12px 0; }
#adminView #supersetEmbedStatus code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-small);
  background: var(--bg-app);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 5px;
}
#adminView .superset-embed-mount {
  width: 100%;
  min-height: 720px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-app);
  overflow: hidden;
}
#adminView .superset-embed-mount:empty { min-height: 0; border: none; background: transparent; }
#adminView .superset-embed-mount iframe { width: 100%; height: 100%; min-height: 720px; border: 0; display: block; }

/* ============================================================
   Athlete dashboard — coach's ledger (Direction B)
   Hierarchy from type + hairline rules, not boxes. Running data
   in tabular mono. Colour = training state only. See the
   reusable workout-shape marker (.wk) fed by renderWorkoutShape.
   ============================================================ */
#athleteDashboard.dash {
  display: block;
  max-width: var(--measure-data);
  margin-inline: auto;
}

#athleteDashboard .rail {
  width: 100%;
  max-width: var(--measure-read);
  margin-inline: auto;
}

#athleteDashboard .rail-wide {
  width: 100%;
  max-width: var(--measure-data);
  margin-inline: auto;
}

/* Goal bar */
.goal {
  padding: 22px 0 20px;
  border-bottom: 1px solid var(--border-subtle);
  width: 100%;
  max-width: var(--measure-read);
  margin-inline: auto;
}
.goal h2 {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-wrap: balance;
}
.goal .meta {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 7px;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.goal .meta i { font-style: normal; color: var(--text-muted); }
.goal .cd { color: var(--attn); font-family: var(--font-data); }
.needs {
  margin-top: 15px;
  background: var(--attn-soft);
  border: 1px solid var(--attn);
  border-radius: 10px;
  padding: 12px 15px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.needs p { margin: 0; font-size: var(--fs-small); }
/* The decision surface the "Review" button opens. Continues the attention
   band above it rather than becoming a second card. */
.needs-panel {
  margin-top: -1px;
  background: var(--bg-card);
  border: 1px solid var(--attn);
  border-top-color: var(--border-medium);
  border-radius: 0 0 10px 10px;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.needs-panel-summary {
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}
.needs-panel .action-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.needs button {
  background: var(--attn);
  border: 0;
  color: #fff;
  font: inherit;
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

/* Next Up is the dashboard's one raised element. */
.next {
  background: var(--bg-card);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 19px 21px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.next .when {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--attn);
}
.next h3 { font-size: var(--fs-figure); font-weight: 600; margin: 5px 0 0; }
.next .why { font-size: var(--fs-small); color: var(--text-secondary); margin: 6px 0 0; }
.next .grow { flex: 1; min-width: 0; }
.next .wk { width: 150px; height: 34px; margin-top: 0; }

.dash-masthead {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-medium);
  margin-bottom: 20px;
}
.dash-masthead .eyebrow { margin-bottom: 7px; }
.dash-masthead h2 {
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
}
.dash-mast-name { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mast-name-edit {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  border-bottom: 1px dashed transparent;
}
.mast-name-edit:hover,
.mast-name-edit:focus-visible { border-bottom-color: var(--border-medium); }
.mast-name-hint {
  font-family: var(--font-data);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--signal-amber);
  cursor: pointer;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}
.mast-name-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mast-name-form input {
  font-size: 1.2rem;
  padding: 6px 10px;
  min-width: min(320px, 100%);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.dash-mast-line {
  font-family: var(--font-data);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin: 9px 0 0;
  font-variant-numeric: tabular-nums;
}

/* Explicit track widths, not content-sized flex items: the fields have known
   and very different content shapes, and the row must not reflow when the
   alignment figure changes value. */
.dash-context {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto auto minmax(0, 1.4fr) auto;
  gap: 18px 26px;
  align-items: start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-subtle);
}
/* Dates, times and week counts are atomic: never break them mid-value. The two
   prose columns (goal name, alignment) absorb the slack instead. */
.fig-datum { white-space: nowrap; }
.fig { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fig .k {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.fig .v {
  font-family: var(--font-data);
  font-size: var(--fs-figure);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
/* A paused or unavailable value is real content, not a headline number. */
.fig .v.v-muted { color: var(--text-secondary); font-size: var(--fs-body); }
/* Reserve the sub-label row on every figure so the value baselines line up
   whether or not a given field has supporting text. */
.fig .fig-sub { font-size: var(--fs-micro); min-height: 1.1em; line-height: 1.35; }
.fig .v .dot { width: 7px; height: 7px; border-radius: 9px; flex: 0 0 auto; }
.dot.go { background: var(--signal-green); }
.dot.warn { background: var(--signal-amber); }
.dot.attn { background: var(--attn); }
.dot.neutral { background: var(--text-muted); }
/* Sits on the value row, not the middle of a variable-height row, so the
   action lines up with the figures rather than floating against them. */
.fig-action { display: flex; align-items: center; gap: 6px; justify-self: end; padding-top: 14px; }
/* The plan-status badge belongs on this line, not orphaned under it. */
.dash-context-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 10px 0 0;
  color: var(--text-muted);
  font-family: var(--font-data);
  font-size: var(--fs-micro);
}
/* Inline on a metadata line, the standard 32px pill reads as a control. */
.dash-context-meta .badge {
  min-height: 0;
  padding: 3px 9px;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
}
.dash-linkbtn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  padding: 6px 2px;
}
.dash-linkbtn:hover { color: var(--text-primary); }

/* "View block" is the only action in a row of read-only figures, so it carries
   a border to read as a control rather than another value. */
.dash-chipbtn {
  background: none;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  padding: 7px 12px;
  white-space: nowrap;
}
.dash-chipbtn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.dash-help {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-medium);
  background: none;
  color: var(--text-muted);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.dash-help:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* Native popover: light-dismiss, Esc and focus handling come from the platform. */
.glossary {
  max-width: min(520px, calc(100vw - 32px));
  padding: 22px 24px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
}
.glossary::backdrop { background: rgba(0, 0, 0, 0.5); }
.glossary h3 { margin: 0 0 14px; font-size: var(--fs-body); color: var(--text-primary); }
.glossary dl { display: grid; gap: 16px; margin: 0 0 18px; }
.glossary dt {
  font-family: var(--font-data);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}
.glossary dd { margin: 0; font-size: var(--fs-small); line-height: 1.5; }
/* The "nothing is required of you" reassurance is its own beat, not a <br>. */
.glossary dd p { margin: 7px 0 0; }
.glossary strong { color: var(--text-primary); }

/* the one raised element: the decision that needs the athlete */
.dash-decide {
  position: relative;
  display: grid;
  gap: 12px;
  background: var(--bg-card-selected);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  padding: 16px 18px 16px 22px;
  margin: 22px 0 4px;
}
.dash-decide::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: var(--attn);
}
/* Nothing pending: the card is the loudest thing on the page and had nothing
   to say. Collapse it to one quiet line and give the accent back to the state
   that earns it. */
.dash-decide.is-idle {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 18px 0 0;
}
.dash-decide.is-idle::before { display: none; }
.dash-decide.is-idle .d-ey { color: var(--text-muted); }
.dash-decide.is-idle .dash-decide-head h3 {
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-secondary);
}
.dash-decide p:empty { display: none; }
.d-ey {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--attn);
  font-weight: 700;
  margin: 0;
}
.dash-decide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dash-decide-head h3 {
  font-size: var(--fs-figure);
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
}
/* The pending headline is a plan id — data, like every other figure. */
.dash-decide:not(.is-idle) .dash-decide-head h3 { font-family: var(--font-data); }
.dash-decide-actions { display: grid; gap: 14px; }
.cta {
  background: var(--text-primary);
  color: var(--bg-app);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font: inherit;
  font-weight: 650;
  font-size: var(--fs-body);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.cta:hover { transform: translateY(-1px); }
.cta:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* section = label + hairline + content (no card) */
.dash-sec { margin-top: 28px; }
.dash-two .dash-sec { margin-top: 0; }
.dash-sec-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.dash-sec-l {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.dash-sec-aside {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-family: var(--font-data);
}

/* the judgement layer remains part of the ledger: ruled disclosures, no card */
.coach-read { margin-top: 20px; }
.coach-read-lines { display: grid; }
.coach-read-line {
  border-bottom: 1px solid var(--border-subtle);
  border-left: 2px solid transparent;
}
.coach-read-line.tone-go { border-left-color: var(--signal-green); }
.coach-read-line.tone-warn { border-left-color: var(--signal-amber); }
.coach-read-line.tone-attn { border-left-color: var(--attn); }
.coach-read-line.state-shown,
.coach-read-line.state-withheld,
.coach-read-line.state-absent,
.coach-read-line.state-unavailable { border-left-color: transparent; }
.coach-read-line.state-contradicted { border-left: 2px solid var(--signal-amber); }
.coach-read-line.state-contradicted > summary i { background: var(--signal-amber); }
.coach-read-line > summary {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 13px 10px 13px 12px;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-body);
  line-height: 1.48;
}
.coach-read-line > summary::-webkit-details-marker { display: none; }
.coach-read-line > summary i {
  width: 6px;
  height: 6px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--text-muted);
}
.coach-read-line.tone-go > summary i { background: var(--signal-green); }
.coach-read-line.tone-warn > summary i { background: var(--signal-amber); }
.coach-read-line.tone-attn > summary i { background: var(--attn); }
.coach-read-line > summary b {
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.coach-read-line.state-shown > summary { color: var(--text-primary); }
.coach-read-line.state-withheld > summary,
.coach-read-line.state-absent > summary,
.coach-read-line.state-unavailable > summary { color: var(--text-secondary); }
.coach-read-resumes {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}
.coach-read-updated {
  margin: 11px 0 0;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}
.coach-read-line > summary:focus-visible,
.pc-row > summary:focus-visible,
.pc-more > summary:focus-visible,
.arc-coaching-review summary:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
}
.coach-read-receipt {
  display: grid;
  gap: 12px;
  padding: 2px 10px 15px 30px;
}
.coach-read-evidence { display: grid; gap: 8px; margin: 0; }
.coach-read-evidence > div {
  display: grid;
  grid-template-columns: minmax(125px, 0.34fr) minmax(0, 1fr);
  gap: 10px;
}
.coach-read-evidence dt,
.coach-read-evidence dd { margin: 0; }
.coach-read-evidence dt {
  color: var(--text-secondary);
  font-size: var(--fs-micro);
}
.coach-read-evidence dt small { display: block; font: var(--fs-label) var(--font-data); }
.coach-read-evidence dd {
  color: var(--text-secondary);
  font: var(--fs-micro)/1.45 var(--font-data);
}
.coach-read-evidence dd.quoted { font-family: inherit; }
.coach-read-evidence dd span {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: var(--fs-label);
}
.coach-read-watch {
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}
.coach-read-watch > strong { display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: var(--fs-small); }
.coach-read-no-evidence { margin: 0; color: var(--text-secondary); font-size: var(--fs-micro); }
.coach-read .dash-sec-aside { color: var(--text-secondary); }

/* training concerns — ruled disclosures, same ledger grammar as the read.
   Status is carried by a written label; colour only reinforces it. */
.concerns { margin-top: 20px; }
.concern-groups { display: grid; }
.concern-group { border-bottom: 1px solid var(--border-subtle); }
.concern-group > summary {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 10px;
  cursor: pointer;
  list-style: none;
}
.concern-group > summary::-webkit-details-marker { display: none; }
.concern-group > summary::before {
  content: "";
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: var(--text-muted);
  transition: transform 120ms ease;
}
.concern-group[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.concern-group > summary:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
}
.concern-group-l {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-secondary);
}
.concern-group.group-constraint .concern-group-l { color: var(--attn); }
.concern-group-n {
  font: var(--fs-micro) var(--font-data);
  color: var(--text-muted);
}
.concern-group-note {
  margin: 0 10px 10px;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}
.concern-cards {
  display: grid;
  gap: 10px;
  padding: 0 10px 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.concern-card {
  padding: 12px 13px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}
.concern-card.impact-constraint { border-left-color: var(--attn); background: var(--attn-soft); }
.concern-card.impact-awareness { border-left-color: var(--signal-amber); }
.concern-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.concern-head h3 { margin: 0; font-size: var(--fs-figure); color: var(--text-primary); }
.concern-status {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.concern-impact {
  margin: 7px 0 0;
  font: var(--fs-micro)/1.45 var(--font-data);
  color: var(--text-secondary);
}
.concern-impact span { color: var(--text-muted); }
.impact-constraint .concern-impact { color: var(--attn); }
.concern-when {
  margin: 3px 0 0;
  font: var(--fs-micro)/1.45 var(--font-data);
  color: var(--text-muted);
}
.concern-explanation {
  margin: 9px 0 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-secondary);
}
/* Dashboard callout: one or more currently-affecting concerns, prominent but
   not the full concern-card component (no actions/details — those live in
   Profile). Zero height entirely when hidden; see renderConcernCallout. */
.concern-callout-item {
  padding: 12px 13px;
  margin-bottom: 10px;
  background: var(--attn-soft);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--attn);
  border-radius: var(--radius-sm);
}
.concern-callout-item:last-child { margin-bottom: 0; }
.concern-callout-item h3 { margin: 0; font-size: var(--fs-figure); color: var(--text-primary); }
.concern-callout-item p { margin: 7px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-secondary); }
.concern-callout-item .concern-impact { color: var(--attn); }
.concern-callout-item .concern-impact span { color: var(--text-muted); }
.concern-help,
.concern-related,
.concern-review {
  margin: 6px 0 0;
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--text-muted);
}
.concern-source {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border-subtle);
}
.concern-source p {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}
.concern-source blockquote {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-small);
  line-height: 1.45;
}
.concern-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.open-proposals {
  display: grid;
  gap: 10px;
}
.open-proposal {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}
.open-proposal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.open-proposal p {
  margin: 5px 0 10px;
  color: var(--text-muted);
  font-size: var(--fs-micro);
}
.concern-detail { margin-top: 9px; }
.concern-detail > summary {
  cursor: pointer;
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.concern-detail > summary:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
}
.concern-detail dl {
  display: grid;
  gap: 6px;
  margin: 9px 0 0;
}
.concern-detail dl > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
  gap: 10px;
}
.concern-detail dt,
.concern-detail dd { margin: 0; font-size: var(--fs-micro); }
.concern-detail dt { color: var(--text-muted); }
.concern-detail dd { color: var(--text-secondary); font-family: var(--font-data); line-height: 1.45; }

@media (max-width: 640px) {
  .concern-cards { grid-template-columns: 1fr; }
  .concern-detail dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* this-week ledger — where running data belongs */
.ledger-wrap { overflow-x: auto; }
table.ledger { width: 100%; border-collapse: collapse; min-width: 760px; }
.ledger td,
.ledger th {
  text-align: left;
  padding: 11px 8px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
/* Body cells inherited 1rem while every column rule around them set ~0.82,
   so the session name was the largest text on the page. */
.ledger td { font-size: var(--fs-body); }
.ledger tr:last-child td { border-bottom: none; }
.ledger tr:hover td { background: var(--bg-card); }
.ledger th {
  color: var(--text-muted);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 650;
}
.ledger .l-day {
  font-family: var(--font-data);
  color: var(--text-secondary);
  width: 100px;
  font-size: var(--fs-small);
  white-space: nowrap;
}
.ledger .l-name { font-weight: 500; color: var(--text-primary); }
.ledger .l-name .sub { color: var(--text-muted); font-weight: 400; font-size: var(--fs-small); }
.ledger td.l-tgt {
  font-family: var(--font-data);
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  white-space: nowrap;
}
.week-totals {
  margin: 12px 0 2px;
  color: var(--text-secondary);
  font-family: var(--font-data);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}
.week-shaped-by {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}
.week-shaped-by .dash-linkbtn { flex: 0 0 auto; color: var(--text-secondary); font-size: var(--fs-micro); }
.ledger .l-status { width: 132px; }
.session-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.session-status > span { display: grid; gap: 2px; }
.session-status small { color: var(--text-secondary); font: var(--fs-micro)/1.3 var(--font-data); white-space: normal; }
.session-status .dot { width: 7px; height: 7px; border-radius: 50%; }
.ledger td.l-actual {
  min-width: 220px;
  color: var(--text-secondary);
  font-family: var(--font-data);
  font-size: var(--fs-small);
}
.actual-jump {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  font-family: var(--font-data);
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--border-medium);
  text-underline-offset: 3px;
}
.actual-jump:hover,
.actual-jump:focus-visible {
  color: var(--text-primary);
  text-decoration-color: var(--text-secondary);
}
.session-missed .l-name,
.session-missed .l-status { color: var(--text-muted); }

/* the expandable session ledger — one <details> per session, replacing the
   fixed-column table so the row remains readable without a wide viewport or
   horizontal scroll. */
.session-ledger { display: grid; }
.session-ledger-head {
  display: none;
  grid-template-columns: 92px minmax(0, 1fr) 150px 84px;
  gap: 10px;
  padding: 0 34px 8px 12px;
  color: var(--text-muted);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 650;
}
@media (min-width: 641px) {
  .session-ledger-head { display: grid; }
}
.session-row { border-bottom: 1px solid var(--border-subtle); }
.session-row:last-child { border-bottom: none; }
.session-row > summary {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 150px 84px 20px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
  color: var(--text-primary);
}
.session-row > summary::-webkit-details-marker { display: none; }
.session-row > summary::after {
  content: "";
  justify-self: end;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: var(--text-muted);
  margin-left: 6px;
  transition: transform 120ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .session-row > summary::after { transition: none; }
}
.session-row[open] > summary::after { transform: rotate(-180deg); }
.session-row > summary:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: -2px;
}
.sr-day {
  font-family: var(--font-data);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.sr-name {
  min-width: 0;
  font-weight: 500;
  overflow-wrap: break-word;
}
.sr-name-text { display: block; }
.sr-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  min-width: 0;
}
.sr-status > span { display: grid; gap: 2px; min-width: 0; }
.sr-status small { color: var(--text-secondary); font: var(--fs-micro)/1.3 var(--font-data); white-space: normal; }
.sr-status .dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.sr-tgt {
  font-family: var(--font-data);
  text-align: right;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-small);
  white-space: nowrap;
}
.session-row.session-missed .sr-name,
.session-row.session-missed .sr-status { color: var(--text-muted); }

/* Today reads as current, not as an alert: a restrained left rule and a
   labelled badge rather than a boxed vermilion inset. Vermilion (--attn) is
   reserved for genuine concern/action-needed states. */
.session-row.session-today {
  border-left: 3px solid var(--signal-blue);
  background: var(--signal-blue-soft);
}
.session-row.session-today > summary { padding-left: 9px; }
.sr-today-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--signal-blue);
  color: var(--bg-app);
  font: 700 var(--fs-micro) var(--font-data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dot.today { background: var(--signal-blue); }

/* the expanded session detail */
.session-detail {
  display: grid;
  gap: 10px;
  padding: 2px 12px 16px 12px;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}
.sd-purpose { margin: 0; color: var(--text-primary); font-size: var(--fs-body); }
.sd-structure { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-family: var(--font-data); }
.sd-notes { margin: 0; white-space: pre-line; }
.sd-shaping { margin: 0; color: var(--text-secondary); font-style: italic; }
.sd-provenance { margin: 0; color: var(--text-muted); font-size: var(--fs-micro); }
.sd-empty { margin: 0; color: var(--text-muted); }
.sd-comparison {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.sd-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.sd-comparison-grid dt { margin: 0; color: var(--text-muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.08em; }
.sd-comparison-grid dd { margin: 0; font-family: var(--font-data); color: var(--text-primary); }
.sd-adherence { margin: 0; color: var(--text-primary); }
.sd-uncertain { margin: 0; color: var(--text-muted); font-size: var(--fs-micro); }
.sd-view-run { justify-self: start; }

@media (max-width: 720px) {
  .session-ledger-head,
  .session-row > summary { grid-template-columns: 92px minmax(0, 1fr) 150px 20px; }
  .session-ledger-head > span:last-child,
  .sr-name .wk,
  .sr-tgt { display: none; }
}

@media (max-width: 640px) {
  .session-row > summary {
    grid-template-columns: 1fr auto;
    grid-template-areas: "day status" "name chev";
    row-gap: 6px;
  }
  .sr-day { grid-area: day; }
  .sr-status { grid-area: status; justify-self: end; }
  .sr-name { grid-area: name; }
  .sr-tgt { grid-area: tgt; justify-self: start; font-size: var(--fs-body); }
  .session-row > summary::after { grid-area: chev; }
  .sd-comparison-grid { grid-template-columns: repeat(2, 1fr); }
}

/* the reusable workout-shape marker */
.wk {
  display: inline-flex;
  align-items: flex-end;
  gap: 1.5px;
  width: 112px;
  height: 22px;
  margin-top: 8px;
}
.wk i { display: block; min-width: 2px; border-radius: 1.5px 1.5px 0 0; }
/* Strides: fixed-width spikes, distinct from a proportionally-wide hard
   interval bar so they don't read as a scary block of max effort. */
.wk i.wk-stride { min-width: 0; border-radius: 1px 1px 0 0; }
/* in the ledger the shape sits on its own line under the run name */
.ledger .l-name .wk { display: flex; }

@media (max-width: 1140px) {
  #athleteDashboard .rail-wide { max-width: var(--measure-read); }
}

@media (max-width: 720px) {
  .next { flex-direction: column; align-items: stretch; gap: 13px; }
  .next .wk { width: 100%; }
  .goal h2 { font-size: 1.24rem; }
}

@media (pointer: coarse) {
  .dash-linkbtn,
  .needs button,
  .session-row > summary,
  details > summary { min-height: 44px; }
  .dash-linkbtn { display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* The Arc — measured volume first, targets only where authoritative. */
.arc-top { align-items: center; }
.arc-window { display: flex; gap: 12px; }
.arc-window .dash-linkbtn { color: var(--text-muted); }
.arc-window .dash-linkbtn.active {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.arc-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 10px;
  color: var(--text-secondary);
  font-family: var(--font-data);
  font-size: var(--fs-micro);
}
.arc-key span { display: inline-flex; align-items: center; gap: 6px; }
.arc-key i { display: inline-block; width: 14px; flex: 0 0 auto; }
.arc-key .dash-help { margin-left: auto; }
.arc-hint {
  margin: 8px 0 0;
  font-family: var(--font-data);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.training-arc-wrap {
  position: relative;
  overflow: hidden;
}
.arc-custom-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 14px;
  margin: 10px 0 0;
  padding: 12px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}
.arc-custom-range label {
  display: grid;
  gap: 4px;
  font-family: var(--font-data);
  font-size: var(--fs-micro);
  color: var(--text-secondary);
}
.arc-custom-range .message { flex-basis: 100%; margin: 0; }
.arc-tooltip {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
  display: grid;
  gap: 2px;
  padding: 8px 11px;
  min-width: 132px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  font-family: var(--font-data);
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  pointer-events: none;
  z-index: 5;
}
.arc-tooltip strong { color: var(--text-primary); font-size: var(--fs-micro); font-weight: 700; }
.arc-tooltip em { color: var(--signal-amber); font-style: normal; font-size: var(--fs-micro); }
.arc-key-bar { height: 7px; background: var(--text-secondary); opacity: 0.7; }
.arc-key-line { height: 0; border-top: 2px solid var(--signal-amber); }
.arc-key-tick { height: 7px; border-top: 2px solid var(--bg-app); border-bottom: 1px solid var(--border-medium); }
.arc-key-band { height: 3px; background: var(--signal-amber); opacity: 0.85; }
.arc-key i.arc-key-race {
  width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 7px solid var(--attn);
}
.arc-key i.arc-key-current { height: 3px; background: var(--signal-blue); }
.training-arc {
  position: relative;
  width: 100%;
  padding-top: 10px;
  overflow: hidden;
}
/* Transparent real buttons over the plot: the accessible layer for a chart the
   SVG itself cannot provide (SVG groups never fire focus events). */
.arc-hits { position: absolute; inset: 10px 0 27px; }
.arc-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  scroll-snap-align: center;
}
.arc-hit:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}
.training-arc svg { display: block; width: 100%; height: auto; max-height: 300px; }

#blockOperationProgress {
  width: 100%;
}
.training-arc text {
  fill: var(--text-muted);
  font: var(--fs-label) var(--font-data);
  pointer-events: none;
}
.arc-axis { stroke: var(--border-medium); stroke-width: 1; }
.arc-bar { fill: var(--text-secondary); opacity: 0.7; }
.arc-long { stroke: var(--bg-app); stroke-width: 2.4; }
.arc-target { fill: none; stroke: var(--signal-amber); stroke-width: 1.8; }
circle.arc-target { fill: var(--signal-amber); }
.arc-down { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; }
/* Block boundary and mode-change markers share a small diamond shape, kept
   visually subordinate to race flags — colour is the only thing that tells
   the two kinds apart, since both are secondary to the block/race story. */
.arc-annotation-boundary { fill: var(--text-secondary); }
.arc-annotation-mode { fill: var(--signal-amber); }
/* Race markers use a distinct flag shape so they read as a different kind of
   event from block-boundary/mode-change diamonds, not just a different dot
   colour. The goal race is solid; a tune-up race is visually subordinate. */
.arc-race-goal { fill: var(--attn); }
.arc-race-tuneup { fill: var(--attn); opacity: 0.45; }
.arc-future-label { fill: var(--text-muted); font-style: italic; }
.arc-block-span line { stroke: var(--text-secondary); stroke-width: 1; }
.arc-block-span.historical { opacity: 0.4; }
.arc-block-span.historical text { display: none; }
.arc-block-span text { fill: var(--text-secondary); font-size: var(--fs-label); font-weight: 600; }
.arc-block-start-marker {
  stroke: var(--signal-amber);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}
.arc-week.lead-in .arc-bar {
  fill: var(--text-muted);
  opacity: 0.7;
}
.arc-scope-split {
  display: flex;
  gap: 3px;
  padding: 7px 18px 0 34px;
  font-family: var(--font-data);
  font-size: var(--fs-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.arc-scope-split span {
  min-width: 0;
  padding-top: 6px;
  border-top: 1px solid var(--signal-amber);
  color: var(--signal-amber);
}
.arc-scope-split .before {
  border-top-color: var(--border-medium);
  border-top-style: dashed;
  color: var(--text-muted);
}
/* A persistent marker under the current week's column — independent of
   selection, so "current" and "selected" always look different even when
   they're the same week. */
.arc-current-marker { fill: var(--signal-blue); }
.arc-band { fill: var(--signal-amber); opacity: 0.85; }
.arc-band.soft {
  fill: none;
  stroke: var(--signal-amber);
  stroke-width: 2;
  stroke-dasharray: 3 2;
  opacity: 0.68;
}
.arc-band.contradicted { stroke: var(--signal-red); stroke-width: 1.5; }
.arc-week { pointer-events: none; }
.arc-week.selected .arc-bar { fill: var(--text-primary); opacity: 1; }
.arc-week.current .arc-bar { stroke: var(--signal-blue); stroke-width: 1; }
/* Previewing is the lighter of the two states: hover hints, pin commits. */
.arc-week.previewing .arc-bar { fill: var(--text-primary); opacity: 0.85; }
.training-arc .arc-now { fill: var(--text-primary); font-weight: 700; }
.arc-week-detail {
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 13px 16px;
  border: 1px solid var(--border-medium);
  border-left: 2px solid var(--signal-amber);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--bg-card), rgba(224, 166, 76, 0.035));
}
/* No pinned week yet: an empty accented box is a promise with nothing behind it. */
.arc-week-detail:empty { display: none; }
/* One wrapping line, not a five-cell grid: the same numbers live in the hover
   tooltip, so this exists to keep touch and keyboard users at parity. */
.arc-detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.arc-detail-date {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-data);
  font-size: var(--fs-small);
  font-weight: 600;
}
.arc-detail-stats {
  color: var(--text-secondary);
  font-family: var(--font-data);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}
.arc-detail-markers {
  flex-basis: 100%;
  color: var(--signal-amber);
  font-family: var(--font-data);
  font-size: var(--fs-micro);
}
.arc-detail-forward {
  flex-basis: 100%;
  color: var(--text-primary);
  font-family: var(--font-data);
  font-size: var(--fs-micro);
  font-variant-numeric: tabular-nums;
}
#arcReturnCurrentButton { margin-left: auto; }
.arc-week-detail .k {
  color: var(--text-muted);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 650;
}
.arc-week-detail strong { color: var(--text-secondary); font-family: var(--font-data); font-size: var(--fs-small); font-weight: 500; }
.arc-coaching-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding-top: 11px;
  border-top: 1px solid var(--border-subtle);
}

/* The run ledger is reference detail, not a permanent resident of the page. */
/* It belongs to the Arc's pinned-week detail: chart first, then the evidence
   scoped by that selection. Keep the prose ledger at the reading measure even
   while its parent chart uses the wider data measure. */
.arc-runs { margin-top: 20px; }
/* Mirrors .dash-sec-top so this heading keeps the hairline rule every other
   dashboard section heading has. */
.runs-disclosure > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.runs-disclosure > summary::-webkit-details-marker { display: none; }
.runs-disclosure > summary::after {
  content: "Show ›";
  font-family: var(--font-data);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--text-muted);
}
.runs-disclosure[open] > summary::after { content: "Hide ⌄"; }
.runs-disclosure > summary:hover::after,
.runs-disclosure > summary:focus-visible::after { color: var(--text-primary); }
.arc-coaching-context section { min-width: 0; }
.arc-read-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.arc-read-toggle {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font-data);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1;
}
.arc-read-toggle:hover,
.arc-read-toggle:focus-visible { color: var(--text-primary); }
.arc-coaching-context p {
  margin: 7px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.arc-coaching-context small {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font: var(--fs-label) var(--font-data);
}
.arc-claim-asof {
  display: block;
  margin-bottom: 5px;
  color: var(--text-muted);
  font: var(--fs-label) var(--font-data);
}
.arc-coaching-insights > div { display: grid; gap: 12px; margin-top: 7px; }
.arc-coaching-insights article + article { padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.arc-coaching-insights h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 600;
}
.arc-coaching-insights .arc-insight-why { color: var(--text-primary); }
.arc-coaching-empty {
  grid-column: 1 / -1;
  margin: 0 !important;
  color: var(--text-muted) !important;
  font-size: var(--fs-micro) !important;
}

/* Gate 3: "Changes to your plan" — one <details> per material change,
   collapsed by default (matches the session-ledger disclosure pattern from
   Gate 2B). Compact enough to scan a date/title/reason on one line; the
   expanded body carries before/after facts, never raw enums or ids. */
.plan-changes-list { display: grid; }
.pc-row,
.pc-more { border-bottom: 1px solid var(--border-subtle); }
.pc-row:last-child { border-bottom: none; }
.pc-row > summary,
.pc-more > summary {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  padding: 11px 8px;
  cursor: pointer;
  list-style: none;
  color: var(--text-primary);
}
.pc-row > summary::-webkit-details-marker,
.pc-more > summary::-webkit-details-marker { display: none; }
.pc-date {
  font-family: var(--font-data);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.pc-title { min-width: 0; overflow-wrap: break-word; }
.pc-reason {
  color: var(--text-muted);
  font-size: var(--fs-small);
  white-space: nowrap;
}
.pc-more > summary {
  grid-template-columns: 1fr;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}
.pc-detail-body {
  display: grid;
  gap: 10px;
  padding: 2px 8px 14px 8px;
  color: var(--text-secondary);
  font-size: var(--fs-small);
}
.pc-compare { display: grid; gap: 6px; }
.pc-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-data);
}
.pc-compare-label { color: var(--text-muted); font-family: inherit; }
.pc-compare-before { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-medium); }
.pc-compare-arrow { color: var(--text-muted); }
.pc-compare-after { color: var(--text-primary); font-weight: 500; }
.pc-affected { margin: 0; padding-left: 18px; }
.pc-detail,
.pc-partial,
.pc-approved { margin: 0; }
.pc-partial { color: var(--text-muted); font-size: var(--fs-micro); }
.arc-coaching-review details summary {
  position: relative;
  display: grid;
  gap: 8px;
  padding-right: 22px;
  cursor: pointer;
  list-style: none;
}
.arc-coaching-review details summary::-webkit-details-marker { display: none; }
.arc-coaching-review details summary::after {
  content: "›";
  position: absolute;
  top: 0;
  right: 2px;
  color: var(--text-muted);
  font-size: 1.05rem;
  transition: transform 120ms ease;
}
.arc-coaching-review details[open] summary::after { transform: rotate(90deg); }
.arc-coaching-review details summary b { color: var(--text-primary); font-size: var(--fs-micro); font-weight: 600; }
.arc-coaching-review details[open] summary p,
.arc-coaching-review details[open] summary b { display: none; }
.review-body { white-space: pre-line; color: var(--text-secondary); line-height: 1.55; margin-top: 12px; font-size: var(--fs-body); }

/* Recent-run intelligence: ledger rows with inline, evidence-first disclosure. */
.recent-runs { margin-top: 6px; }
.recent-run { border-bottom: 1px solid var(--border-subtle); }
.recent-run:last-child { border-bottom: none; }
.recent-run > summary {
  position: relative;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  min-width: 0;
  padding: 15px 30px 15px 0;
  cursor: pointer;
  list-style: none;
}
.recent-run > summary::-webkit-details-marker { display: none; }
.recent-run > summary::after {
  content: "›";
  position: absolute;
  top: 17px;
  right: 4px;
  color: var(--text-muted);
  transition: transform 120ms ease;
}
.recent-run[open] > summary::after { transform: rotate(90deg); }
.recent-run > summary:hover { background: var(--bg-card); }
.recent-run > summary:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 2px; }
.recent-run-date {
  color: var(--text-muted);
  font: var(--fs-micro) var(--font-data);
  line-height: 1.45;
}
.recent-run-main { display: grid; min-width: 0; gap: 4px; }
.recent-run-main > strong { color: var(--text-primary); font-size: var(--fs-body); font-weight: 600; }
.recent-run-main > span:not(.wk):not(.shape-source) { color: var(--text-secondary); font: var(--fs-micro) var(--font-data); }
.recent-run-main .completed-shape { display: flex; width: min(240px, 100%); height: 18px; margin-top: 7px; }
.completed-shape i { min-width: 2px; }
.run-band-recovery { background: var(--z-rest); }
.run-band-easy { background: var(--z-easy); }
.run-band-steady { background: var(--z-steady); }
.run-band-tempo { background: var(--z-tempo); }
.run-band-hard { background: var(--z-hard); }
.shape-source { color: var(--text-muted); font: var(--fs-label) var(--font-data); }
.recent-run-chip { min-width: 0; }
.run-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 9px;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: var(--fs-micro);
  white-space: nowrap;
}
.run-chip.tone-attention { border-color: rgba(226, 84, 42, .55); color: #df896f; }
.run-chip.tone-positive { border-color: rgba(147, 193, 106, .45); color: var(--signal-green); }
.run-chip.tone-context { border-color: rgba(122, 167, 255, .45); color: #a8bfef; }
.recent-run-evidence { padding: 2px 30px 20px 150px; }
.run-evidence-grid,
.closeout-report-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 28px;
}
.run-evidence-grid section,
.closeout-report-grid > div { display: grid; align-content: start; gap: 5px; min-width: 0; }
.run-evidence-label {
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.run-evidence-grid strong,
.closeout-report-grid strong { color: var(--text-secondary); font-size: .8rem; font-weight: 550; line-height: 1.45; }
.run-evidence-grid p,
.closeout-report-grid p,
.run-evidence-empty { margin: 0; color: var(--text-muted); font-size: var(--fs-micro); line-height: 1.45; }
.run-metrics { display: grid; gap: 4px; }
.run-metrics > div { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-label); }
.run-metrics span { color: var(--text-muted); }
.run-metrics strong { font-family: var(--font-data); }
/* the read: what the engine tagged, what it noticed, what the coach said */
.run-read { margin-top: 14px; }
.run-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.run-tag {
  padding: 2px 9px;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.run-tag.tone-positive { border-color: rgba(147, 193, 106, .45); color: var(--signal-green); }
.run-tag.tone-attention { border-color: rgba(226, 84, 42, .55); color: #df896f; }
.run-observations { display: grid; gap: 5px; margin-top: 14px; }
.run-observations ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 16px;
  color: var(--text-muted);
  font-size: var(--fs-micro);
  line-height: 1.5;
}
.run-review { max-width: 62ch; }
.run-review p {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.run-metrics-disclosure {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}
.run-metrics-disclosure > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--fs-micro);
}
.run-metrics-disclosure > summary::marker { color: var(--text-muted); }
.run-metrics-disclosure > .run-evidence-grid { padding-top: 12px; }

.run-lap-evidence { margin-top: 20px; }
.run-laps-scroll { max-width: 100%; overflow-x: auto; }
.run-laps { width: 100%; margin-top: 8px; border-collapse: collapse; font: var(--fs-label) var(--font-data); }
.run-laps th,
.run-laps td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--border-subtle); text-align: left; white-space: nowrap; }
.run-laps th { color: var(--text-muted); font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; }
.run-laps td { color: var(--text-secondary); }
.run-provenance { margin: 12px 0 0; color: var(--text-muted); font: var(--fs-label) var(--font-data); }
.closeout-report { border-top-color: rgba(224, 166, 76, .4); }
.closeout-report-grid { padding-top: 14px; }

@media (max-width: 760px) {
  .recent-run > summary { grid-template-columns: 1fr auto; gap: 6px 12px; padding-right: 26px; }
  .recent-run-date { grid-column: 1 / -1; }
  .recent-run-chip { grid-column: 2; grid-row: 2; }
  .recent-run-evidence { padding: 2px 0 20px; }
  .run-evidence-grid,
  .closeout-report-grid { grid-template-columns: 1fr; gap: 16px; }
  .run-chip { white-space: normal; text-align: center; }
}

/* two quiet columns: coaching read + plan history */
.dash-two {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 34px;
  margin-top: 28px;
  align-items: start;
}
@media (max-width: 820px) {
  .dash-two { grid-template-columns: 1fr; gap: 22px; }
  /* Three columns fit the five figures plus the action in exactly two rows. */
  .dash-context { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-context .fig-action { justify-self: start; }
  .arc-tooltip { display: none; }
}

/* Gate 3: the "Changes to your plan" list replaced the technical version
   list (.dash-hist, athlete-facing "Plan history") and the mixed-event
   "Recent changes" list (.training-changes) below. Kept here only as a
   historical marker for anyone grepping for the old class names. */

/* dashboard badges are status chips, not buttons */
#athleteDashboard .badge {
  min-height: 20px;
  padding: 3px 9px;
  font-size: var(--fs-label);
}

/* generic figure row (shared by dashboard state-read, block, week detail) */
.figs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  padding: 14px 0 2px;
}
.figs.empty-state { display: block; }

/* ============================================================
   Block view — timeline-first, detail collapsed (phase 2)
   ============================================================ */
#blockView.blockv { display: block; max-width: 1080px; margin-inline: auto; }

.blockv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-medium);
  margin-bottom: 6px;
}
.blockv-head-main .eyebrow { margin-bottom: 7px; }
.blockv-head-main h2 {
  font-size: 1.6rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
}
.blockv-mast-line {
  font-family: var(--font-data);
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin: 8px 0 0;
  font-variant-numeric: tabular-nums;
}
.blockv-head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.block-timeline { padding-top: 8px; }
.block-timeline.empty-state { padding: 20px; }
.tl-bands { display: flex; gap: 3px; margin-bottom: 5px; }
.tl-band {
  border-radius: 4px 4px 0 0;
  padding: 5px 8px;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #141310;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-weeks { display: flex; gap: 3px; align-items: flex-end; }
.tl-wk {
  flex: 1 1 0;
  min-width: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}
.tl-bar-wrap {
  width: 100%;
  height: 128px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--border-subtle);
}
.tl-bar { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; transition: filter 0.12s ease; }
.tl-wk:hover .tl-bar { filter: brightness(1.25); }
.tl-wk.current .tl-bar { outline: 2px solid var(--text-primary); outline-offset: 1px; }
.tl-wk.active .tl-bar { outline: 2px solid var(--attn); outline-offset: 1px; }
.tl-n { font-family: var(--font-data); font-size: var(--fs-label); color: var(--text-muted); }
.tl-wk.active .tl-n,
.tl-wk.current .tl-n { color: var(--text-primary); }
.tl-km {
  font-family: var(--font-data);
  font-size: var(--fs-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.tl-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: var(--fs-micro); color: var(--text-secondary); }
.tl-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tl-legend i { width: 11px; height: 11px; border-radius: 3px; }
.tl-legend-note { color: var(--text-muted); }

.block-week-detail { margin-top: 22px; border-top: 1px solid var(--border-subtle); padding-top: 16px; }
.block-week-detail:empty { display: none; }
.wd-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.wd-title { font-size: 1rem; font-weight: 650; }
.wd-phase { font-family: var(--font-data); font-size: var(--fs-small); color: var(--text-muted); }
.wd-notes { margin: 12px 0 0; font-size: var(--fs-small); }

.blockv-disc { border-top: 1px solid var(--border-subtle); padding: 14px 0 0; margin-top: 14px; }
.blockv-disc > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
}
.blockv-disc > summary::-webkit-details-marker { display: none; }
.blockv-disc > summary::before {
  content: "\203A";
  color: var(--text-muted);
  font-size: 1rem;
  transition: transform 0.12s ease;
}
.blockv-disc[open] > summary::before { transform: rotate(90deg); }
.blockv-disc-body { padding-top: 14px; }
.blockv-disc-body h4 {
  margin: 16px 0 8px;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  font-weight: 600;
}
.blockv-disc-body h4:first-child { margin-top: 0; }

.blockv-planner { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-medium); }
.blockv-planner .wizard-form { max-width: 720px; }

/* ============================================================
   Admin console — pinned filter + section tabs (phase 2b)
   13 stacked panels -> a sticky athlete picker + 5 grouped tabs.
   ============================================================ */
#adminView.adminc { display: flex; flex-direction: column; gap: 16px; }
.adminc-head { padding-bottom: 2px; }
.adminc-head .eyebrow { margin-bottom: 6px; }
.adminc-head h2 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}
.adminc-mast-line { margin: 6px 0 0; font-size: var(--fs-small); }

/* pinned filter bar — the athlete picker never leaves the screen */
.adminc-topbar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0;
  background: var(--bg-app);
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
}
.adminc-tlabel {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.adminc-picker { display: inline-flex; }
.adminc-picker select { min-width: 240px; width: auto; }
.adminc-topbar .ghost { flex: 0 0 auto; width: auto; padding: 8px 14px; }

/* section tabbar */
.adminc-tabbar {
  position: sticky;
  top: 53px;
  z-index: 5;
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  padding: 0 2px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border-subtle);
}
.adminc-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.adminc-tab:hover { color: var(--text-primary); }
.adminc-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--attn);
  font-weight: 600;
}

/* ---- Sign in (phase 2c) ------------------------------------------------ */
/* Same ledger language as the dashboard: hairline rules, uppercase micro-caps,
   mono field text, one solid CTA. No card-on-card, no drop shadows. */
.loginv {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 6vh;
}
.loginv-card {
  width: 100%;
  max-width: 420px;
}
.loginv-head {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-medium);
  margin-bottom: 26px;
}
.loginv-ey {
  margin: 0 0 10px;
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.loginv-head h2 {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.loginv-sub {
  margin: 12px 0 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-secondary);
}

.loginv-form {
  display: grid;
  gap: 18px;
}
.loginv-form label {
  display: grid;
  gap: 7px;
}
.loginv-form label span {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.loginv-form input {
  font-family: var(--font-data);
  font-size: var(--fs-body);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.loginv-form input:focus {
  outline: 1px solid var(--border-strong);
  outline-offset: -1px;
  border-color: var(--border-strong);
}
.loginv-cta {
  width: 100%;
  margin-top: 4px;
  padding: 12px 18px;
  font-weight: 600;
}
.loginv-form .message {
  margin: 0;
  font-size: var(--fs-small);
}

@media (max-width: 600px) {
  .loginv { padding-top: 2vh; }
  .loginv-head h2 { font-size: 1.6rem; }
  .dash-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .dash-context .fig-goal,
  .dash-context #goalAlignmentFig,
  .dash-context .fig-action { grid-column: 1 / -1; }
  /* Stacked: nothing left to align the action to, so drop the value-row offset. */
  .dash-context .fig-action { justify-self: start; padding-top: 0; }
  .dash-masthead h2 { font-size: 1.55rem; }
  .coach-read-line > summary { grid-template-columns: 7px minmax(0, 1fr); }
  .coach-read-line > summary b { grid-column: 2; }
  .coach-read-receipt { padding-left: 27px; }
  .coach-read-evidence > div { grid-template-columns: 1fr; gap: 2px; }
  .week-shaped-by { align-items: flex-start; flex-direction: column; gap: 2px; }
  /* Stack date/title/reason instead of forcing three columns into a narrow
     row — the date and reason both need full-width room to stay readable. */
  .pc-row > summary,
  .pc-more > summary {
    grid-template-columns: 1fr;
    row-gap: 3px;
  }
  .pc-reason { justify-self: start; }
  .pc-compare-row { grid-template-columns: 1fr; row-gap: 2px; }
  .pc-compare-before,
  .pc-compare-arrow { justify-self: start; }
  .arc-top { align-items: flex-start; }
  .arc-window { gap: 8px; flex-wrap: wrap; }
  .arc-custom-range { flex-direction: column; align-items: stretch; }
  .arc-week-detail { padding: 14px; }
  .arc-coaching-context { grid-template-columns: 1fr; }
}

/* Athlete-facing route memory. Browsers receive only auth-fetched map images,
   never the underlying geometry. */
.routesv { min-width: 0; }
.routesv-index, .routesv-detail { display: grid; gap: 18px; min-width: 0; }

.routesv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.routesv-sort { min-height: 44px; padding: 8px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text-primary); font-size: var(--fs-small); }
.routesv-compare-toggle { min-height: 44px; padding: 8px 13px; border: 1px solid var(--border-subtle); border-radius: 999px; background: var(--bg-card); color: var(--text-secondary); font-size: var(--fs-small); }
.routesv-compare-toggle[aria-pressed="true"] { background: var(--text-primary); color: var(--bg-card); border-color: var(--text-primary); }

.routesv-section-label { margin: 4px 0 0; font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }

.routesv-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.routesv-card { min-width: 0; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.routesv-card > a { display: grid; grid-template-columns: 132px 1fr; align-items: center; gap: 14px; min-width: 0; min-height: 96px; padding: 12px; color: inherit; text-decoration: none; }
.routesv-card > a:hover, .routesv-card > a:focus-visible { border-radius: inherit; outline: 2px solid var(--border-strong); outline-offset: -2px; }

.routesv-thumb-wrap { position: relative; flex: none; width: 132px; height: 88px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-card-hover); }
.routesv-thumb { display: block; width: 132px; height: 88px; object-fit: cover; }
.routesv-thumb.routesv-thumb-error { display: none; }
.routesv-thumb-fallback { display: none; position: absolute; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; color: var(--text-muted); text-align: center; }
.routesv-thumb-fallback svg { opacity: .7; }
.routesv-thumb-fallback small { font-size: var(--fs-micro); }
.routesv-thumb.routesv-thumb-error + .routesv-thumb-fallback,
.routesv-thumb-wrap[data-no-map="true"] .routesv-thumb-fallback { display: flex; }
.routesv-thumb-wrap[data-no-map="true"] .routesv-thumb { display: none; }

.routesv-card-body { min-width: 0; display: grid; gap: 2px; }
.routesv-card-name { margin: 0; font-size: var(--fs-figure); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.routesv-card-shape { font-size: var(--fs-micro); color: var(--text-secondary); }
.routesv-card-summary { font-size: var(--fs-small); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.routesv-card-meta { display: flex; align-items: center; gap: 5px; font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.routesv-singletons, .routesv-cohort { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; }
.routesv-singletons > summary, .routesv-cohort > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; }
.routesv-singletons .routesv-gallery { margin-top: 16px; }
.routesv-back, .routesv-context-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--text-secondary); font-weight: 600; }
.routesv-back:focus-visible, .routesv-context-link:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; border-radius: var(--radius-sm); }
.routesv-name-actions form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.routesv-name-actions input { min-height: 44px; padding: 9px 12px; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); }
.routesv-head .blockv-head-main { flex: 1 1 280px; min-width: 0; }
.routesv-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.routesv-figs > div { display: grid; gap: 5px; min-width: 0; }
.routesv-figs > div > span { color: var(--text-muted); font-size: var(--fs-small); }
.routesv-figs > div > strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

.routesv-head #routeNameActions { align-self: center; }
.routesv-rename-btn { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: var(--radius-sm); }

.routesv-map-panel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.routesv-map-media { min-width: 0; }
.routesv-map-img { display: block; width: 100%; max-height: 360px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius-md); background: var(--bg-card-hover); }
.routesv-map-attribution { margin: 6px 0 0; font-size: var(--fs-micro); color: var(--text-muted); }
.routesv-map-fallback { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; max-height: 360px; aspect-ratio: 2 / 1; border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-muted); text-align: center; }
.routesv-map-summary { min-width: 0; display: grid; gap: 10px; align-content: start; }
.routesv-map-headline { margin: 0; font-size: var(--fs-figure); font-weight: 600; color: var(--text-primary); }
.routesv-map-facts { display: grid; gap: 6px; }
.routesv-map-facts > div { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-small); color: var(--text-secondary); }
.routesv-map-facts > div > span:first-child { color: var(--text-muted); }
.routesv-map-comparison { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); }

.routesv-earned-line { font-size: var(--fs-small); color: var(--text-secondary); }
.routesv-earned-line strong { color: var(--text-primary); }
.routesv-earned-line.muted { color: var(--text-muted); }
.routesv-filters { position: relative; }
.routesv-filter-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.routesv-filter-result { margin-left: auto; font-size: var(--fs-small); color: var(--text-muted); }
.routesv-filter-popover {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  width: min(360px, 100%); max-height: 70vh; overflow-y: auto;
  border: 1px solid var(--border-medium); border-radius: var(--radius-md);
  background: var(--bg-card); box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  padding: 14px 16px;
}
.routesv-filter-popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-weight: 650; }
.routesv-filter-popover-footer { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.routesv-filter-popover-footer .ghost { min-height: 44px; }
.routesv-filter-group { min-width: 0; margin: 12px 0 0; padding: 0; border: 0; }
.routesv-filter-group > legend { margin-bottom: 6px; padding: 0; color: var(--text-muted); font-size: var(--fs-small); }
.routesv-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.routesv-filter { min-height: 44px; border: 1px solid var(--border-subtle); border-radius: 999px; padding: 6px 12px; background: var(--bg-card-hover); color: var(--text-secondary); }
.routesv-filter[aria-pressed="true"] { background: var(--text-primary); color: var(--bg-card); border-color: var(--text-primary); }
.routesv-filter small { opacity: .7; }
@media (max-width: 640px) {
  .routesv-filter-popover {
    position: fixed; inset: auto 0 0 0; top: auto; left: 0; width: 100%;
    max-height: 80vh; border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 -12px 32px rgba(0, 0, 0, .4);
  }
}
/* SVG-native chart idiom (matches .training-arc): axes, gridlines, ticks and
   marks are all drawn inside the SVG in viewBox coordinates, so nothing can
   misalign under letterboxing. Interaction is real <button>s absolutely
   positioned by the same width as the viewBox - the SVG stays decorative. */
.routesv-chart { position: relative; }
.routesv-chart svg { display: block; width: 100%; height: auto; }
.routesv-chart text { fill: var(--text-muted); font: var(--fs-label) var(--font-data); pointer-events: none; }
.routesv-chart-axis-label { fill: var(--text-secondary); font-size: var(--fs-label); }
.routesv-chart-grid { stroke: var(--border-subtle); stroke-width: 1; }
.routesv-chart-mark-comparable { fill: var(--text-primary); }
.routesv-chart-mark-excluded { fill: none; stroke: var(--text-secondary); stroke-width: 1.5; opacity: .55; }
.routesv-chart-mark-best { fill: none; stroke: var(--signal-green); stroke-width: 2; }
.routesv-chart-mark-recent { fill: var(--attn); }
.routesv-chart-mark-selected { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.routesv-chart-trend { fill: none; stroke: var(--signal-green); stroke-width: 2; }
.routesv-chart-hits { position: absolute; inset: 0; }
.routesv-prog-point { position: absolute; top: 0; bottom: 0; padding: 0; border: none; background: none; cursor: pointer; }
.routesv-prog-point:focus-visible { outline: 2px solid var(--border-strong); outline-offset: -2px; border-radius: var(--radius-sm); }
.routesv-chart-tooltip { position: absolute; top: 4px; transform: translateX(-50%); display: grid; gap: 2px; padding: 8px 11px; min-width: 132px; border: 1px solid var(--border-medium); border-radius: var(--radius-sm); background: var(--bg-card); font-family: var(--font-data); font-size: var(--fs-micro); color: var(--text-secondary); pointer-events: none; z-index: 5; }
.routesv-chart-tooltip strong { color: var(--text-primary); font-size: var(--fs-micro); }
.routesv-chart-caption { margin: 8px 0 0; font-size: var(--fs-micro); color: var(--text-muted); }
.routesv-chart-text { margin-top: 10px; }
.routesv-chart-text summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.routesv-chart-text li { margin: 2px 0; }
.routesv-chart-text a { min-height: 44px; display: inline-flex; align-items: center; }
.routesv-earned-trend { border-left: 3px solid var(--text-primary); padding-left: 12px; }
@media (max-width: 820px) {
  .routesv-chart-tooltip { display: none; }
}
.routesv-suppression, .routesv-comparable { margin: 12px 0; padding: 9px 12px; border-radius: var(--radius-sm); font-size: var(--fs-small); }
.routesv-suppression { border: 1px dashed var(--border-medium); color: var(--text-secondary); }
.routesv-comparable { background: var(--bg-subtle); color: var(--text-secondary); }
.routesv-context-link { margin-left: 8px; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 720px) {
  .routesv-gallery { grid-template-columns: 1fr; }
  .routesv-map-panel { grid-template-columns: 1fr; }
  .routesv-map-img, .routesv-map-fallback { max-height: 240px; }
}

@media (max-width: 700px) {
  .routesv-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routesv-name-actions form { align-items: stretch; }
  .routesv-name-actions input { width: 100%; }
  .routesv-chart { margin-inline: -8px; }
}

/* Profile — About You (Athlete Knowledge). Each section is a quiet contained
   cell in both states — a tonal fill and hairline border, not a hard card —
   so read mode reads as a distinct knowledge unit rather than loose text on
   the page. Edit mode reuses the same outer cell (no nested "unrelated"
   box): only the fill lifts a shade and the border firms up to say "active". */
.profilev { min-width: 0; }
.pk-cells { display: grid; gap: 14px; }

.settingsv { display: grid; gap: 18px; }
.settings-form { display: grid; gap: 16px; max-width: 900px; }
.settings-card {
  padding: 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.settings-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.settings-fields-three { grid-template-columns: 2fr 1fr 1fr; }
.settings-fields label { display: grid; gap: 8px; }
.settings-fields label > span { color: var(--text-secondary); font-weight: 600; }
.settings-fields small { color: var(--text-muted); line-height: 1.45; }
.settings-fields code { font-family: var(--font-data); }
.settings-choice-list { display: grid; gap: 12px; margin-top: 18px; }
.settings-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.settings-choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--signal-green-soft);
}
.settings-choice input { margin-top: 3px; }
.settings-choice span { display: grid; gap: 5px; }
.settings-choice strong { color: var(--text-primary); }
.settings-choice small { color: var(--text-muted); line-height: 1.45; }
.settings-divider { height: 1px; margin: 20px 0; border: none; background: var(--border-subtle); }
.settings-hint { margin: 14px 0 0; color: var(--text-muted); line-height: 1.45; font-size: 0.9rem; }
.settings-readiness {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-panel);
}
.settings-readiness > div { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.settings-readiness p { margin: 0; color: var(--signal-amber); line-height: 1.45; }
.settings-preview {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: var(--bg-panel);
}
.settings-preview div { display: grid; gap: 4px; }
.settings-preview span { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; }
.settings-preview p { margin: 0; color: var(--text-primary); line-height: 1.5; }
.settings-connection-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 30px;
}
.settings-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.settings-actions .message { margin: 0; }

@media (max-width: 720px) {
  .settings-fields,
  .settings-fields-three { grid-template-columns: 1fr; }
  .settings-connection-status { padding-top: 0; }
}

.pk-cell {
  min-width: 0;
  padding: 16px 20px 18px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
/* The outer frame stays the same fill in both states — only its border
   firms up — so the darker nested content cell (.pk-body / .pk-textarea)
   reads the same "step down" from the frame whichever state it's in. */
.pk-cell-editing { border-color: var(--border-medium); }
.pk-cell-legacy { border-style: dashed; }

.pk-cell-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pk-cell-head-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pk-cell-label { font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.pk-cell-meta { font-size: var(--fs-micro); color: var(--text-muted); font-family: var(--font-data); }
.pk-cell-edit { flex: none; }

.pk-explain { margin: 8px 0 0; font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5; }
.pk-example { margin-top: 6px; }
.pk-example > summary { cursor: pointer; font-size: var(--fs-micro); color: var(--text-muted); }
.pk-example > summary:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 2px; }
.pk-example p { margin: 8px 0 0; font-size: var(--fs-micro); color: var(--text-muted); }

/* The content itself is a nested notebook cell (Jupyter/Databricks-style
   input area) inside the section cell — near-black, a clear step darker
   than the section's own fill, filling the available width rather than a
   narrow prose column. It is not modelled on a form control: no dashed
   edge, no placeholder grey, real text at full contrast. */
.pk-body { margin-top: 12px; padding: 14px 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-app); font-size: var(--fs-body); color: var(--text-primary); line-height: 1.6; }
.pk-body p { margin: 0 0 10px; }
.pk-body p:last-child { margin-bottom: 0; }
.pk-body h3, .pk-body h4 { margin: 14px 0 6px; color: var(--text-primary); }
.pk-body h3:first-child, .pk-body h4:first-child { margin-top: 0; }
.pk-body ul, .pk-body ol { margin: 0 0 10px; padding-left: 1.3em; }
.pk-body blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--border-medium); color: var(--text-secondary); }
.pk-body code { font: var(--fs-small) var(--font-data); background: var(--bg-card); padding: 1px 5px; border-radius: 3px; }
.pk-body a { color: var(--signal-blue); }
/* Read mode must never resemble a disabled form control. */
.pk-cell .empty-state { margin-top: 12px; }

.pk-authority-note { margin: 10px 0 0; font-size: var(--fs-micro); color: var(--text-muted); }
.pk-authority-note strong { color: var(--text-secondary); }

.pk-structured-surface { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.pk-structured-label { margin: 0 0 8px; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.pk-structured-body.empty-state { margin: 0; }

/* Edit mode: same outer cell as read mode (.pk-cell-editing above) — the
   form itself carries no separate border/fill, so nothing "unrelated" is
   swapped in, only the controls. */
.pk-edit-form { margin-top: 10px; display: grid; gap: 10px; }
/* Same nested-cell tone as .pk-body (bg-app) so the input area reads as the
   same notebook cell continuing from read mode, not a new control. */
.pk-edit-form .pk-textarea { min-height: 140px; background: var(--bg-app); }
.pk-edit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pk-counter { font: var(--fs-micro) var(--font-data); color: var(--text-muted); margin-right: auto; }
.pk-preview { padding: 14px 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-app); }
.pk-edit-actions { display: flex; gap: 10px; }

.pk-cheatsheet dl { display: grid; gap: 12px; margin: 0 0 16px; }
.pk-cheatsheet dt { font-family: var(--font-data); font-size: var(--fs-micro); font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.pk-cheatsheet dd { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); }

.pk-conflict-slot:empty { display: none; }
.pk-conflict { display: grid; gap: 8px; }
.pk-conflict-preview { font: var(--fs-micro) var(--font-data); color: var(--text-secondary); max-height: 4.5em; overflow: hidden; }
.pk-conflict-actions { display: flex; gap: 10px; }

.pk-proposal { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--attn); background: var(--attn-soft); border-radius: var(--radius-sm); display: grid; gap: 8px; }
.pk-proposal-reason { margin: 0; font-size: var(--fs-small); color: var(--text-primary); }
.pk-proposal-preview { font-size: var(--fs-small); color: var(--text-secondary); }
.pk-proposal-meta { margin: 0; font-size: var(--fs-micro); color: var(--text-muted); }
.pk-proposal-actions { display: flex; gap: 10px; }

.pk-history { margin-top: 12px; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.pk-history > summary { cursor: pointer; font-size: var(--fs-micro); color: var(--text-muted); }
.pk-history > summary:focus-visible { outline: 2px solid var(--signal-blue); outline-offset: 2px; }
.pk-history-body { margin-top: 10px; }
.pk-history-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pk-history-row { display: grid; grid-template-columns: minmax(120px, auto) minmax(100px, auto) 1fr auto; align-items: center; gap: 10px; font-size: var(--fs-micro); color: var(--text-secondary); }
.pk-history-when { font-family: var(--font-data); color: var(--text-muted); }
.pk-history-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  .pk-cell { padding: 14px 16px 16px; }
  .pk-cell-head { flex-direction: column; align-items: stretch; }
  .pk-cell-edit { align-self: flex-start; }
  .pk-history-row { grid-template-columns: 1fr; gap: 3px; }
  .pk-edit-meta { flex-direction: column; align-items: stretch; }
  .pk-counter { margin-right: 0; }
}