/*
 * css/base/global.css
 * 27 Oct 2026 v4
 *   v4 - A-6: .fig-bandq, a band coming towards you (amber dashes that thin with distance).
 *   v3 - A-6 FIGURE-PASS. Figures: .fig-water (the water surface, light and
 *   wavy), .fig-say (a speech bubble), .fig-note ("feel it" beside the ring);
 *   .fig-guide grey and dotted so it is not read as a movement or a band.
 *   v2 - D-4 FIGURES. .xfig, the stick figures (js/figures.js): frames side
 *   by side on the page ground, the person in the text colour, the far side
 *   and equipment in the secondary text colour and thinner, weights amber,
 *   the movement teal, the floor in the border colour. All tokens, so the
 *   three colour schemes need nothing.
 *   First dated header (the file had none). LOOK-4: shared kind tiles
 *   (.kind-tile, .k-*), .look-card and .look-label, at the foot.
 */
/* ============================================
   GYM PROGRAMME — RAG CONDITION BOXES
   ============================================ */

/*
 * WCAG 2.2 AA compliant colour combinations.
 * Colour alone does not carry meaning — badge label text states severity.
 * Contrast ratios verified:
 *   Red:   #7f1d1d bg / #fecaca text = 5.2:1 (passes AA normal)
 *   Amber: #78350f bg / #fef3c7 text = 5.8:1 (passes AA normal)
 *   Green: #14532d bg / #bbf7d0 text = 5.1:1 (passes AA normal)
 */

.gym-rag-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.gym-rag-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border-left: 4px solid;
}

.gym-rag-box.rag-red {
  background: #7f1d1d;
  border-left-color: #ef4444;
  color: #fecaca;
}

.gym-rag-box.rag-amber {
  background: #78350f;
  border-left-color: #f59e0b;
  color: #fef3c7;
}

.gym-rag-box.rag-green {
  background: #14532d;
  border-left-color: #22c55e;
  color: #bbf7d0;
}

.gym-rag-badge {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gym-rag-condition {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

.gym-rag-note {
  font-size: var(--text-sm);
  opacity: 0.85;
  margin: 0;
}

.gym-safety-note {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

/* ============================================
   GYM PROGRAMME — PORTABLE CARDIO MODAL
   ============================================ */

.gym-cardio-modal {
  border: 1.5px solid var(--color-primary);
}

.gym-cardio-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.gym-phase-secondary-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.gym-phase-secondary-actions .btn {
  flex: 1;
  min-width: 0;
}

/* ============================================
   GYM PROGRAMME — CARDIO FEEL SLIDER
   ============================================ */

.cardio-feel-label {
  font-size: var(--text-sm);
}

.cardio-feel-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border);
  border-radius: var(--radius-full);
  outline: none;
  margin: var(--space-3) 0 var(--space-2);
}

.cardio-feel-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-bg-card);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.cardio-feel-slider::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 2px solid var(--color-bg-card);
}

.cardio-feel-slider:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 4px;
}

.cardio-feel-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding: 0 var(--space-1);
}

/* ============================================
   CHECKIN — CONVERSATIONAL STEP FLOW
   Premium redesign. One question at a time.
   ============================================ */

.checkin-step-view {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 80px); /* full height minus nav */
  padding-bottom: var(--space-6);
}

/* Progress dots */
.checkin-step-header {
  padding: var(--space-4) 0 var(--space-6);
}

.checkin-progress-dots {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.checkin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: all 0.3s ease;
}

.checkin-dot.done {
  background: var(--color-primary);
  opacity: 0.5;
}

.checkin-dot.current {
  background: var(--color-primary);
  width: 24px;
  border-radius: 4px;
}

