/* Hich's iDroid — feuille de style du hub. Tokens : css/tokens.css (source unique). */
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/BarlowCondensed-400.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/BarlowCondensed-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/BarlowCondensed-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/Barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(../assets/fonts/Barlow-500.woff2) format("woff2")}

*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--font-body);overflow:hidden;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;touch-action:pan-y}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-transform:inherit;letter-spacing:inherit}
input,select{font:inherit;color:inherit}
svg.g{display:inline-block;vertical-align:-1px}
.cond{font-family:var(--font-cond)}
.up{text-transform:uppercase;letter-spacing:var(--ls-row)}
.tn{font-variant-numeric:tabular-nums}
.body{font-family:var(--font-body);text-transform:none;letter-spacing:0}
.dim{color:var(--dim)} .dim2{color:var(--dim-2)} .or{color:var(--orange)} .cy{color:var(--cyan)} .red{color:var(--red)}
.pressing{opacity:.7}

/* ---------- cadre ---------- */
#app{position:fixed;inset:0;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);background:var(--ground)}
.hdr{flex:none;padding:12px var(--gutter) 0}
.top{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0 10px;color:var(--dim);font-size:var(--fs-sub);letter-spacing:var(--ls-top)}
.top .brand{color:var(--text);font-weight:600}
.tabs{display:flex;gap:12px;border-bottom:1px solid var(--line);margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);position:relative}
.tabline{position:absolute;left:0;bottom:-1px;height:var(--tab-underline);width:100%;background:var(--orange);transform-origin:left;transform:scaleX(0);transition:transform var(--d-tab) var(--ease)}
.tab{flex:1 1 auto;text-align:center;padding:8px 2px 9px;font-size:var(--fs-tab);font-weight:600;color:var(--dim-2);border-bottom:var(--tab-underline) solid transparent;margin-bottom:-1px;white-space:nowrap;letter-spacing:var(--ls-tab)}
.tab.on{color:var(--orange)}   /* le soulignement est la barre .tabline, qui glisse */
.trackwrap{flex:1;min-height:0;overflow:hidden}
.track{display:flex;width:400%;height:100%;transform:translateX(0);transition:transform var(--d-tab) var(--ease);will-change:transform}
.view{width:25%;height:100%;overflow-y:auto;overflow-x:hidden;padding:0 var(--gutter);padding-bottom:24px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.prompts{flex:none;padding:9px 12px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:14px;justify-content:center;color:var(--dim-2);font-size:var(--fs-hint);letter-spacing:var(--ls-hint);background:var(--ground);white-space:nowrap}
.prompts span{display:inline-flex;align-items:center;gap:5px}

/* ---------- section ---------- */
.sec{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:var(--sec-mt) 0 var(--sec-mb);font-size:var(--fs-sub);color:var(--dim);letter-spacing:var(--ls-sec)}
.sec .val{color:var(--orange);font-size:var(--fs-val);font-weight:600;letter-spacing:.04em;white-space:nowrap;flex:none}
.sec .r{color:var(--dim-2);white-space:nowrap;flex:none}
.bar{height:var(--bar-h);background:var(--line);position:relative;margin-bottom:6px}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--orange);transition:width var(--d-fill) var(--ease)}

/* ---------- lignes ---------- */
.row{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:var(--row-py) 0;border-bottom:1px solid var(--line);min-height:44px}
.row .n{color:var(--dim-2);font-size:var(--fs-tab);font-weight:500}
.row .t{font-size:var(--fs-row);font-weight:600;line-height:var(--lh-title)}
.row .s{color:var(--dim);font-size:var(--fs-sub);margin-top:3px;font-family:var(--font-body);text-transform:none;letter-spacing:0;line-height:1.3}
.row .v{text-align:right;font-size:var(--fs-val);font-weight:500;color:var(--text);letter-spacing:var(--ls-val);font-variant-numeric:tabular-nums;white-space:nowrap}
.row .v small{display:block;color:var(--dim);font-size:var(--fs-hint);letter-spacing:var(--ls-hint);margin-top:2px;font-weight:400}
.row.done .t,.row.done .v,.row.done .s{color:var(--dim)}
.row.skipped .t,.row.skipped .v{color:var(--dim)}
.row.missed .t,.row.missed .s,.row.missed .v{color:var(--red)}
.row.missed .box{border-color:var(--red)}
.row.quiet .t,.row.quiet .v{color:var(--dim)}
.mini{height:var(--bar-h);background:var(--line);width:var(--mini-w);max-width:100%;margin-top:5px;position:relative}
.mini i{position:absolute;left:0;top:0;bottom:0;background:var(--orange);transition:width var(--d-fill) var(--ease)}
.box{display:inline-block;width:var(--box);height:var(--box);border:1px solid var(--line-2);vertical-align:-2px;position:relative;line-height:0}
.box.ok{border-color:var(--cyan);background:var(--cyan)}
.box.ok svg{position:absolute;left:1px;top:1px}
.box.now{border-color:var(--orange)}
.box.red{border-color:var(--red)}
.pm{display:inline-flex;border:1px solid var(--line-2);vertical-align:middle}
.pm button{width:var(--pm-w);height:var(--pm-h);display:grid;place-items:center;font-size:16px;color:var(--text);position:relative;font-family:var(--font-cond)}
.pm button::before{content:"";position:absolute;inset:-9px -7px}
.pm button:first-child{border-right:1px solid var(--line-2)}
.pm.lg button{width:var(--pm-lg-w);height:var(--pm-lg-h);font-size:20px}

