/* ============================================================
   NEW HABIT NOVEMBER — entry page + tracker
   Builds on css/style.css (tokens, .btn, .section, .phero, .calcsteps).
   Everything here is prefixed ch- so it never collides with the site.
   ============================================================ */

.ch-hidden{display:none !important}
/* the site's .btn--outline is only ever used on links; on a <button> the
   browser's default grey would show through */
button.btn--outline{background:transparent}
.ch-wrap{max-width:720px;margin:0 auto}

/* ---------- habit picker ---------- */
.ch-slots{display:grid;gap:10px;margin-bottom:34px}
.ch-slot{display:flex;align-items:center;gap:14px;min-height:62px;padding:12px 14px 12px 18px;
  border:1px dashed var(--line);border-radius:var(--card);background:transparent;color:var(--mute-2);transition:border-color .3s,background .3s}
.ch-slot__n{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);font-family:var(--display);font-size:.78rem;color:var(--mute)}
.ch-slot__t{flex:1;min-width:0;font-size:.98rem}
.ch-slot.is-filled{border-style:solid;border-color:rgba(232,93,38,.45);background:var(--panel);color:var(--white)}
.ch-slot.is-filled .ch-slot__n{background:var(--orange);border-color:var(--orange);color:#fff}
.ch-slot.is-filled .ch-slot__t{font-weight:600}
.ch-x{flex:none;background:none;border:1px solid var(--line);color:var(--mute);border-radius:var(--pill);
  font-family:var(--display);text-transform:uppercase;font-size:.62rem;letter-spacing:.05em;padding:8px 12px;cursor:pointer;transition:color .3s,border-color .3s}
.ch-x:hover{color:var(--orange);border-color:var(--orange)}

.ch-group{margin-bottom:24px}
.ch-group__t{display:block;margin-bottom:12px}
.ch-picks{display:flex;flex-wrap:wrap;gap:8px}
.ch-pick{background:var(--panel);border:1px solid var(--line);color:var(--white);border-radius:var(--pill);
  font-family:var(--body);font-size:.92rem;padding:11px 16px;cursor:pointer;min-height:44px;text-align:left;
  transition:border-color .3s,background .3s,color .3s}
.ch-pick:hover{border-color:rgba(232,93,38,.5)}
.ch-pick[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:#fff}
.ch-pick:disabled{opacity:.35;cursor:default}
.ch-pick:disabled:hover{border-color:var(--line)}
.ch-pick:focus-visible,.ch-x:focus-visible,.ch-tick input:focus-visible+.ch-box{outline:2px solid var(--orange);outline-offset:2px}

.ch-own{display:flex;gap:10px}
.ch-own input{flex:1;min-width:0}
.ch-own .btn{flex:none;justify-content:center}
.ch-own .btn:disabled{opacity:.4;cursor:default;transform:none}
.ch-hint{color:var(--mute-2);font-size:.85rem;margin-top:10px;line-height:1.5}

/* inputs, matching .tform */
.ch-input{background:var(--panel);border:1px solid var(--line);border-radius:var(--card);padding:15px 18px;
  color:var(--white);font-family:var(--body);font-size:1rem;width:100%}
.ch-input::placeholder{color:var(--mute-2)}
.ch-input:focus{outline:none;border-color:var(--orange)}
.ch-input:disabled{opacity:.5}
.ch-label{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:var(--mute);margin:0 0 8px}
.ch-field{margin-bottom:16px}
.ch-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:540px){.ch-pair{grid-template-columns:1fr}}
.ch-pin{letter-spacing:.4em;font-family:var(--display)}

.ch-divider{height:1px;background:var(--line);border:0;margin:40px 0}
.ch-step{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.ch-step h3{font-size:clamp(1.3rem,3vw,1.7rem)}
.ch-step p{color:var(--mute);margin-left:auto;font-family:var(--display);text-transform:uppercase;font-size:.66rem;letter-spacing:.12em}
.ch-note{color:var(--mute);margin-bottom:22px;line-height:1.6}

.ch-submit{width:100%;justify-content:center}
.ch-submit:disabled{opacity:.6;cursor:default;transform:none}
.ch-msg{margin-top:14px;padding:14px 18px;border-radius:var(--card);border:1px solid rgba(232,93,38,.45);background:rgba(232,93,38,.08);font-size:.92rem}
.ch-small{color:var(--mute-2);font-size:.85rem;line-height:1.55;margin-top:16px}

/* done */
.ch-done{border:1px solid rgba(232,93,38,.4);border-radius:var(--card);background:rgba(232,93,38,.06);padding:clamp(24px,4vw,40px)}
.ch-done h2{font-size:clamp(2rem,6vw,3.2rem);margin:12px 0 18px}
.ch-done ul{display:grid;gap:8px;margin:0 0 24px}
.ch-done li{display:flex;gap:12px;align-items:center;font-weight:600}
.ch-done li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.ch-link{display:block;word-break:break-all;color:var(--orange);font-size:.88rem;padding:14px 16px;border:1px dashed rgba(232,93,38,.5);border-radius:var(--card);margin:10px 0 18px}
.ch-done ol{counter-reset:s;display:grid;gap:10px;margin-top:22px}
.ch-done ol li{font-weight:400;color:var(--mute)}
.ch-done ol li::before{counter-increment:s;content:counter(s);width:24px;height:24px;display:grid;place-items:center;
  font-family:var(--display);font-size:.7rem;color:#fff}

/* ---------- tracker ---------- */
.ch-top{padding-top:clamp(108px,16vh,150px)}
.ch-signin h1,.ch-day h1{font-size:clamp(2.4rem,8vw,4.2rem);margin:14px 0 0}
.ch-signin p{color:var(--mute);margin:16px 0 26px;max-width:46ch}
.ch-signin p a{color:var(--orange)}

.ch-day{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ch-day__sub{color:var(--mute);margin-top:10px;font-size:.92rem}
.ch-streak{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--pill);
  background:rgba(232,93,38,.12);color:var(--orange);font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.06em}
.ch-streak svg{width:15px;height:15px}

.ch-nudge{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;
  padding:14px 16px 14px 20px;border-radius:var(--card);border:1px solid rgba(232,93,38,.45);background:rgba(232,93,38,.08);font-size:.92rem}
.ch-nudge .btn{flex:none}
.ch-view{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;color:var(--mute);font-size:.9rem}
.ch-view button{background:none;border:0;color:var(--orange);font-family:var(--display);text-transform:uppercase;font-size:.68rem;letter-spacing:.06em;cursor:pointer;padding:8px 0}

.ch-ticks{display:grid;gap:10px}
.ch-tick{position:relative;display:flex;align-items:center;gap:16px;min-height:70px;padding:16px 20px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--card);background:var(--panel);transition:border-color .3s,background .3s}
.ch-tick:hover{border-color:rgba(232,93,38,.4)}
.ch-tick input{position:absolute;opacity:0;pointer-events:none}
.ch-box{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--grey);display:grid;place-items:center;transition:background .25s,border-color .25s}
.ch-box svg{width:16px;height:16px;color:#fff;opacity:0;transform:scale(.5);transition:opacity .2s,transform .25s var(--ease)}
.ch-tick input:checked+.ch-box{background:var(--orange);border-color:var(--orange)}
.ch-tick input:checked+.ch-box svg{opacity:1;transform:none}
.ch-tick__t{font-size:1rem;font-weight:600;line-height:1.35}
.ch-tick.is-done{border-color:rgba(232,93,38,.45)}
.ch-ticks.is-locked .ch-tick{cursor:default;opacity:.6}
@media(prefers-reduced-motion:reduce){.ch-box,.ch-box svg{transition:none}}

.ch-save{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.ch-save .btn{justify-content:center;min-width:180px}
.ch-save .btn.is-saved{background:var(--panel);border-color:var(--line);color:var(--mute);cursor:default;transform:none}
.ch-save .btn.is-err{background:#a8324b}
.ch-save__s{color:var(--mute-2);font-size:.85rem}

.ch-notice{border:1px solid var(--line);border-radius:var(--card);background:var(--panel);padding:clamp(22px,4vw,32px)}
.ch-notice h3{font-size:1.4rem;margin-bottom:10px}
.ch-notice p{color:var(--mute);max-width:52ch}
.ch-notice ul{display:grid;gap:8px;margin-top:16px}
.ch-notice li{display:flex;gap:12px;align-items:center;font-weight:600}
.ch-notice li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--orange)}

.ch-h2{font-size:clamp(1.5rem,4vw,2.1rem);margin-bottom:18px}
.ch-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ch-stat{border:1px solid var(--line);border-radius:var(--card);background:var(--panel);padding:18px 18px 16px}
.ch-stat__n{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.2rem);color:var(--orange);line-height:1}
.ch-stat__l{color:var(--mute);font-size:.82rem;margin-top:8px}

.ch-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:14px}
.ch-wd{text-align:center;font-size:.72rem;color:var(--mute-2);padding-bottom:2px}
.ch-cell{position:relative;aspect-ratio:1;border-radius:10px;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.ch-cell__f{position:absolute;left:0;right:0;bottom:0;background:rgba(232,93,38,.35)}
.ch-cell__d{position:absolute;top:5px;left:7px;font-size:.72rem;color:var(--mute);z-index:1}
.ch-cell.is-full{border-color:var(--orange);background:var(--orange)}
.ch-cell.is-full .ch-cell__f{display:none}
.ch-cell.is-full .ch-cell__d{color:#fff;font-weight:600}
.ch-cell.is-today{box-shadow:inset 0 0 0 2px var(--white)}
.ch-cell.is-open:not(.is-full):not(.is-today){border-style:dashed;border-color:rgba(232,93,38,.6)}
.ch-cell.is-future,.ch-cell.is-before{opacity:.35}
.ch-cell.is-tap{cursor:pointer}
.ch-cell.is-tap:hover{border-color:var(--mute)}
.ch-cell.is-viewing{box-shadow:inset 0 0 0 2px var(--orange)}
.ch-cell:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.ch-key{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;color:var(--mute-2);font-size:.8rem}
.ch-key i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}

.ch-board{display:grid;gap:8px}
.ch-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--card);background:var(--panel)}
.ch-row.is-me{border-color:rgba(232,93,38,.55);background:rgba(232,93,38,.07)}
.ch-row__r{flex:none;width:28px;font-family:var(--display);color:var(--mute-2);font-size:.9rem}
.ch-row.is-top .ch-row__r{color:var(--orange)}
.ch-row__n{flex:1;min-width:0}
.ch-row__n b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-row__n span{color:var(--mute-2);font-size:.8rem}
.ch-row__s{flex:none;font-family:var(--display);color:var(--orange);font-size:1.2rem}
.ch-empty{padding:22px;border:1px dashed var(--line);border-radius:var(--card);color:var(--mute)}
.ch-boardfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;color:var(--mute-2);font-size:.8rem}
.ch-boardfoot button,.ch-out{background:none;border:0;color:var(--mute);font-family:var(--display);text-transform:uppercase;font-size:.66rem;letter-spacing:.06em;cursor:pointer;padding:8px 0}
.ch-boardfoot button:hover,.ch-out:hover{color:var(--orange)}

/* milestone toast: sits above the mobile tab bar */
.ch-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1600;width:calc(100% - 32px);max-width:440px;
  display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--card);background:var(--orange);color:#fff;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.ch-toast__n{font-family:var(--display);font-size:2.4rem;line-height:.9}
.ch-toast__t{flex:1;font-size:.9rem;line-height:1.4}
.ch-toast__t b{display:block;font-family:var(--display);text-transform:uppercase;font-size:.9rem;letter-spacing:.03em;margin-bottom:2px}
.ch-toast button{flex:none;background:#fff;color:var(--orange);border:0;border-radius:var(--pill);padding:9px 14px;cursor:pointer;
  font-family:var(--display);text-transform:uppercase;font-size:.66rem;letter-spacing:.05em}
@media(max-width:960px){.ch-toast{bottom:88px}}