/* The Analytical Column - the reader's pen, card, notes drawer and sign-in. Uses the Column's colour tokens (article.css). */
/* text size: the reading column scales as a whole (the article styles are in px), set by Aa */
.wrap{zoom:var(--col-zoom,1)}
.cr-tools{position:relative;display:flex;gap:6px;margin-left:auto;align-items:center}
.cr-aa{font:600 14px "Newsreader",Georgia,serif;color:var(--teal-d);background:none;border:1px solid var(--line2);border-radius:999px;padding:5px 12px;cursor:pointer;min-height:34px}
.cr-aa:hover{border-color:var(--teal)}
.cr-aa-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:75;display:none;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.22);padding:10px 12px;font-family:"IBM Plex Sans",system-ui,sans-serif}
.cr-aa-panel.on{display:block}
.cr-aa-label{font:600 11px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.cr-aa-row{display:flex;align-items:center;gap:6px;margin:6px 0}
.cr-aa-b{flex:1;font:600 14px "IBM Plex Sans";color:var(--ink);background:var(--card2);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;cursor:pointer;min-height:40px}
.cr-aa-b.on{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.cr-aa-b[disabled]{opacity:.4;cursor:default}
.cr-aa-pct{min-width:52px;text-align:center;font:600 14px "IBM Plex Mono",monospace;color:var(--soft)}
.masthead h1.col a.home{color:inherit;text-decoration:none}
.cr-acct{font-family:"IBM Plex Sans";font-size:13px;font-weight:600;color:var(--teal-d);background:none;border:1px solid var(--line2);border-radius:999px;padding:6px 13px;cursor:pointer;min-height:34px}
.cr-acct:hover{border-color:var(--teal)}
mark.cr-hl{background:color-mix(in srgb,var(--gold) 26%,transparent);color:inherit;border-radius:2px;cursor:pointer}
mark.cr-hl.noted{border-bottom:2px solid var(--gold)}
mark.cr-pop{background:none;color:inherit;border-bottom:2px dotted color-mix(in srgb,var(--teal) 70%,transparent)}
mark.cr-shared{background:color-mix(in srgb,var(--teal) 22%,transparent);color:inherit;border-radius:2px;animation:crflash 2.4s ease 1}
@keyframes crflash{0%,40%{background:color-mix(in srgb,var(--teal) 45%,transparent)}}
.cr-badge{font:600 12px "IBM Plex Sans";color:var(--gold);background:var(--card);border:1px solid var(--line2);border-radius:999px;width:24px;height:24px;margin-left:6px;cursor:pointer;vertical-align:middle;padding:0}
body.cr-pen article[data-piece] p,body.cr-pen article[data-piece] li,body.cr-pen article[data-piece] h3{cursor:text}
body.cr-pen article[data-piece] p:hover,body.cr-pen article[data-piece] li:hover{background:color-mix(in srgb,var(--gold) 7%,transparent);border-radius:6px}
/* the bar */
.cr-bar{position:absolute;z-index:60;display:none;gap:4px;padding:5px;background:var(--ink);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.cr-bar.on{display:flex}
.cr-bar.docked{position:fixed;left:8px;right:8px;bottom:12px;top:auto;justify-content:space-between;padding:6px;flex-wrap:nowrap}
.cr-bar-b{font:600 13.5px "IBM Plex Sans";color:var(--paper);background:transparent;border:0;border-radius:9px;padding:9px 11px;cursor:pointer;white-space:nowrap;min-height:40px}
.cr-bar-b:hover{background:rgba(255,255,255,.12)}
.cr-bar-b.primary{background:var(--gold);color:#1b1206}
.cr-bar.docked .cr-bar-b{flex:1;padding:9px 4px;font-size:13px}
/* the floating pen */
.cr-fab{position:fixed;right:18px;bottom:18px;z-index:55;width:54px;height:54px;border-radius:50%;border:0;background:var(--teal-d);color:#fff;font-size:24px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.cr-fab.on{background:var(--gold);color:#1b1206;outline:3px solid color-mix(in srgb,var(--gold) 40%,transparent)}
body:has(.cr-bar.docked.on) .cr-fab{bottom:78px}
/* the card */
.cr-card{position:relative;margin:14px 0 22px;padding:16px 18px 14px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;box-shadow:var(--shadow);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:15px;line-height:1.5}
.cr-card.floating{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:80vh;overflow:auto;z-index:70}
.cr-card-q{font-family:"Newsreader",Georgia,serif;font-style:italic;color:var(--soft);font-size:16px;padding-right:28px;max-height:7.5em;overflow:auto}
.cr-x{position:absolute;top:6px;right:8px;width:34px;height:34px;border:0;background:none;color:var(--faint);font-size:24px;line-height:1;cursor:pointer;border-radius:8px}
.cr-x:hover{color:var(--ink);background:var(--card2)}
.cr-tabs{display:flex;gap:2px;margin:12px 0 10px;border-bottom:1px solid var(--line);overflow-x:auto}
.cr-tab{font:600 13.5px "IBM Plex Sans";color:var(--soft);background:none;border:0;border-bottom:2px solid transparent;padding:8px 10px;cursor:pointer;white-space:nowrap;min-height:40px}
.cr-tab.on{color:var(--teal-d);border-bottom-color:var(--teal-d)}
.cr-hint{color:var(--soft);font-size:14px;margin:4px 0 10px}
.cr-hint.small{font-size:13px;margin-top:12px}
.cr-field{display:block;margin:10px 0}
.cr-field span{display:block;font-weight:600;font-size:13.5px;color:var(--ink);margin-bottom:4px}
.cr-field textarea,.cr-input{width:100%;box-sizing:border-box;font:16px "IBM Plex Sans",system-ui,sans-serif;color:var(--ink);background:var(--paper);border:1px solid var(--line2);border-radius:9px;padding:9px 11px}
.cr-input{margin:6px 0}
.cr-input.code{font-family:"IBM Plex Mono",monospace;font-size:22px;letter-spacing:.3em;max-width:220px}
.cr-field textarea:focus,.cr-input:focus{outline:2px solid color-mix(in srgb,var(--teal) 45%,transparent);border-color:var(--teal)}
.cr-row{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.cr-btn{font:600 14px "IBM Plex Sans";color:#fff;background:var(--teal-d);border:1px solid var(--teal-d);border-radius:9px;padding:9px 15px;cursor:pointer;text-decoration:none;display:inline-block;min-height:40px;box-sizing:border-box}
.cr-btn.ghost{background:transparent;color:var(--teal-d)}
.cr-btn[disabled]{opacity:.5;cursor:default}
.cr-link{font:inherit;font-size:14px;color:var(--teal-d);background:none;border:0;padding:4px 0;text-decoration:underline;cursor:pointer}
.cr-link.danger{color:#b4442c}
.cr-msg{color:#b4442c;font-size:13.5px}
.cr-research h4{font:700 12px "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d);margin:16px 0 6px}
.cr-term{border-left:2px solid var(--line2);padding:2px 0 2px 10px;margin:8px 0}
.cr-term p{margin:3px 0;font-size:14px;color:var(--soft)}
.cr-where{font-size:13px}
.cr-links{margin:4px 0;padding-left:18px}
.cr-links li{margin:5px 0}
.cr-sub{color:var(--faint);font-size:13px}
/* drawer */
.cr-edge{position:fixed;right:0;top:42%;z-index:50;writing-mode:vertical-rl;transform:rotate(180deg);font:600 13px "IBM Plex Sans";letter-spacing:.06em;color:#fff;background:var(--teal-d);border:0;border-radius:0 9px 9px 0;padding:12px 7px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.cr-drawer{position:fixed;top:0;right:0;bottom:0;width:min(400px,92vw);z-index:65;background:var(--paper);border-left:1px solid var(--line);box-shadow:-10px 0 34px rgba(0,0,0,.18);transform:translateX(105%);transition:transform .22s ease;overflow:auto;padding:16px 18px 40px;box-sizing:border-box;font-family:"IBM Plex Sans",system-ui,sans-serif}
.cr-drawer.on{transform:none}
.cr-dr-h{position:relative;margin-bottom:10px}
.cr-dr-h h3{font:600 20px "Newsreader",Georgia,serif;margin:4px 0}
.cr-dr-g{margin-top:18px}
.cr-dr-t{font:600 15px "Newsreader",Georgia,serif;color:var(--teal-d)}
.cr-dr-i{border-bottom:1px solid var(--line);padding:8px 0}
.cr-dr-q{font:italic 15px "Newsreader",Georgia,serif;color:var(--soft);margin:4px 0}
.cr-dr-w{font-size:14px;margin:4px 0;color:var(--ink)}
.cr-dr-cue{font-weight:600;font-size:14px;color:var(--gold);margin:4px 0}
/* modal, toast, tip */
.cr-veil{position:fixed;inset:0;z-index:80;background:rgba(10,16,24,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.cr-modal{position:relative;width:min(440px,100%);background:var(--card);border-radius:14px;padding:20px 20px 16px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:"IBM Plex Sans",system-ui,sans-serif}
.cr-modal h3{font:600 21px "Newsreader",Georgia,serif;margin:0 30px 6px 0}
.cr-modal .cr-btn{margin-top:8px}
.cr-toast{position:fixed;left:50%;bottom:24px;z-index:90;transform:translate(-50%,30px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);font:500 14px "IBM Plex Sans";padding:10px 16px;border-radius:10px;transition:all .2s;max-width:calc(100vw - 32px)}
.cr-toast.on{opacity:1;transform:translate(-50%,0)}
body:has(.cr-bar.docked.on) .cr-toast{bottom:84px}
.cr-tip{position:fixed;left:16px;right:86px;bottom:20px;z-index:54;max-width:520px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 10px 10px 0;box-shadow:var(--shadow);font:14px/1.45 "IBM Plex Sans";color:var(--soft);padding:10px 40px 10px 12px}
.cr-tip .cr-x{top:2px;right:2px}
.seriesnav{display:flex;justify-content:space-between;gap:12px;font-family:"IBM Plex Sans";font-size:14px;margin:46px 0 0;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.seriesnav a{color:var(--teal-d)}
article h3.why{font-family:"Newsreader",Georgia,serif;text-transform:none;letter-spacing:0;font-size:24px;color:var(--ink);margin:36px 0 4px}
@media (max-width:480px){
  .masthead h1.col{font-size:27px}
  .masthead .title{gap:8px;align-items:center}
  .cr-tab{flex:1;padding:8px 3px;font-size:12.5px}
  .cr-acct{padding:5px 10px;font-size:12.5px}
  .cr-edge{top:auto;bottom:90px;padding:10px 6px;font-size:12px}
}
article.start ul{padding-left:22px}
article.start li{margin:8px 0}
article.start .sign{font-style:italic;color:var(--gold);font-size:22px;margin-top:30px}
/* In this piece, figures, Check yourself (2026-10-10) */
.inpiece{font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:14px;color:var(--soft);margin:12px 0 0;border:1px solid var(--line);border-radius:10px;background:var(--card2);padding:8px 14px}
.inpiece summary{cursor:pointer;font-weight:600;color:var(--teal-d);min-height:28px;display:flex;align-items:center}
.inpiece ol{margin:6px 0 4px;padding-left:22px}
.inpiece li{margin:5px 0}
.inpiece a{color:var(--ink);text-decoration:none}
.inpiece a:hover{color:var(--teal-d);text-decoration:underline}
.inpiece-time{font-family:"IBM Plex Sans";font-size:13px;color:var(--faint);margin:6px 0 0}
article h3[id]{scroll-margin-top:16px}
figure.fig{margin:22px 0;padding:12px 12px 10px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.fig-svg{display:block;width:100%;height:auto}
.fig-svg text{font-family:"IBM Plex Sans",system-ui,sans-serif;fill:var(--soft);font-size:13px}
.fig-svg .tk{text-anchor:middle;font-family:"IBM Plex Mono",monospace;font-size:12px}
.fig-svg .tk.y{text-anchor:end}
.fig-svg .al{text-anchor:middle;font-size:13px;fill:var(--ink)}
.fig-svg .gl{stroke:var(--line);stroke-width:1}
.fig-svg .ax{stroke:var(--soft);stroke-width:1.3}
.fig-svg .zero{stroke:var(--soft);stroke-width:1;stroke-dasharray:3 4}
.fig-svg .fit{stroke:var(--teal-d);stroke-width:2.4}
.fig-svg .fitx{stroke:var(--teal-d);stroke-width:2;stroke-dasharray:7 6}
.fig-svg .pt{fill:var(--teal-d);stroke:var(--card);stroke-width:2}
.fig-svg .pt.low{fill:var(--gold)}
.fig-svg .hit{fill:none;stroke:var(--gold);stroke-width:2.5}
.fig-svg .lab{fill:var(--ink);font-size:13px}
.fig-svg .band{fill:var(--teal);opacity:.08}
.fig-svg .ln{fill:none;stroke-width:2}
.fig-svg .s1{stroke:var(--gold);fill:var(--gold)} .fig-svg .s2{stroke:var(--soft);fill:var(--soft)} .fig-svg .s3{stroke:var(--teal-d);fill:var(--teal-d)}
.fig-svg .ln.s1,.fig-svg .ln.s2,.fig-svg .ln.s3{fill:none}
.fig-svg text.key{stroke:none;font-weight:600;font-size:12.5px}
.fig-svg text.key.s1{fill:var(--gold)} .fig-svg text.key.s2{fill:var(--soft)} .fig-svg text.key.s3{fill:var(--teal-d)}
.fig-svg .zone.z0{fill:var(--line)} .fig-svg .zone.z1{fill:var(--gold);opacity:.28} .fig-svg .zone.z2{fill:var(--teal);opacity:.22}
.fig-svg .zl{text-anchor:middle;fill:var(--ink);font-size:13px}
.fig-svg .mark{stroke:var(--ink);stroke-width:1.5}
figure.fig figcaption{font-family:"IBM Plex Sans";font-size:13.5px;line-height:1.5;color:var(--soft);margin-top:8px}
.checkyou{margin:40px 0 0;padding:6px 20px 14px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;box-shadow:var(--shadow);font-family:"IBM Plex Sans",system-ui,sans-serif}
.checkyou h3{color:var(--gold)!important;margin-top:14px!important}
.checkyou .hint{font-size:14px;color:var(--soft);margin:6px 0 4px}
.checkyou ol{padding-left:22px;margin:6px 0}
.checkyou li{margin:14px 0}
.checkyou .q{font-family:"Newsreader",Georgia,serif;font-size:19px;color:var(--ink);margin:0 0 4px}
.checkyou summary{cursor:pointer;color:var(--teal-d);font-weight:600;font-size:14px;min-height:30px;display:flex;align-items:center}
.checkyou blockquote{margin:8px 0;padding:6px 12px;border-left:2px solid var(--teal);font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:17px;color:var(--soft)}
.checkyou .acts{font-size:13.5px;margin:4px 0}
.checkyou .see{color:var(--teal-d)}
.cr-quiz-add{font:600 13.5px "IBM Plex Sans";color:var(--teal-d);background:none;border:1px solid var(--line2);border-radius:999px;padding:5px 12px;cursor:pointer;min-height:32px}
.cr-quiz-add[disabled]{color:var(--gold);border-color:var(--gold);cursor:default}