/* Body */
.checkin-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Coach line — minimal, not a card */
.checkin-coach-line {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.coach-icon-xs {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}

.checkin-coach-line p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Question text */
.checkin-question {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0;
}

.checkin-question-sub {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
}

/* Slider block */
.checkin-slider-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Value display */
.checkin-value-display {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.checkin-value-emoji {
  font-size: calc(2.5rem * var(--user-text-scale, 1));
  line-height: 1;
}

.checkin-value-number {
  font-size: calc(4rem * var(--user-text-scale, 1));
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.checkin-value-label {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  font-weight: var(--font-semibold);
}

/* Slider styling — premium large thumb */
.checkin-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-border);
  border-radius: var(--radius-full);
  outline: none;
}

.checkin-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 3px solid var(--color-bg-card);
  box-shadow: 0 0 0 2px var(--color-primary), 0 4px 12px rgba(45, 212, 191, 0.3);
  transition: box-shadow 0.2s ease;
}

.checkin-slider::-webkit-slider-thumb:active {
  box-shadow: 0 0 0 4px var(--color-primary), 0 4px 16px rgba(45, 212, 191, 0.4);
}

.checkin-slider::-moz-range-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: 3px solid var(--color-bg-card);
}

.checkin-slider:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 6px;
}

.checkin-slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Sleep adjuster */
.checkin-sleep-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.checkin-sleep-adjuster {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.checkin-sleep-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text);
  font-size: calc(1.5rem * var(--user-text-scale, 1));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.checkin-sleep-btn:hover,
.checkin-sleep-btn:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.checkin-sleep-display {
  flex: 1;
  text-align: center;
}

