/* ================= THEME TOKENS ================= */
:root[data-theme="candlelit"]{
  --desk1:#1a130c; --desk2:#0b0805; --desk-grain:.6;
  --parch1:#d3ba8c; --parch2:#c2a877; --parch-stain:rgba(120,86,40,.20);
  --ink:#2a2010; --ink-soft:#6a563a; --ink-faint:#8f7852;
  --rule:rgba(80,58,30,.30); --page-line:rgba(90,66,38,.13);
  --wax:#8a2f1c; --wax-hi:#b8492f; --brass:#d2a24a;
  --panel:#20180f; --panel-2:#2a2015; --panel-edge:#463522; --panel-ink:#e6d3aa; --panel-faint:#a4895c;
  --glow:rgba(255,176,71,.16); --shadow:rgba(0,0,0,.6); --candle:1;
}
:root[data-theme="leather"]{
  --desk1:#171009; --desk2:#0a0603; --desk-grain:.55;
  --parch1:#2c2318; --parch2:#241c12; --parch-stain:rgba(201,154,75,.06);
  --ink:#ecdcb6; --ink-soft:#c6ac7c; --ink-faint:#8a7549;
  --rule:rgba(201,154,75,.24); --page-line:rgba(201,154,75,.09);
  --wax:#a83f2b; --wax-hi:#c65a40; --brass:#c99a4b;
  --panel:#1c150e; --panel-2:#241b12; --panel-edge:#463522; --panel-ink:#ecdcb6; --panel-faint:#a4895c;
  --glow:rgba(255,176,71,.13); --shadow:rgba(0,0,0,.65); --candle:1;
}
:root[data-theme="parchment"]{
  --desk1:#c8b189; --desk2:#b49b6e; --desk-grain:.35;
  --parch1:#f3ead2; --parch2:#e7d9b8; --parch-stain:rgba(150,110,50,.12);
  --ink:#2c2418; --ink-soft:#5c4c34; --ink-faint:#8a7855;
  --rule:rgba(90,66,38,.28); --page-line:rgba(90,66,38,.12);
  --wax:#7c2d1e; --wax-hi:#a8452f; --brass:#9a7b3f;
  --panel:#e4d5b3; --panel-2:#ecdfc3; --panel-edge:#b79b6a; --panel-ink:#2c2418; --panel-faint:#8a7855;
  --glow:rgba(255,176,71,.10); --shadow:rgba(58,40,18,.35); --candle:.9;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{color:var(--ink); font-family:"EB Garamond",Georgia,serif; font-size:18px; line-height:1.6;
  background:radial-gradient(130% 100% at 70% -10%, var(--desk1), var(--desk2) 100%); position:relative; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--desk-grain); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{position:relative; z-index:2; max-width:1120px; margin:0 auto; padding:20px 20px 96px}
a{color:inherit}

/* ---------- masthead ---------- */
.masthead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding-bottom:14px; margin-bottom:20px; border-bottom:1.5px solid var(--rule)}
.brand{flex:1 1 auto; min-width:180px}
.brand h1{margin:0; font-size:26px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--panel-ink)}
.brand small{display:block; font-size:11px; letter-spacing:.3em; color:var(--panel-faint); margin-top:3px}
.mast-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.inline{display:inline; margin:0}

button, .navbtn{font-family:inherit; cursor:pointer; color:var(--panel-ink); background:var(--panel); border:1px solid var(--panel-edge);
  padding:8px 12px; border-radius:3px; font-size:14px; letter-spacing:.03em; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  transition:transform .12s ease, background .2s ease}
