/* The study desk: the reader's work on the left, the tools on the right.
   Shared by the desk and the library pages; the print layout is at the foot. */
:root{
  --ink:#1d1a16; --muted:#6b6256; --rule:#ddd6c9; --paper:#fbf9f4; --panel:#fff;
  --gold:#b08b3f; --gold-soft:#f5eeda; --ox:#7B171A; --shadow:0 1px 3px rgba(60,50,30,.09);
  --cream:#fdf8ec; --fs:16pt;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#ece6da; --muted:#a59c8c; --rule:#3a352c; --paper:#17150f; --panel:#201d16;
    --gold:#cbab63; --gold-soft:#2b2518; --ox:#e0948f; --shadow:0 1px 3px rgba(0,0,0,.4); --cream:#1f1a13;
  }
}
:root[data-theme="dark"]{
  --ink:#ece6da; --muted:#a59c8c; --rule:#3a352c; --paper:#17150f; --panel:#201d16;
  --gold:#cbab63; --gold-soft:#2b2518; --ox:#e0948f; --shadow:0 1px 3px rgba(0,0,0,.4); --cream:#1f1a13;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 "EB Garamond",Georgia,serif;-webkit-text-size-adjust:100%}
a{color:inherit}
.wrap{max-width:1400px;margin:0 auto;padding:0 16px}
.bar{display:flex;align-items:center;gap:10px;padding:14px 0 10px}
.bar .sp{flex:1}
:root[data-theme="dark"] .bar .mark{content:url(/mark-dark.png)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bar .mark{content:url(/mark-dark.png)}}
.ghost,.backlink{font:600 12px/1 Inter,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-decoration:none;
  background:transparent;border:1px solid var(--rule);border-radius:8px;padding:8px 11px;min-height:36px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.ghost:hover,.backlink:hover{color:var(--ox);border-color:var(--gold)}
.spin{display:inline-block;width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .7s linear infinite;margin-right:6px;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}
button{font-family:inherit}
.btn{font:600 12px/1 Inter,sans-serif;letter-spacing:.04em;cursor:pointer;border-radius:8px;padding:9px 12px;min-height:36px;
  border:1px solid var(--rule);background:var(--panel);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{border-color:var(--gold);color:var(--ox)}
.btn.main{background:#7B171A;border-color:#7B171A;color:#f6e3b4}
.btn.main:hover{background:#5e1013;color:#fff}
.btn.gold{background:linear-gradient(180deg,#e9c977,#c99c45);border-color:#a87c2c;color:#3d0a0c}
.btn:disabled{opacity:.55;cursor:default}
.btn.small{font-size:11px;padding:6px 9px;min-height:30px}
input[type=text],input[type=search],input[type=date],select,textarea{font:400 16px/1.3 "EB Garamond",Georgia,serif;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:8px 10px;min-width:0}
input:focus,select:focus,textarea:focus,[contenteditable]:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}

/* ---- the work's own bar ---- */
.workbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 0 12px;border-top:1px solid var(--rule)}
.kindtag{font:600 10.5px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:#7B171A;color:#f6e3b4;border-radius:999px;padding:7px 11px}
.workbar #wtitle{flex:1 1 280px;font:600 24px/1.2 "EB Garamond",Georgia,serif;border-color:transparent;background:transparent;color:var(--ox)}
.workbar #wtitle:hover{border-color:var(--rule)}
.saved{font:600 11.5px/1.3 Inter,sans-serif;color:var(--muted);white-space:nowrap}
.saved.err{color:#b3261e}

/* ---- the desk: the work, and the tools beside it ---- */
.desk{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start;padding-bottom:80px}
.paper{background:var(--cream);border:1px solid var(--rule);border-radius:4px;box-shadow:0 2px 14px rgba(60,40,10,.10);
  padding:34px 46px 60px;min-height:70vh;font-size:var(--fs)}
.titlepage{border:1px dashed var(--rule);border-radius:10px;padding:12px 14px;margin:0 0 22px;font:400 14px/1.4 Inter,sans-serif}
.titlepage summary{cursor:pointer;font:600 11px/1.4 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ox)}
.titlepage .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:10px}
.titlepage label{display:flex;flex-direction:column;gap:4px;font:600 11px/1.3 Inter,sans-serif;color:var(--muted);letter-spacing:.04em}
.titlepage .focus{grid-column:1/-1}

/* blocks: each piece of the work, with its controls floating above its corner, never over its words */
.paper{font-family:var(--ff,"EB Garamond",Georgia,serif)}
.blk{position:relative;margin:0 0 12px;padding:6px 12px 6px 52px;border-radius:6px;border:1px solid transparent}
.blk:hover,.blk.cur{border-color:var(--rule);background:rgba(255,255,255,.35)}
:root[data-theme="dark"] .blk:hover,:root[data-theme="dark"] .blk.cur{background:rgba(255,255,255,.03)}
.blk.cur{box-shadow:inset 3px 0 0 var(--gold)}
.blk .grip{position:absolute;left:4px;top:8px;width:18px;height:22px;cursor:grab;opacity:.35;font:700 14px/22px Inter,sans-serif;text-align:center;color:var(--muted);
  border:0;background:none;padding:0}
.blk:hover .grip,.blk.cur .grip{opacity:.9}
.blk .more{position:absolute;left:24px;top:6px;width:22px;height:24px;border:1px solid transparent;border-radius:6px;background:none;color:var(--muted);cursor:pointer;
  font:700 15px/1 Inter,sans-serif;padding:0;opacity:.35;display:inline-flex;align-items:center;justify-content:center}
.blk:hover .more,.blk.cur .more,.blk .more[aria-expanded="true"]{opacity:1}
.blk .more:hover,.blk .more[aria-expanded="true"]{border-color:var(--gold);background:var(--gold-soft);color:var(--ox)}
.bmenu{position:absolute;z-index:210;width:min(300px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--gold);border-radius:12px;padding:6px;
  box-shadow:0 14px 40px rgba(0,0,0,.22);display:flex;flex-direction:column;gap:2px}
.bmenu[hidden]{display:none}
.bmenu .bm-h{font:600 10px/1.4 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ox);padding:6px 10px 4px;border-bottom:1px solid var(--rule);margin-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bmenu .bm-l{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 10px;font:600 12px/1.3 Inter,sans-serif;color:var(--muted)}
.bmenu .bm-l select{font:600 12px/1 Inter,sans-serif;padding:6px 8px;border-radius:6px}
.bmenu button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;background:none;border-radius:8px;padding:9px 10px;cursor:pointer;
  font:500 14px/1.2 Inter,sans-serif;color:var(--ink)}
.bmenu button:hover,.bmenu button:focus-visible{background:var(--gold-soft);color:var(--ox);outline:none}
.bmenu button:disabled{opacity:.4;cursor:default;background:none}
.bmenu button.x{color:#8b1e1e}
.bmenu button.x:hover{background:#7B171A;color:#fff}
.bmenu kbd{font:500 10.5px/1 Inter,sans-serif;color:var(--muted);border:1px solid var(--rule);border-radius:4px;padding:3px 5px}
.blk.dragging{opacity:.4}
.blk.dropbefore{box-shadow:0 -3px 0 var(--gold)}
.blk.dropafter{box-shadow:0 3px 0 var(--gold)}
.src{display:block;font:600 10px/1.4 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ox);margin:0 0 3px}
.src a{color:inherit}
.src.ans{margin-top:8px;color:#8a6a22}
.ed{outline:none;min-height:1.5em;border-radius:4px}
.ed:empty::before{content:attr(data-ph);color:var(--muted);font-style:italic}
.ed p{margin:0 0 .5em}
.ed p:last-child{margin-bottom:0}
.ed ul,.ed ol{margin:.3em 0 .5em;padding-left:1.6em}
.ed li{margin:.15em 0}
.ed blockquote{margin:.4em 0 .6em;padding:.2em 0 .2em 1em;border-left:3px solid var(--gold);font-style:italic;color:var(--ink)}
.ed a.vref{color:var(--ox);text-decoration:none;border-bottom:1px dotted var(--gold);cursor:pointer}
.ed a.vref:hover{background:var(--gold-soft)}
.ed .fb{background:var(--gold-soft);border-bottom:1.5px solid var(--gold);padding:0 2px}
/* the outline: a section opens like a part of the Teaching Companions; the points beneath it carry their letter or number */
.b-h.lvl1{text-align:center;margin-top:30px;padding-top:6px}
.b-h.lvl1 .pn{display:block;font:600 .7em/1.2 Inter,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.b-h.lvl1 .ed{font:600 1.75em/1.15 var(--ff,"EB Garamond",Georgia,serif);font-variant-caps:small-caps;letter-spacing:.07em;color:var(--ox);text-align:center}
.b-h.lvl1 .orn{display:block;height:12px;margin:8px auto 0;width:min(62%,320px);
  background:linear-gradient(var(--gold),var(--gold)) left center/calc(50% - 12px) 1px no-repeat,
             linear-gradient(var(--gold),var(--gold)) right center/calc(50% - 12px) 1px no-repeat}
.b-h.lvl1 .orn::after{content:"";display:block;width:8px;height:8px;margin:2px auto 0;background:var(--gold);transform:rotate(45deg)}
.b-h:not(.lvl1){display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:.5em;margin-top:14px}
.b-h:not(.lvl1) .pn{font:600 1.05em/1.3 var(--ff,"EB Garamond",Georgia,serif);color:var(--ox);min-width:1.6em}
.b-h:not(.lvl1) .ed{font-weight:600;color:var(--ox)}
.b-h.lvl2 .ed{font-size:1.25em;font-variant-caps:small-caps;letter-spacing:.04em}
.b-h.lvl3 .ed{font-size:1.1em}
.b-h.lvl4 .ed,.b-h.lvl5 .ed{font-size:1em}
.b-h.lvl4 .ed{font-style:italic;font-weight:600}
.b-h.lvl5 .ed{font-weight:400;font-style:italic}
.b-h .hid{grid-column:2;font:600 10px/1.4 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.b-h.lvl1 .hid{display:block}
.b-h.folded{opacity:.85}
/* the depth of the outline shows as indent: a point under I. stands in, its own points further */
.b-h.lvl3,.addrow.d2{margin-left:22px}
.b-h.lvl4,.addrow.d3{margin-left:44px}
.b-h.lvl5,.addrow.d4{margin-left:66px}
.addrow.d5{margin-left:88px}
.blk.d2{margin-left:22px}
.blk.d3{margin-left:44px}
.blk.d4{margin-left:66px}
.blk.d5{margin-left:88px}
.src.mine{color:#8a6a22}
.b-text{border-left:2px solid var(--gold-soft) !important}
.b-text.blank .ed{min-height:2.6em}
.b-scr{border-left:3px solid var(--ox) !important;padding-left:16px}
.b-scr .vv{font-size:1.04em;line-height:1.55}
.b-scr sup{font:600 .62em Inter,sans-serif;color:var(--ox);margin-right:2px}
.b-scr .ref{font:600 .74em/1.4 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ox)}
.b-quote .qt{font-style:italic;font-size:1.04em;padding-left:1em;border-left:3px solid var(--gold)}
.b-quote .cite{font:600 .78em/1.5 Inter,sans-serif;color:var(--muted);padding-left:1.2em;margin-top:2px}
.b-quote .cite:empty::before{font-style:normal}
.b-quest,.b-rq{border-left:2px solid var(--gold) !important;padding-left:14px}
.b-quest .q,.b-rq .q{font-weight:600}
.b-quest .a,.b-rq .a{padding-left:.6em}
.b-note .body,.b-entry .body{font-size:.95em}
.b-word .wd{font-size:.95em}
.b-word .wd b{color:var(--ox);font-variant-caps:small-caps}
.b-oica .part{position:relative;margin:6px 0;padding:4px 30px 4px 10px;border-left:2px solid var(--gold)}
.b-oica .part .lab{font:600 10.5px/1.4 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ox)}
.b-oica .part .px{position:absolute;right:0;top:2px;width:24px;height:22px;border:1px solid var(--rule);border-radius:6px;background:var(--panel);
  color:var(--muted);cursor:pointer;font:600 11px Inter,sans-serif}
.b-find{background:var(--gold-soft) !important;border-color:var(--gold) !important}
.b-find .src{color:#8a6a22}
body[data-kind="lesson"] .blk.ho-hide::after{content:"Teacher only";position:absolute;left:52px;bottom:-9px;font:600 9px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--cream);padding:2px 6px;border:1px solid var(--rule);border-radius:999px}
.grade{font:600 9.5px/1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ox);color:var(--ox);border-radius:3px;padding:1px 4px;margin:0 2px;vertical-align:1px}
.gr,.gk{font-style:italic;color:var(--muted)}
.pron{color:var(--muted);font-style:italic}
b.kw{color:var(--ox);font-variant-caps:small-caps}
.empty{border:2px dashed var(--rule);border-radius:10px;padding:18px;text-align:center;color:var(--muted);font:400 14px/1.5 Inter,sans-serif;margin:8px 0 18px}
.addrow{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 14px 52px;opacity:.75}
.addrow:hover{opacity:1}
.addrow .btn{font-size:10.5px;padding:5px 9px;min-height:28px}
.addrow .pick{font:600 10.5px/1 Inter,sans-serif;color:var(--ink);padding:5px 8px;appearance:auto;max-width:220px}

/* the formatting bar, over the words being written */
.fmt{position:sticky;top:8px;z-index:20;display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:0 0 14px;padding:5px;
  background:var(--panel);border:1px solid var(--gold);border-radius:10px;box-shadow:0 4px 14px rgba(60,40,10,.14)}
.fmt button{height:30px;min-width:30px;padding:0 9px;border:1px solid var(--rule);border-radius:6px;background:var(--paper);color:var(--ink);cursor:pointer;font:600 12px/1 Inter,sans-serif}
.fmt button:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--ox)}
.fmt .sep{width:1px;height:22px;background:var(--rule);margin:0 3px}
.fmt.off{border-color:var(--rule);box-shadow:none}
.fmt.off button{opacity:.4;cursor:default}
.fmt::before{content:"Writing";font:600 10px/1 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 6px}
.fmt .lessononly{display:none}
.fmt.lesson .lessononly{display:inline-flex}

/* a verse link pressed: the verses, there */
.vpop{position:absolute;z-index:200;width:min(460px,calc(100vw - 24px));background:var(--panel);color:var(--ink);border:1px solid var(--gold);border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.22);padding:12px 14px;font:400 16px/1.5 var(--ff,"EB Garamond",Georgia,serif)}
.vpop .vp-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.vpop .vp-h b{font:600 11px/1.3 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ox)}
.vpop .vp-x{border:1px solid var(--rule);background:none;border-radius:6px;width:28px;height:28px;cursor:pointer;color:inherit}
.vpop .vp-v{max-height:40vh;overflow:auto}
.vpop sup{font:600 .62em Inter,sans-serif;color:var(--ox);margin-right:2px}
.vpop .vp-acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.vpop .hint{font:400 13px/1.5 Inter,sans-serif;color:var(--muted);margin:0}

/* everything the library holds on a passage */
.know details{border:1px solid var(--rule);border-radius:8px;margin:0 0 6px;background:var(--panel)}
.know details.none{opacity:.6}
.know summary{cursor:pointer;padding:8px 10px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;list-style:none}
.know summary::-webkit-details-marker{display:none}
.know summary b{font:600 11px/1.3 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ox)}
.know summary span{font:400 12.5px/1.4 Inter,sans-serif;color:var(--muted);grid-column:1/-1}
.know details[open] summary{border-bottom:1px solid var(--rule)}
.know .kb,.know .kr,.know .chips,.know #k-pp-r{padding:8px 10px}
.know .kb{display:flex;gap:6px;flex-wrap:wrap}
.know .kr{border-top:1px dotted var(--rule);font-size:14.5px;line-height:1.45}
.know .kr:first-of-type{border-top:0}
.know .krh{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:3px}
.know .krh b{font:600 11px/1.3 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ox)}
.know .chips{display:flex;flex-wrap:wrap;gap:6px}
.know .chip,.know .xref{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:999px;background:var(--paper);overflow:hidden}
.know .chip{flex-direction:column;align-items:flex-start;border-radius:8px;padding:6px 10px;cursor:pointer;font:600 13px/1.2 "EB Garamond",Georgia,serif;color:var(--ink)}
.know .chip small{font:600 9px/1.4 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.know .chip:hover,.know .xref button:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--ox)}
.know .chip.busy{opacity:.5}
.know .xref button{border:0;background:none;padding:6px 9px;cursor:pointer;font:600 12px/1 Inter,sans-serif;color:var(--ink)}
.know .xref button+button{border-left:1px solid var(--rule);color:var(--ox)}
.know #k-pp-r .res{margin-top:8px}

/* the print sheet */
.sheet{position:fixed;inset:0;z-index:300;background:rgba(30,20,10,.4);display:flex;align-items:center;justify-content:center;padding:16px}
.sheet-in{background:var(--panel);color:var(--ink);border:1px solid var(--gold);border-radius:14px;padding:20px 22px;width:min(560px,100%);max-height:92vh;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.sheet h2{font:600 24px/1.2 "EB Garamond",Georgia,serif;color:var(--ox);margin:0 0 12px;text-align:center}
.views{display:grid;gap:8px;margin:0 0 14px}
.views .view{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;cursor:pointer;background:var(--paper)}
.views .view.on{border-color:var(--ox);background:var(--gold-soft)}
.views .view b{font:600 17px/1.2 "EB Garamond",Georgia,serif;color:var(--ox)}
.views .view span{grid-column:2;font:400 13px/1.4 Inter,sans-serif;color:var(--muted)}
.prow{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.prow label{display:flex;flex-direction:column;gap:4px;font:600 11px/1.3 Inter,sans-serif;color:var(--muted);letter-spacing:.04em;flex:1}
.pacts{display:flex;gap:8px;justify-content:center}

/* the moment after a passage goes in: the OICA, yes or no */
.ask{margin:0 0 14px 30px;padding:10px 12px;border:1px solid var(--gold);background:var(--gold-soft);border-radius:8px;
  font:400 14px/1.4 Inter,sans-serif;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ask b{font-weight:600;color:var(--ox)}

/* ---- the tools ---- */
.tools{position:sticky;top:10px;max-height:calc(100vh - 20px);display:flex;flex-direction:column;background:var(--panel);
  border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.target{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--rule);font:600 11px/1.3 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ox)}
.target select{flex:1;font-size:14px;padding:5px 8px}
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border-bottom:1px solid var(--rule);background:var(--gold-soft)}
.tabs button{font:600 11px/1 Inter,sans-serif;letter-spacing:.03em;border:1px solid transparent;background:transparent;color:var(--muted);
  padding:8px 9px;border-radius:7px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--panel);border-color:var(--gold);color:var(--ox)}
.tpane{padding:12px;overflow:auto;flex:1}
.tpane .row{display:flex;gap:6px;margin-bottom:10px}
.tpane .row input{flex:1}
.tpane .hint{font:400 13px/1.5 Inter,sans-serif;color:var(--muted);margin:0 0 10px}
.res{border:1px solid var(--rule);border-radius:8px;padding:9px 10px;margin:0 0 8px;font-size:15px;line-height:1.5;background:var(--paper)}
.res .rh{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:4px}
.res .rh b{font:600 11px/1.3 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ox)}
.res .put{flex:none}
.res .more{font-size:13.5px;color:var(--muted)}
.res sup{font:600 .62em Inter,sans-serif;color:var(--ox)}
.res .vline{display:flex;gap:6px;align-items:flex-start;padding:2px 0}
.res .vline span{flex:1}
.res .vline button{flex:none;font:600 9.5px/1 Inter,sans-serif;border:1px solid var(--rule);background:var(--panel);border-radius:5px;padding:4px 5px;cursor:pointer;color:var(--muted)}
.res .vline button:hover{color:var(--ox);border-color:var(--gold)}
.res label.pick{display:flex;gap:8px;align-items:flex-start;padding:4px 0;border-top:1px dotted var(--rule)}
.res label.pick input{margin-top:5px}
.sugg{border:1px solid var(--rule);border-radius:8px;max-height:220px;overflow:auto;margin:-4px 0 10px;background:var(--panel)}
.sugg button{display:flex;justify-content:space-between;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);
  padding:7px 10px;cursor:pointer;font:400 15px/1.3 "EB Garamond",Georgia,serif;color:var(--ink)}
.sugg button:hover{background:var(--gold-soft)}
.sugg small{font:600 9.5px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toolsbtn{display:none}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#4f0d10;color:#f6e3b4;border:1px solid #b08b3f;border-radius:10px;
  padding:10px 14px;font:400 14px/1.4 Inter,sans-serif;z-index:999;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
.signin{margin:0 0 14px;padding:10px 12px;border:1px solid var(--gold);background:var(--gold-soft);border-radius:8px;font:400 14px/1.5 Inter,sans-serif}

@media (max-width:980px){
  .desk{grid-template-columns:1fr}
  .paper{padding:22px 16px 50px}
  .blk{padding-right:8px;padding-left:46px}
  .blk .more{left:20px}
  .addrow{margin-left:46px}
  .blk.d2,.b-h.lvl3,.addrow.d2{margin-left:12px}.blk.d3,.b-h.lvl4,.addrow.d3{margin-left:24px}.blk.d4,.b-h.lvl5,.addrow.d4{margin-left:36px}.blk.d5,.addrow.d5{margin-left:48px}
  .fmt{top:4px}
  .tools{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:72vh;border-radius:14px 14px 0 0;z-index:60;transform:translateY(105%);transition:transform .25s}
  .tools.open{transform:none}
  .toolsbtn{display:inline-flex;position:fixed;right:14px;bottom:14px;z-index:61;box-shadow:0 4px 14px rgba(0,0,0,.25)}
}

/* ---- the library ---- */
.libhead{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 14px}
.libhead h1{font:400 34px/1.1 "EB Garamond",Georgia,serif;margin:0 auto 0 0;color:var(--ox)}
.libtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.libtools input{flex:1 1 220px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{font:600 11px/1 Inter,sans-serif;letter-spacing:.04em;border:1px solid var(--rule);background:var(--panel);color:var(--muted);border-radius:999px;padding:8px 12px;cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold);color:var(--ox)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;
  box-shadow:inset 0 0 0 3px var(--panel),inset 0 0 0 4px rgba(176,139,63,.25)}
.card h3{margin:0;font:600 19px/1.25 "EB Garamond",Georgia,serif}
.card h3 a{text-decoration:none;color:var(--ox)}
.card .meta{font:400 12.5px/1.4 Inter,sans-serif;color:var(--muted)}
.card .cacts{display:flex;gap:6px;margin-top:auto;padding-top:6px}

/* ---- on paper: the Teaching Companion page ---- */
@page{size:letter;margin:.62in;border:1.6pt solid #7B171A;outline:.6pt solid #b9952f;outline-offset:-5pt;padding:.42in .42in .36in;
  @top-center{content:var(--runhead, "");font:600 8.5pt "EB Garamond",Georgia,serif;letter-spacing:.14em;color:#7B171A;vertical-align:bottom;padding-bottom:7pt}
  @bottom-center{content:counter(page, lower-roman);font:400 9pt "EB Garamond",Georgia,serif;color:#5f574b;vertical-align:top;padding-top:7pt}
  @top-left-corner{content:"\25C6";color:#b9952f;font-size:11pt;text-align:right;vertical-align:bottom;line-height:1;margin:0 -6pt -6pt 0}
  @top-right-corner{content:"\25C6";color:#b9952f;font-size:11pt;text-align:left;vertical-align:bottom;line-height:1;margin:0 0 -6pt -6pt}
  @bottom-left-corner{content:"\25C6";color:#b9952f;font-size:11pt;text-align:right;vertical-align:top;line-height:1;margin:-6pt -6pt 0 0}
  @bottom-right-corner{content:"\25C6";color:#b9952f;font-size:11pt;text-align:left;vertical-align:top;line-height:1;margin:-6pt 0 0 -6pt}
}
@page:first{@top-center{content:none}@bottom-center{content:none}}
.printonly{display:none}
@media print{
  :root{--ink:#1f1a14;--muted:#5f574b;--ox:#7B171A;--gold:#b9952f;--rule:#d9ccb0}
  body{background:none;font-size:var(--fs)}
  .noprint,.toast,.bar,.workbar,.tools,.toolsbtn,.titlepage,.addrow,.ask,.blk .grip,.blk .acts,.b-oica .part .px,.signin,footer,#swtoast,.swhead{display:none !important}
  .wrap{max-width:none;padding:0}
  .desk{display:block;padding:0}
  .paper{background:none;border:0;box-shadow:none;padding:0;min-height:0}
  .blk{border:0 !important;background:none !important;box-shadow:none !important;padding:0;margin:0 0 .14in;break-inside:avoid-page}
  .blk.d2{margin-left:.25in}.blk.d3{margin-left:.5in}.blk.d4{margin-left:.75in}.blk.d5{margin-left:1in}
  .b-h.lvl3{margin-left:.25in}.b-h.lvl4{margin-left:.5in}.b-h.lvl5{margin-left:.75in}
  .b-oica,.b-note,.b-entry,.b-ggp,.b-text,.b-find{break-inside:auto}
  .b-oica .part{break-inside:avoid-page}
  .b-h.lvl1{break-after:avoid-page}
  .b-scr{padding-left:.18in !important;border-left:2pt solid #7B171A !important}
  .b-find{background:none !important;border:.6pt solid #b9952f !important;padding:.08in .12in !important}
  .ed:empty{display:none}
  .blk.blank,.b-text .src.mine{display:none !important}
  .b-h.lvl1{margin-top:.28in}
  .b-h .orn{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .b-text{border:0 !important}
  .printonly{display:block}
  .blk.b-h.emptysec{display:none}
  body[data-view="outline"] .blk.b-h.emptysec.lvl1{display:block}
  body[data-view="outline"] .blk.b-h.emptysec:not(.lvl1){display:grid}
  .cover{height:8.6in;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;break-after:page}
  .cover .orn{color:#7B171A;letter-spacing:.6em;margin-bottom:.3in}
  .cover .kind{font-variant-caps:all-small-caps;letter-spacing:.32em;font-size:.82em}
  .cover h1{font:600 2.4em/1.08 "EB Garamond",Georgia,serif;font-variant-caps:small-caps;color:#7B171A;margin:.3in 0 .1in}
  .cover .main{font-variant-caps:small-caps;letter-spacing:.08em;color:#7B171A;font-weight:600;font-size:1.1em}
  .cover .focus{font-style:italic;max-width:5in;margin:.08in auto 0}
  .cover .crossmark{width:.75in;height:auto;margin:.3in auto .22in;display:block}
  .cover .line{width:2.4in;border-top:.8pt solid #b9952f;margin:0 auto .2in}
  .cover .who{font-variant-caps:all-small-caps;letter-spacing:.3em}
  .cover .where{font-style:italic;color:#5f574b;margin-top:.05in}
  .cover .pub{font-variant-caps:all-small-caps;letter-spacing:.24em;color:#7B171A;font-size:.8em;margin:.2in 0 .03in}
  .cover .am{font-size:.78em;color:#5f574b}
  a{text-decoration:none}
  .ed a.vref{color:inherit;border:0}
  .blk .more,.bmenu,.fmt,.vpop,.sheet,.hid{display:none !important}
  .b-h:not(.lvl1){break-after:avoid-page}
  .blk.ho-hide::after{display:none}
  /* the pulpit copy: every major point on a new page */
  body[data-view="pulpit"] .b-h.lvl1{break-before:page}
  body[data-view="pulpit"] .b-h.lvl1:first-child,body[data-view="pulpit"] #doc > .b-h.lvl1:first-of-type{break-before:auto}
  body[data-view="pulpit"] .b-find,body[data-view="pulpit"] .b-rq{display:none}
  /* the outline: the points and the references only */
  body[data-view="outline"] #doc > .blk:not(.b-h):not(.b-scr),body[data-view="outline"] .b-scr .vv{display:none !important}
  body[data-view="outline"] .b-scr{border:0 !important;padding:0 0 0 .1in !important;margin:0 0 .04in}
  body[data-view="outline"] .b-scr .ref{font-size:.7em}
  body[data-view="outline"] .b-h.lvl1{margin-top:.16in;text-align:left}
  body[data-view="outline"] .b-h.lvl1 .orn{display:none}
  body[data-view="outline"] .b-h.lvl1 .pn{display:inline;margin-right:.6em;letter-spacing:.12em}
  body[data-view="outline"] .b-h.lvl1 .ed{display:inline;font-size:1.25em;text-align:left}
  body[data-view="outline"] .b-h:not(.lvl1){margin-top:.05in}
  body[data-view="outline"] .b-h,body[data-view="outline"] .blk{break-after:auto;break-inside:auto}
  body[data-view="outline"] .b-h.lvl2 .ed{font-size:1.05em}
  body[data-view="outline"] .cover{height:auto;break-after:avoid;padding:0 0 .2in;margin-bottom:.2in;border-bottom:.8pt solid #b9952f}
  body[data-view="outline"] .cover .crossmark,body[data-view="outline"] .cover .line,body[data-view="outline"] .cover .pub,body[data-view="outline"] .cover .am,body[data-view="outline"] .cover .orn{display:none}
  body[data-view="outline"] .cover h1{font-size:1.7em;margin:.08in 0 .04in}
  body[data-view="outline"] .blk{margin-bottom:.03in}
  /* the student handout: answers become lines, marked words become blanks, the teacher's pieces are left out */
  body[data-view="handout"] .blk.ho-hide{display:none !important}
  body[data-view="handout"] .b-quest .ans,body[data-view="handout"] .b-rq .ans{display:none}
  body[data-view="handout"] .b-quest .a,body[data-view="handout"] .b-rq .a{color:transparent !important;min-height:1.1in;margin-top:.06in;
    background:repeating-linear-gradient(to bottom,transparent 0,transparent .33in,#8a7a5a .33in,#8a7a5a calc(.33in + .6pt));-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body[data-view="handout"] .b-quest .a *,body[data-view="handout"] .b-rq .a *{color:transparent !important}
  body[data-view="handout"] .fb{color:transparent !important;background:none;border-bottom:.8pt solid #1f1a14;padding:0 .35em;min-width:1.2in;display:inline-block}
  body[data-view="handout"] .b-h.lvl1{break-before:auto}
  /* the teacher's guide: the answers stand out */
  body[data-view="guide"] .b-quest .a,body[data-view="guide"] .b-rq .a{background:#fbf5e4;padding:.04in .08in;border-radius:3pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* the template gallery */
#wtpl b{color:var(--ox);font-weight:600}
.tplgal{background:var(--panel);border:1px solid var(--gold);border-radius:14px;padding:18px 18px 14px;margin:0 0 18px;box-shadow:0 6px 22px rgba(90,60,20,.10);text-align:center}
.tg-h{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;margin:0 0 12px}
.tg-h b{font:600 26px/1.2 "EB Garamond",Georgia,serif;color:var(--ox)}
.tg-h span{font-size:15px;color:var(--muted)}
.tg-h .btn{position:absolute;right:0;top:0}
.tg-tabs{display:flex;justify-content:center;gap:6px;margin:0 0 14px;flex-wrap:wrap}
.tg-tabs button{font:600 13.5px/1 Inter,sans-serif;height:38px;padding:0 18px;border-radius:8px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);cursor:pointer}
.tg-tabs button[aria-selected="true"]{background:#7B171A;border-color:#7B171A;color:#f6e3b4}
.tg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.tg-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:16px 14px 12px;border:1px solid var(--rule);border-top:3px solid #b08b3f;
  border-radius:12px;background:var(--paper);color:var(--ink);cursor:pointer;font:inherit;transition:transform .15s,border-color .15s,box-shadow .15s}
.tg-card:hover{transform:translateY(-2px);border-color:#b08b3f;box-shadow:0 6px 16px rgba(90,60,20,.12)}
.tg-card.cur{border-color:#7B171A;border-top-color:#7B171A}
.tg-card b{font:600 20px/1.2 "EB Garamond",Georgia,serif;color:var(--ox)}
.tg-card .u{font-size:14.5px;line-height:1.4;color:var(--muted)}
.tg-card ol{list-style:none;margin:8px 0 0;padding:8px 0 0;border-top:1px solid var(--rule);width:100%;font:400 12.5px/1.6 Inter,sans-serif;color:var(--ink);counter-reset:s}
.tg-card ol li{counter-increment:s}
.tg-card ol li::before{content:counter(s) ". ";color:#b08b3f;font-weight:600}
.tg-card ol li.sub{counter-increment:none;padding-left:1.2em;color:var(--muted);font-size:11.5px}
.tg-card ol li.sub::before{content:"\2013  ";color:#b08b3f}
.tg-card .now{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font:600 9.5px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;background:#7B171A;color:#f6e3b4;border-radius:999px;padding:5px 9px}
.tg-note{font-size:14.5px;color:var(--muted);margin:12px 0 0}
@media (max-width:620px){.tg-h .btn{position:static;margin-top:6px}}
@media print{.tplgal{display:none !important}}
.sheet[hidden],.vpop[hidden],.tplgal[hidden]{display:none !important}