.checkin-sleep-number {
  display: block;
  font-size: calc(4rem * var(--user-text-scale, 1));
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.checkin-sleep-unit {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

/* Sleep quality chips */
.checkin-sleep-quality {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checkin-quality-chips {
  display: flex;
  gap: var(--space-3);
}

.checkin-quality-chip {
  flex: 1;
  min-height: 48px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.checkin-quality-chip.selected,
.checkin-quality-chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
  color: var(--color-primary);
}

/* Condition pain chips */
.checkin-conditions-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.checkin-condition-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checkin-condition-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

.checkin-pain-chips {
  display: flex;
  gap: var(--space-2);
}

.checkin-pain-chip {
  flex: 1;
  min-height: 44px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.checkin-pain-chip.selected.low      { border-color: #22c55e; background: rgba(34,197,94,0.1);  color: #22c55e; }
.checkin-pain-chip.selected.mild     { border-color: #f59e0b; background: rgba(245,158,11,0.1); color: #f59e0b; }
.checkin-pain-chip.selected.moderate { border-color: #f97316; background: rgba(249,115,22,0.1); color: #f97316; }
.checkin-pain-chip.selected.severe   { border-color: #ef4444; background: rgba(239,68,68,0.1);  color: #ef4444; }

/* Time grid */
.checkin-time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.checkin-time-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: var(--space-3);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  cursor: pointer;
  transition: all var(--transition-fast);
  gap: var(--space-1);
}

.checkin-time-card.selected,
.checkin-time-card[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
}

.checkin-time-label {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.checkin-time-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.checkin-time-card.selected .checkin-time-label,
.checkin-time-card[aria-pressed="true"] .checkin-time-label {
  color: var(--color-primary);
}

/* Summary step */
.checkin-summary-body {
  justify-content: center;
}

.checkin-summary-coach {
  margin-top: var(--space-6);
}

/* Step actions — pinned to bottom */
.checkin-step-actions {
  padding-top: var(--space-5);
  margin-top: auto;
}

/* ============================================
   COACH PROPOSAL — REFINED TYPOGRAPHY
   ============================================ */

.coach-proposal-view .view {
  padding-bottom: var(--space-8);
}

.coach-proposal-card {
  border: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.coach-proposal-greeting {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: var(--leading-tight);
}

.coach-proposal-reflection {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.coach-proposal-suggestion {
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.coach-proposal-rationale {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--text-sm);
}

.coach-proposal-duration {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  background: var(--color-primary-glow);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.coach-proposal-actions {
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}


/* ============================================
   COACH PROPOSAL — BRANCH CHIPS (MISSING)
   ============================================ */

.coach-branch-chips {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.coach-branch-chip {
  width: 100%;
  min-height: 64px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
}

.coach-branch-chip:hover,
.coach-branch-chip:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
  color: var(--color-primary);
  transform: translateX(3px);
}

/* ============================================
   ACTIVITY LOG VIEW
   ============================================ */

.activity-log-view { padding-bottom: var(--space-8); }

.activity-group-heading {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--space-5) 0 var(--space-3);
}

.activity-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.activity-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 72px;
  padding: var(--space-3) var(--space-2);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.activity-type-card:hover,
.activity-type-card:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
  color: var(--color-primary);
}

.activity-type-card span:first-child { font-size: calc(1.4rem * var(--user-text-scale, 1)); }

.activity-log-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
}

.activity-log-type {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

.activity-duration-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

/* ============================================
   CONSISTENT NAV — ensure always visible
   ============================================ */

/* Bottom nav is always shown for main views.
   Only hidden for onboarding and active workout sessions.
   This overrides any view-specific hiding. */
.app-nav {
  display: flex;
}

/* ============================================
   COACH PROPOSAL HEADER — Library top right
   ============================================ */

.coach-proposal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding-top: var(--space-2);
}

.proposal-back-btn {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-height: 44px;
  padding: 0 var(--space-2);
}

.proposal-library-btn {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  min-height: 44px;
  padding: 0 var(--space-2);
}

/* Coach-proposal body — no card wrapper, clean text */
.coach-proposal-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: var(--space-5);
}

/* Activity picker — ensure grid renders */
.coach-activity-pick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.coach-activity-pick-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 80px;
  padding: var(--space-3);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.coach-activity-pick-btn:hover,
.coach-activity-pick-btn:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
  color: var(--color-primary);
}

.coach-activity-pick-btn span:first-child { font-size: calc(1.6rem * var(--user-text-scale, 1)); }

/* ============================================
   SETTINGS — EDITABLE PROFILE
   ============================================ */

.settings-edit-card { padding: var(--space-4); }

.settings-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.settings-field:last-child { border-bottom: none; }

.settings-field-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.settings-field-input {
  width: 100%;
  min-height: 48px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-base);
  padding: 0 var(--space-3);
  box-sizing: border-box;
}

.settings-field-input:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

.settings-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.settings-chip {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.settings-chip.selected,
.settings-chip[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
  color: var(--color-primary);
}

.settings-weight-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.settings-weight-input { flex: 1; }

.settings-unit-toggle {
  display: flex;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.settings-unit-btn {
  padding: var(--space-2) var(--space-3);
  min-height: 44px;
  background: var(--color-bg);
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.settings-unit-btn.selected {
  background: var(--color-primary);
  color: white;
}

/* ============================================
   SETTINGS — CONDITIONS ADD/REMOVE
   ============================================ */

.condition-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-3);
}

.condition-settings-row:last-child { border-bottom: none; }

.condition-settings-name {
  font-size: var(--text-base);
  color: var(--color-text);
  flex: 1;
}

.condition-paused { opacity: 0.5; }

.condition-paused-badge {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 1px 6px;
  margin-left: var(--space-2);
  vertical-align: middle;
}

.condition-settings-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.conditions-add-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.condition-add-chip {
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.condition-add-chip:hover,
.condition-add-chip:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-glow);
}

/* ============================================
   SETTINGS — MY MOVEMENT TAB
   ============================================ */

.section-subheading {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

/* Movement identity tiles */
.movement-identity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.movement-identity-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: 68px;
  padding: var(--space-2);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.movement-identity-tile.selected,
.movement-identity-tile[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
}

.movement-tile-icon { font-size: calc(1.4rem * var(--user-text-scale, 1)); }

.movement-tile-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.2;
}

.movement-identity-tile.selected .movement-tile-label {
  color: var(--color-primary);
}

/* Facility presets */
.facility-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.facility-preset-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
  min-height: 80px;
}

.facility-preset-card:hover,
.facility-preset-card:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
}

.facility-preset-icon { font-size: calc(1.5rem * var(--user-text-scale, 1)); }

.facility-preset-label {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.facility-preset-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Equipment details — native <details> element */
.equipment-detail-block {
  margin-top: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.equipment-detail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
  list-style: none;
  background: var(--color-bg-card);
}

.equipment-detail-summary::-webkit-details-marker { display: none; }

.equipment-count-badge {
  font-size: var(--text-sm);
  color: var(--color-primary);
  font-weight: var(--font-semibold);
  background: var(--color-primary-glow);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.equipment-detail-block > :not(summary) {
  padding: 0 var(--space-4) var(--space-4);
}

/* ============================================
   SETTINGS — LIBRARY TAB TILES
   ============================================ */

.library-section-block {
  margin-bottom: var(--space-6);
}

.library-section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.library-section-icon { font-size: calc(1.5rem * var(--user-text-scale, 1)); flex-shrink: 0; margin-top: 2px; }

.library-section-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
}

.library-section-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.library-group-label {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--space-4) 0 var(--space-2) 0;
}

/* Tile grid */
.library-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.library-tile-grid--compact {
  grid-template-columns: repeat(4, 1fr);
}

.library-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 76px;
  padding: var(--space-3) var(--space-2);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
  position: relative;
}

.library-tile:hover:not(:disabled),
.library-tile:focus-visible:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
}

.library-tile--soon {
  opacity: 0.45;
  cursor: not-allowed;
}

.library-tile--compact {
  min-height: 60px;
  padding: var(--space-2);
}

.library-tile-icon { font-size: calc(1.4rem * var(--user-text-scale, 1)); }
.library-tile--compact .library-tile-icon { font-size: calc(1.1rem * var(--user-text-scale, 1)); }

.library-tile-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: 1.2;
}