button:hover, .navbtn:hover{transform:translateY(-1px)}
button:focus-visible, .navbtn:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.btn-primary{background:var(--wax); border-color:var(--wax-hi); color:#f4e6cf}
.btn-primary.wide{width:100%; justify-content:center; padding:11px}
.danger{background:transparent; border-color:var(--wax); color:var(--wax)}
.lockctl.locked{border-color:var(--wax); color:var(--wax)}
.lockctl.unlocked{border-color:var(--brass); color:var(--brass)}
.link{background:none; border:none; padding:0; color:var(--brass); text-decoration:underline; font-size:15px; cursor:pointer}

/* ---------- flash ---------- */
.flash{background:var(--panel); border:1px solid var(--panel-edge); border-left:3px solid var(--brass); color:var(--panel-ink);
  padding:10px 14px; border-radius:3px; margin:0 0 16px; font-size:15px}
.flash.warn{border-left-color:var(--wax)}

/* ---------- gate (login/setup) ---------- */
.gate{min-height:70vh; display:grid; place-items:center; padding:20px}
.gate-card{background:var(--panel); border:1px solid var(--panel-edge); color:var(--panel-ink); border-radius:5px;
  padding:28px; width:min(420px,100%); box-shadow:0 26px 60px -24px var(--shadow)}
.gate-card h2{margin:0 0 8px; letter-spacing:.06em}
.gate-card label{display:block; margin:14px 0; font-size:14px; color:var(--panel-faint)}
.gate-card input{display:block; width:100%; margin-top:5px; font-family:"Courier Prime",monospace; font-size:15px;
  padding:10px 12px; border-radius:3px; background:var(--panel-2); border:1px solid var(--panel-edge); color:var(--panel-ink)}
.muted{color:var(--panel-faint)} .small{font-size:13px}

/* ---------- shell / rail ---------- */
.shell{display:grid; grid-template-columns:236px 1fr; gap:24px}
@media(max-width:800px){ .shell{grid-template-columns:1fr} .rail{order:2} }
.rail{background:var(--panel); border:1px solid var(--panel-edge); border-radius:4px; padding:14px 12px; color:var(--panel-ink); align-self:start; box-shadow:0 12px 30px -20px var(--shadow)}
.rail h2{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--panel-faint); margin:0 0 10px}
.yr{font-family:"Courier Prime",monospace; font-size:12px; color:var(--panel-faint); letter-spacing:.05em; margin:14px 0 6px; padding-bottom:4px; border-bottom:1px dashed var(--rule)}
.yr:first-of-type{margin-top:0}
.mo{display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-radius:3px; border-left:2px solid transparent; text-decoration:none; color:var(--panel-ink)}
.mo:hover{background:var(--panel-2)} .mo.active{border-left-color:var(--wax); background:var(--panel-2)}
.mo .ct{font-family:"Courier Prime",monospace; font-size:11px; color:var(--panel-faint)}

/* ---------- pane / cards ---------- */
.pane{min-height:60vh}
.pane-head{display:flex; align-items:baseline; gap:14px; margin:2px 0 16px; flex-wrap:wrap}
.pane-head h2{margin:0; font-size:24px; font-weight:600; color:var(--panel-ink)}
.pane-head .sub{font-family:"Courier Prime",monospace; font-size:12px; color:var(--panel-faint)}
.card{display:block; background:var(--panel); border:1px solid var(--panel-edge); border-radius:4px; padding:15px 18px; margin-bottom:12px;
  color:var(--panel-ink); text-decoration:none; box-shadow:0 10px 26px -22px var(--shadow); transition:transform .12s ease}
a.card:hover{transform:translateY(-2px)}
.card.static{cursor:default}
.card .cstamp{font-family:"Courier Prime",monospace; font-size:12px; color:var(--panel-faint); letter-spacing:.02em}
.card h3{margin:6px 0 4px; font-size:20px; font-weight:500}
.card p{margin:0; color:var(--panel-faint); max-width:70ch; font-size:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.row-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px}
.purge-form input{font-family:"Courier Prime",monospace; font-size:13px; padding:7px 9px; border-radius:3px; background:var(--panel-2); border:1px solid var(--panel-edge); color:var(--panel-ink); width:110px}

/* ---------- the torn parchment sheet ---------- */
.sheet-wrap{position:relative; padding:6px}
.sheet{position:relative; color:var(--ink); border-radius:5px; border:1px solid var(--parch-edge, rgba(120,86,40,.35));
  background:radial-gradient(60% 45% at 78% 22%, var(--parch-stain), transparent 60%),
             radial-gradient(50% 40% at 20% 80%, var(--parch-stain), transparent 60%),
             linear-gradient(135deg, var(--parch1), var(--parch2));
  box-shadow:0 20px 40px -22px var(--shadow)}
