:root {
  color-scheme: dark;
  --bg: #111417;
  --surface: #1a1f24;
  --surface-muted: #15191d;
  --border: #303841;
  --text: #edf1f4;
  --muted: #aeb8c2;
  --accent: #78c8b0;
  --accent-strong: #a3e6d0;
  --danger: #ffb4ab;
  --focus: #f5d76e;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: var(--accent-strong); }
a:hover { color: #d0f7e8; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.table-wrap:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.site-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--border);
  background: #0d1012;
}

.header-inner {
  width: min(1360px, calc(100% - 40px));
  min-height: 64px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 16px;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  border-radius: 5px;
  padding: 10px 14px;
  background: var(--focus);
  color: #111417;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }
.product-name { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); font-weight: 750; text-decoration: none; letter-spacing: -.01em; white-space: nowrap; }
.primary-nav { min-width: 0; }
.primary-nav-list { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; }
.primary-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0 10px;
  color: var(--muted);
  font-size: .91rem;
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav-link:hover { border-color: var(--border); background: var(--surface-muted); color: var(--text); }
.primary-nav-link[aria-current="page"] { border-color: var(--border); background: var(--surface); color: var(--text); font-weight: 700; }
.account-menu { position: relative; justify-self: end; }
.account-menu > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0 12px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::after { content: "⌄"; margin-left: 9px; color: var(--muted); }
.account-menu[open] > summary { background: var(--surface); }
.account-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: min(320px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .36);
}
.account-name { margin: 0 0 14px; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.account-name strong { color: var(--text); font-weight: 650; }
.account-unit-form { display: grid; gap: 6px; }
.account-unit-form label { font-size: .88rem; }
.account-unit-controls { display: flex; align-items: center; gap: 8px; }
.account-unit-controls select { flex: 1; min-width: 0; }
.account-unit-controls .button { flex: 0 0 auto; }
.display-time { margin: 12px 0 4px; color: var(--muted); font-size: .82rem; }
.account-menu-link { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.account-logout-form { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.account-logout-form .button { width: 100%; justify-content: center; }
.inline-form { display: inline; }
.inline-role-form { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: none !important; }
.inline-role-form select { width: auto; min-width: 126px; min-height: 38px; padding: 5px 8px; }
.inline-role-form .button { min-height: 38px; padding: 5px 9px; }
.inline-role-form .field-errors { flex-basis: 100%; }
.link-button { display: inline-flex; align-items: center; min-height: 44px; border: 0; padding: 0; background: transparent; color: var(--accent-strong); cursor: pointer; font: inherit; text-decoration: underline; }

.content-column { width: min(1360px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 64px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.detail-heading { align-items: center; }
.page-actions, .detail-actions, .form-actions, .section-heading { display: flex; align-items: center; gap: 10px; }
.section-heading { justify-content: space-between; margin-bottom: 14px; }
.detail-actions { margin: 18px 0 0; }
h1, h2 { line-height: 1.2; margin: 0; }
h1 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
h2 { font-size: 1.15rem; margin-bottom: 14px; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.subtitle, .help-text, .membership-note, .session-notes { color: var(--muted); }
.subtitle { margin: 7px 0 0; }
.back-link { margin: 0 0 22px; }
.back-link a { text-decoration: none; }

.filter-form, .session-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; margin-bottom: 24px; }
.filter-form { padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
.candidate-filter { margin-bottom: 18px; }
.filter-form .form-field { min-width: 140px; max-width: 240px; }
.filter-form .activity-search-field { flex: 1 1 360px; max-width: 560px; }
.session-form { display: block; max-width: 100%; }
.session-form > .form-field { max-width: 620px; margin-bottom: 16px; }
.form-field { display: grid; gap: 5px; }
label, legend { color: var(--text); font-weight: 650; }
input, select, textarea {
  width: 100%;
  border: 1px solid #4a5661;
  border-radius: 5px;
  padding: 8px 10px;
  background: #0f1316;
  color: var(--text);
  font: inherit;
}
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select { min-height: 44px; }
textarea { min-height: 110px; }
input[type="checkbox"] { width: auto; accent-color: var(--accent); }
textarea { resize: vertical; }
.filter-actions { display: flex; align-items: center; gap: 10px; }
.form-actions { margin-top: 18px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--border); border-radius: 5px; padding: 8px 13px; cursor: pointer; font: inherit; font-weight: 650; text-decoration: none; }
.button:disabled { cursor: not-allowed; opacity: .55; }
.button-primary { border-color: var(--accent); background: var(--accent); color: #0a1713; }
.button-primary:hover { background: var(--accent-strong); color: #0a1713; }
.button-secondary { background: transparent; color: var(--text); }
.button-secondary:hover { background: var(--surface); color: var(--text); }

.table-wrap { position: relative; max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; }
.data-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.data-table th, .data-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.data-table th { background: var(--surface-muted); color: var(--muted); font-size: .77rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(120, 200, 176, .06); }
.numeric { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compact-table { min-width: 680px; }
.split-table { min-width: 1240px; }
.chart-data-table { min-width: 420px; }
.split-insight {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 12px;
  margin: 10px 0;
  padding: 12px;
  border: 1px solid rgba(120, 200, 176, .42);
  border-radius: 7px;
  background: linear-gradient(120deg, rgba(120, 200, 176, .10), rgba(120, 200, 176, .03));
}
.split-insight h3 { margin: 0; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.split-insight-copy > p:last-child { max-width: 650px; margin: 7px 0 0; color: var(--muted); }
.split-insight-blocks { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 0; padding: 0; list-style: none; }
.split-insight-blocks li { display: grid; grid-template-columns: auto auto; column-gap: 8px; padding: 7px 9px; border: 1px solid rgba(120, 200, 176, .24); border-radius: 5px; background: rgba(15, 19, 22, .36); font-size: .82rem; }
.split-insight-blocks li strong { color: var(--accent-strong); }
.split-insight-blocks li small { grid-column: 1 / -1; margin-top: 2px; color: var(--muted); }
.split-insight-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--border); }
.split-insight-stats > div { min-width: 0; padding: 10px 12px; background: rgba(15, 19, 22, .62); }
.split-insight-stats dd { margin-top: 3px; font-weight: 700; font-variant-numeric: tabular-nums; }
.split-actions { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); }
.split-actions strong { font-size: .92rem; }
.split-actions .help-text { margin: 2px 0 0; font-size: .82rem; }
.split-copy-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.split-copy-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.split-copy-label { color: var(--muted); font-size: .76rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.split-copy-option { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--muted); font-size: .86rem; font-weight: 600; white-space: nowrap; }
.split-copy-status { color: var(--accent-strong); font-size: .82rem; }
.split-copy-status:empty { display: none; }
.split-copy-controls select { width: auto; max-width: 100%; min-height: 44px; padding: 5px 8px; font-size: .86rem; }
.split-copy-overrides, .split-copy-preview { min-width: 0; padding-top: 6px; border-top: 1px solid var(--border); }
.workout-editor-block { border: 1px solid var(--border); border-radius: 8px; margin: 1rem 0; padding: 1rem; max-width: none; }
.workout-editor-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.workout-editor-block legend { font-weight: 700; }
.workout-editor-block input { width: 100%; max-width: 40rem; }
.workout-editor-block .helptext { display: block; color: var(--muted); }
.split-copy-overrides summary, .split-copy-preview summary { cursor: pointer; color: var(--muted); font-size: .82rem; min-height: 32px; display: list-item; align-content: center; }
.split-copy-preview textarea { display: block; width: 100%; min-height: 100px; height: 7rem; max-height: 18rem; margin-top: 6px; overflow: auto; resize: vertical; font: .82rem/1.4 monospace; white-space: pre; }
.split-copy-preview-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.split-copy-format-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 10px 14px; margin: 10px 0; }
.split-copy-format-grid label { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--muted); font-size: .82rem; }
.split-copy-format-grid input, .split-copy-format-grid textarea { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); font: .86rem/1.4 monospace; }
.split-copy-format-grid textarea { resize: vertical; }
@media (max-width: 760px) {
  .split-copy-format-grid input, .split-copy-format-grid textarea { font-size: 16px; }
  .split-copy-preview textarea, .split-copy-controls select, .split-copy-override input { font-size: 16px; }
}
.split-copy-overrides > strong { color: var(--text); font-size: .82rem; }
.split-copy-overrides > .help-text { flex-basis: 100%; }
.split-copy-override-fields { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
.split-copy-override { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .8rem; font-weight: 600; }
.split-copy-override input { width: 112px; min-height: 36px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text); font: inherit; font-variant-numeric: tabular-nums; }
.split-copy-overrides code { color: var(--accent-strong); }
.split-kind { display: inline-flex; align-items: center; border-radius: 99px; padding: 3px 8px; font-size: .74rem; font-weight: 750; white-space: nowrap; }
.split-kind-rep { border: 1px solid rgba(120, 200, 176, .48); color: var(--accent-strong); background: rgba(120, 200, 176, .13); }
.split-kind-recovery { border: 1px solid rgba(245, 215, 110, .42); color: #f5d76e; background: rgba(245, 215, 110, .10); }
.split-row-rep td:first-child { border-left: 3px solid var(--accent); }
.split-row-recovery td { background: rgba(245, 215, 110, .035); }
@media (max-width: 760px) {
  .split-insight { grid-template-columns: 1fr; gap: 14px; }
  .split-actions { grid-template-columns: 1fr; }
  .split-copy-controls { justify-content: flex-start; }
  .split-copy-status { min-width: 0; }
  .split-copy-overrides summary, .split-copy-preview summary { min-height: 44px; }
  .split-copy-controls select, .split-copy-preview textarea, .split-copy-override input { font-size: 16px; }
}
.secondary-line { display: block; color: var(--muted); font-size: .82rem; }
.muted { color: var(--muted); }
.status { display: inline-block; border-radius: 99px; padding: 3px 8px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.status-recorded { background: #26323a; color: var(--muted); }
.status-override { background: #324b47; color: var(--accent-strong); }
.status-active { background: #324b47; color: var(--accent-strong); }
.status-revoked { background: #30363d; color: var(--muted); }
.data-table .status { margin-left: 6px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 18px; }
.pagination a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

.results-summary { margin: 0 0 14px; color: var(--muted); font-size: .88rem; }
.results-summary a { margin-left: 8px; }
.empty-state, .empty-inline { padding: 24px; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface-muted); }
.empty-state h2 { margin-bottom: 5px; }
.empty-state p, .empty-inline { margin: 0; color: var(--muted); }
.empty-state-actions { margin-top: 14px !important; }
.panel { margin-top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.panel form { max-width: 620px; }
.panel .form-field { margin-bottom: 14px; }
.summary-grid, .evidence-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--border); }
.summary-grid > div, .evidence-grid > div { padding: 15px; background: var(--surface); }
dt { color: var(--muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
dd { margin: 5px 0 0; font-variant-numeric: tabular-nums; }
.summary-grid dd { font-size: 1.12rem; font-weight: 700; }
.session-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.evidence-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; }
.evidence-grid dd { overflow-wrap: anywhere; }
.route-panel { overflow: hidden; }
.route-panel .section-heading { margin-bottom: 6px; }
.activity-map {
  min-height: 360px;
  height: min(58vw, 520px);
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
  background: #d9e0df;
}
.activity-map .leaflet-container { height: 100%; width: 100%; font: inherit; }
.activity-map .leaflet-control-attribution { font-size: 11px; }
.map-message { margin: 0; padding: 22px; color: #26332f; }
.map-note { margin: 9px 0 0; color: var(--muted); font-size: .82rem; }
.evidence-details summary { cursor: pointer; color: var(--accent-strong); }
.activity-delete-panel summary { cursor: pointer; color: var(--muted); }
.activity-delete-panel form { margin-top: 12px; }
pre { max-width: 100%; overflow: auto; padding: 14px; border-radius: 5px; background: #0d1012; color: #dbe5e8; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.heading-count { color: var(--muted); font-size: .85em; font-weight: 400; }
.activity-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.activity-chart-figure { min-width: 0; margin: 0; padding: 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); }
.activity-chart-figure figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-weight: 700; }
.chart-caption-meta { color: var(--muted); font-size: .78rem; font-weight: 400; text-align: right; }
.activity-chart-svg { display: block; width: 100%; height: auto; min-height: 180px; overflow: visible; }
.activity-chart-svg .chart-grid line { stroke: #303841; stroke-width: 1; }
.activity-chart-svg .chart-axis-labels text, .activity-chart-svg .chart-unit-label { fill: var(--muted); font: 12px system-ui, sans-serif; }
.activity-chart-svg .chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.chart-data-details { margin-top: 9px; }
.chart-data-details summary { cursor: pointer; color: var(--accent-strong); font-size: .85rem; }
.chart-data-details .table-wrap { max-height: 260px; margin-top: 9px; overflow-y: auto; }
.chart-note { margin: 9px 0 0; color: var(--muted); font-size: .78rem; }
.chart-empty { display: flex; min-height: 180px; flex-direction: column; justify-content: center; padding: 18px; border: 1px dashed var(--border); border-radius: 7px; background: var(--surface-muted); }
.chart-empty h3 { margin: 0 0 5px; font-size: 1rem; }
.chart-empty p { margin: 0; }
.membership-note { margin: 16px 0 0; }
.session-notes { padding: 14px 16px; border-left: 3px solid var(--accent); background: var(--surface-muted); }
.gear-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 24px; }
.gear-table { min-width: 760px; }
.contribution-table { min-width: 920px; }
.gear-status { display: inline-block; border-radius: 99px; padding: 3px 8px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.gear-status-active { background: #324b47; color: var(--accent-strong); }
.gear-status-retired, .gear-status-sold, .gear-status-lost { background: #30363d; color: var(--muted); }
.stacked-form { max-width: 720px; }
.stacked-form fieldset { margin: 0 0 22px; padding: 16px; border: 1px solid var(--border); border-radius: 6px; }
.stacked-form legend { padding: 0 6px; }
.stacked-form .form-field { margin-bottom: 15px; }
.stacked-form .form-field:last-child { margin-bottom: 0; }
.form-grid-two, .form-grid-four { display: grid; gap: 12px 18px; }
.form-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
.form-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; margin-top: 14px; }
.settings-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; max-width: 760px; }
.settings-role-field { min-width: 0; }
.settings-role-field .help-text { margin: 0; font-size: .85rem; }
.settings-custom-role-form { display: flex; align-items: end; gap: 12px; max-width: 720px; }
.settings-custom-role-form .form-field { flex: 1 1 300px; margin-bottom: 0; }
.settings-custom-role-form .button { flex: 0 0 auto; }
.settings-custom-role-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.settings-custom-role-list li { padding: 6px 10px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-muted); color: var(--text); }
.settings-role-catalog { display: grid; gap: 16px; margin: 12px 0 22px; max-width: 860px; }
.settings-role-group { min-width: 0; }
.settings-role-group h4 { margin: 0 0 7px; color: var(--muted); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.settings-role-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.settings-role-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-muted); }
.settings-role-info { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.settings-role-info > span:first-child { overflow-wrap: anywhere; }
.settings-role-info .badge { display: inline-block; border-radius: 99px; padding: 2px 7px; background: #26323a; color: var(--muted); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.settings-role-delete-form { flex: 0 0 auto; }
.settings-role-delete-form .button { min-height: 36px; padding: 5px 10px; }
.export-form fieldset > ul, .settings-form fieldset > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; padding: 0; list-style: none; }
.export-form fieldset > ul li, .settings-form fieldset > ul li { display: flex; align-items: center; gap: 8px; }
.export-form fieldset > ul li label, .settings-form fieldset > ul li label { font-weight: 500; }
.export-zone-toggle { margin-top: 4px; }
.settings-zone-toggle { margin-top: 4px; }
.settings-version { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.settings-version h2 { margin-bottom: 0; }
.version-value { margin: 8px 0 0; font-size: 1.15rem; }
.settings-note { margin: 12px 0 0; }
.mcp-intro { border-color: rgba(120, 200, 176, .42); }
.mcp-intro code { overflow-wrap: anywhere; }
.mcp-copy-row, .mcp-secret-field { display: grid; gap: 6px; max-width: 900px; margin-top: 16px; }
.mcp-copy-control { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.mcp-copy-control input { min-width: 0; color: var(--accent-strong); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88rem; }
.mcp-copy-control .button { flex: 0 0 auto; }
.mcp-config-wrap { display: flex; align-items: start; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.mcp-config-wrap pre { flex: 1 1 540px; margin: 0; min-width: 0; }
.mcp-config-wrap .button { flex: 0 0 auto; }
.mcp-copy-status { min-height: 1.4em; margin: 10px 0 0; color: var(--accent-strong); font-size: .85rem; }
.mcp-secret-panel { border-color: var(--accent); background: linear-gradient(120deg, rgba(120, 200, 176, .11), var(--surface)); }
.mcp-secret-panel h2 { color: var(--accent-strong); }
.mcp-secret-field input { color: var(--accent-strong); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .01em; }
.mcp-key-form { max-width: 760px; }
.mcp-key-form fieldset { margin-top: 20px; }
.mcp-scope-list { display: grid; gap: 9px; }
.mcp-scope-option { display: flex; align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-muted); font-weight: 500; }
.mcp-scope-option:hover { border-color: rgba(120, 200, 176, .55); }
.mcp-scope-option input { flex: 0 0 auto; margin-top: 3px; }
.mcp-scope-option span { display: grid; gap: 2px; }
.mcp-scope-option small { color: var(--muted); font-size: .82rem; font-weight: 400; }
.mcp-expiry-field { max-width: 280px; margin-top: 20px; }
.mcp-key-table { min-width: 1180px; }
.mcp-key-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.status-expired { background: #493d2e; color: #f5d991; }
.status-active, .status-revoked { margin: 0; }
.stats-controls { align-items: end; }
.stats-controls .form-field { min-width: 170px; }
.stats-zone-controls { flex: 0 1 auto; min-width: 180px; margin-top: 2px; }
.stats-zone-controls[open] { flex-basis: 100%; }
.stats-zone-controls summary { width: fit-content; cursor: pointer; color: var(--accent-strong); font-weight: 700; }
.stats-zone-controls .help-text { margin: 8px 0 0; }
.stats-zone-controls .form-grid-four { margin-top: 12px; }
.stats-context { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.stats-context h2 { margin-bottom: 5px; }
.stats-context .help-text { margin: 0; }
.stats-cutoff { margin: 5px 0 0; color: var(--accent-strong); font-size: .82rem; }
.stats-zone-settings { flex: 0 0 auto; margin: 0; color: var(--muted); font-size: .84rem; text-align: right; }
.stats-metric-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 0; }
.stats-metric-tabs a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 99px; color: var(--muted); background: var(--surface-muted); text-decoration: none; }
.stats-metric-tabs a:hover, .stats-metric-tabs a:focus-visible, .stats-metric-tabs a[aria-current="page"] { border-color: var(--accent); color: #0a1713; background: var(--accent); }
.stats-comparison-panel { margin-top: 14px; }
.stats-section-heading { align-items: start; }
.stats-section-heading .help-text, .stats-comparison-note { max-width: 520px; margin: 0; color: var(--muted); font-size: .86rem; text-align: right; }
.stats-comparison-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-muted); }
.stats-compare-card { min-width: 0; padding: 15px; background: var(--surface); }
.stats-card-label { margin: 0 0 11px; color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.stats-card-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stats-card-period { display: block; color: var(--muted); font-size: .75rem; line-height: 1.25; }
.stats-card-value { display: block; margin-top: 4px; font-size: 1.08rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-card-value-muted { color: var(--muted); font-weight: 600; }
.stats-delta { margin: 13px 0 0; font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stats-delta-up { color: var(--accent-strong); }
.stats-delta-down { color: var(--danger); }
.stats-delta-same, .stats-delta-unknown { color: var(--muted); }
.stats-trends-panel { margin-top: 16px; }
.stats-trend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stats-trend-card { min-width: 0; margin: 0; padding: 15px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-muted); }
.stats-trend-card figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-weight: 700; }
.stats-trend-plot { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px; min-height: 174px; }
.stats-trend-y-axis { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0 2px; color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.stats-trend-bars { display: grid; grid-template-columns: repeat(var(--stats-bar-count), minmax(0, 1fr)); align-items: end; gap: 4px; min-width: 0; min-height: 174px; padding: 7px 5px 0; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(25% - 1px), rgba(74, 86, 97, .42) 25%); }
.stats-trend-bar-column { display: flex; align-items: end; justify-content: center; height: 100%; min-width: 0; }
.stats-trend-bar { display: block; width: min(100%, 24px); min-height: 2px; border-radius: 4px 4px 1px 1px; background: linear-gradient(to top, var(--accent-strong), var(--accent)); box-shadow: 0 0 0 1px rgba(120, 200, 176, .12); }
.stats-trend-bar-column.is-current .stats-trend-bar { background: linear-gradient(to top, #f1c56d, #f5d991); box-shadow: 0 0 0 1px rgba(241, 197, 109, .38); }
.stats-trend-bar-unknown { background: repeating-linear-gradient(135deg, #53616a 0, #53616a 4px, #77858a 4px, #77858a 8px); }
.stats-trend-axis-labels { display: grid; grid-template-columns: repeat(var(--stats-bar-count), minmax(0, 1fr)); gap: 4px; margin: 7px 5px 0 calc(9px + 2.8em); color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
.stats-trend-axis-labels span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stats-chart-note { margin: 10px 0 0; color: var(--muted); font-size: .76rem; }
.stats-zone-comparison { margin-top: 22px; }
.stats-zone-comparison h3 { margin: 0; font-size: 1rem; }
.stats-zone-comparison .help-text { margin: 4px 0 0; }
.stats-zone-table { min-width: 720px; }
.stats-history-panel { margin-top: 16px; }
.stats-history-table { min-width: 680px; }
.stats-time-table { min-width: 820px; }
.stats-history-table th[scope="row"] { color: var(--text); font-size: .92rem; letter-spacing: 0; text-transform: none; }
.stats-zone-history { display: grid; gap: 10px; }
.stats-zone-history-row { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(180px, 2fr) 72px; align-items: center; gap: 14px; }
.stats-period-label { color: var(--text); font-size: .9rem; }
.stats-zone-stack { display: flex; min-width: 0; height: 16px; overflow: hidden; border-radius: 99px; background: #303841; }
.stats-zone-segment { display: block; min-width: 0; height: 100%; }
.stats-zone-1 { background: #78c8b0; }
.stats-zone-2 { background: #9ecb77; }
.stats-zone-3 { background: #f1c56d; }
.stats-zone-4 { background: #e79aa0; }
.stats-zone-5 { background: #bc8dde; }
.stats-zone-total { color: var(--muted); font-size: .86rem; }
.stats-zone-legend { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 16px; color: var(--text); font-size: .82rem; }
.stats-zone-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stats-zone-legend small { color: var(--muted); }
.stats-zone-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.stats-footnote { margin: 16px 0 0; color: var(--muted); font-size: .8rem; }
[hidden] { display: none !important; }
.share-policy { margin-top: 0; }
.share-card-heading { align-items: start; }
.share-card-heading h2 { margin-bottom: 3px; }
.share-link-field { display: grid; gap: 5px; margin-top: 18px; }
.share-link-field input { color: var(--accent-strong); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88rem; }
.share-summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.share-summary-grid dd { font-size: .95rem; overflow-wrap: anywhere; }
.share-card-actions { margin-top: 18px; }
.button-danger { border-color: #75443f; color: var(--danger); }
.button-danger:hover { background: #3a2422; color: #ffd2cc; }
.share-access-details { margin-top: 18px; }
.share-access-details summary { cursor: pointer; color: var(--accent-strong); }
.share-access-details .table-wrap { margin-top: 12px; }
.share-access-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.share-access-table th, .share-access-table td { overflow-wrap: anywhere; }
.checkbox-field { display: flex; align-items: center; gap: 8px; }
.checkbox-field label { order: 2; }
.checkbox-field input { order: 1; }
.allocation-form { max-width: none !important; margin-top: 18px; }
.allocation-form fieldset { margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 6px; }
.allocation-form legend { padding: 0 6px; }
.allocation-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.allocation-field { display: grid; grid-template-columns: minmax(0, 1fr) 145px; align-items: end; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.allocation-field .form-field { gap: 5px; }
.allocation-field label { font-size: .85rem; color: var(--muted); }

.messages { margin-bottom: 20px; }
.message { margin: 0; padding: 10px 13px; border: 1px solid var(--accent); border-radius: 5px; background: #1c332f; }
.form-errors, .field-errors { color: var(--danger); }
.form-errors { margin: 0 0 14px; }
.field-errors { font-size: .88rem; }
.field-errors ul, .form-errors ul { margin: 0; padding-left: 20px; }
code { color: var(--accent-strong); font: .9em ui-monospace, SFMono-Regular, Consolas, monospace; }
.maintenance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
.maintenance-summary dd { overflow-wrap: anywhere; }
.maintenance-result { margin: 18px 0 0; color: var(--muted); }
.update-started { border-color: var(--accent); }
.recording-picker { max-width: 100%; min-width: 0; margin: 24px 0; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.recording-picker legend { padding: 0 7px; }
.recording-picker .help-text { margin: 0 0 14px; }
.sequence-input { min-width: 92px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.auth-panel { width: min(410px, 100%); margin: clamp(20px, 7vh, 64px) auto 0; padding: clamp(20px, 5vw, 30px); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.auth-panel h1 { margin-bottom: 24px; }
.auth-panel .form-field { margin-bottom: 18px; }
.auth-panel .button { width: 100%; justify-content: center; margin-top: 3px; }

@media (max-width: 760px) {
  .header-inner { width: min(100% - 24px, 1360px); grid-template-columns: minmax(0, 1fr) max-content; gap: 8px 12px; padding: 8px 0; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; }
  .account-menu { grid-column: 2; grid-row: 1; }
  .content-column { width: min(100% - 24px, 1360px); padding-top: 22px; }
  .page-heading { align-items: start; flex-direction: column; }
  .filter-form .form-field { flex: 1 1 140px; }
  .filter-actions { flex-basis: 100%; }
  .summary-grid, .evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .share-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maintenance-summary { grid-template-columns: 1fr; }
  .page-actions { flex-wrap: wrap; }
  .stats-context { align-items: start; flex-direction: column; gap: 12px; }
  .stats-zone-settings { text-align: left; }
  .stats-section-heading { flex-direction: column; gap: 8px; }
  .stats-section-heading .help-text, .stats-comparison-note { text-align: left; }
  .stats-comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-trend-grid { grid-template-columns: 1fr; }
  .stats-zone-history-row { grid-template-columns: minmax(130px, .8fr) minmax(120px, 2fr) 62px; gap: 9px; }
  .allocation-fields { grid-template-columns: 1fr; }
  .activity-chart-grid { grid-template-columns: 1fr; }
  .settings-custom-role-form { align-items: stretch; flex-direction: column; }
  .settings-custom-role-form .form-field { flex-basis: auto; }
  .form-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-role-grid { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  .header-inner { width: min(100% - 20px, 1360px); }
  .primary-nav-list { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .primary-nav-list li { min-width: 0; }
  .primary-nav-link { display: flex; justify-content: center; width: 100%; min-width: 0; min-height: 44px; padding: 4px; font-size: .86rem; white-space: normal; text-align: center; }
  .account-menu-panel { right: -2px; }
  .filter-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-form .form-field { min-width: 0; }
  .filter-form .stats-zone-controls { grid-column: 1 / -1; }
  .filter-form .filter-actions { grid-column: 1 / -1; flex-basis: auto; }
  .summary-grid, .evidence-grid { grid-template-columns: 1fr; }
  .share-summary-grid { grid-template-columns: 1fr; }
  .gear-summary-grid { grid-template-columns: 1fr; }
  .stats-comparison-grid { grid-template-columns: 1fr; }
  .stats-zone-history-row { grid-template-columns: 1fr 62px; gap: 6px 10px; }
  .stats-zone-history-row .stats-zone-stack { grid-column: 1 / -1; grid-row: 2; }
  .stats-zone-history-row .stats-zone-total { grid-column: 2; grid-row: 1; }
  .panel { padding: 15px; }
  .form-grid-two, .form-grid-four { grid-template-columns: 1fr; }
  .export-form fieldset > ul, .settings-form fieldset > ul { grid-template-columns: 1fr; }
  .settings-version { align-items: start; flex-direction: column; gap: 10px; }
}

@media (max-width: 390px) {
  .filter-form { grid-template-columns: 1fr; }
}

/* ===================================================================
   HealthFit Modern Dark UI Theme & Components
   ========================================================================== */

/* Hero Metric Cards Grid */
.hf-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 24px;
}

.hf-metric-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}

.hf-metric-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-accent, var(--border));
}

.hf-card-accent-red { --card-accent: #ff2d55; }
.hf-card-accent-cyan { --card-accent: #00c7be; }
.hf-card-accent-green { --card-accent: #30d158; }
.hf-card-accent-yellow { --card-accent: #ffd60a; }
.hf-card-accent-purple { --card-accent: #bf5af2; }
.hf-card-accent-indigo { --card-accent: #5e5ce6; }
.hf-card-accent-orange { --card-accent: #ff9f0a; }

.hf-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hf-card-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hf-card-icon {
  font-size: 1rem;
  line-height: 1;
}

.hf-card-value-wrap {
  margin: 10px 0 6px;
}

.hf-card-value {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
}

.hf-card-sub {
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

/* Dynamics Card Grid */
.hf-dynamics-panel {
  margin-top: 24px;
}

.hf-dynamics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

/* Heart Rate Zones Section */
.hf-zones-panel {
  margin-top: 24px;
}

.hf-zone-stack-bar {
  display: flex;
  width: 100%;
  height: 24px;
  border-radius: 99px;
  overflow: hidden;
  background: #1c222b;
  margin: 16px 0 20px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.hf-zone-bar-segment {
  display: block;
  height: 100%;
  transition: width 0.3s ease;
}

.hf-zone-color-1 { background-color: #64748b !important; }
.hf-zone-color-2 { background-color: #30d158 !important; }
.hf-zone-color-3 { background-color: #ffd60a !important; }
.hf-zone-color-4 { background-color: #ff9f0a !important; }
.hf-zone-color-5 { background-color: #ff453a !important; }

.hf-zones-list {
  display: grid;
  gap: 10px;
}

.hf-zone-row {
  display: grid;
  grid-template-columns: 80px 140px minmax(100px, 1fr) 110px 90px 70px;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.hf-zone-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.82rem;
}

.hf-zone-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.hf-zone-range {
  color: var(--muted);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.hf-zone-prog-wrap {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: hidden;
}

.hf-zone-prog-fill {
  height: 100%;
  border-radius: 99px;
}

.hf-zone-time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  text-align: right;
}

.hf-zone-pct {
  display: inline-block;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Interactive Chart Container */
.hf-chart-panel {
  margin-top: 24px;
}

.hf-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.hf-chart-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hf-tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.hf-tab-pill:hover,
.hf-tab-pill.is-active {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hf-tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.hf-chart-hud {
  display: flex;
  align-items: center;
  gap: 12px;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
}

.hf-hud-time {
  color: var(--muted);
  font-weight: 600;
}

.hf-hud-val {
  font-weight: 700;
}

.hf-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 280px;
  background: #090c10;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.hf-chart-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.hf-scrub-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 1px dashed rgba(255, 255, 255, 0.7);
  pointer-events: none;
  display: none;
  z-index: 10;
}

.hf-scrub-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: none;
  border: 2px solid #ffffff;
  z-index: 11;
}

.hf-tooltip-card {
  position: absolute;
  pointer-events: none;
  display: none;
  padding: 8px 12px;
  background: rgba(18, 22, 29, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  z-index: 20;
  font-size: 0.8rem;
}

.hf-tip-time {
  color: var(--muted);
  font-size: 0.72rem;
  margin-bottom: 4px;
}

.hf-tip-metric {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hf-tip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* Shoe Wear Progress Component */
.hf-shoe-wear {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.hf-wear-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;
}

.hf-wear-fill {
  height: 100%;
  border-radius: 99px;
}

.hf-wear-good { background: #30d158; }
.hf-wear-moderate { background: #ffd60a; }
.hf-wear-high { background: #ff9f0a; }
.hf-wear-exceeded { background: #ff453a; }

.hf-wear-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  .hf-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-dynamics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hf-zone-row { grid-template-columns: 70px 110px minmax(80px, 1fr) 80px 55px; }
  .hf-zone-range { display: none; }
}

@media (max-width: 500px) {
  .hf-hero-grid { grid-template-columns: 1fr; }
  .hf-dynamics-grid { grid-template-columns: 1fr; }
  .hf-zone-row { grid-template-columns: 55px 1fr 70px 45px; }
  .hf-zone-prog-wrap { display: none; }
}


/* Inline Activity Table Selects & Feedback */
.inline-cell-form {
  margin: 0;
  padding: 0;
  display: inline-block;
  max-width: 100%;
}

.inline-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
}

.inline-role-select {
  width: 100%;
  min-width: 130px;
  max-width: 165px;
  height: 27px;
  min-height: 27px;
  padding: 1px 16px 1px 6px;
  font-size: 0.77rem;
  line-height: 1.3;
  color: var(--text);
  background-color: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.inline-shoe-select {
  width: 100%;
  min-width: 105px;
  max-width: 135px;
  height: 27px;
  min-height: 27px;
  padding: 1px 16px 1px 6px;
  font-size: 0.77rem;
  line-height: 1.3;
  color: var(--text);
  background-color: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.inline-role-select:hover:not(:disabled),
.inline-shoe-select:hover:not(:disabled) {
  border-color: #4a5661;
  background-color: var(--surface);
}

.inline-role-select:focus-visible,
.inline-shoe-select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.inline-role-select.saving,
.inline-shoe-select.saving {
  opacity: 0.65;
  cursor: wait;
}

.inline-role-select.saved,
.inline-shoe-select.saved {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.inline-role-select.error,
.inline-shoe-select.error {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

.inline-feedback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.inline-feedback.is-saved {
  opacity: 1;
  color: #0a1713;
  background: var(--accent);
}

.inline-feedback.is-error {
  opacity: 1;
  color: #1a0505;
  background: var(--danger);
}

.badge-multiple {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 99px;
  background: #25333d;
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  transition: background-color 0.15s ease;
}

.badge-multiple:hover {
  background: #30424f;
  color: #d0f7e8;
}


/* Activity list table compact sizing & visual hierarchy */
.activity-table {
  width: 100%;
  min-width: 0;
}

.activity-table th,
.activity-table td {
  padding: 6px 5px;
  font-size: 0.80rem;
}

.activity-table th {
  padding: 8px 5px;
  font-size: 0.69rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: normal;
  vertical-align: bottom;
  letter-spacing: 0.04em;
}

.activity-table th.numeric,
.activity-table td.numeric {
  padding-left: 2px;
  padding-right: 5px;
}

/* Day & Daypart Visual Hierarchy */
.activity-table tbody tr.row-new-day td {
  border-top: 2px solid rgba(120, 200, 176, 0.42);
  padding-top: 13px;
}

.activity-table tbody tr.row-daypart-sep td {
  border-top: 1px dashed rgba(255, 255, 255, 0.15);
  padding-top: 9px;
}

/* Column 1: Date & Time */
.activity-table th:nth-child(1),
.activity-table td:nth-child(1) {
  min-width: 92px;
  width: 102px;
  line-height: 1.25;
}

.activity-datetime {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.activity-date {
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.activity-date.is-repeat-day {
  font-size: 0.74rem;
  font-weight: 400;
  color: #687989;
}

.activity-time {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  color: #a2b1bf;
}

.activity-time .time-hm {
  font-weight: 500;
}

.activity-time .time-ampm {
  font-size: 0.66rem;
  font-weight: 600;
  color: #798b9a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Column 2: Activity Type */
.activity-table th:nth-child(2),
.activity-table td:nth-child(2) {
  min-width: 82px;
  line-height: 1.25;
}

/* Column 3: Role (enlarged for full visibility) */
.activity-table th:nth-child(3),
.activity-table td:nth-child(3) {
  min-width: 140px;
  width: 165px;
}

/* Column 4: Avg pace / speed (tightened) */
.activity-table th:nth-child(4),
.activity-table td:nth-child(4) {
  min-width: 58px;
}

/* Column 5: Avg HR (tightened) */
.activity-table th:nth-child(5),
.activity-table td:nth-child(5) {
  min-width: 48px;
}

/* Column 6: Status */
.activity-table th:nth-child(6),
.activity-table td:nth-child(6) {
  min-width: 62px;
}

/* Column 7: Gear */
.activity-table th:nth-child(7),
.activity-table td:nth-child(7) {
  min-width: 108px;
  width: 132px;
}

/* Column 8 & 9: Effective / Recorded Distance */
.activity-table th:nth-child(8),
.activity-table td:nth-child(8),
.activity-table th:nth-child(9),
.activity-table td:nth-child(9) {
  min-width: 56px;
}

/* Column 10 & 11: Timer & Elapsed */
.activity-table th:nth-child(10),
.activity-table td:nth-child(10),
.activity-table th:nth-child(11),
.activity-table td:nth-child(11) {
  min-width: 46px;
}

.activity-table .status {
  padding: 1px 5px;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.activity-table .status-recorded {
  background: transparent;
  color: #728493;
  border: 1px solid #2e3b47;
}

.activity-table .badge-multiple {
  padding: 2px 6px;
  font-size: 0.72rem;
}

@media (max-width: 760px) {
  .button,
  button:not(.visually-hidden),
  .link-button,
  .pagination a,
  .settings-role-delete-form .button,
  .inline-role-form .button { min-height: 44px; }
  .inline-role-select,
  .inline-shoe-select { height: auto; min-height: 44px; padding-block: 6px; font-size: .82rem; }
  .split-copy-override input { min-height: 44px; }
}

.browser-label-form { display: grid; gap: 8px; margin-top: 8px; }
.browser-label-form input { width: 100%; min-width: 0; }
.browser-label-form button { justify-self: start; }

/* The menu lives above table overflow containers, including on narrow screens. */
.role-picker { display: inline-block; min-width: 130px; max-width: 100%; }
.role-picker-trigger {
  width: 100%; min-height: 40px; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface-muted); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.role-picker-trigger:hover { border-color: var(--accent); }
.role-picker-trigger:disabled, .role-picker-trigger[aria-disabled="true"] { opacity: .6; cursor: wait; }
.role-picker-trigger.saved { border-color: var(--accent); }
.role-picker-trigger.error { border-color: var(--danger); }
.role-picker-menu {
  position: fixed; z-index: 1000; display: flex; flex-direction: column;
  padding: 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  box-shadow: 0 12px 36px #0008; white-space: normal;
}
.role-picker-menu[hidden] { display: none; }
.role-picker-search { width: 100%; min-height: 42px; flex-shrink: 0; font-size: 16px; }
.role-picker-options { min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-top: 8px; }
.role-picker-group { padding: 9px 8px 4px; color: var(--muted); font-size: .78rem; font-weight: 700; }
.role-picker-option { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 4px; cursor: pointer; overflow-wrap: anywhere; }
.role-picker-option:hover { background: var(--surface-muted); }
.role-picker-option.is-active { background: #284c42; outline: 1px solid var(--accent); outline-offset: -1px; }
.role-picker-option[aria-selected="true"] { font-weight: 700; }
.role-picker-status { margin: 6px 2px; font-size: .8rem; color: var(--muted); }
.role-picker-footer { display: grid; gap: 6px; flex-shrink: 0; padding: 8px 2px 2px; border-top: 1px solid var(--border); font-size: .75rem; color: var(--muted); }
.settings-role-field .role-picker { display: block; }

@media (max-width: 600px) {
  .role-picker-trigger { min-height: 44px; }
  .role-picker-option { min-height: 44px; align-items: center; }
}

@media (max-width: 760px) {
  .content-column { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { font-size: 16px; }
  button:not(.visually-hidden), .button, summary { min-height: 44px; }
  .back-link a { display: inline-flex; align-items: center; min-height: 44px; }
}

.split-summary-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 8px; padding: 0; margin: 14px 0; list-style: none; }
.split-summary-row { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; }
.split-summary-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; }
.split-summary-title span { color: var(--muted); font-size: .85rem; }
.split-summary-row dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; }
.split-summary-row dt { color: var(--muted); font-size: .78rem; }
.split-summary-row dd { margin: 0; font-variant-numeric: tabular-nums; }
.split-full-evidence > summary { min-height: 44px; padding: 10px 0; cursor: pointer; color: var(--accent-strong); }

.error-summary { margin-bottom: 20px; }
.error-summary h2 { font-size: 1.1rem; }
.error-summary a { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}