/* ---------- sélection + détail ---------- */
.sel{margin:0 calc(-1 * var(--gutter));padding:9px var(--gutter);background:var(--orange);color:var(--orange-ink);display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;clip-path:var(--clip-sel);min-height:52px}
.sel .n{color:var(--orange-ink-55);font-size:var(--fs-tab);font-weight:600}
.sel .t{font-size:var(--fs-row);font-weight:600;line-height:1}
.sel .s{font-size:var(--fs-sub);font-family:var(--font-body);text-transform:none;letter-spacing:0;color:var(--orange-ink-75);margin-top:3px}
.sel .v{text-align:right;font-size:var(--fs-val);font-weight:600;line-height:0}
.detail{margin:0 calc(-1 * var(--gutter));padding:var(--detail-py);background:var(--panel);border-bottom:1px solid var(--line)}
.dhead{display:flex;justify-content:space-between;gap:12px;color:var(--dim);font-size:var(--fs-hint);letter-spacing:var(--ls-head);margin-bottom:6px}
.task{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:var(--task-py) 0;font-size:var(--fs-val);font-weight:500;letter-spacing:var(--ls-val);min-height:44px}
.task .h{color:var(--dim);font-size:var(--fs-sub);letter-spacing:var(--ls-hint);font-variant-numeric:tabular-nums}
.task.done{color:var(--dim)}
.task.now{color:var(--orange)} .task.now .h{color:var(--orange)} .task.now .box{border-color:var(--orange)}
.task.later{color:var(--dim)}
.task .hint{margin-left:12px}
.btnrow{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;padding:12px 14px;border:1px solid var(--orange);color:var(--orange);font-size:var(--fs-btn);font-weight:600;letter-spacing:.1em;clip-path:var(--clip-btn);font-family:var(--font-cond);text-transform:uppercase;white-space:nowrap;min-height:44px}
.btn[disabled],.btn.off{opacity:.45}
.btn.ghost{border-color:var(--line-2);color:var(--dim)}
.hint{color:var(--dim);font-size:var(--fs-sub);font-family:var(--font-body);text-transform:none;letter-spacing:0}
.hint.or{color:var(--orange)}
.phrase{color:var(--dim);font-size:var(--fs-sub);font-family:var(--font-body);text-transform:none;letter-spacing:0;line-height:var(--lh-body);margin-top:4px}
.bignum{display:flex;align-items:center;gap:14px;margin:4px 0 2px}
.bignum .num{font-size:var(--fs-num);font-weight:600;color:var(--orange);line-height:1;font-variant-numeric:tabular-nums}
.bignum .step{color:var(--dim);font-size:var(--fs-sub);letter-spacing:var(--ls-hint);margin-left:auto}

/* ---------- side ops ---------- */
.side .row{padding:var(--side-py) 0;grid-template-columns:44px 1fr auto;min-height:44px}
.side .t{font-size:var(--fs-side);font-weight:500;color:var(--dim)}
.side.bonus .t{color:var(--text)}
.side:not(.bonus) .row.done .t{color:var(--dim)}
.side .n{font-size:var(--fs-hint)}
.side .v{font-size:var(--fs-tab);color:var(--dim)}
.side .v b{color:var(--cyan);font-weight:600}

