/* Ember — warm, tactile ritual ledger */
:root{
  --canvas:#FBF6EE; --surface:#FFFFFF; --ceramic:#F3ECE0; --ink:#2A211C; --muted:#6B5E52;
  --hair:#E7DCCB; --ember:#DD4814; --ember-deep:#A5340E; --glow:#F59E0B; --straw:#F6D9A8;
  --pine:#2F7A55; --ash:#E4D9C8; --danger:#C0392B;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
  --r:16px; --shadow:0 1px 2px rgba(42,33,28,.05),0 8px 24px -16px rgba(42,33,28,.25);
  --tab-h:64px;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--canvas);color:var(--ink);font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));}
a{color:var(--ember);text-decoration:none;}
h1,h2{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.15;}
.ic{width:24px;height:24px;display:inline-block;vertical-align:middle;flex:none;}
.ic.big{width:48px;height:48px;color:var(--ember);}
.flame{color:var(--ember);width:18px;height:18px;}

/* topbar + wrap + tabbar */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;padding-top:calc(12px + env(safe-area-inset-top));
  background:color-mix(in srgb,var(--canvas) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:600;font-size:1.3rem;color:var(--ink);}
.brand-flame{color:var(--ember);width:22px;height:26px;}
.add-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface);border:1px solid var(--hair);color:var(--ink);}
.add-btn:active{transform:scale(.95);}
.wrap{max-width:600px;margin:0 auto;padding:18px 16px 32px;}
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--canvas) 92%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--hair);}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:.7rem;font-weight:500;}
.tab .ic{width:22px;height:22px;}
.tab.on{color:var(--ember);}

/* hero */
.hero{display:flex;align-items:center;gap:18px;margin:6px 0 26px;}
.hero-flame{position:relative;width:84px;height:96px;flex:none;display:grid;place-items:center;}
.big-flame{width:84px;height:96px;}
.flame-body{fill:var(--ash);transition:fill .5s ease;}
.hero-flame:not([data-done="0"]) .flame-body{fill:var(--ember);}
.hero-flame.full .flame-body{fill:var(--ember);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--glow) 70%,transparent));}
.hero-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink);font-size:1.05rem;}
.hero-flame:not([data-done="0"]) .hero-count{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.35);}
.hc-sep{opacity:.7;margin:0 1px;}
.hero-date{margin:0;color:var(--muted);font-size:.85rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;}
.hero-title{margin:.1em 0 .15em;font-size:1.7rem;}
.hero-sub{margin:0;color:var(--muted);font-size:.9rem;}
.hero-sub b{color:var(--ember);}

/* parts + chips */
.part{margin:0 0 22px;}
.part-h{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;}
.part-h .ic{width:18px;height:18px;}
.part-frac{margin-left:auto;font-variant-numeric:tabular-nums;}
.chips{display:flex;flex-direction:column;gap:10px;}
.chip{position:relative;display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:13px 14px;box-shadow:var(--shadow);transition:border-color .2s,background .3s;}
.chip-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--ceramic);color:var(--muted);flex:none;transition:background .3s,color .3s;}
.chip-ic .ic{width:22px;height:22px;}
.chip-body{flex:1;min-width:0;}
.chip-title{font-weight:600;font-size:1.02rem;}
.chip.done .chip-title{color:var(--muted);}
.chip-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:.8rem;margin-top:1px;}
.streak{display:inline-flex;align-items:center;gap:3px;}
.streak .flame{color:var(--ash);}
.chip .streak-n{color:var(--muted);font-weight:600;}
.dot{opacity:.5;}
.banked{color:#5a87c4;}
/* lit streak */
.chip[data-cadence] .streak-n{}
.run-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--ceramic);color:var(--ink);flex:none;}
.run-btn:active{transform:scale(.94);}
.check{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:2px solid var(--hair);background:var(--surface);color:transparent;flex:none;cursor:pointer;transition:transform .12s,background .3s,border-color .3s,color .3s;-webkit-tap-highlight-color:transparent;}
.check .check-tick{width:24px;height:24px;}
.check .count{position:absolute;font-size:.72rem;font-weight:700;color:var(--muted);}
.check:active{transform:scale(.92);}
.check:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--ember) 35%,transparent);}
/* completed states (ignite) */
.chip.done{background:color-mix(in srgb,var(--straw) 28%,var(--surface));border-color:color-mix(in srgb,var(--glow) 35%,var(--hair));}
.chip.done .chip-ic{background:color-mix(in srgb,var(--ember) 14%,var(--ceramic));color:var(--ember);}
.chip.done .check{background:var(--ember);border-color:var(--ember);color:#fff;}
.chip.done .streak .flame{color:var(--ember);}
.chip.done .check .count{color:#fff;}
.chip.skipped{opacity:.7;}
.chip.skipped .check{border-style:dashed;}
.chip.igniting{animation:warm .5s ease;}
@keyframes warm{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--glow) 60%,transparent);}100%{box-shadow:0 0 0 14px transparent;}}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--glow);pointer-events:none;animation:spark .6s ease-out forwards;}
@keyframes spark{0%{opacity:1;transform:translate(0,0) scale(1);}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3);}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--sans);font-weight:600;font-size:.95rem;border-radius:999px;padding:11px 18px;border:1px solid transparent;cursor:pointer;transition:transform .12s,background .2s,box-shadow .2s;}
.btn:active{transform:scale(.96);}
.btn.primary{background:var(--ember);color:#fff;box-shadow:0 6px 16px -8px var(--ember);}
.btn.primary:hover{background:var(--ember-deep);}
.btn.ghost{background:transparent;border-color:var(--hair);color:var(--ink);}
.btn.sm{padding:8px 13px;font-size:.85rem;}
.btn.lg{padding:15px 24px;font-size:1.05rem;width:100%;}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:transparent;border:1px solid var(--hair);color:var(--muted);cursor:pointer;}
.icon-btn:active{transform:scale(.94);}
.icon-btn.danger{color:var(--danger);}
.icon-btn .ic{width:18px;height:18px;}

