/* ============================================================
   DFB Læseplan — frontend styles (scoped under .dfbl)
   ============================================================ */
.dfbl{
  --bg:#f1e9dc; --paper:#fbf7ef; --paper-2:#f5eee1;
  --ink:#241d16; --ink-soft:#5b4e40; --muted:#8a7a63;
  --line:#e2d6c1; --line-strong:#d2c3a8;
  --accent:#7a241f; --accent-soft:#a8503f; --gold:#b08a3e;
  --done:#7a8b5a; --shadow:0 1px 2px rgba(46,33,18,.06),0 8px 24px rgba(46,33,18,.07);
  --radius:10px;
  font-family:"Spectral",Georgia,serif; color:var(--ink); font-size:16px; line-height:1.5;
  background:radial-gradient(1200px 600px at 80% -10%,#f7efe0 0%,transparent 60%),var(--bg);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.dfbl *{box-sizing:border-box}
.dfbl h1,.dfbl h2,.dfbl h3{font-family:"Fraunces",Georgia,serif;font-weight:600;margin:0;letter-spacing:-.01em;line-height:1.15}

/* ---------- Topbar + plan-menu ---------- */
.dfbl-topbar{
  background:linear-gradient(180deg,#2a2018 0%,#1d160f 100%); color:#f1e6d3;
  padding:16px 24px; display:flex;align-items:center;justify-content:space-between;gap:18px;
  border-bottom:3px solid var(--gold); flex-wrap:wrap;
  position:sticky; top:0; z-index:30; box-shadow:0 4px 14px rgba(29,22,15,.25);
}
.dfbl-topbartools .dfbl-topclose{
  background:rgba(255,255,255,.12);color:#f1e6d3;border:none;width:34px;height:34px;border-radius:50%;
  font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.dfbl-topbartools .dfbl-topclose:hover{background:var(--accent);color:#fff}
.dfbl-brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dfbl-brand h1{font-size:1.4rem;color:#f6ecd9}
.dfbl-brand .sub{font-size:.74rem;color:#bda980;letter-spacing:.14em;text-transform:uppercase}
.dfbl-topbartools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dfbl-topbartools .lang{display:flex;align-items:center;gap:6px;font-size:.82rem;color:#cdb98e}
.dfbl select,.dfbl input,.dfbl button{font-family:inherit}
.dfbl-topbartools select{background:#33271c;color:#f1e6d3;border:1px solid #4a3a2a;border-radius:6px;padding:6px 10px;font-size:.85rem}

.dfbl-plans{
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:10px 24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.dfbl-plans .pl-label{font-variant:small-caps;letter-spacing:.06em;color:var(--muted);font-weight:600;font-size:.9rem}
.dfbl-plans select{
  font-size:.95rem;color:var(--ink);background:#fff;border:1px solid var(--line-strong);
  border-radius:7px;padding:7px 30px 7px 11px;min-width:200px;max-width:360px;
}
.dfbl-plans .pl-btn{
  font-size:.84rem;font-weight:500;background:var(--paper-2);color:var(--ink-soft);
  border:1px solid var(--line-strong);border-radius:7px;padding:7px 12px;cursor:pointer;letter-spacing:.01em;
}
.dfbl-plans .pl-btn:hover:not(:disabled){background:#fff;border-color:var(--accent-soft);color:var(--accent)}
.dfbl-plans .pl-btn.primary{background:#33271c;color:#f3e8d6;border-color:#33271c}
.dfbl-plans .pl-btn.primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}
.dfbl-plans .pl-btn.danger:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.dfbl-plans .pl-btn:disabled{opacity:.4;cursor:not-allowed}
.dfbl-plans .pl-spacer{flex:1}
.dfbl-plans .pl-count{font-size:.8rem;color:var(--muted)}

/* ---------- Samples ---------- */
.dfbl-samples{
  background:var(--paper-2);border-bottom:1px solid var(--line);
  padding:9px 24px;font-size:.88rem;color:var(--ink-soft);display:flex;gap:8px 6px;align-items:center;flex-wrap:wrap;
}
.dfbl-samples .lbl{font-variant:small-caps;letter-spacing:.06em;color:var(--muted);margin-right:2px;font-weight:600}
.dfbl-samples button{
  background:none;border:none;font-size:.88rem;color:var(--accent);cursor:pointer;padding:2px 4px;border-radius:4px;
  text-decoration:underline;text-decoration-color:rgba(122,36,31,.35);text-underline-offset:3px;
}
.dfbl-samples button:hover:not(:disabled){background:rgba(122,36,31,.07);text-decoration-color:var(--accent)}
.dfbl-samples button:disabled{color:var(--muted);cursor:not-allowed;text-decoration:none}
.dfbl-samples .sep{color:var(--line-strong)}

/* ---------- Layout ---------- */
.dfbl-wrap{display:grid;grid-template-columns:300px 1fr;gap:22px;padding:22px;background:transparent}
@media(max-width:880px){.dfbl-wrap{grid-template-columns:1fr;padding:14px}}

/* ---------- Panels ---------- */
.dfbl-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.dfbl-panel + .dfbl-panel{margin-top:18px}
.dfbl-panel > h3{
  font-family:"Spectral";font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:12px 15px;border-bottom:1px solid var(--line);background:var(--paper-2);font-weight:600;
}
.dfbl-panel .body{padding:15px}

.dfbl-field{display:block;font-size:.82rem;color:var(--ink-soft);margin-bottom:13px}
.dfbl-field span{display:block;margin-bottom:5px;font-weight:500}
.dfbl input[type=date],.dfbl input[type=number]{
  width:100%;font-size:.95rem;color:var(--ink);background:#fff;border:1px solid var(--line-strong);
  border-radius:7px;padding:8px 10px;
}
.dfbl input:focus,.dfbl select:focus{outline:none;border-color:var(--accent-soft);box-shadow:0 0 0 3px rgba(168,80,63,.12)}

.dfbl-radios{display:flex;flex-direction:column;gap:2px}
.dfbl-radios label{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;cursor:pointer;font-size:.94rem;color:var(--ink)}
.dfbl-radios label:hover{background:var(--paper-2)}
.dfbl-radios input{accent-color:var(--accent)}
.dfbl-radios label.active{background:rgba(122,36,31,.08);font-weight:500}

.dfbl-toggle{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-soft);margin-top:4px;cursor:pointer}
.dfbl-toggle input{accent-color:var(--accent);width:16px;height:16px}

.dfbl-exports{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.dfbl-exports button{
  flex:1;min-width:60px;font-size:.85rem;font-weight:500;background:#33271c;color:#f3e8d6;
  border:none;border-radius:7px;padding:9px 6px;cursor:pointer;
}
.dfbl-exports button:hover{background:var(--accent)}

/* book selector */
.dfbl-booksel{font-size:.92rem}
.dfbl-testament{border-bottom:1px solid var(--line)}
.dfbl-testament:last-child{border-bottom:none}
.dfbl-testament > .thead{display:flex;align-items:center;gap:8px;padding:9px 4px;cursor:pointer;user-select:none}
.dfbl-testament > .thead .tw{flex:1;font-weight:600;color:var(--ink);font-family:"Fraunces";font-size:.96rem}
.dfbl-testament > .thead input{accent-color:var(--accent);width:16px;height:16px}
.dfbl-testament > .thead .caret{color:var(--muted);font-size:.8rem;width:14px;text-align:center;transition:transform .15s}
.dfbl-testament.collapsed .caret{transform:rotate(-90deg)}
.dfbl-testament.collapsed .blist{display:none}
.dfbl-testament .blist{padding:2px 4px 10px 26px;display:grid;grid-template-columns:1fr 1fr;gap:1px 10px;align-items:stretch}
@media(max-width:880px){.dfbl-testament .blist{grid-template-columns:1fr 1fr 1fr}}
.dfbl-testament .blist label{display:flex;align-items:center;gap:7px;padding:3px 4px;border-radius:5px;cursor:pointer;font-size:.85rem;color:var(--ink-soft);min-width:0}
.dfbl-testament .blist label:hover{background:var(--paper-2)}
.dfbl-testament .blist input{accent-color:var(--accent);flex:0 0 auto}

/* ---------- Output ---------- */
.dfbl-output{min-height:380px}
.dfbl-output .body{padding:0}
.dfbl-planhead{padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.dfbl-planhead h2{font-size:1.6rem;color:var(--ink)}
.dfbl-meta{margin-top:7px;font-size:.92rem;color:var(--ink-soft);display:flex;gap:16px 24px;flex-wrap:wrap}
.dfbl-meta b{color:var(--accent);font-weight:600}
.dfbl-progress{margin-top:12px;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.dfbl-progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--done),#9aab78);width:0;transition:width .3s}

.dfbl-empty{padding:56px 30px;text-align:center;color:var(--muted)}
.dfbl-empty .big{font-family:"Fraunces";font-size:1.25rem;color:var(--ink-soft);margin-bottom:6px}

/* calendar */
.dfbl-calwrap{padding:4px 0 18px}
.dfbl-monthlabel{font-family:"Fraunces";font-size:1.1rem;color:var(--accent);padding:16px 22px 8px;font-weight:600}
.dfbl-calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dfbl-dow{background:var(--paper-2);padding:8px 6px;text-align:center;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.dfbl-cell{background:var(--paper);min-height:74px;padding:6px 8px;position:relative;font-size:.83rem}
.dfbl-cell.blank{background:var(--paper-2);opacity:.55}
.dfbl-cell .dnum{position:absolute;top:5px;right:8px;font-size:.76rem;color:var(--muted)}
.dfbl-cell .rd{margin-top:18px;display:flex;align-items:flex-start;gap:6px;cursor:pointer;line-height:1.25}
.dfbl-cell .rd input{margin-top:3px;accent-color:var(--done)}
.dfbl-cell .rd .txt{color:var(--ink)}
.dfbl-cell.done .rd .txt{color:var(--done);text-decoration:line-through;text-decoration-thickness:1px}

/* list */
.dfbl-lrow{display:flex;align-items:center;gap:12px;padding:9px 22px;border-bottom:1px solid var(--line);cursor:pointer}
.dfbl-lrow:hover{background:var(--paper-2)}
.dfbl-lrow input{accent-color:var(--done);width:17px;height:17px}
.dfbl-lrow .lday{font-family:"Fraunces";font-weight:600;color:var(--accent);min-width:54px;font-size:.92rem}
.dfbl-lrow .ldate{color:var(--muted);min-width:128px;font-size:.86rem}
.dfbl-lrow .lread{color:var(--ink);flex:1}
.dfbl-lrow.done .lread{color:var(--done);text-decoration:line-through}

/* weeks */
.dfbl-weekswrap{padding:14px 22px}
.dfbl-weekblock{margin-bottom:16px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.dfbl-weekblock .wh{background:var(--paper-2);padding:8px 14px;font-family:"Fraunces";font-weight:600;color:var(--ink);font-size:.94rem;display:flex;justify-content:space-between}
.dfbl-weekblock .wh small{color:var(--muted);font-family:"Spectral";font-weight:400}
.dfbl-weekblock .wd{display:flex;align-items:center;gap:10px;padding:7px 14px;border-top:1px solid var(--line);font-size:.9rem;cursor:pointer}
.dfbl-weekblock .wd:hover{background:var(--paper-2)}
.dfbl-weekblock .wd input{accent-color:var(--done)}
.dfbl-weekblock .wd .d{color:var(--muted);min-width:92px;font-size:.84rem}
.dfbl-weekblock .wd.done .r{color:var(--done);text-decoration:line-through}

/* books */
.dfbl-bookswrap{padding:14px 22px}
.dfbl-brow{display:grid;grid-template-columns:170px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);align-items:baseline}
.dfbl-brow .bn{font-family:"Fraunces";font-weight:600;color:var(--ink)}
.dfbl-brow .bn small{display:block;color:var(--muted);font-family:"Spectral";font-weight:400;font-size:.8rem}
.dfbl-brow .bd{color:var(--ink-soft);font-size:.92rem}
.dfbl-brow .bd b{color:var(--accent)}

/* circle */
.dfbl-circlewrap{display:flex;gap:26px;padding:24px;flex-wrap:wrap;align-items:center;justify-content:center}
.dfbl-legend{display:grid;grid-template-columns:1fr 1fr;gap:3px 18px;font-size:.83rem;max-width:360px}
.dfbl-legend .li{display:flex;align-items:center;gap:7px;color:var(--ink-soft)}
.dfbl-legend .sw{width:11px;height:11px;border-radius:2px;flex:0 0 auto}

/* notices + modal */
.dfbl-notice{padding:40px 30px;text-align:center;color:var(--ink-soft)}
.dfbl-notice .big{font-family:"Fraunces";font-size:1.3rem;color:var(--ink);margin-bottom:8px}
.dfbl-notice a{color:var(--accent);font-weight:600}

.dfbl-modal-bg{position:fixed;inset:0;background:rgba(36,29,22,.5);display:flex;align-items:center;justify-content:center;z-index:99999}
.dfbl-modal{background:var(--paper);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:min(420px,92vw);padding:22px;border:1px solid var(--line-strong)}
.dfbl-modal h3{font-family:"Fraunces";font-size:1.2rem;color:var(--ink);margin-bottom:14px}
.dfbl-modal input[type=text]{width:100%;font-size:1rem;padding:10px 12px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink)}
.dfbl-modal .row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.dfbl-modal .row button{font-size:.9rem;font-weight:500;border-radius:8px;padding:9px 16px;cursor:pointer;border:1px solid var(--line-strong);background:var(--paper-2);color:var(--ink-soft)}
.dfbl-modal .row button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.dfbl-modal .msg{font-size:.92rem;color:var(--ink-soft);margin-bottom:6px}

.dfbl-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#33271c;color:#f3e8d6;padding:10px 18px;border-radius:8px;font-size:.9rem;z-index:99999;box-shadow:var(--shadow);opacity:0;transition:opacity .25s}
.dfbl-toast.show{opacity:1}

/* ---------- klikbare referencer (åbner læser) ---------- */
.dfbl-ref{
  color:var(--accent);text-decoration:underline;text-decoration-color:rgba(122,36,31,.35);
  text-underline-offset:2px;cursor:pointer;border-radius:3px;transition:background .12s,color .12s;
}
.dfbl-ref:hover{color:var(--accent-soft);text-decoration-color:var(--accent-soft);background:rgba(122,36,31,.07)}
.dfbl-ref:focus-visible{outline:2px solid var(--accent-soft);outline-offset:1px}
/* bevar "udført"-look (grøn + overstreget) også på links */
.dfbl-cell.done .rd .txt .dfbl-ref,
.dfbl-lrow.done .lread .dfbl-ref,
.dfbl-weekblock .wd.done .r .dfbl-ref{color:var(--done);text-decoration-color:rgba(122,139,90,.5)}
@media print{ .dfbl-ref{color:inherit;text-decoration:none} }

/* ---------- trigger + login knap ---------- */
/*
.dfbl-trigger,.dfbl-login-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Fraunces",Georgia,serif;font-size:1rem;font-weight:600;
  background:#7a241f;color:#fbf7ef;border:none;border-radius:9px;
  padding:11px 20px;cursor:pointer;line-height:1;text-decoration:none;
  box-shadow:0 2px 8px rgba(46,33,18,.15);
}
.dfbl-trigger:hover,.dfbl-login-btn:hover{background:#92382f;color:#fff}
*/
/* ---------- popup overlay (fixed, over temaets menu) ---------- */
.dfbl-pop{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:24px}
.dfbl-pop[hidden]{display:none}
.dfbl-pop-backdrop{position:absolute;inset:0;background:rgba(36,29,22,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dfbl-pop-frame{
  position:relative;width:min(1180px,100%);height:min(900px,94vh);
  background:#fbf7ef;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.42);
  overflow:auto;-webkit-overflow-scrolling:touch;
}
.dfbl-pop-frame .dfbl{border:none;border-radius:14px;min-height:100%}
@media(max-width:880px){.dfbl-pop{padding:0}.dfbl-pop-frame{width:100%;height:100%;border-radius:0}.dfbl-pop-frame .dfbl{border-radius:0}}

@media print{
  .dfbl-pop{position:static;padding:0;display:block}
  .dfbl-pop-backdrop{display:none!important}
  .dfbl-pop-frame{position:static;width:auto;height:auto;box-shadow:none;border-radius:0;overflow:visible}
  .dfbl-topbar,.dfbl-plans,.dfbl-samples,.dfbl-panel.controls,.dfbl-exports,.dfbl-progress{display:none!important}
  .dfbl-wrap{display:block;padding:0}
  .dfbl{border:none;background:#fff}
  .dfbl-panel{border:none;box-shadow:none}
  .dfbl-cell .rd input,.dfbl-lrow input,.dfbl-weekblock .wd input{display:none}
}


/* ---- Makker-spor ---- */
.dfbl-buddies{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; }
.dfbl-bd-toggle{ display:inline-flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; user-select:none; color:var(--muted,#6b675d); }
.dfbl-bd-toggle input{ accent-color:var(--accent,#7c2d2d); }
.dfbl-bd-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#4a463e; }
.dfbl-bd-chip b{ color:#221f1a; }
.dfbl-bd-chip.me b{ color:var(--accent,#7c2d2d); }
.dfbl-bd-dot{ width:9px; height:9px; border-radius:50%; background:var(--bd,#1F6F6B); display:inline-block; flex:0 0 auto; box-shadow:0 0 0 2px rgba(255,255,255,.7); }
.dfbl-bd-marks{ display:inline-flex; gap:3px; align-items:center; }
/* placering i de tre visninger */
.dfbl-cell .dfbl-bd-marks{ position:absolute; right:6px; bottom:6px; }
.dfbl-cell{ position:relative; }
.dfbl-lrow .dfbl-bd-marks, .wd .dfbl-bd-marks{ margin-left:auto; padding-left:8px; }

/* ---- Blød, indpasset scrollbar (i stedet for systemets klassiske) ---- */
.dfbl-pop-frame, .dfbl, .dfbl *{
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.dfbl-pop-frame::-webkit-scrollbar,
.dfbl ::-webkit-scrollbar,
.dfbl::-webkit-scrollbar{ width:9px; height:9px; }
.dfbl-pop-frame::-webkit-scrollbar-button,
.dfbl ::-webkit-scrollbar-button,
.dfbl::-webkit-scrollbar-button{ display:none; width:0; height:0; }
.dfbl-pop-frame::-webkit-scrollbar-track,
.dfbl ::-webkit-scrollbar-track,
.dfbl::-webkit-scrollbar-track{ background:transparent; }
.dfbl-pop-frame::-webkit-scrollbar-thumb,
.dfbl ::-webkit-scrollbar-thumb,
.dfbl::-webkit-scrollbar-thumb{
  background:var(--line-strong);
  border:2px solid transparent;     /* skaber luft, så tommelen ser slank ud */
  background-clip:padding-box;
  border-radius:999px;
}
.dfbl-pop-frame::-webkit-scrollbar-thumb:hover,
.dfbl ::-webkit-scrollbar-thumb:hover,
.dfbl::-webkit-scrollbar-thumb:hover{ background:var(--gold); }
.dfbl-pop-frame::-webkit-scrollbar-corner,
.dfbl ::-webkit-scrollbar-corner{ background:transparent; }