/* ============================================================
   静緑 — Seiryoku (Quiet Green)
   Canonical INNERTRAVELER green, stripped to ma (間).
   Design spec synthesized by the hrv-zen-redesign workflow.
   Fonts loaded via <link> in index.html (Lato + Noto Sans JP).
   ============================================================ */

:root{
  /* ===== CANONICAL INNERTRAVELER GREEN — verified vs top_jp.html ===== */
  --brand:        #1A5C3E;   /* primary accent (new INNERTRAVELER brand): orb core, eyebrow, focus ring, dots */
  --brand-dark:   #2A8A5C;   /* soft companion / gradient mid-stop (CTA + orb radial only) */
  --brand-deep:   #1A5C3E;   /* deep forest: CTA gradient end, orb radial base, strong emphasis */
  --brand-grad:   linear-gradient(135deg, #2A8A5C, #1A5C3E); /* THE signature — lone CTA only, once per screen */

  /* ===== ZEN CANVAS — warm-paper reading of the site's #fafafa + mint ===== */
  --bg:           #F6F4EF;   /* warm off-white canvas; never #fff. >=60% of every viewport is this empty tone (ma) */
  --bg-mint:      #F3FAF7;   /* canonical pale-mint — only as the soft halo around the orb */
  --surface:      #FCFBF8;   /* barely-raised reading surface; near-imperceptible (kanso) */

  /* ===== INK — near-black green-tinted, never pure black ===== */
  --ink:          #1A2E25;   /* headings AND the quiet score. NEVER color-coded */
  --ink-soft:     #3E443C;   /* body + reading prose (raised contrast, still soft) */
  --ink-faint:    #545848;   /* labels, captions, quiet links — darkened for readability on paper */
  --whisper:      #DCDAD0;   /* 1px hairlines only — replaces all borders/boxes (kanso) */

  /* ===== TYPE — canonical pairing; Lato leads so numerals render in Lato ===== */
  --font:         'Lato','Noto Sans JP',sans-serif;
  --font-jp:      'Noto Sans JP','Lato',sans-serif;
  --font-serif:   'Shippori Mincho','Noto Serif JP',serif;  /* refined Mincho for titles/questions/reading */
  --fs-body:      17px;
  --fs-head:      clamp(22px,5vw,30px);
  --fs-metric:    clamp(34px,9vw,46px);
  --lh-read:      1.95;
  --track-eyebrow:0.22em;

  /* ===== SHAPE ===== */
  --r:            12px;
  --r-sm:         8px;
  --pill:         100px;

  /* ===== MOTION — breath-paced, ease-in-out (seijaku) ===== */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:       900ms;
  --t-med:        600ms;
  --t-line:       400ms;
  --breathe:      10s;

  /* ===== SPACE — ma ===== */
  --gutter:       clamp(24px, 8vw, 48px);
  --stack:        clamp(72px, 14vh, 160px);
  --read-col:     62%;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}   /* keep the hidden attribute authoritative over display rules */
.nobr{white-space:nowrap;}           /* keep short phrases (e.g. 約60秒) from breaking mid-phrase */
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;}
body{
  background:var(--bg); color:var(--ink-soft);
  font-family:var(--font); font-size:var(--fs-body);
  font-weight:300;
  line-height:1.9; letter-spacing:0.02em;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; min-height:100dvh; overflow-x:hidden;
}

/* one-thing-per-screen: each stage overlays the viewport; only .active is shown */
.screen{
  position:fixed; inset:0; overflow-y:auto;
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:calc(var(--stack) + env(safe-area-inset-top)) var(--gutter)
          calc(var(--stack) + env(safe-area-inset-bottom));
  opacity:0; transition:opacity var(--t-slow) var(--ease); pointer-events:none;
}
.screen.active{opacity:1; pointer-events:auto;}
/* tall screens align to top so the heading never clips; others stay centered */
#result,#trends,#onboard{justify-content:flex-start;}
/* result fills the screen better — trim the large top/bottom empty space */
#result{padding-top:calc(34px + env(safe-area-inset-top)); padding-bottom:calc(44px + env(safe-area-inset-bottom));}
/* result-screen brand lockup (fills the former empty space at the top) */
.result-brand{display:flex; flex-direction:column; align-items:center; gap:6px; margin:0 auto 22px;}
.result-lotus{width:clamp(60px,17vw,82px); height:auto; display:block;}
.result-name{font-family:var(--font-serif); font-weight:500; font-size:clamp(17px,5vw,21px);
  letter-spacing:.22em; color:var(--ink); margin-left:.22em;}