.stamp{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:24px 36px 14px; font-family:"Courier Prime",monospace; font-size:13px; color:var(--ink-soft); border-bottom:1px dashed var(--rule)}
.stamp .k{display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)}
.stamp .v{color:var(--ink); font-weight:700; font-size:14px}
.stamp.edit{gap:14px}
.stamp .sf{display:flex; flex-direction:column} .stamp .sf.grow{flex:1 1 160px}
.stamp .sf input{font-family:"Courier Prime",monospace; font-size:14px; color:var(--ink); background:rgba(255,255,255,.18); border:1px solid var(--rule); border-radius:2px; padding:5px 8px; margin-top:3px}
.title-input{display:block; width:calc(100% - 72px); margin:14px 36px 0; font-family:"EB Garamond",serif; font-size:24px; font-weight:600; color:var(--ink); background:transparent; border:none; border-bottom:1px dashed var(--rule); padding:4px 0}
.compose{padding:22px 36px 30px; min-height:280px; background-image:repeating-linear-gradient(transparent 0 32px, var(--page-line) 32px 33px); background-position:0 42px}
.compose h1{font-size:26px; margin:0 0 14px; font-weight:600}
.compose-input{display:block; width:calc(100% - 72px); margin:14px 36px 0; min-height:320px; resize:vertical;
  font-family:"EB Garamond",serif; font-size:18px; line-height:1.7; color:var(--ink);
  background-image:repeating-linear-gradient(transparent 0 32px, var(--page-line) 32px 33px); background-color:transparent; border:none; outline:none}
.sheet-tools{display:flex; align-items:center; gap:12px; padding:16px 36px 28px; flex-wrap:wrap}
.sheet-tools .hint{margin-left:auto; font-style:italic; font-size:12.5px; color:var(--ink-faint)}

/* ---------- settings ---------- */
.set-sec{background:var(--panel); border:1px solid var(--panel-edge); border-radius:4px; padding:18px 20px; margin-bottom:16px; color:var(--panel-ink)}
.set-sec h3{margin:0 0 4px; font-size:18px} .set-sec .desc{margin:0 0 12px; font-size:14px; color:var(--panel-faint)}
.row{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 0; border-top:1px solid var(--rule); flex-wrap:wrap}
.row:first-of-type{border-top:none} .row .rl{font-size:15px}
.field{font-family:"Courier Prime",monospace; font-size:14px; background:var(--panel-2); border:1px solid var(--panel-edge); color:var(--panel-ink); padding:8px 10px; border-radius:3px; min-width:120px}
.themes{display:flex; gap:10px; flex-wrap:wrap}
.swatch{cursor:pointer; border:1px solid var(--panel-edge); border-radius:4px; padding:8px; width:150px; text-align:center; font-size:13px; color:var(--panel-ink); background:var(--panel); display:block}
.swatch.sel{outline:2px solid var(--brass); outline-offset:1px}
.chip{display:block; height:34px; border-radius:3px; margin-bottom:6px}
.set-actions{margin-top:4px}

