:root{--ink:#1a1a1a;--gold:#b8902f;--line:#e2ddd3;--bg:#faf8f4;--mut:#777;--accent:#2b4a6f}
*{box-sizing:border-box}
body{margin:0;font-family:"EB Garamond",Georgia,"Times New Roman",serif;color:var(--ink);background:var(--bg);line-height:1.5}
.topbar{display:flex;align-items:center;gap:1.5rem;padding:.6rem 1.2rem;background:#fff;border-bottom:2px solid var(--ink);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.brand{font-weight:700;font-size:1.15rem}.brand span{color:var(--gold)}.brand small{font-weight:400;color:var(--mut);font-size:.7rem}
.topbar nav{display:flex;gap:.4rem;flex:1}
.topbar nav a{text-decoration:none;color:var(--ink);padding:.3rem .7rem;border-radius:6px;font-size:.95rem}
.topbar nav a:hover{background:#f0ece3}.topbar nav a.on{background:var(--ink);color:#fff}
.who{font-size:.85rem;color:var(--mut)}.who a{color:var(--accent)}
main{max-width:920px;margin:1.5rem auto;padding:0 1.2rem}
main.wide{max-width:1240px}
.flash{background:#fff6d8;border:1px solid var(--gold);padding:.6rem 1rem;border-radius:6px;margin-bottom:1rem}
h1{font-size:1.5rem}h2{font-size:1.2rem;border-bottom:1px solid var(--line);padding-bottom:.3rem}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.3rem;margin-bottom:1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:1rem;text-align:center}
.kpi .n{font-size:2rem;font-weight:700}.kpi .l{color:var(--mut);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
.gauge{height:14px;background:#eee;border-radius:8px;overflow:hidden;margin:.4rem 0}
.gauge>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--accent))}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:.45rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;color:var(--mut);letter-spacing:.03em}
tr.foc{background:#fff6d8}
.tag{display:inline-block;font-size:.7rem;padding:.1rem .5rem;border-radius:10px;border:1px solid var(--line)}
.tag.saker{background:#e6f3e6;border-color:#9c9}.tag.kanske{background:#fdeede;border-color:#e0a96b}
.tabs{display:flex;gap:.3rem;margin-bottom:1rem}
.tabs a{padding:.4rem .9rem;border:1px solid var(--line);border-radius:8px 8px 0 0;text-decoration:none;color:var(--ink);background:#fff}
.tabs a.on{background:var(--ink);color:#fff}
.sec{display:flex;gap:.5rem;padding:.5rem .7rem;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.sec:hover{background:#f5f1e8}.sec .num{font-weight:700;min-width:3.2rem;color:var(--accent)}
.sec.h{background:#f3eee3;font-weight:700}
.badge{background:var(--gold);color:#fff;border-radius:10px;padding:0 .45rem;font-size:.72rem;margin-left:auto}
a.bil{color:var(--accent);text-decoration:underline dotted;font-weight:600}
.split{display:grid;grid-template-columns:1fr 320px;gap:1.2rem}
.cmt{background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:6px;padding:.5rem .7rem;margin-bottom:.5rem;font-size:.9rem}
.cmt .meta{color:var(--mut);font-size:.72rem}
textarea,input[type=text],input[type=password]{width:100%;font-family:inherit;font-size:.95rem;padding:.5rem;border:1px solid var(--line);border-radius:6px}
button,.btn{background:var(--ink);color:#fff;border:0;border-radius:6px;padding:.5rem .9rem;cursor:pointer;font-family:inherit;font-size:.9rem;text-decoration:none;display:inline-block}
button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.loginbox{max-width:340px;margin:8vh auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:2rem}
.muted{color:var(--mut);font-size:.85rem}
.docbody{font-size:1.02rem}.docbody p{margin:.5rem 0}
.note{font-size:.8rem;color:var(--mut)}
mark{background:#fff2a8}
details{margin:.3rem 0}summary{cursor:pointer;color:var(--accent)}

/* --- skrivelse: paragraf-per-paragraf med kommentarsräls --- */
.letterhead{white-space:normal}
.letterhead p{margin:.15rem 0}
.para{border-bottom:1px solid var(--line);padding:.35rem 0}
.para:hover{background:#fffdf7}
.para-grid{display:grid;grid-template-columns:1fr 300px;gap:1.1rem;align-items:start}
.para-text{position:relative;padding-left:3.2rem}
.para-text .pnum{position:absolute;left:0;top:.15rem;font-weight:700;color:var(--accent);font-size:.9rem}
.para-text .ptext{font-size:1.02rem}
.para-text .ptext p{margin:.2rem 0}
.para-tools{margin-top:.25rem;display:flex;gap:.8rem}
.mini{font-size:.78rem;color:var(--accent);text-decoration:none;cursor:pointer;background:none;border:0;padding:0}
.mini:hover{text-decoration:underline}
.editform textarea{margin:.4rem 0}
.para-rail{border-left:2px solid var(--line);padding-left:.7rem;min-height:1.5rem}
.para-rail .cmt{font-size:.82rem;padding:.35rem .5rem;margin-bottom:.35rem}
.para-rail .cmt.ann{border-left-color:#e0a96b}
.para-rail .addc textarea{font-size:.82rem;padding:.35rem}
.para-rail .addc{opacity:.55;transition:opacity .15s}
.para:hover .addc, .para-rail .addc:focus-within{opacity:1}
@media(max-width:900px){.para-grid{grid-template-columns:1fr}.para-rail{border-left:0;border-top:1px dashed var(--line);padding-left:0;padding-top:.5rem}}