/* Shared interaction and spacing rules, loaded after page styles. */
:root { --safe-top: env(safe-area-inset-top, 0px); --text-3: #9999a3; --muted: #9999a3; --dim: #9999a3; }
[hidden] { display: none !important; }
body::before { content: ''; position: fixed; inset: 0 0 auto; height: var(--safe-top); background: var(--bg); z-index: 600; pointer-events: none; }
.wp-head, .ex-head, .ex-header, .train-cta-bar, .section-tabs { top: var(--safe-top); }
input, select, textarea { font-size: max(16px, 1em) !important; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tl-banner { padding: 8px 0 18px; min-height: 60px; }
.bottom-nav .bnav-item { gap: 3px; }
.bottom-nav .bnav-label, .bottom-nav .bnav-item:hover .bnav-label { position: static; opacity: 1; transform: none; border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; color: inherit; font-size: 11px; font-weight: 500; }
.an-page { min-height: calc(100dvh - var(--safe-top)); }
.an-title, .you-title { font-size: 26px; letter-spacing: -.025em; }
.an-card, .card.you-card, .nutrition-card, .ex-card { border: 1px solid var(--border); box-shadow: none; border-radius: 16px; }
.an-card-head { gap: 12px; align-items: center; }
.an-card-title, .ex-card-title, .tl-section-title, .meals-title { font: 600 16px/1.4 var(--font-body); color: var(--text); text-transform: none; letter-spacing: -.015em; }
.an-card-sub, .an-tile-l, .st-dose-band, .st-ex-sub, .st-rir-lbl, .ex-empty { font-size: 12px; line-height: 1.5; }
.an-card-sub { text-align: right; }
.an-tile { border: none; padding: 14px 5px; }
.an-tile-v { font-size: 22px; }
.an-bar-fill { display: block; min-width: 0; }
.an-bar-row { grid-template-columns: 96px minmax(0,1fr) 28px; }
.an-bar-label, .an-bar-val { font-size: 13px; }
.an-bar-val { text-align: right; }
.st-rir { height: auto; align-items: stretch; }
.st-rir-col { height: auto; display: grid; grid-template-rows: 20px 88px 22px; gap: 5px; }
.st-rir-track { height: 88px; width: 100%; display: flex; justify-content: center; align-items: flex-end; }
.st-rir-bar { flex-shrink: 0; width: 60%; min-height: 0; }
.st-rir-n { font-size: 12px; text-align: center; }
.st-rir-lbl { text-align: center; white-space: nowrap; }
.tl-segments { display: flex; padding: 4px; gap: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-bottom: 16px; }
.tl-segments button { flex: 1; border: 0; min-height: 44px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--text-2); border-radius: 8px; background: transparent; cursor: pointer; }
.tl-segments button[aria-selected=true] { color: var(--on-accent); background: var(--accent); }
.an-range-btn { min-height: 40px; font-size: 13px; }
.st-ex-row { padding: 14px 0; }
.st-ex-name { font-size: 14px; }
.st-ex-e1 { font-size: 12px; }
.st-ex-sub { margin-top: 5px; }
.st-ex-row:hover .st-ex-name { color: var(--accent); }
#st-ex-table { max-height: 480px; overflow-y: auto; }
.st-signal { padding: 12px 0; font-size: 14px; }
.tl-details { margin: 18px 0; }
.tl-details > summary { min-height: 44px; cursor: pointer; color: var(--text-2); padding: 10px 0; }
.tl-primary-link { display: flex; justify-content: space-between; gap: 12px; text-decoration: none; padding: 14px 16px; background: var(--accent); color: var(--on-accent); border-radius: 12px; font-size: 15px; font-weight: 600; }
.tl-dialog { position: fixed; margin: auto; width: min(400px, calc(100% - 32px)); max-height: calc(100dvh - var(--safe-top) - 32px); padding: 22px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 20px 80px #0008; }
.tl-dialog::backdrop { background: #0009; backdrop-filter: blur(5px); }
.tl-dialog h2 { font-size: 19px; margin: 0 0 10px; letter-spacing: -.025em; }
.tl-dialog p { color: var(--text-2); font-size: 14px; margin: 0 0 18px; line-height: 1.6; }
.tl-dialog-action { display: block; width: 100%; min-height: 48px; text-align: center; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); margin-top: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
.tl-dialog-action.is-danger { background: color-mix(in srgb, var(--danger, #d96b6b) 14%, var(--surface)); color: var(--danger, #d96b6b); }
.tl-dialog-action.is-cancel { background: transparent; color: var(--text-2); }
.tl-dialog input { width: 100%; min-height: 46px; padding: 10px; margin-bottom: 10px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 8px; }
.tl-toast { position: fixed; bottom: calc(var(--nav-height,56px) + env(safe-area-inset-bottom,0px) + 18px); left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); width: max-content; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font-size: 14px; line-height: 1.5; text-align: center; z-index: 5500; pointer-events: none; box-shadow: var(--elev-2); }
.train-cta-bar { position: static; padding: 0; margin: 0 0 16px; background: none; box-shadow: none; }
.train-cta--primary { width: 100%; min-height: 52px; flex: 1; border-radius: 12px; font-size: 16px; }
.train-routine-card { position: relative; border-radius: 14px; touch-action: pan-y; }
.routine-swipe-content { position: relative; z-index: 1; background: var(--surface); transition: transform .18s ease; }
.train-routine-card.is-swiped .routine-swipe-content { transform: translateX(-88px); }
.routine-swipe-delete { position: absolute; top: 0; bottom: 0; right: 0; width: 88px; border: 0; color: #fff; background: #a83e43; font-weight: 600; font-size: 14px; cursor: pointer; }
.train-routine-row { gap: 8px; padding: 14px 12px; }
.train-routine-expand { min-width: 0; min-height: 48px; }
.train-routine-name { font-size: 15px; }
.train-routine-sub { font-size: 12px; max-width: 100%; }
.train-routine-start { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.routine-options { display: grid; place-items: center; width: 40px; height: 44px; flex-shrink: 0; border: 0; background: transparent; color: var(--text-2); font-size: 22px; cursor: pointer; border-radius: 8px; }
.train-routine-right { gap: 2px; }
.train-gallery-list { margin-top: 8px; }
.tl-progress-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 10px 0; }
.tl-progress-grid b { display: block; font-size: 22px; font-weight: 600; }
.tl-progress-grid span { display: block; font-size: 12px; color: var(--text-2); margin-top: 4px; }
.tl-history-session { padding: 14px 0; border-bottom: 1px solid var(--border); }
.tl-history-session:last-child { border-bottom: 0; padding-bottom: 0; }
.tl-history-session h3 { font-size: 13px; color: var(--text-2); margin-bottom: 8px; font-weight: 500; }
.tl-history-set { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.tl-history-set small, .tl-history-note { font-size: 13px; color: var(--text-2); }
.tl-history-note { padding-top: 8px; white-space: pre-wrap; }
.tl-record-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); }
.tl-record-row:last-child { border: 0; }
.tl-record-row span { min-width: 0; font-size: 14px; }
.tl-record-row small { display: block; margin-top: 4px; color: var(--text-2); font-size: 12px; }
.tl-record-row b { flex-shrink: 0; font-size: 14px; color: var(--accent); font-weight: 600; }
.ws-notes { margin: 0 14px 12px; }
.ws-notes summary { width: fit-content; padding: 6px 0; font-size: 13px; color: var(--text-2); cursor: pointer; }
.ws-ex-notes { display: block; width: 100%; min-height: 70px; resize: vertical; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font-family: inherit; }
.nutri-tab { min-height: 44px; font-size: 14px; }
.nutrition-head { margin-bottom: 14px; }
.food-day-total { font-size: 28px; font-weight: 600; letter-spacing: -.035em; margin: 8px 0 4px; }
.food-day-total small { font-size: 14px; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.food-day-caption { color: var(--text-2); font-size: 13px; margin-bottom: 18px; }
.nutrition-details { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 4px; }
.nutrition-details > summary { cursor: pointer; padding: 12px 0; min-height: 44px; color: var(--text-2); font-size: 14px; font-weight: 500; }
.nutrition-hint { color: var(--text-2); font-size: 13px; line-height: 1.6; margin: 10px 0; }
.nutrition-hint:empty { display: none; }
.nutrition-hint a { color: var(--accent); text-underline-offset: 3px; }
.nutrient-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 16px; margin-top: 16px; }
.nutrient-item-head { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; font-size: 13px; }
.nutrient-item-head b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nutrient-item-head small { font-size: 12px; font-weight: 400; color: var(--text-2); }
.nutrient-track { height: 4px; border-radius: 4px; background: var(--surface-3); margin: 9px 0 5px; overflow: hidden; }
.nutrient-track span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.nutrient-note { display: block; font-size: 12px; color: var(--text-2); line-height: 1.45; margin-top: 5px; }
.nutrient-full-list .nutrient-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.nutrient-full-list .nutrient-item-head { font-size: 14px; }
.food-nutrient-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.food-nutrient-row b { font-weight: 500; font-variant-numeric: tabular-nums; }
#add-meal-sheet .add-meal-box { display: flex; flex-direction: column; max-height: calc(100dvh - var(--safe-top) - 12px); overflow: hidden; }
#food-results { overflow-y: auto; min-height: 80px; flex: 1; }
.food-result-row { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin: 0; padding: 12px 0; min-height: 56px; }
.food-result-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
.food-result-tag { font-size: 12px; }
.plan-calculation { padding-left: 20px; color: var(--text-2); font-size: 14px; line-height: 1.6; }
.plan-calculation li { margin: 10px 0; }
.plan-calculation b { color: var(--text); }
.date-step, .food-meal-add, .routine-options, .tl-settings { min-width: 44px; min-height: 44px; }
.lift-window-pill { min-width: 44px; white-space: nowrap; }
.st-ex-search, .an-range-btn { min-height: 44px; }
.pwa-update { position: fixed; bottom: calc(var(--nav-height,56px) + env(safe-area-inset-bottom,0px) + 12px); left: 16px; right: 16px; max-width: 520px; margin: auto; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); color: var(--text); z-index: 5100; box-shadow: var(--elev-2); display: flex; align-items: center; gap: 12px; }
.pwa-update span { flex: 1; font-size: 14px; }
.pwa-update button { border: 0; border-radius: 9px; padding: 10px 14px; min-height: 44px; cursor: pointer; background: var(--accent); color: var(--on-accent); font-size: 14px; }
.pwa-update button:last-child { background: transparent; color: var(--text-2); padding: 8px; }
#macro-card { display: block; }
#macro-rings { display: none; }
.macro-legend { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.macro-legend-row { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; background: var(--surface-2); border-radius: 10px; padding: 12px 8px; }
.macro-legend-dot { display: none; }
.macro-legend-val { font-size: 13px; white-space: nowrap; }
.macro-legend-lbl { font-size: 13px; }
.meal-group-head { justify-content: flex-start; gap: 10px; }
.meal-group-title { text-transform: none; letter-spacing: 0; }
.meal-group-count { text-transform: none; letter-spacing: 0; font-size: 12px; }
.food-meal-add { display: flex; align-items: center; justify-content: center; width: 40px; min-height: 40px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--accent); font-size: 22px; cursor: pointer; margin-left: auto; }
.meal-save-recipe { font-size: 12px; min-height: 40px; margin-left: 0; }
.meal-row-left { border: 0; background: transparent; text-align: left; font-family: inherit; color: inherit; cursor: pointer; min-width: 0; flex: 1; padding: 6px 0; }
.meal-row-del, .add-meal-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.meal-group-title { font-size: 15px; }
.meal-row-name, .food-result-name { font-size: 14px; }
.meal-row-sub, .food-result-sub { font-size: 12px; }
.meal-group { padding-bottom: 14px; }
.food-copy-day { padding: 12px; min-height: 44px; width: 100%; background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--text-2); font-size: 14px; margin-top: 14px; cursor: pointer; }
@media (max-width: 360px) { .train-routine-start span { display: none; } .an-card { padding: 14px 12px; } .st-ex-top { align-items: center; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } .routine-swipe-content { transition: none; } }