/*
 * Fee chapter menu - AB#190882
 *
 * Ported from the V3 prototype attached to the work item (styles/fee-menu-versions.css in
 * bm-2026-ny_gebyrtabell.zip), which is the treatment the customer reviewed and chose: larger
 * level-1 rows, a coloured active surface and match-count badges.
 *
 * Two things changed on the way in. The prototype carried all eight candidate layouts in one file
 * and switched between them on html[data-feever="vN"] attributes its own router set; V3 is the
 * unscoped base, so the variant overrides are dropped and the scoping hooks are replaced by the
 * body.fee-chapter-menu class the chapter sets when it has an index to search. The prototype also
 * hid the AngularJS menu it replaced by attribute; here the template renders one menu or the other,
 * so nothing needs hiding.
 */
/* Alle flatene hentes fra fargepaletten (color_palette_style.css), slik at
   variantene folger den paletten kommunen har valgt. Fallbackene er
   Bergen gull/gronn-verdiene. */
body.fee-chapter-menu {
  --sf-ink: #16171a;
  --sf-accent: var(--main-theme-color, #117845);
  --sf-accent-dark: var(--text-filters-active-bg, #0c5732);
  /* Bergen beige - samme flate som sumrader og apne tjenestenivaer. */
  --sf-active-bg: var(--table-sumrow-bg, #f7f3e4);
  --sf-muted: #5b6057;
  --sf-rule: #ddd9cc;
}

/* AB#190882: the prototype built its menu as a SECOND DOM beside AngularJS's own list and then
   hid the original with rules here. This port replaces the list in the template instead - the
   chapter renders either the new menu or the old one, never both - so those hiding rules are not
   only unnecessary, they matched OUR markup: the new <ul> also carries .list-group and sits
   directly under .bookmarks-container, as do the title and the status line. They are removed.
   The mobile section is likewise left alone; the mobile menu is rendered, not suppressed. */
body.fee-chapter-menu #bookMarksContent .bookmarks-container { padding: 0 !important; }
body.fee-chapter-menu .detail-left-content-section { top: 77px; }
body.fee-chapter-menu .bookmarks-wrapper { min-height: auto; }

/* Brodsmulefeltet i lys blagratt - ikke gult. */
body.fee-chapter-menu #bBreadcrumb {
  background: var(--sf-active-bg) !important;
  padding: 16px 20px !important;
  line-height: 1.5;
}

/* Litt luft over overskriftene vi hopper til. H4 er med fordi gebyrgruppene ogsa er
   overskrifter i kapittelet - de har ingen menyoppforing, men trefflista hopper til dem. */
body.fee-chapter-menu #detailContentSectionBottom .h2,
body.fee-chapter-menu #detailContentSectionBottom .h3,
body.fee-chapter-menu #detailContentSectionBottom .h4 { scroll-margin-top: 96px; }

/* =========================================================================
   Overskriftsnivaene i kapittelet

   Publiseringen gir H2 (kategori), H3 (gebyrtabell) og H4 (gebyrgruppe) naer
   identisk utseende - 33 / 30 / 27 px, alle i samme vekt og farge. Spranget er
   ca. 10 % om gangen, og det er for lite til a lese strukturen som det nye
   kategorinivaet legger opp til.

   Etter en gjennomgang med kommunen (sju forslag - storrelse og vekt, farge,
   linjer og luft, innrykk, nummerering, farget balk) valgte Bergen dette:

       H2  kategori      34 px, ekte bold
       H3  gebyrtabell   28 px
       H4  gebyrgruppe   23 px

   STORRELSENE gjelder bare gebyrkapittelet. FETTEN pa H2 gjelder hele dokumentet:
   kommunen ba om den samme fete H2 i de ovrige kapitlene ogsa, men uttrykkelig uten
   at noen storrelser endres der. Derfor er regelen delt i to under - en uomfanget
   som bare setter vekten, og en gebyrkapittel-regel som setter trappen. Ingen av
   dem overlapper, sa gebyrkapittelet ser noyaktig ut som for.

   Venstremenyen i de andre kapitlene rores ikke: den har sin egen trapp fra
   bookmarkL2/L3, og den var aldri problemet. Det som skjer lenger nede med .sf-l1
   og .sf-l2 gjelder bare gebyrmenyen, som tegner sine egne rader.

   Trinnene er ca. 20 % om gangen, dobbelt sa mye som i dag. Niva 1 star naer
   der det sto; det er niva 2 og 3 som trekkes ned. Et forste utkast pa en
   tredjedel om gangen (37 / 25 / 18) ble forkastet - da la niva 1 og niva 3 sa
   langt fra hverandre at siden ikke lignet seg selv lenger.

   LUFTEN er bevisst holdt nede. Et forste forsok ga overskriftene egne marger
   over seg (2,4 / 1,5 / 0,9 rem), og da ble gebyrkapittelet aapnere enn resten av
   publiseringen: malt i nettleseren vokste luften over en gebyrtabell-overskrift
   fra 58 til 82 px og over en gebyrgruppe fra 29 til 46 px, mens de ovrige
   kapitlene ligger pa 29-64 px. Kommunen reagerte pa nettopp det. Na star H3 og
   H4 pa margin-top: 0, som resten av dokumentet, og bare kategorien beholder en
   liten luft (1 rem) fordi den starter en ny bolk. Bunnmargene er trukket ned mot
   de 5 px publiseringen ellers bruker.

   MERK - vekten settes med FAMILIE, ikke med font-weight.

   styles/bootstrap/font_styles.css deler Source Sans Pro i egne familier i
   stedet for i vekter. Overskriftene her treffes av

       .content-detail-style .h2, .h3, .h4 {
           font-weight: var(--semi-font-weight, 500);      -> normal
           font-family: semiFont, sans-serif !important;
       }

   semiFont er SourceSansPro-SemiBold.ttf, meldt inn med font-weight normal, og
   familien har bare dette ene snittet. font-weight har da ingenting a velge
   mellom, og nettleseren fortykker det ikke syntetisk heller. Malt i Chromium pa
   teksten "Helse og omsorg": 34 px i vekt 700 ga bredde 241,5 og svart flate
   8017 - noyaktig det 33 px i vekt 400 (234,4 / 7545) gir nar det skaleres opp
   med 34/33. Ikke en piksel forskjell.

   Derfor byttes familien til boldFont (SourceSansPro-Bold.ttf) pa H2: det er det
   eneste grepet som faktisk gir tyngre tekst i denne publiseringen - 246,8 /
   9828, altsa 23 % mer svart flate. !important ma til fordi regelen i
   font_styles.css ogsa har det.

   MEN: ikke alle publiseringer har den skriftoppsettingen. Er kommunen temaet med
   en NAVNGITT font i stedet for filer per snitt - bm-2027-test_hop27-30 bruker
   src: local("aktiv-grotesk") - peker alle fem familiene pa samme fysiske snitt,
   og da er det omvendt: familien gjor ingenting, og vekten er alt. Derfor settes
   BEGGE deler her, og vekten hentes fra publiseringens egen variabel:

       --bold-font-weight: normal   i en publisering med filer per snitt
       --bold-font-weight: bold     i en publisering med navngitt font

   Da gjor hver publisering det som virker hos den, og ingen av dem gjor noe som
   ikke virker. Uten vekten sto H2 i aktiv-grotesk like tynn som teksten under.

   H3 og H4 har med vilje ingen font-weight: de arver --semi-font-weight fra
   regelen i font_styles.css, altsa det publiseringen selv kaller halvfet. Et
   tall skrevet rett inn her ville overstyrt temaet og gjort H4 lettere enn det
   kommunen har godkjent i en publisering med ekte vektakse.
   ========================================================================= */
/* Hele dokumentet: H2 i fet. Ingen storrelse og ingen marg her - bare vekten, slik
   kommunen ba om.

   BEGGE skrivematene ma med. Overskrifter som kommer fra strukturen i publiseringen
   er <div class="row h2">, mens overskrifter kommunen selv skriver inne i en rik
   tekstblokk kommer ut som ekte <h2> - det er typisk egendefinerte noder som
   Budsjettvedtak og Investeringsplan. Med bare klassevelgeren sto 26 slike
   overskrifter fordelt pa 8 kapitler igjen i semiFont i HOP27-30, og kommunen sa det
   med en gang. style-sheet.css skriver sine egne overskriftsregler pa noyaktig samme
   form (.content-detail-style h2, .content-detail-style .h2), av samme grunn.

   Gebyrkapittelet har ingen ekte <h2> i teksten, sa elementvelgeren endrer ingenting
   der - bekreftet ved a rendre kapittelet pa nytt mot skjermbildet kommunen godkjente. */
#detailContentSectionBottom h2,
#detailContentSectionBottom .h2 {
  font-family: boldFont, sans-serif !important;
  font-weight: var(--bold-font-weight, bold);
}

/* Gebyrkapittelet: trappen. Fetten pa H2 kommer fra regelen over. */
/* Margene: se avsnittet om luft nederst i dette kapittelet.
   Resten av publiseringen kjorer margin-top: 0 og margin-bottom: 5px pa alle
   overskriftsniva. Bare kategorien far litt luft over seg her; H3 og H4 folger
   dokumentet. */
body.fee-chapter-menu #detailContentSectionBottom .h2 {
  font-size: 2.125rem;
  line-height: 1.2;
  margin-top: 1rem;
  margin-bottom: 0.4rem;
}
body.fee-chapter-menu #detailContentSectionBottom .h3 {
  font-size: 1.75rem;
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 0.35rem;
}
body.fee-chapter-menu #detailContentSectionBottom .h4 {
  font-size: 1.4375rem;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/* =========================================================================
   Lange overskrifter skal ikke brekke nar tabellen under har plass

   style-sheet.css gir .detail-section-wrapper en fast bredde pa 790 px.
   Gebyrtabellene bryr seg ikke om den - de er gjerne 1400-1500 px og renner ut
   over spalten. Overskriftene gjor det ikke, og brekker pa 790 px selv nar
   tabellen under dem er dobbelt sa bred. Det er derfor "Opplaering i norsk og
   samfunnskunnskap for voksne innvandrere" sto pa to linjer over en tabell med
   god plass til overs.

   Spalten selv rores IKKE. Forste forsok gjorde den sa bred som det var plass
   til, men da flyttet hele sideinnholdet seg: spalten er sentrert, og en bredere
   spalte starter et annet sted. I stedet far overskriftene lov til a renne ut
   over spalten mot hoyre, akkurat som tabellene allerede gjor. Venstrekanten
   star der den sto.

   max-width holder dem innenfor vinduet: spalten starter pa (100vw - 790)/2, sa
   det er (50vw + 395) fram til hoyre kant, minus en luft pa 24 px.

   Bare over 1260 px, der spalten er de faste 790 px; under det setter
   responsive_style.css den til 100 % og det er ikke noe a lose.
   ========================================================================= */