/* ---------- MAP ---------- */
.map{position:relative;margin:12px calc(-1 * var(--gutter)) 0;height:322px;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.map::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,var(--scanline) 0 1px,transparent 1px 3px);pointer-events:none}
.map > svg{display:block;width:100%;height:322px}   /* > : sinon les glyphes des repères héritent de 100 % × 322 px */
.map .tag{position:absolute;left:16px;top:10px;color:var(--cyan);font-size:var(--fs-hint);letter-spacing:var(--ls-head)}
.map .tag2{position:absolute;right:16px;top:10px;color:var(--dim);font-size:var(--fs-hint);letter-spacing:var(--ls-head)}
.mapfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.badge{position:relative;display:inline-flex;align-items:center;gap:5px;color:var(--dim);font-size:var(--fs-hint);letter-spacing:var(--ls-head);padding:6px 0;text-transform:uppercase}
.badge b{font-weight:600;font-variant-numeric:tabular-nums}
.badge.on{color:var(--cyan)}
.badge::before{content:"";position:absolute;inset:-10px -14px}
.next .row .t{font-size:var(--fs-next)}
.next .row .v{font-size:14px}
.legend{display:flex;gap:16px;color:var(--dim-2);font-size:var(--fs-hint);letter-spacing:.1em;margin-top:8px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:5px}

/* ---------- MOTHER BASE ---------- */
.toggle{display:inline-flex;gap:14px;letter-spacing:var(--ls-top)}
.toggle span{color:var(--dim-2);padding-bottom:2px;border-bottom:2px solid transparent;position:relative}
.toggle span::before,.tab::before,.brand::before,.days span::before{content:"";position:absolute;inset:-10px -8px}
.toggle span::before{inset:-13px -6px} .brand::before{inset:-15px -8px}
.tab,.brand{position:relative}
.toggle span.on{color:var(--orange);border-bottom-color:var(--orange)}
.segs{display:inline-flex;gap:var(--seg-gap);vertical-align:middle}
.segs i{display:block;width:var(--seg-w);height:var(--seg-h);background:var(--line)}
.segs i.on{background:var(--orange)}
.terrain{margin:0 calc(-1 * var(--gutter));padding:10px var(--gutter) 6px;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.terrain::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,var(--scanline) 0 1px,transparent 1px 3px);pointer-events:none}
.terrain > svg{display:block;width:100%;height:auto}
.ticks{display:flex;justify-content:space-between;color:var(--dim-2);font-size:var(--fs-tick);letter-spacing:.1em;margin-top:4px}

/* ---------- DATABASE ---------- */
.db .row .v{font-size:var(--fs-val);color:var(--text);font-weight:500;letter-spacing:var(--ls-val)}
.db .row .v.cy{color:var(--cyan);font-weight:600}
.db .row a{color:inherit;text-decoration:none}

/* ---------- bannière export ---------- */
.banner{margin:10px calc(-1 * var(--gutter)) 0;padding:7px var(--gutter);min-height:44px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:var(--fs-hint);letter-spacing:var(--ls-hint);color:var(--dim)}
.banner b{color:var(--orange);font-weight:600}