/* empty + page head */
.empty-state{text-align:center;padding:48px 20px;color:var(--muted);}
.empty-state h2{color:var(--ink);margin:14px 0 6px;}
.empty-state .btn{margin-top:16px;}
.page-head{margin:4px 0 22px;}
.page-head h1{font-size:1.9rem;margin:0 0 4px;}
.muted{color:var(--muted);}

/* manage */
.manage{margin-bottom:30px;}
.manage-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.manage-head h1{font-size:1.5rem;margin:0;}
.cards{display:flex;flex-direction:column;gap:10px;}
.mcard{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:13px 14px;box-shadow:var(--shadow);}
.mcard-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--ceramic);color:var(--ember);flex:none;}
.mcard-body{flex:1;min-width:0;}
.mcard-title{font-weight:600;}
.mcard-meta{color:var(--muted);font-size:.8rem;margin-top:2px;}
.tag-part{color:var(--ink);}
.steps-preview{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.step-pill{font-size:.74rem;background:var(--ceramic);color:var(--muted);border-radius:7px;padding:2px 7px;}
.mcard-actions{display:flex;gap:6px;flex:none;}

/* editor sheet (dialog) */
.sheet{border:none;border-radius:20px 20px 0 0;padding:0;width:100%;max-width:560px;margin:auto auto 0;background:var(--surface);color:var(--ink);box-shadow:0 -10px 40px -10px rgba(42,33,28,.4);}
.sheet::backdrop{background:rgba(42,33,28,.45);backdrop-filter:blur(2px);}
.sheet form{padding:18px 18px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sheet-head h2{font-size:1.3rem;margin:0;}
.field{display:block;margin-bottom:14px;}
.field>span{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;}
.field small{font-weight:400;color:var(--muted);}
.field input[type=text],.field input:not([type]),.field input[name],.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:1rem;padding:11px 13px;border:1px solid var(--hair);border-radius:11px;background:var(--canvas);color:var(--ink);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ember);box-shadow:0 0 0 3px color-mix(in srgb,var(--ember) 18%,transparent);}
.field input[type=number]{width:120px;}
.icon-pick,.dow-pick{display:flex;flex-wrap:wrap;gap:8px;}
.ip{cursor:pointer;}
.ip input{position:absolute;opacity:0;width:0;}
.ip .ic{width:24px;height:24px;padding:9px;border-radius:11px;background:var(--ceramic);color:var(--muted);box-sizing:content-box;}
.ip input:checked + .ic{background:var(--ember);color:#fff;}
.dow{cursor:pointer;}
.dow input{position:absolute;opacity:0;}
.dow span{display:grid;place-items:center;min-width:42px;padding:9px 0;border:1px solid var(--hair);border-radius:10px;font-size:.85rem;font-weight:600;color:var(--muted);}
.dow input:checked + span{background:var(--ember);color:#fff;border-color:var(--ember);}
.cad-only,.ritual-only{display:none;}
.sheet-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;}

/* run / stepper */
.run{max-width:520px;margin:0 auto;}
.run-back{display:inline-flex;align-items:center;color:var(--muted);font-weight:600;font-size:.9rem;margin-bottom:6px;}
.run-back .ic{transform:rotate(180deg);width:18px;height:18px;}
.run-head{text-align:center;}
.run-head .big{color:var(--ember);}
.run-head h1{font-size:1.7rem;margin:6px 0 2px;}
.run-sub{color:var(--muted);font-size:.9rem;margin:0;}
.run-arc{position:relative;width:140px;height:140px;margin:18px auto 8px;}
.run-arc svg{width:140px;height:140px;}
.arc-bg{fill:none;stroke:var(--ceramic);stroke-width:9;}
.arc-fg{fill:none;stroke:var(--ember);stroke-width:9;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:327;transition:stroke-dashoffset .5s ease;}
.arc-num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:1.5rem;font-weight:600;}
.run-steps{list-style:none;padding:0;margin:18px 0;display:flex;flex-direction:column;gap:9px;}
.run-step{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:13px 14px;box-shadow:var(--shadow);transition:background .3s,border-color .3s;}
.step-check{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--hair);background:var(--surface);color:transparent;cursor:pointer;flex:none;transition:transform .12s,background .3s,color .3s,border-color .3s;}
.step-check:active{transform:scale(.92);}
.run-step.done{background:color-mix(in srgb,var(--straw) 26%,var(--surface));border-color:color-mix(in srgb,var(--glow) 30%,var(--hair));}
.run-step.done .step-check{background:var(--ember);border-color:var(--ember);color:#fff;}
.run-step.done .step-title{color:var(--muted);text-decoration:line-through;}
.step-body{display:flex;align-items:center;gap:9px;flex:1;min-width:0;}
.step-n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ceramic);color:var(--muted);font-size:.78rem;font-weight:700;flex:none;}
.step-title{font-weight:500;flex:1;}
.step-timer{display:inline-flex;align-items:center;gap:3px;color:var(--muted);font-size:.78rem;}
.step-timer .ic{width:15px;height:15px;}
.step-timer.ticking{color:var(--ember);font-weight:700;}
.run-foot{margin:14px 0 8px;}

