/* Hearth v1.0 — ported from the v0.1 prototype, extended for camps/login/keepers. */
:root{
  --night-top:#0a0e18; --night-mid:#131120; --ground:#171009; --ground-line:#2a2013;
  --paper:#ece1cc; --paper-dim:#a99c85; --paper-faint:#6f6656;
  --flame-1:#ffb454; --flame-2:#ffe29a; --flame-deep:#ff8a3d;
  --ember:#e2582a; --fading:#d9a441; --cold:#67707e; --danger:#ff6b4a;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.9,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  min-height:100%;
  background:
    radial-gradient(1100px 500px at 75% -10%, #1c1830 0%, transparent 60%),
    linear-gradient(var(--night-top) 0%, var(--night-mid) 55%, #120d12 78%, var(--ground) 100%);
  color:var(--paper); font-family:var(--serif); font-size:16px; overflow-x:hidden;
}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.8;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #cfd6e4 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%,  #8d94a6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 22%, #dfe5f0 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 12%, #9aa2b5 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 26%, #c7cedd 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 86% 9%,  #e8edf6 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 31%, #99a1b4 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 38%,  #aab1c2 50%, transparent 51%);
}
.wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:28px 24px 90px}

/* ---------------- login ---------------- */
.loginwrap{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.loginbox{width:min(360px,100%);display:flex;flex-direction:column;gap:14px}
.loginbox .wordmark{margin-bottom:6px}
.loginbox h1{font-size:26px;font-weight:600;line-height:1.2;margin-bottom:8px}
.loginbox label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint)}
.loginbox input{background:rgba(236,225,204,.05);border:1px solid rgba(236,225,204,.18);border-radius:8px;color:var(--paper);font-family:var(--serif);font-size:16px;padding:11px 13px}
.loginbox input:focus{outline:none;border-color:var(--flame-1)}
.loginbox .btn-feed{margin-top:6px;justify-content:center;text-align:center}
.lerr{font-family:var(--mono);font-size:12px;color:var(--danger);min-height:1em}

/* ---------------- header ---------------- */
header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:26px}
.wordmark{font-family:var(--mono);font-size:12px;letter-spacing:.34em;color:var(--paper-dim)}
.wordmark b{color:var(--paper)}
.keeper{font-family:var(--mono);font-size:11px;color:var(--paper-faint)}
.keeper button{background:none;border:none;color:var(--paper-dim);font:inherit;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.keeper button:hover{color:var(--paper)}

/* ---------------- north star ---------------- */
.northstar{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--paper-dim);margin-bottom:20px;display:flex;align-items:center;gap:8px}
.northstar .ns-star{color:var(--flame-2);font-size:13px}
.northstar button{background:none;border:none;color:inherit;font:inherit;cursor:pointer;border-bottom:1px dashed transparent;padding:0}
.northstar button:hover{border-bottom-color:var(--paper-faint);color:var(--paper)}
.northstar input{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;background:transparent;border:none;border-bottom:1px dashed var(--paper-dim);color:var(--paper);width:100%;max-width:520px;padding:2px 0}
.northstar input:focus{outline:none;border-bottom-color:var(--flame-1)}

/* ---------------- quest ---------------- */
.quest{margin-bottom:8px}
.quest .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--paper-faint);text-transform:uppercase;margin-bottom:10px}
.quest h1{font-size:clamp(26px,4.4vw,42px);font-weight:600;line-height:1.15;letter-spacing:-.01em;max-width:22ch}
.quest h1 button{all:unset;cursor:text;display:inline;border-bottom:1px dashed transparent}
.quest h1 button:hover{border-bottom-color:var(--paper-faint)}
.quest h1 button:focus-visible{outline:2px solid var(--flame-1);outline-offset:4px;border-radius:2px}
.quest input{font-family:var(--serif);font-size:clamp(26px,4.4vw,42px);font-weight:600;line-height:1.15;background:transparent;border:none;border-bottom:1px dashed var(--paper-dim);color:var(--paper);width:100%;max-width:640px;padding:0 0 2px}
.quest input:focus{outline:none;border-bottom-color:var(--flame-1)}
.quest .hint{font-family:var(--mono);font-size:11px;color:var(--paper-faint);margin-top:10px}