@media only screen and (min-width: 1261px) {
  body.fee-chapter-menu #detailContentSectionBottom .h2,
  body.fee-chapter-menu #detailContentSectionBottom .h3,
  body.fee-chapter-menu #detailContentSectionBottom .h4 {
    width: max-content;
    max-width: calc(50vw + 371px);
  }
}

/* =========================================================================
   Felles menychassis
   ========================================================================= */

.sf-nav { background: #f5f5f5; padding: 0 0 32px; min-height: 100%; }
.sf-nav__title {
  margin: 0; padding: 26px 20px 10px;
}

.sf-list { list-style: none; margin: 0; padding: 0; }
.sf-list__row { display: flex; align-items: center; }

/* Vekt pa menynivaene - samme trapp som standardmenyen.

   Resten av publiseringen merker bokmerkene med styleClass, og font_styles.css gir hver klasse
   sin egen skriftfamilie:

       bookmarkL2  (H2)  -> semiFont      SourceSansPro-SemiBold
       bookmarkL3  (H3)  -> regularFont   SourceSansPro-Regular

   Gebyrmenyen tegnes ikke av den koden - den har sine egne .sf-l1 og .sf-l2 - og arvet derfor
   regularFont pa begge nivaene. Begge nivaene sto altsa i samme vekt, mens de samme to nivaene
   i alle andre kapitler star i hver sin. Her settes den samme trappen for hand.

   Familie OG vekt, av samme grunn som for overskriftene lenger opp: i en publisering med filer
   per snitt er det familien som baerer vekten, i en med navngitt font er det font-weight. Vekten
   hentes fra publiseringens egne variabler, slik at hver publisering far sin egen trapp.

   Understrekingen pa hover star urort pa begge nivaene - den er tilbakemeldingen leseren kjenner
   igjen, og den er det eneste hover faktisk endrer i dag. */

/* Niva 1 = kategori (H2 etter at kategorinivaet kom til) */
.sf-l1 {
  flex: 1 1 auto; border: 0; background: none; text-align: left; color: var(--sf-ink);
  font-size: 0.85em; line-height: 1.35; padding: 16px 8px 16px 20px;
  font-family: semiFont, sans-serif;
  font-weight: var(--semi-font-weight, 500);
}
.sf-l1:hover { text-decoration: underline; }

/* Niva 2 = gebyrgruppe (gebyrtabell der kapitlet har et niva over).
   Raden rykkes inn 14px - samme trinn som trefflista under - slik at niva 2
   leses som underordnet niva 1 og ikke som en rad pa samme niva. */
.sf-sub { list-style: none; margin: 0; padding: 0 0 10px; }
.sf-l2 {
  display: block; width: 100%; border: 0; background: none; text-align: left;
  color: var(--sf-ink); font-size: 0.75em; line-height: 1.35; padding: 7px 8px 7px 34px;
  font-family: regularFont, sans-serif;
  font-weight: var(--regular-font-weight, normal);
}
.sf-l2:hover { text-decoration: underline; }

/* Chevron */
.sf-chev {
  flex: 0 0 46px; border: 0; background: none; color: var(--sf-ink);
  font-size: 0.85em; line-height: 1; padding: 16px 20px 16px 0; text-align: right;
}
.sf-chev::before { content: "\276F"; display: inline-block; transition: transform .15s ease; }
.sf-item.is-open > .sf-list__row .sf-chev::before { transform: rotate(90deg); }

.sf-item > .sf-sub { display: none; }
.sf-item.is-open > .sf-sub { display: block; }

/* Aktiv rad: lys flate over hele menybredden + strek i hovedfargen til venstre. */
.sf-list .is-active > .sf-list__row,
.sf-l2.is-active {
  background: var(--sf-active-bg);
  box-shadow: inset 5px 0 0 0 var(--sf-accent);
}
.sf-list .is-active > .sf-list__row .sf-l1 { font-weight: 600; }
.sf-l2.is-active { font-weight: 600; }

/* =========================================================================
   "Utvid alle"
   ========================================================================= */
.sf-toggleall { padding: 0 20px 12px; }
.sf-toggleall__btn {
  border: 0; background: none; padding: 6px 0; text-align: left;
  color: var(--sf-accent); font-size: 0.85em; font-weight: 600;
  text-decoration: underline;
}
/* Samme tegn og samme rotasjon som chevronen i radene, sa kontrollen leses
   som "det samme, men for alle". */
.sf-toggleall__btn::before {
  content: "\276F"; display: inline-block; margin-right: 9px;
  text-decoration: none; transition: transform .15s ease;
}
.sf-toggleall__btn[aria-expanded="true"]::before { transform: rotate(90deg); }

/* =========================================================================
   Sok i gebyrer

   Feltet ligger overst i venstremenyen. Menyen filtreres, med antall
   (.sf-badge) og gebyrene som et tredje niva (.sf-hitlist); treffene
   markeres samtidig i tabellene.
   ========================================================================= */

.sf-search { padding: 0 20px 6px; }
.sf-search__field { position: relative; display: flex; align-items: center; }

.sf-search__input {
  width: 100%; border: 1px solid #b9b9b9; border-radius: 2px; background: #fff;
  color: var(--sf-ink); font-size: 0.85em; line-height: 1.3;
  padding: 9px 34px 9px 12px;
}
.sf-search__input:focus {
  border-color: var(--sf-accent);
  outline: 2px solid var(--sf-accent); outline-offset: 1px;
}
/* Nettleserens egen kryss-knapp erstattes av var, sa den er der ogsa i
   Firefox og far et treffomrade som holder 24x24. */
.sf-search__input::-webkit-search-cancel-button { display: none; }

.sf-search__clear {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; color: var(--sf-muted);
  font-size: 1.25em; line-height: 1; padding: 4px 9px;
}
.sf-search__clear:hover { color: var(--sf-ink); }

.sf-search__status {
  margin: 8px 0 0; min-height: 18px;
  color: var(--sf-muted); font-size: 0.75em; line-height: 1.4;
}

/* ----------------------------------------- treffliste (mobilpanelet) */

.sf-results__btn {
  display: block; width: 100%; border: 0; background: none; text-align: left;
  color: var(--sf-ink); font-size: 0.85em; line-height: 1.35;
  padding: 8px 20px 8px 34px;
}
.sf-results__btn:hover { background: var(--sf-active-bg); }
.sf-results__btn.is-current {
  background: var(--sf-active-bg);
  box-shadow: inset 5px 0 0 0 var(--sf-accent);
  font-weight: 600;
}
.sf-results__ctx {
  display: block; margin-top: 2px; color: var(--sf-muted); font-size: 0.7em;
}

/* ---------------------------------------------------------- filtrert meny */

.sf-badge {
  flex: 0 0 auto; margin: 0 16px 0 4px; padding: 1px 8px; border-radius: 10px;
  background: var(--sf-accent); color: #fff;
  font-size: 0.7em; font-weight: 600; line-height: 1.6;
}
/* Chevronen har sin egen plass i raden - nar badgen kommer i tillegg, ma
   den ikke skyve tittelen ut. */
.sf-item.is-filtered > .sf-list__row .sf-chev { flex-basis: 32px; padding-right: 8px; }

/* Treffene folger niva 2 inn, sa de tre nivaene star pa hver sin venstrekant:
   20px - 34px - 48px. Streken henger ut i margen til venstre for teksten. */
.sf-hitlist { list-style: none; margin: 0 0 8px; padding: 0; }
.sf-hitlist__btn {
  position: relative; display: block; width: 100%;
  border: 0; background: none; text-align: left;
  color: var(--sf-muted); font-size: 0.7em; line-height: 1.35;
  padding: 5px 8px 5px 62px;
}
.sf-hitlist__btn::before { content: "\2013"; position: absolute; left: 48px; }
.sf-hitlist__btn:hover { color: var(--sf-ink); text-decoration: underline; }
.sf-hitlist__btn.is-current { color: var(--sf-ink); font-weight: 600; }

/* --------------------------------------------- treffene i selve tabellene */

/* Kendo legger bakgrunnen for annenhver rad som inline style pa <tr>, og
   temaet setter flater pa sumrader - derfor !important pa cellene. */
.sf-hit > td { background: var(--sf-active-bg) !important; }
.sf-hit--current > td { background: #fdf3c8 !important; }
.sf-hit--current > td:first-child { box-shadow: inset 5px 0 0 0 var(--sf-accent); }
.sf-hit-head { background: var(--sf-active-bg); }
.sf-hit-head.sf-hit--current { background: #fdf3c8; }

/* En overskrift publiseres som <div class="row h2">, og Bootstrap gir hvert
   ELEMENT-barn width:100% via .row > *. Et <mark> rett i overskriften blir
   derfor et flex-element pa egen linje, og overskriften brekker i tre.
   markTarget flytter hele innholdet inn i denne wrapperen forst, sa er det
   den - ikke merkingen - som er flex-elementet. Den skal ta plassen teksten
   hadde, sa paddingen fra .row > * nulles her; ellers rykker overskriften
   inn 12px sa lenge den er markert. I en tabellrad lages ingen wrapper. */
.sf-marktext { padding: 0 !important; margin: 0 !important; }

mark.sf-mark {
  display: inline;
  background: #ffe9a8; color: inherit; padding: 0 1px; border-radius: 2px;
}
.sf-hit--current mark.sf-mark { background: #ffd24d; }

@media only screen and (max-width: 1260px) {
  body.fee-chapter-menu #bookMarksSectionMobile { display: block !important; }
}

/* Level-4 headings need the same scroll offset as the others, or a jump lands them under the
   sticky top. The prototype left this rule unscoped, reasoning that level-4 headings only occur in
   this chapter - but this stylesheet loads on EVERY page of the published document, so unscoped
   means it applies to every chapter. Scoped to the fee menu like the rest, so the story's promise
   that no other chapter changes holds by construction rather than by assumption. */
body.fee-chapter-menu #detailContentSectionBottom .h4 { scroll-margin-top: 96px; }

/*
 * AB#190882 additions to the ported prototype styles.
 *
 * The prototype told the current match apart from the others by background colour alone. The story
 * requires the distinction to survive in greyscale, so the current match is also underlined - the
 * one cue that carries no hue at all.
 */
.sf-hit--current mark.sf-mark,
mark.sf-mark--current {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/*
 * Stepping between matches moves focus onto the row rather than only scrolling to it, so the row
 * needs a focus ring of its own. Rows are not otherwise focusable; they take tabindex="-1" only
 * while a search is running.
 */
tr.sf-hit:focus,
tr.sf-hit:focus-visible {
  outline: 2px solid var(--sf-accent);
  outline-offset: -2px;
}

/*
 * Mobile search panel (AB#190882).
 *
 * No prototype styles exist for this: every variant in the prototype mounted into the DESKTOP
 * bookmark container only, so mobile was never drawn. These follow the direction settled in
 * grooming - a full-screen panel with the field pinned at the top, the status line beneath it, and
 * results as a flat scrollable list carrying their chapter as breadcrumb context.
 *
 * Sizes are in rem and the panel is laid out with flex, so it reflows rather than clips when text
 * spacing is increased or the page is zoomed.
 */
.sf-search__open {
  display: block;
  width: calc(100% - 1.5rem);
  margin: 0 0.75rem 0.75rem;
  padding: 0.5rem 0.75rem;
  text-align: left;
  border: 1px solid var(--sf-border, #ccc);
  border-radius: 4px;
  background: #fff;
}

.sf-mobile-panel {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.sf-mobile-panel__head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--sf-border, #ccc);
}

.sf-mobile-panel__head .sf-search__label { grid-column: 1 / -1; }
.sf-mobile-panel__head .sf-search__status { grid-column: 1 / -1; margin: 0; }

.sf-mobile-panel__close {
  border: 0;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.5rem;
}

/* The only scrolling region, so the field and the count stay put while results are browsed. */
.sf-mobile-panel__results {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-mobile-panel__results > li { border-bottom: 1px solid var(--sf-border, #eee); }

.sf-mobile-panel__results .sf-results__btn {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  padding: 0.75rem;
  text-align: left;
}

/*
 * Visually hidden, still announced. The search field's label is not drawn - the design has none -
 * but the field must carry a real label rather than relying on its placeholder, so the element
 * stays in the accessibility tree. Not the app's own .sr-only: that is defined only as
 * ".h1.sr-only" and uses display:none, which would hide it from screen readers too.
 */
.sf-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   Hoyden pa menykolonnen
   ========================================================================= */

/*
 * The left column is position:fixed with a top but no height, so it is exactly as tall as its
 * content: everything past the foot of the window is off screen, and there is no way to reach it.
 * .bookmarks-wrapper carries overflow-auto, but a box with no height of its own has nothing to
 * overflow, so it never produces a scrollbar. The bookmark list this menu replaced was short
 * enough for that never to show. This one is not - twelve sections plus one open section of
 * eighteen entries is taller than any window - and its last entries simply cannot be reached.
 *
 * Bounding the column to the window and letting the wrapper scroll inside it is also what
 * keepVisible has assumed all along: it scrolls .bookmarks-wrapper to keep the marked row in
 * view, which does nothing whatever while the wrapper has no overflow of its own.
 *
 * Desktop only. Below 1260px the column is position:relative and full width and the mobile menu
 * is the one on screen - see the rule above.
 */
@media only screen and (min-width: 1261px) {
  body.fee-chapter-menu .detail-left-content-section {
    bottom: 0;
    display: flex;
    flex-direction: column;
  }

  /* min-height:0 on every item in the flex chain. Without it each one refuses to shrink below its
     own content, and the overflow simply reappears one level further in. */
  body.fee-chapter-menu .bookmarks-section-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  body.fee-chapter-menu .bookmarks-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  /* The page footer is positioned at the foot of the DOCUMENT, not of the window, so it rises over
     the bottom of this fixed column exactly when the reader reaches the end of the chapter - which
     is where the last entries live. This is the room to scroll them clear of it.

     On the list rather than on .sf-nav: .sf-nav is also .bookmarks-container, whose padding this
     stylesheet zeroes with !important further up, so padding put there never survives. */
  body.fee-chapter-menu .sf-list { padding-bottom: 64px; }
}