/* content column */
.col{width:100%; max-width:440px; margin-inline:auto;}
.col.center{display:flex; flex-direction:column; align-items:center; text-align:center;}

/* canonical signature device: tiny wide-tracked uppercase eyebrow — the one place 700 appears */
.eyebrow{
  display:block;
  font-family:var(--font); font-size:11px; font-weight:700;
  letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--brand);
  margin-bottom:18px;
}
#measure .eyebrow{font-size:16px; letter-spacing:.34em; margin-bottom:14px;}  /* 測定 = the screen title */
h1,h2{font-family:var(--font-serif); font-weight:400; font-size:var(--fs-head);
  line-height:1.5; letter-spacing:0.04em; color:var(--ink);}
/* onboarding hero title — large & refined Mincho, kept to a single line */
#onboard h1{font-weight:500; font-size:clamp(22px,6.4vw,32px); line-height:1.35;
  letter-spacing:0.03em; white-space:nowrap;}
.lead{color:var(--ink-faint); font-size:14px; line-height:1.9; margin-top:.8em;}

/* brand header — official INNERTRAVELER.ai wordmark, orb centered BELOW the logo */
.brand{display:flex; flex-direction:column; align-items:center; margin-bottom:clamp(32px,8vh,64px);}
.brand-logo{height:22px; width:auto; display:block; margin-bottom:14px;}
.brand-name{font-family:var(--font-serif); font-weight:500; font-size:clamp(26px,7.5vw,34px);
  letter-spacing:.2em; color:var(--ink); margin-left:.2em; margin-bottom:6px;}
.brand-tagline{font-family:var(--font-serif); font-size:13px; color:var(--ink-faint); letter-spacing:.08em;}
.brand-by{font-size:10px; letter-spacing:.12em; color:var(--ink-faint); margin-top:8px;}

/* launch / splash — a single lotus, quietly blooming */
.splash-wrap{display:flex; flex-direction:column; align-items:center; gap:24px;}
.lotus-wrap{position:relative; display:grid; place-items:center; opacity:0; animation:lotusBloom 1.8s var(--ease) forwards;}
/* grey halo removed — just the crisp lotus on the paper screen */
.lotus{width:clamp(160px,48vw,240px); height:auto; display:block; position:relative;}
/* faint lotus watermark on text screens (ethereal, spiritual) */
.screen-lotus{position:absolute; top:5%; left:50%; transform:translateX(-50%);
  width:min(440px,92vw); height:auto; opacity:.07; filter:blur(1px); pointer-events:none; z-index:0;}
#onboard .col{position:relative; z-index:1;}
/* pre-measurement how-to graphic + larger 2-line instruction */
.howto{width:clamp(120px,34vw,168px); height:auto; display:block; margin-bottom:22px;}
.lead-lg{font-family:var(--font-serif); font-size:18px; line-height:1.95; color:var(--ink-soft); text-align:center;}
.lead-sub{font-size:12px; color:var(--ink-faint); text-align:center; margin-top:6px; letter-spacing:.06em;}
.tips{display:flex; flex-direction:column; gap:5px; margin-top:12px; align-items:center;}
.tip{font-size:12.5px; color:var(--ink-soft); text-align:center; letter-spacing:.02em; line-height:1.5;}
/* add-to-home-screen hint */
.a2hs{font-size:11px; color:var(--ink-faint); letter-spacing:.02em; line-height:1.7; margin-top:20px; max-width:430px;}
.splash-wrap .wordmark{height:19px; width:auto; opacity:0; animation:fadeIn 1.1s var(--ease) .9s forwards;}
.s-name{font-family:var(--font-serif); font-weight:500; font-size:clamp(30px,9vw,42px); letter-spacing:.22em;
  color:var(--ink); opacity:0; animation:fadeIn 1.1s var(--ease) .9s forwards; margin-left:.22em;}
.s-by{font-size:11px; letter-spacing:.14em; color:var(--ink-faint); opacity:0; animation:fadeIn 1.1s var(--ease) 1.5s forwards;}
.s-tag{font-family:var(--font-serif); font-size:13px; color:var(--ink-faint); letter-spacing:.1em;
  opacity:0; animation:fadeIn 1.1s var(--ease) 1.2s forwards;}
@keyframes lotusBloom{from{opacity:0; transform:scale(.82) translateY(10px);} to{opacity:1; transform:scale(1) translateY(0);}}
@keyframes lotusGlow{0%,100%{opacity:.45;} 50%{opacity:.95;}}
@keyframes fadeIn{to{opacity:1;}}