/* ---------------- the valley / camps ---------------- */
.camp{margin-top:40px;position:relative}
.campgroup{margin-bottom:30px}
.camphead{display:flex;align-items:baseline;gap:12px;padding:0 6px 8px;border-bottom:1px solid var(--ground-line);margin-bottom:6px}
.camphead .emberdot{width:9px;height:9px;border-radius:50%;flex-shrink:0;align-self:center;background:var(--cold);box-shadow:0 0 0 rgba(0,0,0,0)}
.camphead.h-burning .emberdot{background:var(--flame-1);box-shadow:0 0 10px rgba(255,164,84,.6)}
.camphead.h-fading  .emberdot{background:var(--fading);box-shadow:0 0 8px rgba(217,164,65,.5)}
.camphead.h-dying   .emberdot{background:var(--danger);box-shadow:0 0 8px rgba(255,107,74,.5)}
.camphead.h-cold    .emberdot,.camphead.h-banked .emberdot,.camphead.h-unlit .emberdot{background:var(--cold)}
.camphead .cname{font-family:var(--serif);font-size:19px;font-weight:600}
.camphead .cname button{all:unset;cursor:text;border-bottom:1px dashed transparent}
.camphead .cname button:hover{border-bottom-color:var(--paper-faint)}
.camphead .cwhy{font-family:var(--mono);font-size:11px;color:var(--paper-faint)}
.camphead .cwhy button{background:none;border:none;color:inherit;font:inherit;cursor:pointer;border-bottom:1px dashed transparent;padding:0}
.camphead .cwhy button:hover{color:var(--paper-dim);border-bottom-color:var(--paper-faint)}
.camphead .cctl{margin-left:auto;display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12px}
.camphead .cctl button{background:none;border:none;color:var(--paper-faint);cursor:pointer;padding:2px 4px}
.camphead .cctl button:hover{color:var(--paper)}

.campfires{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 10px;padding:0 6px 22px;position:relative}
.campfires::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%, rgba(255,138,61,.05), transparent 70%)}

.fire{background:none;border:none;color:inherit;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;
  width:150px;padding:14px 4px 16px;border-radius:10px;transition:background .2s var(--ease);position:relative}
.fire:hover{background:rgba(236,225,204,.04)}
.fire:focus-visible{outline:2px solid var(--flame-1);outline-offset:2px}
.fire .scene{position:relative;width:118px;height:128px}
.fire .glow{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:130px;height:90px;border-radius:50%;
  background:radial-gradient(50% 60% at 50% 75%, var(--glow-c, rgba(255,164,84,.35)), transparent 70%);filter:blur(6px);pointer-events:none;transition:opacity .6s var(--ease)}