/* ---------- feuilles ---------- */
#sheet-root:empty{display:none}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity var(--d-sheet) var(--ease)}
.scrim.on{opacity:1}
.sheet{width:100%;max-width:520px;max-height:calc(100% - 48px - env(safe-area-inset-top));overflow-y:auto;background:var(--panel-2);border-top:1px solid var(--line-2);padding:var(--sheet-p);padding-bottom:calc(24px + env(safe-area-inset-bottom));clip-path:var(--clip-sheet);transform:translateY(100%);transition:transform var(--d-sheet) var(--ease);overscroll-behavior:contain;touch-action:pan-y}
.scrim.on .sheet{transform:translateY(0)}
.scrim.closing{opacity:0} .scrim.closing .sheet{transform:translateY(100%)}
.sheet .shead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.sheet .shead .t{font-size:var(--fs-row);font-weight:600;letter-spacing:.06em}
.sheet .shead .i{color:var(--dim);font-size:var(--fs-sub);letter-spacing:.1em;white-space:nowrap}
.sheet .row{border-bottom-color:var(--line-2)}
.sheet .task{border-bottom:0}
.sheet .sel{margin:0 calc(-1 * var(--gutter))}
.sheet .hero{display:flex;align-items:center;justify-content:space-between;padding:10px 0 6px}
.sheet .hero .num{font-size:var(--fs-hero);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.sheet .hero .num small{color:var(--dim);font-size:19px;font-weight:500;margin-left:4px}
.sheet .lbl{color:var(--dim);font-size:var(--fs-hint);letter-spacing:var(--ls-head);margin-top:12px}
.sheet .blk{border:1px solid var(--line-2);padding:8px 10px;flex:1;min-width:0}
.sheet .blk.local{border-color:var(--orange)}
.sheet .blk .bh{font-size:var(--fs-hint);letter-spacing:var(--ls-head);color:var(--dim);margin-bottom:4px}
.sheet .blk.local .bh{color:var(--orange)}
.sheet .blk .bl{font-size:var(--fs-val);font-weight:500;font-variant-numeric:tabular-nums}
.sheet .blk .bs{color:var(--dim);font-size:var(--fs-sub);font-family:var(--font-body);text-transform:none;letter-spacing:0;margin-top:2px}
.sheet .two{display:flex;gap:10px;margin:10px 0 4px}
.tapbox{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.sheet input[type=time],.sheet input[type=date],.sheet input[type=number],.sheet input[type=text]{background:var(--panel);border:1px solid var(--line-2);color:var(--text);padding:11px 8px;font-family:var(--font-cond);font-size:var(--fs-val);letter-spacing:.04em;min-width:88px;min-height:44px;text-align:right;-webkit-appearance:none;appearance:none;border-radius:0}
.days{display:inline-flex;gap:4px}
.days span{width:22px;height:24px;border:1px solid var(--line-2);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--dim-2);position:relative}
input,textarea{user-select:text;-webkit-user-select:text}
.days span.on{border-color:var(--orange);color:var(--orange)}
.trend svg{display:block}

/* ---------- saisie ---------- */
.ask{position:fixed;inset:0;background:var(--scrim);z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
.ask-p{background:var(--panel-2);border:1px solid var(--line-2);padding:14px 16px 16px;width:100%;max-width:320px;clip-path:var(--clip-sheet)}
.ask-t{font-size:var(--fs-val);font-weight:600;letter-spacing:.1em;margin-bottom:10px}
.ask-i{width:100%;background:var(--panel);border:1px solid var(--line-2);color:var(--text);padding:8px 10px;font-family:var(--font-cond);font-size:22px;letter-spacing:.04em;-webkit-appearance:none;appearance:none;border-radius:0}
.ask-h{color:var(--dim);font-size:var(--fs-sub);font-family:var(--font-body);text-transform:none;letter-spacing:0;margin-top:6px}
.ask-b{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
#toast{position:fixed;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));transform:translate(-50%,8px);background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);padding:8px 12px;font-size:var(--fs-sub);letter-spacing:.08em;opacity:0;transition:opacity 160ms var(--ease),transform 160ms var(--ease);z-index:70;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- porte d'entrée ---------- */
#gate{position:fixed;inset:0;z-index:90;background:var(--ground);display:flex;align-items:center;justify-content:center;padding:24px}
html.unlocked #gate{display:none}
html:not(.unlocked) #app{visibility:hidden}
.gate-box{width:100%;max-width:300px;display:flex;flex-direction:column;gap:10px}
.gate-brand{color:var(--text);font-weight:600;font-size:var(--fs-row);letter-spacing:.08em}
.gate-lbl{color:var(--dim);font-size:var(--fs-hint);letter-spacing:var(--ls-head)}
.gate-box input{background:var(--panel);border:1px solid var(--line-2);color:var(--text);padding:10px 12px;
  font-family:var(--font-cond);font-size:22px;letter-spacing:.12em;-webkit-appearance:none;appearance:none;border-radius:0;
  user-select:text;-webkit-user-select:text}
.gate-msg{color:var(--dim);font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:var(--fs-sub);min-height:16px}
.gate-msg.bad{color:var(--red)}
.gate-box .btn{align-self:flex-start}

/* ---------- ouverture : balayage vertical, 1× par jour logique ---------- */
#boot{position:fixed;inset:0;background:var(--ground);z-index:80;pointer-events:none}
#boot.go{animation:boot var(--d-boot) var(--ease) forwards}
@keyframes boot{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}
#boot.gone{display:none}

@media (prefers-reduced-motion:reduce){.track,.scrim,.sheet,.bar i,.mini i,#toast{transition:none}#boot.go{animation:none;display:none}}
@media (min-width:600px){.view,.hdr{padding-left:calc((100vw - 560px)/2);padding-right:calc((100vw - 560px)/2)}.sel,.detail,.map,.terrain,.banner,.tabs{margin-left:-16px;margin-right:-16px}}