/* ---------- candle ---------- */
.candle{position:fixed; left:24px; bottom:20px; z-index:3; width:64px; height:120px; pointer-events:none; opacity:var(--candle)}
.candle .glow{position:absolute; left:50%; top:-10px; width:260px; height:260px; transform:translateX(-50%); background:radial-gradient(circle, var(--glow), transparent 62%); filter:blur(4px)}
.candle .body{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:26px; height:78px; border-radius:4px 4px 2px 2px; background:linear-gradient(90deg,#4a3a22,#c9b78e 45%,#e8dcbf 55%,#5a4728); box-shadow:inset 0 6px 10px rgba(255,255,255,.25), 0 3px 6px rgba(0,0,0,.5)}
.candle .wick{position:absolute; bottom:78px; left:50%; transform:translateX(-50%); width:2px; height:8px; background:#2a1c0c}
.candle .flame{position:absolute; bottom:84px; left:50%; width:16px; height:34px; border-radius:50% 50% 50% 50%/ 62% 62% 38% 38%; transform-origin:bottom center;
  background:radial-gradient(circle at 50% 78%, #fff2c0 0%, #ffb547 40%, #ff7a1a 72%, rgba(255,90,10,.15) 100%); filter:blur(.4px); animation:flick 1.6s ease-in-out infinite}
@keyframes flick{0%,100%{transform:translateX(-50%) scaleY(1) rotate(-1deg); opacity:.95}25%{transform:translateX(-52%) scaleY(1.06) rotate(1.5deg); opacity:1}50%{transform:translateX(-49%) scaleY(.95) rotate(-1.2deg); opacity:.9}75%{transform:translateX(-51%) scaleY(1.04) rotate(1deg); opacity:1}}
@media(prefers-reduced-motion:reduce){ .candle .flame{animation:none; transform:translateX(-50%)} }
@media(max-width:640px){ .candle{transform:scale(.66); transform-origin:left bottom} }

/* ---------- quill ---------- */
.quill{position:fixed; right:20px; bottom:12px; z-index:3; width:118px; pointer-events:none; filter:drop-shadow(0 7px 11px rgba(0,0,0,.5))}
.quill svg{width:100%; height:auto; display:block}
@media(max-width:640px){ .quill{width:82px; right:10px} }

/* ---------- modals ---------- */
.overlay{position:fixed; inset:0; z-index:20; background:rgba(6,4,2,.62); display:none; place-items:center; padding:20px}
.overlay.on{display:grid}
.modal{background:var(--panel); border:1px solid var(--panel-edge); border-radius:5px; padding:24px; width:min(480px,100%); color:var(--panel-ink); box-shadow:0 30px 70px -20px #000; max-height:92vh; overflow:auto}
.modal.small{width:min(360px,100%)}
.modal h3{margin:0 0 4px; font-size:20px} .modal .desc{margin:0 0 16px; font-size:14px; color:var(--panel-faint)}
.mfield{display:block; margin-bottom:12px} .mfield span{display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--panel-faint); margin-bottom:4px}
.mfield em{text-transform:none; letter-spacing:0; font-style:italic}
.mfield input, .mfield textarea{width:100%; font-family:"Courier Prime",monospace; font-size:15px; padding:9px 11px; border-radius:3px; background:var(--panel-2); border:1px solid var(--panel-edge); color:var(--panel-ink)}
.mfield textarea{font-family:"EB Garamond",serif; font-size:17px; line-height:1.6; resize:vertical}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:6px}

/* ---------- rich-text editor ---------- */
.editor{margin:14px 36px 0}
.toolbar{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed var(--rule)}
.toolbar button{background:rgba(255,255,255,.14); border:1px solid var(--rule); color:var(--ink); padding:5px 10px; min-width:34px; border-radius:3px; font-size:14px; line-height:1}
.toolbar button:hover{background:rgba(255,255,255,.28)}
.rte{min-height:300px; font-family:"EB Garamond",serif; font-size:18px; line-height:1.7; color:var(--ink); outline:none;
  background-image:repeating-linear-gradient(transparent 0 32px, var(--page-line) 32px 33px)}
.rte:focus{outline:none}
.rte h3{font-size:20px; margin:.6em 0 .3em} .rte ul,.rte ol{margin:.4em 0 .4em 1.4em} .rte blockquote{margin:.5em 0; padding-left:14px; border-left:3px solid var(--rule); font-style:italic}
.rte:empty:before{content:attr(data-placeholder); color:var(--ink-faint)}
/* editor inside the new-entry modal */
.modal .editor{margin:0}
.modal .rte{min-height:160px; background:var(--panel-2); border:1px solid var(--panel-edge); border-radius:3px; padding:10px 12px; color:var(--panel-ink); background-image:none}
.modal .toolbar button{color:var(--panel-ink)}
/* rendered body */
.compose ul,.compose ol{margin:.4em 0 .8em 1.4em} .compose blockquote{margin:.6em 0; padding-left:14px; border-left:3px solid var(--rule); font-style:italic} .compose h3{font-size:20px; margin:.7em 0 .3em}