.fire svg{position:relative;display:block;overflow:visible}
.fire .fname{font-family:var(--serif);font-size:15.5px;font-weight:600;margin-top:8px;line-height:1.2;text-align:center;max-width:140px}
.fire .fmeta{font-family:var(--mono);font-size:10.5px;color:var(--paper-dim);margin-top:5px;text-align:center;line-height:1.6}
.fire .status{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-top:6px;padding:2px 8px;border-radius:999px;border:1px solid transparent}
.fire.s-burning .status{color:var(--flame-1);border-color:rgba(255,180,84,.35)}
.fire.s-fading  .status{color:var(--fading);border-color:rgba(217,164,65,.4)}
.fire.s-dying   .status{color:var(--danger);border-color:rgba(255,107,74,.5)}
.fire.s-cold    .status{color:var(--cold);border-color:rgba(103,112,126,.5)}
.fire.s-banked  .status{color:var(--cold);border-color:rgba(103,112,126,.35)}
.fire.s-unlit   .status{color:var(--paper-dim);border-color:rgba(169,156,133,.35)}
.fire.s-banked .fname,.fire.s-banked .fmeta{opacity:.5}
.fire.s-cold .fname{color:var(--paper-dim)}
.fire.s-dying .fname{color:#ffc9b8}

.flame-g{transform-origin:60px 116px}
@media (prefers-reduced-motion:no-preference){
  .s-burning .flame-g{animation:sway 2.6s ease-in-out infinite}
  .s-fading  .flame-g{animation:sway 3.8s ease-in-out infinite}
  .s-dying   .flame-g{animation:gutter 1.1s ease-in-out infinite}
  .flare .flame-g{animation:flare .9s var(--ease) 1}
  .s-cold .smoke{animation:drift 5s linear infinite}
  .s-cold .emberdot-svg{animation:emberpulse 3.2s ease-in-out infinite}
}
@keyframes sway{0%,100%{transform:scale(var(--fs,1)) skewX(0deg)}30%{transform:scale(var(--fs,1)) scaleY(1.04) skewX(2.4deg)}60%{transform:scale(var(--fs,1)) scaleY(.97) skewX(-2deg)}}
@keyframes gutter{0%,100%{transform:scale(var(--fs,.45)) scaleY(1)}45%{transform:scale(var(--fs,.45)) scaleY(.8) skewX(3deg)}70%{transform:scale(var(--fs,.45)) scaleY(1.12) skewX(-3deg)}}
@keyframes flare{0%{transform:scale(var(--fs,1))}35%{transform:scale(calc(var(--fs,1) * 1.35)) scaleY(1.15)}100%{transform:scale(var(--fs,1))}}
@keyframes drift{0%{stroke-dashoffset:60;opacity:0}15%{opacity:.55}85%{opacity:.35}100%{stroke-dashoffset:0;opacity:0}}
@keyframes emberpulse{0%,100%{opacity:.25}50%{opacity:.7}}

.addfire{background:none;font:inherit;color:var(--paper-faint);cursor:pointer;width:150px;height:214px;
  border:1.5px dashed rgba(169,156,133,.3);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;transition:all .2s var(--ease)}
.addfire:hover{color:var(--paper);border-color:var(--paper-dim)}
.addfire:focus-visible{outline:2px solid var(--flame-1);outline-offset:2px}
.addfire .plus{font-size:22px;font-family:var(--serif)}

.addcamp{background:none;border:1.5px dashed rgba(169,156,133,.25);border-radius:10px;color:var(--paper-faint);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;cursor:pointer;padding:12px 16px;margin-top:6px;transition:all .2s var(--ease)}
.addcamp:hover{color:var(--paper);border-color:var(--paper-dim)}

.watchline{margin-top:8px;font-size:15px;line-height:1.55;color:var(--paper-dim);max-width:62ch}
.watchline b{color:var(--paper)}
.watchline .act{color:var(--flame-1);cursor:pointer;background:none;border:none;font:inherit;text-decoration:underline;text-underline-offset:3px;padding:0}
.watchline .act:hover{color:var(--flame-2)}

/* ---------------- onboarding ---------------- */
.onboard{margin-top:20px;max-width:560px}
.onboard ol{list-style:none;counter-reset:step;display:flex;flex-direction:column;gap:14px}
.onboard li{counter-increment:step;display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--paper-dim);line-height:1.5}
.onboard li::before{content:counter(step);font-family:var(--mono);font-size:12px;color:var(--flame-1);border:1px solid rgba(255,180,84,.4);border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.onboard li b{color:var(--paper)}
.onboard .act{color:var(--flame-1);cursor:pointer;background:none;border:none;font:inherit;text-decoration:underline;text-underline-offset:3px;padding:0}
.onboard .done{opacity:.5}
.onboard .done b{text-decoration:line-through}

/* ---------------- recent logs + keepers ---------------- */
.recent{margin-top:52px}
.recent .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:14px}
.logline{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid rgba(236,225,204,.07);font-size:14px;align-items:baseline}
.logline:last-child{border-bottom:none}
.logline .when{font-family:var(--mono);font-size:10.5px;color:var(--paper-faint);width:86px;flex-shrink:0}
.logline .where{font-family:var(--mono);font-size:10.5px;color:var(--flame-1);width:150px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logline .txt{color:var(--paper);flex:1;min-width:0}
.logline .who{font-family:var(--mono);font-size:10.5px;color:var(--paper-faint)}
.recent .empty{color:var(--paper-faint);font-style:italic;font-size:14px}
.keepers{margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--paper-faint);line-height:1.9}
.keepers .k b{color:var(--paper-dim);font-weight:400}
.keepers .k .miss{color:var(--fading)}

