/* Remembrall: a night-dark desk; the glass orb on its brass stand holds the left column,
   the ledger of things you know runs on the right. One committed dark look. */
:root{
  --night:#0f0d15;
  --panel:#18151f;
  --panel-2:#211d2b;
  --line:#2f2a3b;
  --ink:#ece5d3;
  --muted:#9d94a8;
  --faint:#6d6578;
  --brass:#c9a24a;
  --brass-dim:#8a6c2c;
  --on-brass:#1a1408;
  --crimson:#d23a44;
  --f-display:"IM Fell English SC","IM Fell English",Georgia,serif;
  --f-fell:"IM Fell English",Georgia,"Times New Roman",serif;
  --f-body:"Spectral",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--night)}
body{margin:0;color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55;
  padding-inline:max(16px,env(safe-area-inset-left,0px));
  padding-block:calc(env(safe-area-inset-top,0px) + 18px) calc(env(safe-area-inset-bottom,0px) + 48px);
  background:radial-gradient(1200px 600px at 20% -10%, #241c33 0%, transparent 60%),var(--night);min-height:100%}
.wrap{max-width:1080px;margin:0 auto;display:grid;gap:28px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-block:4px 14px}
.brand{font-family:var(--f-display);font-size:clamp(1.9rem,5vw,2.6rem);letter-spacing:.04em;margin:0;font-weight:400}
.brand span{color:var(--brass)}
.account{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:.9rem;min-width:0}
.account #who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52vw}
.loading{font-family:var(--f-fell);font-style:italic;color:var(--muted);text-align:center}

.main{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px;align-items:start}
@media (max-width:820px){.main{grid-template-columns:1fr}}

/* Orb */
.orb-col{display:grid;gap:22px;justify-items:center;min-width:0}
.orb-stage{position:relative;width:min(300px,78vw);aspect-ratio:1/1.18;max-width:100%}
.orb-stage.small{width:min(200px,56vw);margin:0 auto}
.orb{position:absolute;left:0;right:0;top:0;margin:auto;width:100%;aspect-ratio:1;border-radius:50%;border:0;padding:0;background:transparent;
  box-shadow:0 0 60px 6px var(--glow,rgba(220,220,255,.12)),inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .8s ease}
button.orb{cursor:pointer}
.orb:focus-visible{outline:2px solid var(--brass);outline-offset:6px}
.orb canvas{width:100%;height:100%;border-radius:50%;display:block}
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(38% 26% at 32% 22%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%),
    radial-gradient(14% 9% at 70% 78%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 58%,rgba(10,8,20,.55) 100%)}
.stand{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:62%;height:22%;pointer-events:none}
.orb-state{font-family:var(--f-fell);font-style:italic;color:var(--muted);text-align:center;margin:0;min-height:1.6em}
.orb-state.red{color:var(--crimson)}

.recall{width:100%;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:6px;padding:20px 20px 16px}
.recall h2{font-family:var(--f-display);font-weight:400;font-size:1.25rem;margin:0;letter-spacing:.04em;color:var(--brass)}
.recall .date{font-family:var(--f-fell);font-style:italic;color:var(--muted);font-size:.95rem;margin:2px 0 14px}
.recall ol{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:r}
.recall li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:6px 10px;align-items:start;counter-increment:r}
.recall li::before{content:counter(r) ".";font-family:var(--f-fell);color:var(--brass);font-size:1.1rem}
.recall .k{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.recall .v{font-family:var(--f-fell);font-size:1.2rem;line-height:1.3;overflow-wrap:anywhere}
.recall .n{display:block;color:var(--muted);font-size:.9rem;font-style:italic;overflow-wrap:anywhere}
.recall.veiled .tick{visibility:hidden}
.recall.veiled ol{filter:blur(7px);opacity:.5;user-select:none}
.recall .hint{margin:14px 0 0;color:var(--muted);font-size:.88rem}
.empty{color:var(--muted);font-style:italic}

/* Panels and forms */
.ledger{display:grid;gap:22px;min-width:0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px;width:100%;min-width:0}
.panel h2{font-family:var(--f-display);font-weight:400;font-size:1.25rem;margin:0 0 4px;letter-spacing:.04em}
.sub{margin:0 0 16px;color:var(--muted);font-size:.92rem}
.sub.small{font-size:.82rem;margin:8px 0 0}
.auth{display:grid;gap:24px;max-width:460px;margin:0 auto;width:100%}
.auth-panel h2{text-wrap:balance}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{font:inherit;font-size:.85rem;letter-spacing:.06em;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.chip:hover{color:var(--ink);border-color:var(--brass-dim)}
.chip[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.field{display:grid;gap:6px;margin-bottom:12px}
.field label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field.inline{display:flex;align-items:center;gap:8px;margin:0}
input,textarea,select{font:inherit;color:var(--ink);background:var(--night);border:1px solid var(--line);border-radius:4px;padding:10px 12px;width:100%}
select{width:auto}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:64px;resize:vertical}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.btn{font-family:var(--f-fell);font-size:1.05rem;padding:9px 18px;border-radius:4px;border:1px solid var(--brass);background:var(--brass);color:var(--on-brass);cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--brass)}
.toast{color:var(--muted);font-style:italic;font-size:.92rem;margin:0}
.note{font-size:.85rem;color:var(--muted);border:1px dashed var(--line);border-radius:4px;padding:8px 12px;margin:12px 0 0}
.linkish{font:inherit;font-size:.85rem;background:none;border:0;color:var(--muted);cursor:pointer;padding:2px 4px;text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:var(--crimson)}

/* Switch */
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.95rem}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{width:42px;height:24px;border-radius:999px;background:var(--line);position:relative;transition:background .2s;flex:none}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.switch input:checked + .track{background:var(--brass-dim)}
.switch input:checked + .track::after{transform:translateX(18px);background:var(--brass)}
.switch input:focus-visible + .track{outline:2px solid var(--brass);outline-offset:2px}