/* kiln heatmap */
.kiln-wrap{margin-bottom:28px;overflow-x:auto;}
.kiln{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px;width:max-content;}
.kc{width:13px;height:13px;border-radius:3px;background:var(--ceramic);}
.kc.empty{background:transparent;}
.kc.l-1{background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair);}
.kc.l0{background:#ECE3D5;}
.kc.l1{background:#F6D9A8;}
.kc.l2{background:#F0A53D;}
.kc.l3{background:#DD4814;}
.kc.l4{background:#A5340E;}
.kiln-legend{display:flex;align-items:center;gap:5px;margin-top:10px;color:var(--muted);font-size:.75rem;}
.kiln-legend .kc{width:13px;height:13px;}

/* per-item calendars */
.cal-list{margin-top:8px;}
.cal-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid var(--hair);}
.cal-info{display:flex;align-items:center;gap:10px;min-width:0;}
.cal-info>.ic{color:var(--ember);flex:none;}
.cal-title{font-weight:600;font-size:.95rem;}
.cal-streak{color:var(--muted);font-size:.78rem;display:flex;align-items:center;gap:3px;}
.cal-dots{display:grid;grid-template-columns:repeat(35,1fr);gap:2px;flex:none;}
.cd{width:7px;height:7px;border-radius:2px;background:var(--ceramic);}
.cd.done{background:var(--ember);}
.cd.skip{background:#bcd;}
.cd.miss{background:var(--ash);}
.cd.off{background:transparent;}

/* stats */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px;}
.stat-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);}
.stat-card.ember{background:color-mix(in srgb,var(--straw) 30%,var(--surface));border-color:color-mix(in srgb,var(--glow) 30%,var(--hair));}
.stat-num{font-family:var(--serif);font-size:2.2rem;font-weight:600;display:flex;align-items:center;gap:6px;}
.stat-num .flame{color:var(--ember);width:26px;height:26px;}
.stat-num .pct{font-size:1.2rem;color:var(--muted);}
.stat-label{color:var(--muted);font-size:.82rem;margin-top:2px;}
.bars-wrap{margin-bottom:26px;}
.bars{display:flex;align-items:flex-end;gap:6px;height:130px;padding:10px 4px 0;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--shadow);}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;}
.bar{width:100%;max-width:24px;background:linear-gradient(var(--glow),var(--ember));border-radius:5px 5px 0 0;min-height:3px;transition:height .4s ease;}
.bar-x{font-size:.65rem;color:var(--muted);height:12px;}
.streak-list{}
.sl-row{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px solid var(--hair);}
.sl-row>.ic{color:var(--muted);flex:none;}
.sl-title{flex:1;font-weight:500;}
.sl-streak{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-weight:600;font-size:.9rem;}
.sl-streak .flame{color:var(--ash);}
.sl-streak.lit{color:var(--ember);}
.sl-streak.lit .flame{color:var(--ember);}

/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:calc(var(--tab-h) + 16px + env(safe-area-inset-bottom));
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:.9rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:40;display:flex;align-items:center;gap:7px;box-shadow:var(--shadow);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .flame{color:var(--glow);}

/* desktop: left rail */
@media (min-width:1024px){
  body{padding-bottom:0;padding-left:220px;}
  .topbar{padding-left:238px;}
  .tabbar{flex-direction:column;justify-content:flex-start;top:0;right:auto;width:220px;height:100vh;border-top:none;border-right:1px solid var(--hair);padding-top:80px;gap:4px;}
  .tab{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:11px 24px;font-size:.95rem;width:100%;border-radius:0;}
  .tab.on{background:color-mix(in srgb,var(--ember) 8%,transparent);box-shadow:inset 3px 0 0 var(--ember);}
  .wrap,.run{max-width:680px;}
  .toast{bottom:24px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}