/* ---------------- utilities ---------------- */
.utils{margin-top:56px;display:flex;gap:18px;flex-wrap:wrap;align-items:center;border-top:1px solid rgba(236,225,204,.08);padding-top:16px}
.utils button,.utils label{background:none;border:none;color:var(--paper-faint);font-family:var(--mono);font-size:11px;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;padding:0}
.utils button:hover,.utils label:hover{color:var(--paper)}
.utils .note{font-family:var(--mono);font-size:11px;color:var(--paper-faint);margin-left:auto;text-decoration:none}
.utils input[type=file]{display:none}

/* ---------------- drawer ---------------- */
.scrim{position:fixed;inset:0;background:rgba(5,6,10,.55);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:50;background:linear-gradient(#151321,#120d12);
  border-left:1px solid rgba(236,225,204,.12);transform:translateX(102%);transition:transform .3s var(--ease);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer .dhead{padding:22px 24px 16px;border-bottom:1px solid rgba(236,225,204,.09)}
.drawer .dbody{padding:20px 24px;overflow-y:auto;flex:1}
.drawer h2{font-size:23px;font-weight:600;line-height:1.2;margin-bottom:6px}
.drawer h2 input{font-family:var(--serif);font-size:23px;font-weight:600;background:transparent;border:none;border-bottom:1px dashed transparent;color:var(--paper);width:100%;padding:0}
.drawer h2 input:hover{border-bottom-color:var(--paper-faint)}
.drawer h2 input:focus{outline:none;border-bottom-color:var(--flame-1)}
.drawer .dmeta{font-family:var(--mono);font-size:11px;color:var(--paper-dim);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.drawer .dmeta .st{letter-spacing:.12em;text-transform:uppercase}
.drawer .close{position:absolute;top:14px;right:14px;background:none;border:1px solid rgba(236,225,204,.2);color:var(--paper-dim);width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1}
.drawer .close:hover{color:var(--paper);border-color:var(--paper-dim)}
.drawer .close:focus-visible{outline:2px solid var(--flame-1)}

.feed{margin-bottom:26px}
.feed .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:10px}
.feed textarea{width:100%;background:rgba(236,225,204,.05);border:1px solid rgba(236,225,204,.18);border-radius:8px;color:var(--paper);font-family:var(--serif);font-size:15px;line-height:1.5;padding:12px 14px;min-height:74px;resize:vertical}
.feed textarea::placeholder{color:var(--paper-faint);font-style:italic}
.feed textarea:focus{outline:none;border-color:var(--flame-1)}
.feed .frow{display:flex;gap:10px;margin-top:10px;align-items:center}
.btn-feed{margin-left:auto;background:linear-gradient(#2a1c10,#241608);color:var(--flame-1);border:1px solid rgba(255,180,84,.45);border-radius:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:10px 18px;cursor:pointer;transition:all .2s var(--ease)}
.btn-feed:hover{color:var(--flame-2);border-color:var(--flame-1);box-shadow:0 0 18px rgba(255,138,61,.25)}
.btn-feed:focus-visible{outline:2px solid var(--flame-1);outline-offset:2px}

.settings{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:22px;padding:14px;border:1px dashed rgba(236,225,204,.15);border-radius:8px}
.settings .s{font-family:var(--mono);font-size:11px;color:var(--paper-dim);display:flex;align-items:center;gap:8px}
.settings select{background:#181321;color:var(--paper);border:1px solid rgba(236,225,204,.2);border-radius:6px;font-family:var(--mono);font-size:11px;padding:4px 6px}
.settings .stepper{display:inline-flex;align-items:center;border:1px solid rgba(236,225,204,.2);border-radius:6px;overflow:hidden}
.settings .stepper button{background:none;border:none;color:var(--paper-dim);width:26px;height:26px;cursor:pointer;font-size:14px}
.settings .stepper button:hover{color:var(--flame-1)}
.settings .stepper span{font-family:var(--mono);font-size:12px;color:var(--paper);min-width:26px;text-align:center}
.settings .link{background:none;border:none;color:var(--paper-faint);font-family:var(--mono);font-size:11px;cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;padding:0}
.settings .link:hover{color:var(--paper)}
.settings .link.danger:hover{color:var(--danger)}

.history .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:8px}
.hlog{padding:11px 0;border-bottom:1px solid rgba(236,225,204,.07);position:relative}
.hlog:last-child{border:none}
.hlog .txt{font-size:14.5px;line-height:1.5}
.hlog .m{font-family:var(--mono);font-size:10.5px;color:var(--paper-faint);margin-top:4px}
.hlog .del{position:absolute;top:10px;right:0;background:none;border:none;color:var(--paper-faint);cursor:pointer;font-family:var(--mono);font-size:11px}
.hlog .del:hover{color:var(--danger)}
.history .empty{color:var(--paper-faint);font-style:italic;font-size:14px;padding:8px 0}

/* ---------------- inline new-fire / new-camp form ---------------- */
.inlineform{padding:14px;border:1px dashed rgba(236,225,204,.2);border-radius:10px;margin-top:12px;max-width:520px}
.inlineform .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-faint);margin-bottom:10px}
.inlineform input[type=text]{background:transparent;border:none;border-bottom:1px dashed rgba(236,225,204,.3);color:var(--paper);font-family:var(--serif);font-size:17px;padding:4px 2px;width:100%;max-width:300px}
.inlineform input[type=text]:focus{outline:none;border-bottom-color:var(--flame-1)}
.inlineform .row{display:flex;gap:14px;align-items:center;margin-top:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--paper-dim)}
.inlineform .stepper{display:inline-flex;align-items:center;border:1px solid rgba(236,225,204,.2);border-radius:6px}
.inlineform .stepper button{background:none;border:none;color:var(--paper-dim);width:26px;height:26px;cursor:pointer}
.inlineform .stepper span{min-width:26px;text-align:center;color:var(--paper)}
.inlineform .cancel{background:none;border:none;color:var(--paper-faint);font-family:var(--mono);font-size:11px;cursor:pointer;text-decoration:underline dotted}

/* ---------------- toast ---------------- */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(90px);background:#241608;color:var(--flame-1);
  border:1px solid rgba(255,180,84,.45);font-family:var(--mono);font-size:12px;padding:10px 18px;border-radius:8px;z-index:99;
  transition:transform .25s var(--ease);visibility:hidden;max-width:92vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0);visibility:visible}

@media (prefers-reduced-motion:reduce){#toast,.drawer,.scrim,.fire{transition:none}}
@media (max-width:560px){
  .wrap{padding:20px 14px 70px}
  .fire{width:calc(50% - 6px)}
  .addfire{width:calc(50% - 6px)}
  .logline .where{width:auto;max-width:110px}
  .drawer{width:100vw}
  .camphead .cctl{width:100%;margin-left:0;margin-top:6px}
}