/* Mobile-only article reader chrome. Desktop keeps the existing three-column UI. */
:root[data-reader-size="s"] { --reader-scale: .94; }
:root[data-reader-size="m"] { --reader-scale: 1; }
:root[data-reader-size="l"] { --reader-scale: 1.125; }
:root[data-reader-size="xl"] { --reader-scale: 1.25; }

.reader-bar,
.reader-panel--display,
.reader-panel--share,
.reader-scrim,
.reader-panel-head,
.reader-panel-foot,
.reader-panel-close,
.reader-pct { display: none; }

html[data-reader-size] #blog-content p,
html[data-reader-size] #blog-content li { font-size: calc(1rem * var(--reader-scale)) !important; }
html[data-reader-size] #blog-content h2 { font-size: calc(1.75rem * var(--reader-scale)) !important; }
html[data-reader-size] #blog-content h3 { font-size: calc(1.5rem * var(--reader-scale)) !important; }
html[data-reader-size] #blog-content h4 { font-size: calc(1.25rem * var(--reader-scale)) !important; }
html[data-reader-size] .faq-answer { font-size: calc(1rem * var(--reader-scale)); }
html[data-reader-size] .post-summary { font-size: calc(1.0625rem * var(--reader-scale)); }
html[data-reader-size] .tldr-points li { font-size: calc(1rem * var(--reader-scale)); }
html[data-reader-size] .post-related-title { font-size: calc(1rem * var(--reader-scale)); }
html[data-reader-size] .post-related-date { font-size: calc(.8rem * var(--reader-scale)); }