.library-tile:hover:not(:disabled) .library-tile-label,
.library-tile:focus-visible:not(:disabled) .library-tile-label {
  color: var(--color-primary);
}

.library-tile-soon {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--color-text-muted);
  background: var(--color-bg);
  padding: 1px 5px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============================================
   PROGRESS v3 — NUMBERS FIRST
   ============================================ */

.progress-view { padding-bottom: var(--space-8); }

/* Coach summary — no card, just text */
.progress-coach-card {
  margin-bottom: var(--space-5);
}

.progress-coach-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.progress-coach-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
}

/* This week card */
.progress-week-card { margin-bottom: var(--space-4); }

.progress-week-top {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Ring */
.progress-ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.progress-ring {
  width: 80px;
  height: 80px;
}

.progress-ring-track {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 6;
}

.progress-ring-fill {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}

.progress-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.progress-ring-num {
  font-size: calc(1.5rem * var(--user-text-scale, 1));
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: 1;
}

.progress-ring-of {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-semibold);
}

/* Stat rows */
.progress-week-stats {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.progress-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.progress-stat-row:last-child { border-bottom: none; padding-bottom: 0; }

.progress-stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.progress-stat-value {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

/* Check-in dots */
.progress-checkins-card { margin-bottom: var(--space-4); }

.progress-checkins-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.progress-checkin-count {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

.progress-dot-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.progress-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.progress-dot-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  transition: all var(--transition-fast);
}

.progress-dot-circle.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.progress-dot-day {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-semibold);
}

.progress-checkin-avgs {
  display: flex;
  gap: var(--space-3);
}

.progress-avg-pill {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.progress-avg-pill strong {
  color: var(--color-text);
  font-weight: var(--font-bold);
}

/* Stat tiles */
.progress-tiles-card { margin-bottom: var(--space-4); }

.progress-tiles-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.progress-tiles-total {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.progress-tiles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}

.progress-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-2);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  text-align: center;
}

.progress-tile--empty { opacity: 0.4; }

.progress-tile-icon { font-size: calc(1.2rem * var(--user-text-scale, 1)); }

.progress-tile-value {
  font-size: calc(1.5rem * var(--user-text-scale, 1));
  font-weight: var(--font-bold);
  color: var(--color-text);
  line-height: 1;
}