/* THE single CTA — canonical pill + 135deg gradient; the ONLY gradient, once per screen */
.btn-primary{
  display:inline-block;
  font-family:var(--font); font-size:15px; font-weight:500;
  letter-spacing:0.06em; color:#fff; background:var(--brand-grad);
  border:0; border-radius:var(--pill); padding:16px 40px; cursor:pointer;
  transition:opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.btn-primary:hover{opacity:.88; transform:translateY(-2px);}
.btn-primary:disabled{opacity:.32; transform:none; cursor:default;}
.btn-primary[hidden]{display:none;}

/* the only secondary action: a plain quiet text link — never a 2nd button */
.btn-quiet{font-family:var(--font); font-size:13px; font-weight:300; color:var(--ink-faint);
  letter-spacing:0.04em; background:none; border:0; cursor:pointer;
  text-underline-offset:4px; text-decoration:underline; text-decoration-color:var(--whisper);}
.btn-quiet:hover{color:var(--ink-soft);}
.btn-quiet[hidden]{display:none;}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px;}

/* ===== ONBOARDING — one question per screen ===== */
.qs{width:100%; margin-top:clamp(28px,7vh,64px);}
.q{display:none;}
.q.active{display:block; animation:rise var(--t-med) var(--ease);}
.q-stem{font-family:var(--font-serif); font-weight:500; font-size:20px; color:var(--ink); margin-bottom:18px; letter-spacing:.04em;}
.opts{list-style:none;}
.opt{position:relative; padding:16px 8px 16px 26px; font-size:16px; color:var(--ink-soft);
  font-family:var(--font-serif); font-weight:400; letter-spacing:.03em;
  border-bottom:1px solid var(--whisper); cursor:pointer; transition:color var(--t-med) var(--ease);}
.opt:first-child{border-top:1px solid var(--whisper);}
.opt::before{content:""; position:absolute; left:2px; top:50%;
  transform:translateY(-50%) scale(0); width:7px; height:7px; border-radius:50%;
  background:var(--brand); transition:transform var(--t-med) var(--ease);}
.opt.sel{color:var(--ink);}
.opt.sel::before{transform:translateY(-50%) scale(1);}
.pips{display:flex; gap:8px; justify-content:center; margin-top:clamp(28px,7vh,56px);}
.pip{width:6px; height:6px; border-radius:50%; background:var(--whisper); transition:background var(--t-med) var(--ease);}
.pip.on{background:var(--brand);}
.ob-actions{display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:clamp(28px,7vh,56px);}

/* ===== MEASUREMENT — the breathing orb is the only feedback ===== */
#pre{display:flex; flex-direction:column; align-items:center; gap:24px;}
#pre .lead{max-width:300px;}
#during{display:flex; flex-direction:column; align-items:center; width:100%; --sqi:0;}
/* phase views: lens-finding (seek) shows the camera diagram; measure shows the orb+timer */
#during.seeking .measure-only{display:none;}
#during:not(.seeking) .seek-only{display:none;}
/* camera-position diagram (built in app.js from the device's lens count) */
.cam-diagram{display:flex; justify-content:center; margin-bottom:18px;}
.cam-target{transform-origin:center; transform-box:fill-box;
  opacity:calc(.3 + .7*var(--sqi,0));
  filter:drop-shadow(0 0 calc(7px * var(--sqi,0)) var(--brand));
  animation:camPulse 1.7s var(--ease) infinite;}
@keyframes camPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.orb-stage{position:relative; width:clamp(200px,56vw,280px); aspect-ratio:1;
  display:grid; place-items:center; margin-bottom:clamp(26px,6vh,46px);}
.ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);}
.ring-track{fill:none; stroke:var(--whisper); stroke-width:1.5;}
.ring-dep{fill:none; stroke:var(--brand); stroke-width:1.5; opacity:.55; stroke-linecap:round;
  transition:stroke-dashoffset .35s linear, stroke .4s var(--ease), opacity .4s var(--ease);}
