.subnav { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-muted); }
.subnav a { padding: 7px 12px; border-radius: 2px; color: var(--text-muted); font-size: 13px; font-weight: 600; text-decoration: none; }
.subnav a.active { background: var(--surface-raised); color: var(--text); box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 10%, transparent); }
.compact-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.progress-layout { align-items: start; }
.weight-chart { display: block; width: 100%; min-height: 250px; overflow: visible; }
.chart-axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-point { fill: var(--primary); stroke: var(--surface-raised); stroke-width: 2; }
.formula-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.formula-grid article { display: grid; gap: 5px; padding: 16px; }
.formula-grid article + article { border-left: 1px solid var(--border); }
.formula-grid span, .formula-grid small, .calibration-grid span, .calibration-grid small { color: var(--text-muted); }
.formula-grid strong { font-size: 20px; }
.calibration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.calibration-grid > div { display: grid; gap: 4px; padding: 16px; background: var(--surface-raised); }
.projection-note, .token-once, .code-block, .endpoint { overflow-wrap: anywhere; }
.projection-note { margin-top: 14px; padding: 12px; border-left: 3px solid var(--primary); background: var(--surface-muted); color: var(--text-muted); }
.token-once, .code-block { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-muted); overflow-x: auto; }
.endpoint { display: block; margin-top: 14px; }
.instruction-list { padding-left: 20px; color: var(--text-muted); }
.enrollment-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.enrollment-grid img { border: 1px solid var(--border); background: #fff; }
.manual-secret { display: block; margin: 10px 0 18px; overflow-wrap: anywhere; }
.recovery-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.recovery-codes code { padding: 9px; border: 1px solid var(--border); background: var(--surface-muted); text-align: center; }
.notification-item { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 18px; border-bottom: 1px solid var(--border); }
.notification-item:last-child { border-bottom: 0; }
.notification-item.unread { box-shadow: inset 3px 0 var(--primary); background: color-mix(in srgb, var(--primary) 4%, transparent); }
.notification-item h2 { margin: 8px 0 4px; font-size: 16px; }
.notification-item p { margin: 0 0 8px; color: var(--text-muted); }
.notification-actions { display: flex; gap: 6px; }
.settings-rule-list { display: grid; gap: 14px; }
.weekday-picker { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 10px; border: 1px solid var(--border); }
.weekday-picker legend { padding: 0 5px; color: var(--text-muted); font-size: 12px; }
.weekday-picker label { display: inline-flex; align-items: center; gap: 4px; }
.admin-event { border-bottom: 1px solid var(--border); }
.admin-event summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px; cursor: pointer; }
.admin-event summary > span:first-child { display: grid; }
.admin-event summary small { color: var(--text-muted); }
.admin-event-body { display: grid; gap: 18px; padding: 0 14px 18px; }
.policy-form, .template-form { padding-top: 14px; border-top: 1px solid var(--border); }
.template-preview { display: grid; gap: 4px; padding: 10px; background: var(--surface-muted); }
.table-wrap { overflow-x: auto; }
.file-drop { display: grid; gap: 8px; padding: 28px; border: 1px dashed var(--border-strong); background: var(--surface-muted); text-align: center; }
.receipt-line-list { display: grid; }
.receipt-line { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(0,2fr); gap: 16px; padding: 16px; border-top: 1px solid var(--border); }
.receipt-raw { display: grid; align-content: start; gap: 4px; }
.receipt-raw small { color: var(--text-muted); }
.receipt-confirm-form { display: grid; grid-template-columns: minmax(180px,2fr) repeat(3,minmax(90px,.7fr)); gap: 8px; align-items: end; }
.receipt-confirm-form .button { grid-column: 1 / -1; justify-self: start; }
.receipt-line-secondary { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.receipt-line.confirmed { background: color-mix(in srgb,var(--success) 5%,transparent); }
.debug-details { margin-top: 16px; }
.export-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.progress-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--border); }
.progress-summary > div { display: grid; gap: 5px; padding: 18px; background: var(--surface-raised); }
.progress-summary span { color: var(--text-muted); }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-150%); background: var(--text); color: var(--background); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
@media (max-width: 767px) {
  .button, .button.small { min-height: 44px; }
  .icon-button { width: 44px; height: 44px; }
  .field textarea,
  .form-stack > label:not(.check-label) > input, .form-stack > label:not(.check-label) > select, .form-stack > label:not(.check-label) > textarea,
  .form-grid > label:not(.check-label) > input, .form-grid > label:not(.check-label) > select, .form-grid > label:not(.check-label) > textarea,
  .plan-amount-form input, .search-bar input { min-height: 44px; }
  .check-label, .weekday-picker label, .repeat-days label { min-height: 44px; }
  .weekday-picker label, .repeat-days label { min-width: 44px; justify-content: center; }
  .subnav { width: 100%; }
  .subnav a { flex: 1; text-align: center; }
  .compact-metrics, .formula-grid, .calibration-grid { grid-template-columns: 1fr; }
  .formula-grid article + article { border-top: 1px solid var(--border); border-left: 0; }
  .weight-chart { min-height: 180px; }
  .enrollment-grid { grid-template-columns: 1fr; }
  .enrollment-grid img { width: min(100%, 220px); height: auto; }
  .recovery-codes { grid-template-columns: 1fr; }
  .notification-item { display: grid; }
  .notification-actions, .notification-actions form, .notification-actions .button { width: 100%; }
  .receipt-line { grid-template-columns: 1fr; }
  .receipt-confirm-form { grid-template-columns: 1fr; }
  .receipt-line-secondary { grid-column: 1; }
  .export-grid,.progress-summary { grid-template-columns: 1fr; }
}