/* module-skin.css — style TOKENISÉ des modules montés (treadmill/resonance/mind) dans l'écosystème.
   Leur CSS vit dans leurs index.html standalone → absent ici. On le réécrit sur les tokens Cadence,
   avec un accent-signal par module (#app.mod-*). fithub (Corps) a son propre CSS (.fh-root). */

#app { --acc: var(--sig-souffle); }
#app.mod-walk { --acc: var(--sig-marche); }
#app.mod-breath { --acc: var(--sig-souffle); }
#app.mod-mind { --acc: var(--sig-mind); }
#app.mod-walk, #app.mod-breath, #app.mod-mind { align-items: center; text-align: center; }

[hidden] { display: none !important; }
.status { font: 600 var(--t-label-sm-size) var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--cad-text-3); }
.streak { font-weight: 600; color: var(--acc); min-height: 1.2em; }
.link { background: none; border: 0; color: var(--acc); font: inherit; cursor: pointer; text-decoration: underline; }
.guidance { min-height: 1.2em; color: var(--cad-text); opacity: .85; max-width: 30ch; }

/* boutons */
.btn { font: inherit; font-weight: 500; padding: 13px 20px; border: 1px solid var(--cad-hairline); border-radius: var(--r-md); color: var(--cad-text); background: var(--cad-surface-2); cursor: pointer; transition: transform .1s; }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--acc), color-mix(in oklab, var(--acc) 66%, #fff)); border-color: transparent; color: #06121e; font-weight: 600; box-shadow: 0 6px 24px color-mix(in oklab, var(--acc) 22%, transparent); }
.btn.ghost { opacity: .8; background: none; }
.btn.small { padding: 9px 14px; font-size: var(--t-body-sm-size); }

/* champs */
.field { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-l { color: var(--cad-text-3); font-size: var(--t-body-sm-size); }
.inp { font: inherit; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--cad-hairline); background: var(--cad-surface-2); color: var(--cad-text); }
.inp:focus { outline: none; border-color: var(--acc); }
.inp:disabled { opacity: .6; }
.field .inp { width: 110px; text-align: center; }
.inp.tiny { width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.inp.num2 { width: 60px; text-align: center; font-variant-numeric: tabular-nums; }
.set-section { margin: 14px 0 2px; font: 600 var(--t-label-sm-size) var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--acc); text-align: left; opacity: .9; }

/* dropdown */
.picker { position: relative; display: flex; justify-content: center; }
.drop { font: inherit; padding: 11px 38px 11px 16px; min-width: 220px; border-radius: var(--r-md); cursor: pointer; color: var(--cad-text); background: var(--cad-surface-2); border: 1px solid var(--cad-hairline); }
.droplist { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 260px; max-width: 86vw; z-index: 5; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--cad-surface-2); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); box-shadow: var(--shadow-card); max-height: 60vh; overflow: auto; }
.item { font: inherit; text-align: left; padding: 11px 14px; border: 0; border-radius: 10px; background: transparent; color: var(--cad-text); cursor: pointer; }
.item:hover { background: color-mix(in oklab, var(--acc) 18%, transparent); }
.field .drop { min-width: 130px; padding: 10px 30px 10px 12px; }