/* contact lost during measurement: clock pauses, orb dims, ring greys (calm, not alarming) */
#during.paused .orb{opacity:.4; box-shadow:0 0 0 16px var(--bg-mint), 0 12px 40px -24px rgba(26,46,37,.2);}
#during.paused .ring-dep{stroke:var(--ink-faint); opacity:.5;}
#during.paused .cue{color:var(--brand-dark);}
.orb{
  width:clamp(150px,40vw,210px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, var(--brand), var(--brand-deep) 78%);
  box-shadow:0 0 0 16px var(--bg-mint), 0 18px 60px -28px rgba(26,46,37,.45);
  animation:breathe478 12s linear infinite;   /* paced breath: inhale 4s (grow), exhale 8s (shrink) */
  /* live signal meter: vivid green when the signal is good, fading toward grey when
     weak — so covering the right lens visibly makes the orb come alive (no numbers). */
  filter:saturate(calc(.2 + .8*var(--sqi,0))) brightness(calc(.82 + .18*var(--sqi,0)));
  transition:box-shadow .9s var(--ease), filter .5s var(--ease);
}
.orb[data-beat="1"]{box-shadow:0 0 0 16px var(--bg-mint), 0 0 48px -6px rgba(26,92,62,.5);}
@keyframes breathe478{
  0%      {transform:scale(.80);opacity:.78; animation-timing-function:cubic-bezier(.42,0,.5,1);}  /* inhale 4s */
  33.333% {transform:scale(1.16);opacity:1;  animation-timing-function:cubic-bezier(.5,0,.58,1);}   /* exhale 8s */
  100%    {transform:scale(.80);opacity:.78;}
}
.bpm{color:var(--ink); margin-bottom:10px;}
.bpm .val{font-variant-numeric:tabular-nums; font-size:clamp(28px,7vw,38px); font-weight:300;}
.bpm .lbl{font-size:11px; letter-spacing:.15em; color:var(--ink-faint); margin-left:6px;}
.cue{font-size:13px; color:var(--ink-faint); letter-spacing:.04em; min-height:1.4em; margin-bottom:16px;}
.lens-hint{font-size:12px; color:var(--ink-faint); line-height:1.8; max-width:300px; text-align:center; margin-bottom:14px; min-height:1.4em;}
.timer{font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink-faint); letter-spacing:2px; margin-bottom:24px;}
.sensor-note{font-size:11px; color:var(--ink-faint); text-align:center; line-height:1.7; max-width:300px; margin-top:14px;}
.sensor-note.warn{color:var(--brand-dark);}
.cam-hidden{position:absolute; width:2px; height:2px; opacity:0; pointer-events:none; left:-12px; top:-12px;}

/* ===== RESULT — off-center reading on a barely-raised surface ===== */
.reading-wrap{width:100%; max-width:460px; margin-inline:auto;
  background:var(--surface); border-radius:var(--r); padding:clamp(28px,7vw,44px) clamp(24px,6vw,40px);}
.figures{display:flex; gap:36px; margin:22px 0 6px;}
.metric .val{display:block; font-variant-numeric:tabular-nums; font-weight:300; font-size:var(--fs-metric); color:var(--ink); line-height:1;}
.metric .lbl{font-size:11px; letter-spacing:.12em; color:var(--ink-faint); text-transform:uppercase; margin-top:6px; white-space:nowrap;}
.axis{margin:22px 0 4px;}
.axis-title{font-size:11px; letter-spacing:.15em; color:var(--ink-faint); text-transform:uppercase; margin-bottom:12px;}
.axis-line{position:relative; height:1px; background:var(--whisper);}
.axis-line .dot{position:absolute; top:50%; left:50%; width:9px; height:9px; border-radius:50%;
  background:var(--brand); transform:translate(-50%,-50%); box-shadow:0 0 0 5px var(--bg-mint);
  transition:left 1s var(--ease);}
.axis-labels{display:flex; justify-content:space-between; font-size:10px; color:var(--ink-faint); margin-top:12px; letter-spacing:.04em;}
.meta{font-size:11px; color:var(--ink-faint); margin-top:16px;}
.hair{height:1px; background:var(--whisper); border:0; margin-block:clamp(26px,6vh,44px);}
.reading{font-family:var(--font-serif); font-weight:400; line-height:var(--lh-read); color:var(--ink-soft); max-width:none;}
.reading p{margin-block:1.4em 0; opacity:0; animation:rise var(--t-slow) var(--ease) forwards;}
.reading p:first-child{margin-top:0;}
.reading p:nth-child(2){animation-delay:var(--t-line);}
.reading p:nth-child(3){animation-delay:calc(var(--t-line)*2);}
.reading strong{color:var(--brand-deep); font-weight:400;}
.res-actions{display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:28px;}
.disclaimer{font-size:11px; line-height:1.8; color:var(--ink-faint); margin-top:28px;}
.foot{font-size:10px; letter-spacing:.12em; color:var(--ink-faint); margin-top:22px;}
/* temporary calibration data export (config DIAG) — subtle; removed before launch */
.diag-copy{font-size:11px; color:var(--ink-faint); opacity:.6; margin-top:18px;}

/* ===== TRENDS — day/week/month + reminders ===== */
.seg{display:flex; gap:8px; margin:6px 0 18px;}
.seg-btn{font-family:var(--font); font-size:13px; color:var(--ink-faint); background:none;
  border:1px solid var(--whisper); border-radius:var(--pill); padding:7px 18px; cursor:pointer;
  transition:color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);}