/* Ledger */
.list-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.count{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.shelves{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:18px}
.shelf{font:inherit;text-align:left;display:grid;gap:2px;padding:12px 14px;border-radius:5px;border:1px solid var(--line);background:var(--night);color:var(--ink);cursor:pointer;min-width:0}
.shelf:hover{border-color:var(--brass-dim)}
.shelf .sl{font-family:var(--f-fell);font-size:1.12rem;overflow-wrap:anywhere}
.shelf .sc{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.shelf[aria-pressed="true"]{border-color:var(--brass);background:linear-gradient(180deg,#2a2213,var(--night))}
.shelf[aria-pressed="true"] .sl{color:var(--brass)}
.shelf.new{border-style:dashed;color:var(--muted)}
.shelf.new .sl{color:var(--brass)}
.newcat{border:1px dashed var(--brass-dim);border-radius:5px;padding:14px;margin-bottom:18px}
.view-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px;border-bottom:1px solid var(--line);padding-bottom:8px}
.view-title{font-family:var(--f-fell);font-weight:400;font-size:1.3rem;margin:0;color:var(--brass);overflow-wrap:anywhere}
ul.items{list-style:none;margin:0;padding:0;display:grid}
ul.items li.entry{border-top:1px solid var(--line)}
ul.items li:first-child{border-top:0}
ul.items li.empty{padding:12px 0}
.entry-head{font:inherit;color:var(--ink);background:none;border:0;width:100%;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:auto minmax(0,1fr) 24px;gap:12px;align-items:baseline;padding:13px 4px;border-radius:4px}
.entry-head:hover .entry-title{color:var(--brass)}
.entry-head .tag{min-width:64px}
.entry-head:not(:has(.tag)){grid-template-columns:minmax(0,1fr) 24px}
.entry-title{font-family:var(--f-fell);font-size:1.12rem;line-height:1.3;overflow-wrap:anywhere}
.chev{color:var(--brass);font-size:1.2rem;text-align:center;line-height:1}
.entry.open .entry-title{color:var(--brass)}
.entry-body{padding:0 4px 16px;display:grid;gap:12px}
.memo{margin:0;padding:12px 14px;background:var(--night);border-left:2px solid var(--brass-dim);border-radius:0 4px 4px 0;
  font-size:.98rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.memo.blank{color:var(--muted);font-style:italic}
.memo a,.recall .n a{color:var(--brass);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.memo a:hover,.recall .n a:hover{color:var(--ink)}
.entry-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.entry-foot time{font-size:.78rem;color:var(--faint)}
.tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);overflow-wrap:anywhere}
.del{font:inherit;font-size:.82rem;background:none;border:0;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:3px}
.del:hover{color:var(--crimson)}
.del.confirm{color:var(--crimson);border:1px solid var(--crimson)}
@media (max-width:480px){.entry-head{grid-template-columns:minmax(0,1fr) 24px}.entry-head .tag{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.orb,.switch .track,.switch .track::after{transition:none}}

/* Done tick */
.tick{font:inherit;font-size:.82rem;display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);
  color:var(--muted);border-radius:999px;padding:5px 12px 5px 8px;cursor:pointer;white-space:nowrap}
.tick:hover{border-color:var(--brass-dim);color:var(--ink)}
.tick .box{width:16px;height:16px;border-radius:3px;border:1.5px solid var(--brass-dim);position:relative;flex:none}
.tick.on{color:var(--brass);border-color:var(--brass-dim)}
.tick.on .box{background:var(--brass);border-color:var(--brass)}
.tick.on .box::after,.tick:hover .box::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--on-brass);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tick:not(.on):hover .box::after{border-color:var(--brass-dim)}
.entry-head{grid-template-columns:auto minmax(0,1fr) auto 24px}
.entry-head:not(:has(.tag)){grid-template-columns:minmax(0,1fr) auto 24px}
.entry-head:not(:has(.done-pill)){grid-template-columns:auto minmax(0,1fr) 24px}
.entry-head:not(:has(.tag)):not(:has(.done-pill)){grid-template-columns:minmax(0,1fr) 24px}
.done-pill{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass-dim);border-radius:999px;padding:1px 8px}
.entry.done .entry-title{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--brass-dim)}
.entry.done.open .entry-title{color:var(--muted)}
@media (max-width:480px){.entry-head,.entry-head:not(:has(.tag)){grid-template-columns:minmax(0,1fr) auto 24px}.entry-head:not(:has(.done-pill)){grid-template-columns:minmax(0,1fr) 24px}}
@media (max-width:420px){.recall li{grid-template-columns:28px minmax(0,1fr)}.recall li .tick{grid-column:2;justify-self:start}}