/* PRIDE v0.35: calm, immediate feedback. Approved artwork/colors remain in refinement.css. */
:root { --visible-height: 100dvh; --visible-top: 0px; --ui-ease: cubic-bezier(.2,.75,.25,1); }
html { scroll-behavior: auto; }
button, a, [role=tab], [role=radio], label.tg { touch-action: manipulation; }
input, textarea { -webkit-user-select: text; user-select: text; scroll-margin-block: 24px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select { font-size: max(16px, 1em); }
button:focus-visible, a:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid #e4c888; outline-offset: 3px; }
[role=dialog]:focus { outline: none; }
.tab-surface[hidden] { display: none !important; }
.tab-surface:not([hidden]) { animation: surface-in 220ms ease-out; }
@keyframes surface-in { from { opacity: 0; } to { opacity: 1; } } /* v0.45: incoming surface only, opacity only — the outgoing surface is display:none via [hidden], never faded */
button.pressed:not(:disabled), [role=tab].pressed, [role=radio].pressed { transform: scale(.985) !important; filter: brightness(.94); }
.tab.pressed { transform: scale(.96) !important; }
.btn-primary.pressed:not(:disabled), .o2-cta.pressed, .ee-add.pressed, .v29-start.pressed { transform: translateY(1px) scale(.985) !important; }
.tab, .icon-btn, .btn-primary, .btn-ghost, .o2-cta, .ee-add { transition: transform 150ms var(--ui-ease), background-color 150ms ease, filter 150ms ease, box-shadow 150ms ease; }
.tab, .icon-btn { min-height: 44px; }
.rc-calbtn { position: relative; min-width: 44px; min-height: 44px; }
.v30-podium { margin-top: 4px !important; }
.sheet-wrap, .tm, .onb2 { top: var(--visible-top); bottom: auto; height: var(--visible-height); }
.sheet { max-height: calc(var(--visible-height) - max(16px, env(safe-area-inset-top, 0px))); animation: sheet-enter 240ms var(--ui-ease); transform: translateY(var(--drag-y, 0px)); transition: transform 200ms var(--ui-ease); }
@keyframes sheet-enter { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sheet-drag-zone { flex: none; height: 28px; width: 100%; display: grid; place-items: center; touch-action: none; cursor: grab; }
.sheet-drag-zone .sheet-grip { margin: 0; width: 36px; height: 4px; background: rgba(228,210,163,.4); }
.sheet.is-dragging { animation: none; transition: none; }
.sheet-wrap.is-closing .sheet { animation: none; transform: translateY(100%); pointer-events: none; }
.sheet-scrim { transition: opacity 200ms ease; }
.sheet-wrap.is-closing .sheet-scrim { opacity: 0; }
.sheet-body, .tm-body, .o2-body, .co-log { min-height: 0; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
html.host-safe .sheet { max-height: calc(var(--visible-height) - var(--host-top, 0px) - 6px) !important; }
.onb2 > .o2-foot { position: absolute; left: 50%; transform: translateX(-50%); width: min(100%, 440px); bottom: 0; padding: 14px 15px calc(16px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, transparent, rgba(5,8,6,.96) 30%); z-index: 3; box-sizing: border-box; }
html.keyboard-open .o2-form .o2-head { top: 4px; }
html.keyboard-open .o2-form .o2-prog { top: 54px; gap: 6px; }
html.keyboard-open .o2-form .o2-body { top: 98px; padding-bottom: 90px; }
html.keyboard-open .onb2 > .o2-foot { padding: 8px 15px 10px; }
html.keyboard-open .onb2 > .o2-foot .o2-cta { min-height: 48px; height: 48px; }
html.keyboard-open .tabbar { visibility: hidden; pointer-events: none; }
.v29-coach:not(.co-pick) { height: calc(var(--visible-height) - 86px - env(safe-area-inset-bottom, 0px)); min-height: 0; display: flex; flex-direction: column; }
.v29-coach .co-head, .v29-coach .co-off, .v29-coach .co-in, .v29-coach .co-left, .v29-coach > .err { flex: none; }
.v29-coach .co-log { flex: 1 1 auto; overflow-y: auto; padding-bottom: 16px; }
.v29-coach .co-in { position: relative; bottom: auto; }
.v29-coach > .err { font-size: 13px; max-height: 90px; overflow-y: auto; }
html.keyboard-open[data-tab=coach] .app { padding-bottom: 0; }
html.keyboard-open .v29-coach:not(.co-pick) { position: fixed; top: var(--visible-top); left: 0; right: 0; height: var(--visible-height); max-width: var(--col); margin-inline: auto; padding: 6px 16px 8px; z-index: 21; background: var(--bg); box-sizing: border-box; }
html.keyboard-open .co-head .coach-face { width: 40px !important; height: 40px !important; }
html.keyboard-open .co-head { grid-template-columns: 42px 1fr 44px 44px; padding-bottom: 5px; }
html.keyboard-open .co-head small, html.keyboard-open .co-left { display: none; }
@media (max-height: 600px) {
  .o2-basic { overflow-y: auto; }
  .o2-basic .o2-head, .o2-basic .o2-prog, .o2-basic .o2-h2, .o2-basic .o2-qsub, .o2-basic .o2-field, .o2-basic .o2-lock, .o2-basic .o2-err, .o2-basic .o2-bbottom { position: relative; top: auto; left: auto; right: auto; bottom: auto; margin: 16px; }
  .o2-basic .o2-head { margin-top: 6px; }
  .o2-basic .o2-q { font-size: 25px; }
}
html[data-motion=still] .tab-surface, html[data-motion=still] .sheet { animation: none !important; }
html[data-motion=still] .sheet, html[data-motion=still] .sheet-scrim, html[data-motion=still] button { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tab-surface, .sheet { animation: none !important; }
  .sheet, .sheet-scrim, button { transition: none !important; }
}
/* v0.36 tactile measurements */
.body-ruler {margin:22px 0;padding:18px 12px 12px;border:1px solid #6f613b;border-radius:18px;background:linear-gradient(145deg,#171a13,#080c09);overflow:hidden;}
.ruler-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;color:#e7d3a3;font-size: 15px;}
.ruler-units {display:flex;gap:3px;}
.ruler-units button {min-width:44px;min-height:44px;background:transparent;border:1px solid transparent;border-radius:9px;color:#aaa;}
.ruler-units button[aria-pressed=true] {color:#f1db9e;border-color:#9e824c;background:#29261a;}
.ruler-value {display:flex;justify-content:center;align-items:baseline;gap:8px;margin:12px 0;color:#cfbb84;}
.onb2 .ruler-value input {width:155px;max-width:65%;padding:0;border:0;border-radius:0;background:transparent;text-align:center;font:500 42px/1.3 var(--f-serif);color:#f4e0a9;box-shadow:none;font-variant-numeric:tabular-nums;appearance:textfield;}
.ruler-value input::-webkit-inner-spin-button {appearance:none;}
.ruler-track {height:76px;position:relative;touch-action:pan-y;cursor:ew-resize;overflow:hidden;user-select:none;outline-offset:-3px;}
/* v0.45: ticks + labels are drawn by RulerCanvas (app.js) — no DOM tick nodes exist anymore */
.ruler-canvas {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.ruler-pointer {position:absolute;top:0;bottom:24px;left:50%;width:2px;background:#f4dba2;box-shadow:0 0 9px #d9b56677;pointer-events:none;}
.ruler-pointer:before {content:'';position:absolute;top:0;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #f4dba2;}
.ruler-hint {text-align:center;font-size:12px;color:#b0b1a5;margin:8px 0;}
.body-ruler .o2-link {display:block;margin:8px auto 0;min-height:35px;}
.profile-optional {border-top:1px solid #51482f;margin-top:28px;padding-top:12px;}
.profile-optional summary {cursor:pointer;min-height:44px;color:#d7c28c;padding:12px 0;font-size:15px;}
.week-choice {border:0;padding:0;margin:20px 0;min-width:0;}
.week-choice legend {font-size:15px;color:#ddd6c2;margin-bottom:10px;}
.week-choice>div {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.week-choice button {height:46px;border:1px solid #4b493a;border-radius:10px;background:#0b100c;color:#c7c9be;font-size:18px;}
.week-choice button[aria-checked=true] {background:linear-gradient(#e8cc89,#a88946);color:#15160e;border-color:#ffe8ad;}
.week-choice button:disabled {opacity:.28;}
.onb2 .o2-form .fine {font-size:13px;line-height:1.65;color:#b9beb0;}
.onb2 .o2-form .field>label {font-size:15px;line-height:1.5;}
.onb2 .o2-form .o2-body {padding-bottom:115px;}
/* Scroll content must never compress the rulers inside the flex column. */
.o2-form .o2-body > * { flex-shrink: 0; }
.onb2 .body-ruler .ruler-value input {height:58px!important;min-height:58px!important;font-size:42px!important;border:0!important;background:transparent!important;box-shadow:none !important;padding:0!important;}
.body-ruler {margin:8px 0;}

/* v0.41 slide tracks inside Stepper / BigStep (compact variant of the ruler) */
.slide-track {height:54px;margin-top:2px;}
.slide-track .ruler-pointer {bottom:16px;}

/* v0.42 — Stepper inside .grid2: take the full row so the SlideTrack gets the
   full width (side-by-side tracks were too cramped; tick labels collided).
   Only the Stepper spans; plain .field cells keep the two-column layout. */
.grid2 > .stepper { grid-column: 1 / -1; }

/* v0.42 — keyboard open during onboarding: the root keeps covering the FULL
   layout viewport with its opaque background (it used to shrink to
   --visible-height, letting the app feed show through around the keyboard),
   and the CTA docks to the bottom of the visible viewport — exactly above
   the keyboard — using the vars interaction.js already maintains. */
html.keyboard-open:not(.host-safe) .onb2 { top: 0; height: 100dvh; }
html.keyboard-open .onb2 > .o2-foot { position: fixed; top: calc(var(--visible-top) + var(--visible-height)); bottom: auto; transform: translate(-50%, -100%); }

/* ==========================================================================
   v0.43/v0.45 — onboarding selected/pressed states and paint diet.
   (v0.45: the .onb backdrop-filter and the .o2-body blur shadow were removed
   at the source in index.html, so their overrides here are gone; the selected
   state below lost its inset ring — border + ring read as a doubled frame.)
   ========================================================================== */

/* #2 / #4 — selected + pressed states inside the onboarding form.
   `.o2-form .onb-lift, .o2-form .rs-opt, .o2-form .goal-opt, .o2-form .onb-diet button`
   (index.html) forces background/border with !important at (0,2,x), which
   flattened every `.on` state: diet choices never looked selected, and the
   recording-style card kept its `.on` text colour (#0b0b0d) on the forced dark
   fill → the text vanished the moment it was tapped. Higher-specificity
   !important rules restore one consistent gold selected state with cream text. */
.onb2 .o2-form .onb-diet button.on,
.onb2 .o2-form .onb-diet button[aria-checked="true"],
.onb2 .o2-form .rs-opt.on,
.onb2 .o2-form .rs-opt[aria-checked="true"],
.onb2 .o2-form .goal-opt.on {
  background: rgba(217,189,124,.16) !important;
  border-color: #D9BD7C !important;
  color: #F7E7B6 !important;
}
.onb2 .o2-form .rs-opt,
.onb2 .o2-form .onb-diet button { color: var(--cream) !important; }
.onb2 .o2-form .rs-opt small { color: rgba(241,236,221,.72) !important; }
.onb2 .o2-form .rs-opt.on small { color: rgba(247,231,182,.85) !important; }
/* Press feedback for these cards: scale only. The global
   [role=radio].pressed { filter: brightness(.94) } made iOS re-rasterise the
   card into a new filter layer on touch-down, blanking its text for a frame. */
.onb2 .o2-form .rs-opt.pressed,
.onb2 .o2-form .rs-opt:active,
.onb2 .o2-form .goal-opt.pressed,
.onb2 .o2-form .goal-opt:active,
.onb2 .o2-form .onb-diet button.pressed,
.onb2 .o2-form .onb-diet button:active {
  transform: scale(.98) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* #3 — onboarding paint cost (ghost / double image while scrolling and on step change). */
/* (c) nothing underneath is visible while onboarding is open, so stop painting
   it: the tab bar's blur(18px) saturate backdrop-filter, the feed, and the
   fixed ambient body glow from native.css. visibility keeps layout/state. */
html.onb-open .app,
html.onb-open .tabbar { visibility: hidden !important; }
html.onb-open .tabbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.onb-open body { background-image: none !important; background-attachment: scroll !important; }
/* (d) the marble background layer: its own compositing layer, so scrolling
   content over it never forces the large image to repaint. */
.onb2 .o2-bg { transform: translateZ(0); backface-visibility: hidden; }
/* the static centre needle keeps no glow inside the onboarding scroller */
.onb2 .ruler-pointer { box-shadow:none; }

/* ==========================================================================
   v0.44 — onboarding one-question screens + share step after the result.
   ========================================================================== */
/* one question per screen: the h2 is the question, so the WeekChoices legend is
   visually hidden (still read by screen readers) and the grid gets room. */
.onb2 .o2-form .week-choice { margin: 6px 0 0; }
.onb2 .o2-form .onb-lead { margin: -4px 0 6px; }
/* share step (after the result reveal): explicit 通知する／しない next to each switch,
   profile photo in its own box, separate from notifications. */
.onb2 .share-row { gap: 10px; }
.onb2 .share-row b { color: var(--cream); font-size: 15px; }
.onb2 .share-row small { color: rgba(241,236,221,.68); }
.share-state { flex: none; min-width: 4.2em; text-align: right; font: 500 13px var(--f-jp); color: rgba(241,236,221,.5); }
.share-state.on { color: #E7CC8C; }
.onb2 .share-photo { margin-top: 10px; }
.onb2.o2-share .o2-prog small { color: rgba(241,236,221,.75); }
.onb2.o2-share .tg { min-height: 44px; }
/* v0.44 polish: help line under the question is left-aligned with it (one line on a 390-px phone) */
.onb2 .o2-form .o2-body > .onb-lead { text-align: left; font-size: 14px; line-height: 1.6; }
/* switches in the share step: ON reads as gold, not as a dark pill */
/* the onboarding text-field rule (.o2-form input {… !important}) also hit these
   checkboxes and turned them into tall square fields; restore the switch shape. */
.onb2.o2-share .tg input[type=checkbox] { background: #1d2620; border: 1px solid rgba(214,205,180,.35); } /* v0.45: shape from base .tg; the v0.44 shape restore is unnecessary since index.html no longer aims the text-field rule at checkboxes */
.onb2.o2-share .tg input[type=checkbox]:checked { background: #C9A85F !important; border-color: #E7CC8C !important; }
.onb2.o2-share .tg input:focus-visible { outline: 2px solid #e4c888; outline-offset: 2px; }
.onb2.o2-share .share-state { min-width: 0; font-size: 12px; }