.seg-btn.on{color:var(--brand-deep); border-color:var(--brand); background:var(--bg-mint);}
.chart-wrap{width:100%; margin:4px 0 16px;}
.t-empty{font-family:var(--font-serif); color:var(--ink-faint); font-size:14px; padding:28px 0; text-align:center;}
.t-stats{display:flex; flex-wrap:wrap; gap:18px; font-size:12px; color:var(--ink-faint); letter-spacing:.02em;}
.t-stats b{font-variant-numeric:tabular-nums; font-weight:500; color:var(--ink); font-size:15px; margin:0 2px;}
.rem-times{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap;}
.rem-chip{font-family:var(--font); font-size:13px; color:var(--ink-faint); background:none;
  border:1px solid var(--whisper); border-radius:var(--pill); padding:8px 16px; cursor:pointer;
  transition:color var(--t-med) var(--ease), border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);}
.rem-chip.on{color:var(--brand-deep); border-color:var(--brand); background:var(--bg-mint);}
.rem-note{font-size:11px; color:var(--ink-faint); margin-top:14px; line-height:1.7;}
.rem-block{margin-top:16px;}
.rem-label{font-size:11px; letter-spacing:.12em; color:var(--ink-faint); text-transform:uppercase; margin-bottom:10px;}
.rem-days{display:flex; gap:6px; flex-wrap:wrap;}
.rem-days .rem-chip{padding:8px 0; width:38px; text-align:center;}
.rem-add{display:flex; align-items:center; gap:10px;}
.rem-select{font-family:var(--font); font-size:14px; color:var(--ink); background:var(--surface);
  border:1px solid var(--whisper); border-radius:var(--r-sm); padding:8px 12px;}
.rem-hours{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}

/* trend analysis comment */
.t-comment{font-family:var(--font-serif); font-size:14px; line-height:1.9; color:var(--ink-soft); margin-top:16px;}

/* subtle funnel to INNERTRAVELER.ai precision-nutrition counseling (understated) */
.funnel{margin-top:22px;}
.funnel-link{font-family:var(--font-serif); font-size:13px; color:var(--ink-faint); letter-spacing:.02em;
  text-decoration:none; border-bottom:1px solid var(--whisper); padding-bottom:2px;
  transition:color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);}
.funnel-link:hover{color:var(--brand-deep); border-color:var(--brand);}

/* collapsible education (anti-fear, quiet) */
.learn{margin-top:18px; max-width:430px;}
.learn summary{font-family:var(--font); font-size:12px; letter-spacing:.06em; color:var(--brand-deep);
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:7px;}
.learn summary::-webkit-details-marker{display:none;}
.learn summary::before{content:"＋"; color:var(--brand); font-weight:700;}
.learn[open] summary::before{content:"−";}
.learn p{font-family:var(--font-serif); font-size:13px; line-height:1.9; color:var(--ink-soft); margin-top:10px;}
.learn strong{color:var(--brand-deep); font-weight:400;}

/* pre-measurement privacy note + inline error */
.pre-note{font-size:11px; color:var(--ink-faint); letter-spacing:.02em; max-width:300px; text-align:center;}
.err{font-size:13px; color:#B5564E; line-height:1.7; max-width:300px; text-align:center;}

/* newsletter capture (owned-channel funnel) + founder credit */
.deep-btn{font-family:var(--font-serif); color:var(--brand-deep); text-decoration:none;
  border-bottom:1px solid var(--brand); padding-bottom:2px; margin-top:20px;}
.deep-btn:hover{opacity:.82;}
.deep-btn[hidden]{display:none;}
.news{margin-top:24px;}
.news-link{font-family:var(--font-serif); font-size:13px; color:var(--brand-deep); letter-spacing:.02em;
  text-decoration:none; border-bottom:1px solid var(--brand); padding-bottom:2px;}
.news-link:hover{opacity:.82;}
.credit{font-size:10px; color:var(--ink-faint); letter-spacing:.04em; margin-top:10px;}

@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  .orb{animation:none; opacity:.9;}
  .lotus-wrap,.splash-wrap .wordmark,.s-tag,.s-name,.s-by{animation:none; opacity:1;}
  .lotus-wrap::before{animation:none;}
  .orb[data-beat="1"]{box-shadow:0 0 0 16px var(--bg-mint), 0 0 0 1px rgba(26,92,62,.25);}
  .reading p{animation:none; opacity:1; transform:none;}
  .q.active{animation:none;}
  .screen{transition:opacity 200ms linear;}
  *{transition-duration:1ms !important;}
}