@media (max-width: 63.99rem) {
  body.blog-post-page {
    --reader-bar-gap: max(.75rem, env(safe-area-inset-bottom, 0px));
    --reader-bar-clearance: calc(3.5rem + var(--reader-bar-gap));
  }
  body.blog-post-page .blog-container { padding-bottom: calc(clamp(60px, 7vw, 100px) + var(--reader-bar-clearance)); }
  body.blog-post-page .post-quick-actions,
  body.blog-post-page .post-header .post-share { display: none; }

  /* Above the scrim (10001), not under it. The sheet stops at the bar's top
     edge rather than covering it, so a bar left beneath the scrim stayed on
     screen while being dimmed and dead — the toolbar you pressed to open the
     sheet became the one control you could not press to close it. Keeping it
     above means Contents still toggles shut, and Display/Share still switch
     panels, from the same place the reader's thumb already is. */
  .reader-bar {
    display: block;
    position: fixed;
    left: max(.75rem, env(safe-area-inset-left, 0px));
    right: max(.75rem, env(safe-area-inset-right, 0px));
    bottom: var(--reader-bar-gap);
    z-index: 10003;
    height: 3.5rem;
    background: rgba(255, 255, 255, .97);
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 1rem;
    box-shadow: 0 10px 32px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .08);
    overflow: hidden;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    visibility: visible;
    /* visibility stepped, never interpolated — same pattern as the sheets. */
    transition: transform .24s ease, visibility 0s;
  }
  /* Translating the island down is not enough to stop it painting. iOS Safari's
     layout viewport extends behind the bottom address bar, so a fixed element
     parked "below the fold" still renders in that strip — and this one is an
     opaque backdrop-filtered slab, which turned the translucent address bar
     solid and hid the page content that should show through it. visibility
     takes it out of the paint entirely, delayed by the length of the slide so
     the animation still plays on the way out. */
  .reader-bar.is-hidden,
  body.reader-sheet-open .reader-bar {
    transform: translateY(calc(120% + var(--reader-bar-gap)));
    visibility: hidden;
    pointer-events: none;
    transition: transform .24s ease, visibility 0s linear .24s;
  }
  .reader-bar-inner { height: 3.5rem; }
  .reader-bar-actions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); height: 100%; }
  .reader-action {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .16rem;
    padding: .22rem .05rem;
    border: 0;
    background: transparent;
    color: #59645e;
    font: 700 .61rem/1.05 var(--bodyFontFamily, sans-serif);
    cursor: pointer;
  }
  .reader-action svg { width: 1.18rem; height: 1.18rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .reader-action.active,
  .reader-action[aria-expanded="true"],
  .reader-action[aria-pressed="true"] { color: var(--primary, #006940); }
  .reader-action:focus-visible { outline: 2px solid var(--primary, #006940); outline-offset: -3px; border-radius: .45rem; }

  .reader-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: rgba(9, 20, 14, .58);
    opacity: 0;
    transition: opacity .22s ease;
  }
  .reader-scrim[hidden] { display: none; }
  .reader-scrim.is-open { opacity: 1; }

  .reader-panel,
  .toc-sidebar.reader-panel {
    display: flex;
    position: fixed;
    left: max(.75rem, env(safe-area-inset-left, 0px));
    right: max(.75rem, env(safe-area-inset-right, 0px));
    bottom: var(--reader-bar-gap);
    z-index: 10002;
    flex-direction: column;
    width: auto;
    max-width: none;
    max-height: min(68dvh, 34rem);
    margin: 0;
    padding: .5rem .75rem .75rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 1rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24), 0 3px 10px rgba(0, 0, 0, .1);
    transform: translateY(calc(100% + var(--reader-bar-gap) + 1rem));
    visibility: hidden;
    pointer-events: none;
    /* visibility is stepped, not interpolated: 0s with a .28s DELAY on close, so
       the sheet stays on screen for the whole slide-out and only then leaves the
       accessibility tree. Transitioning it over .28s instead — as this did —
       left the panel unfocusable for the entire opening animation, so
       reader-bar.js's focus() calls at rAF/0ms/50ms all failed silently and the
       sheet opened with focus stranded on the toolbar button behind it. */
    transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
  }
  .reader-panel[data-open="true"],
  .toc-sidebar.reader-panel[data-open="true"] {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    /* Visible on the first frame, so the sheet is focusable immediately. */
    transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s;
  }
  .reader-panel.is-dragging { transition: none; }
  .toc-sidebar.reader-panel .cs-featured-group {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .reader-panel-bar {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.5rem;
    padding: .2rem .15rem .45rem;
    touch-action: none;
  }
  .reader-panel-bar::before {
    content: "";
    position: absolute;
    top: -.45rem;
    left: 50%;
    width: 2.5rem;
    height: .25rem;
    border-radius: 999px;
    background: #c8d0cc;
    transform: translateX(-50%);
  }
  .reader-panel-bar h2,
  .toc-sidebar.reader-panel .reader-panel-bar .cs-sidebar-header {
    display: block;
    margin: 0;
    color: var(--headerColor, #1a1a1a);
    font-size: 1rem;
    font-weight: 800;
    text-align: left;
  }
  .toc-sidebar.reader-panel .reader-panel-bar .cs-sidebar-header::after { display: none; }
  .reader-panel-close {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: .75rem;
    background: #f0f3f1;
    color: #33413a;
    font: 400 1.45rem/1 sans-serif;
    cursor: pointer;
  }
  .reader-pct {
    display: inline-block;
    margin-left: auto;
    color: #87908b;
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
  }
  .reader-panel-head { display: block; flex: none; padding: .15rem .6rem .65rem; }
  .reader-readout { display: flex; align-items: baseline; gap: .35rem; margin: 0 0 .5rem; }
  .reader-readout b {
    color: var(--headerColor, #1a1a1a);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
  }
  .reader-readout span { color: #68736d; font-size: .8125rem; }
  .reader-readout-sections:empty { display: none; }
  .reader-meter { height: 3px; overflow: hidden; border-radius: 2px; background: #e5e9e7; }
  .reader-meter i { display: block; width: 0; height: 100%; background: var(--primaryLight, #00bd74); transition: width .12s linear; }

  .toc-sidebar.reader-panel { overflow: hidden; }
  .toc-sidebar.reader-panel .toc { flex: 1; min-height: 0; overflow-y: auto; padding: .1rem 0; }
  .toc-sidebar.reader-panel .toc ol { gap: 0; }
  .toc-sidebar.reader-panel .toc li > ol { gap: 0; margin: 0; padding-left: 1rem; }
  .toc-sidebar.reader-panel .toc a {
    position: relative;
    display: block;
    width: 100%;
    min-height: 2.75rem;
    padding: .65rem .7rem .65rem 1rem;
    border: 0;
    border-radius: .45rem;
    color: #66716b;
    line-height: 1.4;
    text-decoration: none;
  }
  .toc-sidebar.reader-panel .toc a::before {
    content: "";
    position: absolute;
    top: .25rem;
    bottom: .25rem;
    left: .2rem;
    width: 2px;
    border-radius: 999px;
    background: #dde3df;
    transition: background .18s;
  }
  .toc-sidebar.reader-panel .toc a.is-read::before { background: rgba(0, 189, 116, .38); }
  .toc-sidebar.reader-panel .toc a.active::before { background: var(--primaryLight, #00bd74); }
  .toc-sidebar.reader-panel .toc a.active { padding-left: 1rem; background: rgba(0, 105, 64, .08); color: var(--primary, #006940); font-weight: 800; }
  .reader-panel-foot { display: flex; flex: none; justify-content: space-between; gap: 1rem; padding: .55rem .25rem 0; border-top: 1px solid #e5e9e7; }
  .reader-panel-foot a { color: #5f6a64; font-size: .75rem; font-weight: 650; text-decoration: none; }
  .reader-panel-foot a:hover,
  .reader-panel-foot a:focus-visible { color: var(--primary, #006940); }

  .reader-preference { display: grid; gap: .65rem; padding: .8rem 0; border-bottom: 1px solid #e5e9e7; }
  .reader-preference > span { color: #33413a; font-size: .86rem; font-weight: 700; }
  .reader-segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
  .reader-segmented button,
  .reader-share-grid button,
  .reader-reset {
    min-height: 2.75rem;
    border: 1px solid #dfe5e1;
    border-radius: .6rem;
    background: #f8faf9;
    color: #33413a;
    font: 700 .82rem/1 var(--bodyFontFamily, sans-serif);
    cursor: pointer;
  }
  .reader-segmented button[aria-checked="true"] { background: var(--primary, #006940); border-color: var(--primary, #006940); color: #fff; }
  .reader-reset { margin-top: 1rem; background: transparent; color: var(--primary, #006940); }
  .reader-share-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .reader-share-grid button:hover { border-color: var(--primary, #006940); color: var(--primary, #006940); }

  /* The site navbar stays put behind an open sheet. It was hidden outright here
     as a hedge against #cs-navigation's z-index of 10000 outranking the scrim,
     but the scrim is 10001 and nothing between them creates a stacking context,
     so it already covers the navbar — and reader-bar.js marks it `inert`, so it
     is unreachable as well as dimmed.
     Dropping that rule is not enough on its own. #cs-navigation is
     `position: fixed` with NO `top`, so it renders at its static position — and
     the scroll lock sets `body { position: fixed; top: -<scrollY>px }`, which
     drags that static position up by the full scroll offset. At 560px down the
     navbar was sitting at top: -560px: still "visible", still off-screen.
     Pinning it for the duration of the lock is what actually keeps it there. */
  body.reader-sheet-open #cs-navigation { top: 0; }
  body.focus-mode .reader-bar,
  body.focus-mode .reader-scrim,
  body.focus-mode .reader-panel { display: none !important; }

  body.blog-post-page .pb-go-top-progress { bottom: calc(1rem + var(--reader-bar-clearance)); }
  body.blog-post-page .audit-fab { bottom: calc(4.5rem + var(--reader-bar-clearance)); }
}

@media (max-width: 47.99rem) {
  body.blog-post-page .audit-fab { bottom: calc(4rem + var(--reader-bar-clearance)); }
}

@media (min-width: 64rem) {
  /* The original implementation kept the old desktop card untouched, which
     also hid the reading state the TOC is supposed to communicate. Carry the
     LogoNuri readout, meter and filled spine into the desktop rail as well. */
  .toc-sidebar.reader-panel .cs-featured-group {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .toc-sidebar.reader-panel .reader-panel-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 0;
    padding: 0 .6rem .5rem;
  }
  .toc-sidebar.reader-panel .reader-panel-bar::before { display: none; }
  .toc-sidebar.reader-panel .reader-panel-bar .cs-sidebar-header {
    margin: 0;
    color: #87908b;
    font-size: .65625rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-align: left;
    text-transform: uppercase;
  }
  .toc-sidebar.reader-panel .reader-panel-bar .cs-sidebar-header::after { display: none; }
  .toc-sidebar.reader-panel .reader-pct {
    display: inline-block;
    margin-left: auto;
    color: #87908b;
    font-size: .6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
  }
  .toc-sidebar.reader-panel .reader-panel-head { display: block; padding: 0 .6rem .85rem; }
  .toc-sidebar.reader-panel .reader-readout { display: flex; align-items: baseline; gap: .35rem; margin: 0 0 .5rem; }
  .toc-sidebar.reader-panel .reader-readout b {
    color: var(--headerColor, #1a1a1a);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
  }
  .toc-sidebar.reader-panel .reader-readout span { color: #68736d; font-size: .8125rem; }
  .toc-sidebar.reader-panel .reader-meter { height: 3px; overflow: hidden; border-radius: 2px; background: #e5e9e7; }
  .toc-sidebar.reader-panel .reader-meter i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--primaryLight, #00bd74);
    transition: width .12s linear;
  }
  .toc-sidebar.reader-panel .toc { width: 100%; padding: .25rem 0; overflow-y: auto; }
  .toc-sidebar.reader-panel .toc ol { gap: 0; }
  .toc-sidebar.reader-panel .toc li > ol { gap: 0; margin: .1rem 0 .2rem; padding-left: .8rem; }
  .toc-sidebar.reader-panel .toc a {
    position: relative;
    display: block;
    width: 100%;
    padding: .5rem .6rem .5rem .85rem;
    border: 0;
    border-radius: .45rem;
    color: #68736d;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
  }
  .toc-sidebar.reader-panel .toc ol ol a { padding-top: .35rem; padding-bottom: .35rem; font-size: .78125rem; font-weight: 400; }
  .toc-sidebar.reader-panel .toc a::before {
    content: "";
    position: absolute;
    top: .3rem;
    bottom: .3rem;
    left: 0;
    width: 2px;
    border-radius: 2px;
    background: #e5e9e7;
    transition: background .3s ease;
  }
  .toc-sidebar.reader-panel .toc a:hover,
  .toc-sidebar.reader-panel .toc a:focus-visible { background: rgba(0, 105, 64, .06); color: var(--primary, #006940); }
  .toc-sidebar.reader-panel .toc a.is-read::before { background: rgba(0, 189, 116, .38); }
  .toc-sidebar.reader-panel .toc a.active,
  .toc-sidebar.reader-panel .toc a.cs-toc-current {
    padding-left: .85rem;
    border: 0;
    background: rgba(0, 105, 64, .08);
    color: var(--primary, #006940);
    font-weight: 700;
  }
  .toc-sidebar.reader-panel .toc a.active::before,
  .toc-sidebar.reader-panel .toc a.cs-toc-current::before { background: var(--primaryLight, #00bd74); }
  .toc-sidebar.reader-panel[aria-hidden="true"] { visibility: visible; }
}

body.dark-mode .reader-bar,
body.dark-mode .reader-panel { background: var(--medium, #1f1f1f); border-color: rgba(255,255,255,.12); color: #fff; }
body.dark-mode .reader-action { color: rgba(255,255,255,.7); }
body.dark-mode .reader-action.active,
body.dark-mode .reader-action[aria-expanded="true"],
body.dark-mode .reader-action[aria-pressed="true"] { color: var(--primaryLight, #00bd74); }
body.dark-mode .reader-panel-bar h2,
body.dark-mode .toc-sidebar.reader-panel .reader-panel-bar .cs-sidebar-header,
body.dark-mode .reader-readout b,
body.dark-mode .reader-preference > span { color: #fff; }
body.dark-mode .reader-pct,
body.dark-mode .reader-readout span { color: rgba(255,255,255,.58); }
body.dark-mode .reader-panel-close,
body.dark-mode .reader-segmented button,
body.dark-mode .reader-share-grid button { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.82); }
body.dark-mode .reader-segmented button[aria-checked="true"] { background: var(--primaryLight, #00bd74); color: var(--dark, #0d1411); }
body.dark-mode .toc-sidebar.reader-panel .toc a.active { background: rgba(0,189,116,.1); color: var(--primaryLight, #00bd74); }
body.dark-mode .reader-meter { background: rgba(255,255,255,.13); }

@media (min-width: 64rem) {
  body.dark-mode .toc-sidebar.reader-panel .cs-featured-group { background: transparent; }
  body.dark-mode .toc-sidebar.reader-panel .reader-panel-bar .cs-sidebar-header,
  body.dark-mode .toc-sidebar.reader-panel .reader-pct,
  body.dark-mode .toc-sidebar.reader-panel .reader-readout span { color: rgba(255,255,255,.55); }
  body.dark-mode .toc-sidebar.reader-panel .reader-readout b { color: #fff; }
  body.dark-mode .toc-sidebar.reader-panel .reader-meter,
  body.dark-mode .toc-sidebar.reader-panel .toc a::before { background: rgba(255,255,255,.13); }
  body.dark-mode .toc-sidebar.reader-panel .toc a { color: rgba(255,255,255,.68); opacity: 1; }
  body.dark-mode .toc-sidebar.reader-panel .toc a:hover,
  body.dark-mode .toc-sidebar.reader-panel .toc a:focus-visible { background: rgba(0,189,116,.08); color: var(--primaryLight, #00bd74); }
  body.dark-mode .toc-sidebar.reader-panel .toc a.is-read::before { background: rgba(0,189,116,.4); }
  body.dark-mode .toc-sidebar.reader-panel .toc a.active,
  body.dark-mode .toc-sidebar.reader-panel .toc a.cs-toc-current { background: rgba(0,189,116,.1); color: var(--primaryLight, #00bd74); opacity: 1; }
  body.dark-mode .toc-sidebar.reader-panel .toc a.active::before,
  body.dark-mode .toc-sidebar.reader-panel .toc a.cs-toc-current::before { background: var(--primaryLight, #00bd74); }
}

@media print {
  .reader-bar,
  .reader-panel,
  .reader-scrim { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .reader-bar,
  .reader-panel,
  .reader-scrim,
  .reader-meter i { transition-duration: 0s !important; }
}