.progress-tile-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

/* Patterns */
.progress-patterns-card { margin-bottom: var(--space-4); }

.progress-patterns-coach {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.progress-pattern-item {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  margin: 0;
}

/* Body changes */
.progress-body-card,
.progress-body-optin {
  margin-bottom: var(--space-4);
}

.progress-body-stats {
  display: flex;
  gap: var(--space-4);
}

.progress-body-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.progress-body-value {
  font-size: calc(1.8rem * var(--user-text-scale, 1));
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.progress-body-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.progress-body-change {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

.progress-body-change.down { color: #22c55e; }
.progress-body-change.up   { color: #f59e0b; }

/* ============================================
   YOGA SESSION
   ============================================ */

.yoga-view { padding-bottom: var(--space-8); }
.yoga-coach-card { margin-bottom: var(--space-5); }

/* Focus grid */
.yoga-focus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.yoga-focus-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 88px;
  padding: var(--space-4) var(--space-3);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.yoga-focus-card.selected,
.yoga-focus-card[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
}

.yoga-focus-card:hover:not(.selected):not([aria-pressed="true"]) {
  border-color: var(--color-primary);
}

.yoga-focus-icon { font-size: calc(1.8rem * var(--user-text-scale, 1)); }

.yoga-focus-label {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text);
  text-align: center;
}

.yoga-focus-card.selected .yoga-focus-label,
.yoga-focus-card[aria-pressed="true"] .yoga-focus-label {
  color: var(--color-primary);
}

/* Duration grid */
.yoga-duration-grid {
  display: flex;
  gap: var(--space-3);
}

.yoga-duration-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-height: 96px;
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.yoga-duration-card.selected,
.yoga-duration-card[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
}

.yoga-duration-num {
  font-size: calc(2.5rem * var(--user-text-scale, 1));
  font-weight: var(--font-bold);
  color: var(--color-primary);
  line-height: 1;
}

.yoga-duration-unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.yoga-duration-poses {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Sequence preview */
.yoga-sequence-preview { margin-bottom: var(--space-4); }
.yoga-sequence-preview h3 { margin-bottom: var(--space-3); }

.yoga-pose-list {
  padding-left: var(--space-5);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.yoga-pose-list li {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.yoga-pose-list li:last-child { border-bottom: none; }
.yoga-pose-time { color: var(--color-text-muted); font-size: var(--text-xs); }

/* Session execution */
.yoga-session-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.yoga-session-step {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.yoga-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.yoga-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}

/* Pose card */
.yoga-pose-card { margin-bottom: var(--space-4); }

.yoga-pose-name {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.yoga-pose-coaching {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

/* Timer */
.yoga-timer-block { text-align: center; }

.yoga-timer-circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 5px solid var(--phase-colour, var(--color-primary));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: var(--color-bg-card);
  box-shadow: 0 0 28px rgba(45, 212, 191, 0.1);
}

.yoga-timer-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-1);
}

.yoga-timer-seconds {
  font-size: calc(3rem * var(--user-text-scale, 1));
  font-weight: var(--font-bold);
  color: var(--color-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Instructions */
.yoga-instructions {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.yoga-instructions-summary {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  cursor: pointer;
  list-style: none;
  padding: var(--space-2) 0;
}

.yoga-instructions-summary::-webkit-details-marker { display: none; }

.yoga-instructions-list {
  padding-left: var(--space-5);
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.yoga-instructions-list li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* Loading screen message */
.loading-message {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 280px;
  line-height: var(--leading-relaxed);
  margin: var(--space-3) auto var(--space-4);
  font-style: italic;
}

/* ============================================
   LIGHT MODE THEME - REMOVED 12 Aug 2026 (A11Y-2)

   The html.light-mode block that stood here has been moved to
   Documents/Archive/alongside_light_mode_removed_css_12aug2026_v1.md,
   which records the full CSS and the reasoning.

   Short version. It was unreachable: nothing in any JS file or
   index.html has ever added the light-mode class, and no Settings
   toggle exists despite the block's comment claiming one. And it would
   not have worked if it had been reachable: six surface and text
   tokens were never overridden, including --color-bg-elevated and
   --color-bg-hover (both #3E4C63, dark slate), so light-mode text on
   the 56 rules using an elevated background measured 1.19-2.06:1.

   Fixing the six tokens was rejected deliberately - that produces a
   REACHABLE broken light mode instead of an unreachable one, and
   overriding six tokens does not restyle 25 component stylesheets.

   Light mode itself remains genuinely wanted, and the archive note says
   why: dark-only causes halation for people with astigmatism, and this
   product is built for an audience where display mode is a functional
   matter rather than a taste one. It is a scoped feature for the beta
   conversation, not a cleanup patch. The archive note lists the five
   things a real implementation needs.
   ============================================ */

/* ============================================
   QUIET SESSION MODE SELECTOR — PROPER CARDS
   ============================================ */

.quiet-mode-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.quiet-mode-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  min-height: 72px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}

.quiet-mode-card:hover,
.quiet-mode-card:focus-visible {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
  transform: translateX(3px);
}

.quiet-mode-card-left {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 3px;
}

.quiet-mode-card-title {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text);
}

.quiet-mode-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.quiet-mode-card-icon {
  font-size: calc(1.5rem * var(--user-text-scale, 1));
  flex-shrink: 0;
}

.quiet-mode-card-chevron {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Journaling — dark textarea always */
.quiet-journal-textarea {
  width: 100%;
  min-height: 120px;
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  resize: vertical;
  box-sizing: border-box;
}

.quiet-journal-textarea::placeholder {
  color: var(--color-text-muted);
}

.quiet-journal-textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

/* Journaling prompt text - larger, more inviting */
.quiet-journal-prompt {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2);
}

.quiet-journal-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  margin-bottom: var(--space-3);
}

/* ============================================
   SETTINGS — SAVE CONFIRMATION
   ============================================ */

.settings-save-toast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #000;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  z-index: 9999;
  pointer-events: none;
  animation: toast-fade 2s ease forwards;
}

@keyframes toast-fade {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0);   }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ============================================
   PROGRESS — TILE GRID OVERFLOW FIX
   ============================================ */

.progress-tiles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  overflow: visible;
}

/* On very narrow screens, wrap to 2+3 */
@media (max-width: 360px) {
  .progress-tiles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Facility preset selected state */
.facility-preset-card.selected,
.facility-preset-card[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary-glow);
}

/* ============================================
   QUIET SESSION — DOMINANT TIMER DISPLAY
   ============================================ */

.quiet-timer-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 5px solid var(--color-primary);
  margin: 0 auto;
  background: var(--color-bg-card);
  box-shadow: 0 0 40px rgba(45, 212, 191, 0.15);
}

.quiet-timer-label {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.quiet-timer-digits {
  font-size: calc(4rem * var(--user-text-scale, 1));
  font-weight: var(--font-bold);
  color: var(--color-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}


/* ============================================================
   LOOK-4 — shared pieces, 04 Oct 2026
   One kind colour per kind of session (variables.css --kind-*, LOOK-3),
   drawn as a tile behind a line icon (data/line-icons.js). The tile is
   always beside words that say the same thing, so colour is never the
   only cue (1.4.1). Kind colours as text only on the page and card
   ground; on the tile they are a shape (3:1, verify-contrast-check v3).
   ============================================================ */
.k-teal   { --k: var(--kind-teal); }
.k-amber  { --k: var(--kind-amber); }
.k-violet { --k: var(--kind-violet); }
.k-blue   { --k: var(--kind-blue); }
.k-rose   { --k: var(--kind-rose); }
.k-green  { --k: var(--kind-green); }
.k-slate  { --k: var(--kind-slate); }
.kind-tile {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--k, var(--color-primary));
  background: var(--color-bg-card);
  background: color-mix(in srgb, var(--k, var(--color-primary)) 16%, var(--color-bg));
}
.kind-tile--sm { width: 36px; height: 36px; border-radius: 10px; }
.kind-tile--lg { width: 56px; height: 56px; border-radius: 18px; }
.line-icon { display: block; flex: none; }
.look-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
}
.look-label {
  margin: var(--space-3) 0 var(--space-2) var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* D-4 FIGURES, 04 Oct 2026 -- the stick figures (js/figures.js). */
.xfig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0 0 var(--space-3); }
.xfig--1 { grid-template-columns: minmax(0, 1fr); }
.xfig--1 .xfig__frame { max-width: 70%; justify-self: center; width: 100%; }
.xfig--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xfig__frame { margin: 0; padding: 6px 6px 8px; background: var(--color-bg); border-radius: 14px; }
.fig-svg { display: block; width: 100%; height: auto; }
.xfig__cap { margin-top: 4px; text-align: center; font-size: var(--text-sm); line-height: 1.3; color: var(--color-text-secondary); }
.fig-body, .fig-far { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fig-body { stroke: var(--color-text); stroke-width: 7; }
.fig-far { stroke: var(--color-text-secondary); stroke-width: 5.5; opacity: 0.8; }
.fig-head { fill: var(--color-bg); stroke: var(--color-text); stroke-width: 7; }
.fig-floor { stroke: var(--color-border); stroke-width: 3; stroke-linecap: round; }
.fig-mat { fill: var(--color-border); }
.fig-eq line, .fig-eq-dark-line line { stroke-width: 4; stroke-linecap: round; }
.fig-eq line { stroke: var(--color-text-secondary); }
.fig-eq-fill { fill: var(--color-text-secondary); }
.fig-eq-dark { fill: var(--color-border); }
.fig-eq-dark-line line { stroke: var(--color-border); }
.fig-eq-ring { fill: none; stroke: var(--color-text-secondary); stroke-width: 3; }
.fig-cable { stroke: var(--color-text-secondary); stroke-width: 2; }
.fig-bar { stroke: var(--color-text-secondary); stroke-width: 5; stroke-linecap: round; }
.fig-band { stroke: var(--kind-amber); stroke-width: 3; stroke-dasharray: 6 4; stroke-linecap: round; }
.fig-bandq { stroke: var(--kind-amber); stroke-linecap: round; }
.fig-wt { fill: var(--kind-amber); }
.fig-wt-line { fill: none; stroke: var(--kind-amber); stroke-width: 4; }
.fig-move { fill: none; stroke: var(--color-primary); stroke-width: 4; stroke-linecap: round; }
.fig-arrowhead { fill: var(--color-primary); }
.fig-guide { stroke: var(--color-text-secondary); stroke-width: 2; stroke-dasharray: 1 6; stroke-linecap: round; }
.fig-water { fill: none; stroke: var(--color-border); stroke-width: 2.5; stroke-linecap: round; }
.fig-say { fill: var(--color-bg); stroke: var(--color-text-secondary); stroke-width: 2.5; stroke-linejoin: round; }
.fig-say-line { stroke: var(--color-text-secondary); stroke-width: 2; stroke-linecap: round; }
.fig-note { fill: var(--color-text-secondary); font-size: var(--text-xs); font-weight: 600; font-family: inherit; paint-order: stroke; stroke: var(--color-bg); stroke-width: 4px; stroke-linejoin: round; }
.fig-ring { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-dasharray: 4 4; }
@media (forced-colors: active) {
  .fig-body, .fig-head { stroke: CanvasText; }
  .fig-far, .fig-eq line, .fig-cable, .fig-bar, .fig-eq-ring, .fig-water, .fig-say, .fig-say-line, .fig-guide { stroke: GrayText; }
  .fig-note { fill: GrayText; }
  .fig-move, .fig-ring, .fig-band, .fig-bandq { stroke: Highlight; }
  .fig-arrowhead, .fig-wt, .fig-eq-fill, .fig-mat, .fig-eq-dark { fill: CanvasText; }
  .fig-head { fill: Canvas; }
}

.xcard-figure .xfig { margin-bottom: 0; }