/* métriques / chiffre sacré */
.metrics { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--cad-text-2); font-variant-numeric: tabular-nums; transition: opacity .6s; }
.metrics.dim { opacity: .12; }
.metric { font-size: var(--t-body-sm-size); }
.beat { font: 600 var(--n-lg-size) var(--font-data); color: var(--cad-text); }
.big { font: 600 var(--n-sacred-size) var(--font-data); line-height: .82; color: var(--cad-text); font-variant-numeric: tabular-nums; text-shadow: 0 0 30px color-mix(in oklab, var(--acc) 40%, transparent); }
.unit { color: var(--cad-text-3); letter-spacing: .12em; }
.target { color: var(--acc); min-height: 1.1em; }
.today { color: var(--cad-text-3); font-variant-numeric: tabular-nums; }
.progwrap { width: 100%; max-width: 380px; height: 8px; background: rgba(255,255,255,.08); border-radius: var(--r-pill); overflow: hidden; margin-top: 8px; }
.progbar { height: 100%; background: linear-gradient(90deg, var(--acc), color-mix(in oklab, var(--acc) 66%, #fff)); transition: width .5s; }
.proginfo { color: var(--cad-text-3); font-size: var(--t-body-sm-size); }
.proginfo.warn { color: var(--state-lost); }
.live-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; width: 100%; margin-top: 10px; }
.m { background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); padding: 14px; font-variant-numeric: tabular-nums; }

/* résumé + zones */
.sum-title { font: 700 var(--t-h3-size) var(--font-ui); margin-bottom: 12px; }
.sum-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.sum-cell { background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.sum-k { color: var(--cad-text-3); font-size: var(--t-body-sm-size); } .sum-v { font: 600 var(--n-stat-size) var(--font-data); font-variant-numeric: tabular-nums; }
.zones { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.zbar { display: grid; grid-template-columns: 36px 1fr 42px; align-items: center; gap: 8px; font-size: var(--t-body-sm-size); color: var(--cad-text-3); }
.ztrack { height: 10px; background: rgba(255,255,255,.07); border-radius: var(--r-pill); overflow: hidden; }
.zfill { height: 100%; border-radius: var(--r-pill); }
.z1 { background: #4fa3ff; } .z2 { background: var(--sig-marche); } .z3 { background: var(--sig-corps); } .z4 { background: #ff8c4b; } .z5 { background: var(--sig-coeur); }

/* historique / séances */
.hist-tot { color: var(--cad-text-3); font-size: var(--t-body-sm-size); margin-bottom: 10px; }
.hist-list { display: flex; flex-direction: column; gap: 6px; }
.hrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--cad-surface); border-radius: var(--r-sm); font-size: var(--t-body-sm-size); font-variant-numeric: tabular-nums; }
.hrow.muted { color: var(--cad-text-3); }
.hrow-info { display: flex; flex: 1; justify-content: space-between; gap: 8px; cursor: pointer; }
.del { padding: 6px 9px; opacity: .6; }

/* vitesse / inclinaison */
.speedctl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip { min-width: 48px; font-weight: 700; }
.step { font-size: 1.5rem; min-width: 54px; }
.pos { font: inherit; font-size: var(--t-body-sm-size); padding: 8px 13px; border-radius: var(--r-pill); cursor: pointer; color: var(--cad-text-3); background: var(--cad-surface-2); border: 1px solid var(--cad-hairline); }
.pos.on { color: #06121e; background: var(--acc); border-color: transparent; font-weight: 600; }
.incline-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.incline-label { color: var(--cad-text-3); font-size: var(--t-body-sm-size); }

/* builder */
.builder { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 440px; padding: 14px; background: var(--cad-surface); border: 1px solid var(--cad-hairline); border-radius: var(--r-lg); text-align: left; }
.seg-list, .setup, .workouts, .wk-list, .summary { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 8px; }
.seg-row { display: flex; align-items: center; gap: 6px; }
.seg-i { color: var(--cad-text-3); width: 12px; text-align: center; }
.seg-u { color: var(--cad-text-3); font-size: .68rem; white-space: nowrap; }
.del-seg { width: 20px; height: 20px; border: 0; background: none; color: var(--cad-text-3); cursor: pointer; }
.kind { min-width: 54px; font-size: .74rem; border-radius: var(--r-sm); border: 1px solid var(--cad-hairline); padding: 6px 8px; }
.kind.effort { background: color-mix(in oklab, var(--sig-coeur) 22%, transparent); border-color: color-mix(in oklab, var(--sig-coeur) 45%, transparent); }
.kind.recovery { background: color-mix(in oklab, var(--sig-souffle) 22%, transparent); }
.kind.warmup { background: color-mix(in oklab, var(--sig-corps) 22%, transparent); }
.wk-sub { color: var(--cad-text-3); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin: 8px 0 2px; }

/* orbe (resonance/mind) — même langage que makeOrb */
.orb { width: clamp(170px,58vw,270px); aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 36%, color-mix(in oklab, var(--acc) 38%, #fff), var(--acc)); box-shadow: 0 0 60px color-mix(in oklab, var(--acc) 50%, transparent);
  transform: scale(.72); transition: transform 1s cubic-bezier(.37,0,.63,1), box-shadow .9s, background .9s; cursor: pointer; }
.cue { font: 600 .78rem var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: rgba(6,18,30,.62); user-select: none; }

/* mind : état / eeg / correction */
.state { font: 700 var(--t-title-size) var(--font-ui); color: var(--cad-text); }
.why { color: var(--cad-text-3); font-size: var(--t-body-sm-size); max-width: 32ch; }
.eeg { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.eeg-bands, .eeg-depth, .eeg-hb { font: 500 var(--t-body-sm-size) var(--font-data); color: var(--cad-text-2); font-variant-numeric: tabular-nums; }
.eeg-hb { color: var(--sig-coherence); }
.correctWrap { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.correct, .chipbtn { font: inherit; font-size: var(--t-body-sm-size); padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--cad-hairline); background: var(--cad-surface-2); color: var(--cad-text-2); cursor: pointer; }

/* contrôles (bas) */
.controls { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }