/* tol-wide.css: the tablet and desktop styles from /assets/js/wide-screens.js, kept as a file so the
   fill-in pages (whose Content-Security-Policy blocks inline <style>) still get them. The <link> carries
   id="tol-wide-css", so wide-screens.js sees them already in place and adds no inline style. */
@media (pointer:coarse) and (min-width:700px) and (max-width:1366px){html{ font-size:106.25%; }
main.read{ max-width:46rem; }
.tol-bar button, .tol-bar a, .tol-nav a, .tol-nav button, .tol-drop a{ min-height:48px; }
.dig, .growing-chip, .sf-c, .sn-b, .tol-chip, .hh-go a, main.read ul.sh-first a{ min-height:46px; }
main.read button, main.read .in-tab, main.read summary{ min-height:46px; }
main.read a{ text-underline-offset:.18em; }
}
.tol-outline{ position:fixed; top:6.2rem; left:calc(50% + 21rem + 2rem); width:14.5rem; max-height:calc(100vh - 8.5rem); overflow:auto; z-index:20; display:none; padding:.8rem .9rem .9rem; border-radius:18px; background:rgba(255,253,248,.92); border:1px solid rgba(217,200,240,.8); box-shadow:0 10px 26px -14px rgba(60,40,90,.3); font:500 .84rem/1.3 "Lora",Georgia,serif; }
.tol-outline.is-on{ display:block; }
.tol-outline h2{ margin:0 0 .4rem !important; font:600 .7rem "IBM Plex Mono",monospace !important; letter-spacing:.1em; text-transform:uppercase; color:#6B4F8A !important; background:none !important; box-shadow:none !important; border:0 !important; padding:0 !important; }
.tol-outline ol{ list-style:none; margin:0 !important; padding:0 !important; }
.tol-outline li{ margin:0 !important; padding:0 !important; max-width:none !important; background:none !important; box-shadow:none !important; border:0 !important; }
.tol-outline a{ display:block; padding:.32rem .55rem; border-radius:10px; color:#3B2A55 !important; text-decoration:none !important; border-left:3px solid transparent; }
.tol-outline a:hover{ background:rgba(237,227,248,.7); }
.tol-outline a.is-here{ background:#EDE3F8; border-left-color:#8A4FA8; font-weight:700; }
.tol-outline a:focus-visible{ outline:2px solid #3B2A55; outline-offset:1px; }
@media (min-width:1260px){ .tol-outline.is-on{ display:block; }
 }
@media (max-width:1259px){ .tol-outline{ display:none !important; }
 }
@media print{ .tol-outline, .tol-keys, .tol-prog, .tol-top, .tol-hl{ display:none !important; }
 }
main.read h2{ scroll-margin-top:84px; }
.tol-prog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:900; background:linear-gradient(90deg,#8FD3AE,#F8D76A,#F7A896); transition:width .1s linear; pointer-events:none; }
.tol-top{ position:fixed; right:max(1rem,env(safe-area-inset-right)); bottom:4.4rem; z-index:860; width:46px; height:46px; border-radius:50%; border:2px solid #C9B3EA; background:rgba(255,253,248,.95); color:#5B3F73; font-size:1.2rem; cursor:pointer; box-shadow:0 6px 16px -8px rgba(60,40,90,.5); opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .2s, transform .2s; }
.tol-top.on{ opacity:1; pointer-events:auto; transform:none; }
.tol-top:hover{ background:#EDE3F8; }
 .tol-top:focus-visible{ outline:3px solid #3B2A55; outline-offset:2px; }
.tol-hl{ margin-left:.4rem; padding:0 .35rem; border:0; background:none; color:#8A4FA8; font:600 .8em "IBM Plex Mono",monospace; cursor:pointer; opacity:0; transition:opacity .15s; border-radius:6px; vertical-align:middle; }
h2:hover > .tol-hl, h2:focus-within > .tol-hl, .tol-hl:focus-visible{ opacity:1; }
.tol-hl:hover{ background:#EDE3F8; }
.tol-hl.done{ opacity:1; color:#2F7A5A; }
.tol-outline-wide{ margin:.5rem 0 0; display:flex; align-items:center; gap:.45rem; font:600 .78rem "Lora",Georgia,serif; color:#3B2A55; cursor:pointer; }
.tol-outline-wide input{ width:1.1rem; height:1.1rem; accent-color:#8A4FA8; }
@media (min-width:1280px){ html.tol-wide main.read{ max-width:58rem; }
 html.tol-wide main.read p, html.tol-wide main.read li{ max-width:72ch; }
 }
.tol-keys{ position:fixed; inset:0; z-index:2000; display:grid; place-items:center; background:rgba(20,12,40,.55); padding:1rem; }
.tol-keys[hidden]{ display:none; }
.tol-keys-in{ max-width:30rem; width:100%; max-height:90vh; overflow:auto; padding:1.2rem 1.3rem; border-radius:22px; background:#FFFDF8; color:#2B2140; box-shadow:0 20px 50px rgba(0,0,0,.4); font:500 1rem/1.4 "Lora",Georgia,serif; }
.tol-keys-in h2{ margin:0 0 .6rem !important; font:700 1.3rem "Fraunces",Georgia,serif !important; background:none !important; box-shadow:none !important; border:0 !important; padding:0 !important; }
.tol-keys-in dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:.4rem .9rem; align-items:center; }
.tol-keys-in dt{ white-space:nowrap; }
 .tol-keys-in dd{ margin:0; }
.tol-keys-in kbd{ display:inline-block; min-width:1.6rem; padding:.1rem .45rem; text-align:center; border-radius:7px; border:1px solid #B9A0E0; border-bottom-width:3px; background:#F6F1FD; font:600 .85rem "IBM Plex Mono",monospace; }
.tol-keys-x{ margin-top:.9rem; min-height:44px; padding:.4rem 1.1rem; border-radius:999px; border:1px solid #6B4F8A; background:#6B4F8A; color:#fff; font:inherit; cursor:pointer; }
.tol-keys-hint{ position:fixed; left:50%; bottom:.6rem; transform:translateX(-50%); z-index:870; padding:.25rem .8rem; border-radius:999px; background:rgba(43,33,64,.78); color:#fff; font:500 .78rem "Lora",Georgia,serif; pointer-events:none; opacity:0; transition:opacity .4s; }
.tol-keys-hint.on{ opacity:1; }
