/* Wiki for the Estatuto de los Trabajadores (BOE-A-2015-11430-consolidado).
   Visual style adapted from /double_pane_style.html (Helvetica, yellow .REF
   highlights, black header band). Layout is a two-pane wiki with a sticky
   header on top: left index navigates, main pane shows the article. */

:root {
  --header-h: 52px;
  --footer-h: 26px;
  --tabs-w: 200px;
  --index-w: 260px;
  --pane-pad-x: 36px;   /* content-pane horizontal padding */
  --pane-pad-y: 24px;   /* content-pane top padding */
  --header-bg: #111;
  --header-fg: #fff;
  --tabs-bg: #1c1c1c;
  --tabs-fg: #ddd;
  --tabs-active-bg: #f6f6f6;
  --tabs-active-fg: #1a1a1a;
  --index-bg: #f6f6f6;
  --index-border: #d0d0d0;
  --active-bg: #fffbd6;
  --hover-bg: #ececec;
  --ref-bg: #fff58a;
  --muted: #666;
  --body-fg: #1a1a1a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Helvetica, Arial, sans-serif;
  color: var(--body-fg);
  background: #fff;
}

/* Layout grid. Three rows × four columns:
     row 1: CONFEVICEX banner — spans all 4 cols, sticky at top
     row 2: tabs | index | left content pane | right pane
     row 3: footer — spans all 4 cols
   The right pane has width 0 until JS sets `data-split="1"` on the app
   container, at which point it expands to share the content area 50/50
   with the left pane. B22 retired the per-navigator inner header band
   that used to sit at row 2 (its BOE-id subtitle moved into each tab). */
.app {
  display: grid;
  grid-template-rows: var(--header-h) 1fr var(--footer-h);
  grid-template-columns: var(--tabs-w) var(--index-w) 1fr 0fr;
  height: 100vh;
  transition: grid-template-columns 180ms ease;
}

.app[data-split="1"] {
  grid-template-columns: var(--tabs-w) var(--index-w) 1fr 1fr;
}

/* ---------------- Top app header (sticky, full-width) ---------------- */

.sticky-header {
  grid-column: 1 / -1;
  grid-row: 1;
  background: var(--header-bg);
  color: var(--header-fg);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 24px 0 0;
  border-bottom: 1px solid #000;
  z-index: 10;
}

/* The title block spans exactly the tabs-column width so the search bar
   that follows it starts flush with the left edge of the index column. */
.title-block {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  flex: 0 0 var(--tabs-w);
  padding-left: 24px;
  overflow: hidden;
}

.title-block strong {
  font-size: 18px;
  letter-spacing: 1px;
}

.title-block .subtitle {
  font-size: 11px;
  color: #bbb;
  letter-spacing: 0.4px;
}

.search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  /* Fill the header width that remains to the right of the title block,
     so the search field stretches across the available space. */
  flex: 1 1 auto;
}

#search-input {
  flex: 1 1 auto;
  width: auto;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 13px;
  border: 1px solid #444;
  background: #1f1f1f;
  color: #fff;
  border-radius: 3px;
  outline: none;
}

#search-input:focus { border-color: #888; }

.search-count {
  font-size: 11px;
  color: #999;
  min-width: 60px;
  text-align: right;
}

/* ---------------- Tabs pane (leftmost navigator picker) ----------------
   Vertically stacked tabs — one per entry in NAVIGATORS. Sits in the
   content row alongside the index and reading panes. Each tab carries the
   document name on top and its BOE id underneath (the BOE id used to live
   in the per-nav header band that B22 retired). The active tab is
   reverse-video (light bg over the dark column) so it visually "owns" the
   cascading content to its right. */
.tabs-pane {
  grid-column: 1;
  grid-row: 2;
  background: var(--tabs-bg);
  border-right: 1px solid #111;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  font-size: 12px;
}

.tab-entry {
  display: block;
  padding: 12px 14px;
  color: var(--tabs-fg);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.35;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #1a1a1a;
}

.tab-entry .tab-title {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.tab-entry .tab-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 400;
  color: #aaa;             /* same muted tone the old .nav-subtitle used */
  letter-spacing: 0.3px;
}

.tab-entry:hover {
  background: #383838;
  color: #fff;
}
.tab-entry:hover .tab-sub { color: #ddd; }

.tab-entry.active {
  background: var(--tabs-active-bg);
  color: var(--tabs-active-fg);
  border-left-color: #d4af37;
  cursor: default;
}
.tab-entry.active .tab-sub { color: #555; }   /* readable on the light bg */

/* ---------------- Left index pane ---------------- */

/* Two-zone layout: the Tablas shortcut block (.index-tables) stays pinned
   at the top while the article tree (.index-articles) scrolls underneath.
   The pane itself never scrolls. */
.index-pane {
  grid-column: 2;
  grid-row: 2;
  background: var(--index-bg);
  border-right: 1px solid var(--index-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  min-height: 0;
}

.index-articles {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 0 32px;
}

.index-loading,
.content-loading {
  padding: 20px;
  color: var(--muted);
  font-style: italic;
}

.index-header {
  font-weight: 600;
  color: #333;
  padding: 6px 12px 2px;
  text-transform: none;
}

.index-header.level-1 {  /* TÍTULO */
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-top: 16px;
  color: #000;
  border-bottom: 1px solid var(--index-border);
}

.index-header.level-2 {  /* CAPÍTULO */
  font-size: 12px;
  padding-left: 16px;
  color: #222;
}

.index-header.level-3 {  /* Sección */
  font-size: 11px;
  padding-left: 28px;
  color: #555;
  font-weight: 500;
  font-style: italic;
}

.index-entry {
  display: block;
  padding: 3px 12px 3px 40px;
  color: #1a1a1a;
  text-decoration: none;
  line-height: 1.4;
  cursor: pointer;
  border-left: 3px solid transparent;
}

/* Disposition entries (no nested headers) live at left margin */
.index-entry.no-ancestors,
.index-entry.disposition {
  padding-left: 12px;
}

.index-entry:hover {
  background: var(--hover-bg);
}

.index-entry.active {
  background: var(--active-bg);
  border-left-color: #d4af37;
  font-weight: 600;
}

.index-entry .num {
  font-weight: 600;
  color: #444;
  margin-right: 6px;
}

.index-entry.search-hidden,
.index-header.search-hidden {
  display: none;
}

/* ---------------- Main content panes (left + right) ---------------- */

.content-pane {
  grid-row: 2;
  overflow-y: auto;
  /* No padding here — the sticky .pane-header and the scrolling .pane-body
     each own their padding, so the header spans the full pane width and
     sits flush at the very top. */
  padding: 0;
  position: relative;
}

.left-pane  { grid-column: 3; }
.right-pane { grid-column: 4; }

/* Reading frame: each pane fills the full width of its grid track so the
   article text expands into the available space. The 1px black border
   delimits the panel as a deliberate frame. `min-width: 0` lets each grid
   track shrink below the pane's intrinsic min-content size when the right
   pane opens. */
.left-pane,
.right-pane {
  min-width: 0;
  /* No top border: the sticky pane header collapses flush against the
     app banner above it, the same way the ÍNDICE block does. */
  border: 1px solid #000;
  border-top: 0;
}

.right-pane {
  background: #fafaf6;  /* faint warm tint so the user can tell panes apart */
}

.right-pane[hidden] { display: none; }

/* Sticky pane header — wraps the corpus capsule cluster and the article
   heading and pins them to the top of the pane, flush against the app
   banner above, so the reader always sees which corpus and which article
   they are in. The pane itself has no padding, so this header spans the
   full pane width; the .pane-body below it carries the body's padding and
   scrolls underneath. */
.pane-header {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  padding: var(--pane-pad-y) var(--pane-pad-x) 12px;
  border-bottom: 1px solid #d6d6d6;
}

.right-pane .pane-header {
  background: #fafaf6;  /* match the right pane's warm tint */
}

/* Scrolling body below the sticky header. The top padding sets the gap so
   the article text begins clearly below the header, never behind it. */
.pane-body {
  padding: 16px var(--pane-pad-x) 80px;
}

/* Top-right corner cluster inside the sticky pane header — holds the corpus
   capsule ("CONVENIO" / "ESTATUTO") and, on the right pane, the × close
   button. `margin-left: auto` right-aligns it within the pane header. */
.pane-corner {
  width: max-content;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Corpus capsule — small CONVENIO / ESTATUTO badge in the top-right corner
   of each content pane. Dark grey background per design spec. */
.corpus-capsule {
  background: #262626;
  color: #fff;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  user-select: none;
}

/* Pathway breadcrumb — only rendered on the right (cascaded) pane. Shows
   the full navigation chain that led the reader to the current article,
   one hop per line:
       XXIII Convenio/Artículo 12. Plus de Homogenización.
     → Estatuto/Artículo 41. Modificaciones sustanciales…
     → Estatuto/Artículo 39. Movilidad funcional.
   Lives in normal flow (block + margin-left: auto right-aligns it) so its
   height grows with the chain length and the article heading flows below
   naturally without absolute-positioning collisions. */
.pathway-capsule {
  display: block;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 14px 0 12px auto;
  background: #262626;
  color: #e6e6e6;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.55;
  padding: 6px 10px;
  border-radius: 2px;
  text-align: left;
  user-select: none;
}

.pathway-line {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Right pane × close button. Sits inside the .pane-corner flex container
   next to the corpus capsule, so no manual positioning required. */
.right-close {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  border: 1px solid #c5c5c5;
  background: #fff;
  color: #444;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-close:hover {
  background: #f0e8b0;
  border-color: #a08a30;
}

.article-heading {
  font-size: 22px;
  /* Inside the sticky pane header: a small gap below the capsule cluster,
     no bottom margin (the pane header's own padding handles that). */
  margin: 6px 0 0;
  font-weight: 700;
  line-height: 1.3;
}

/* Article body. Each block from the source is rendered as a <p> so the
   browser handles reflow naturally on window resize. We deliberately do
   NOT use `white-space: pre-wrap` (that would freeze the PDF's hard
   wraps). */
.article-content {
  font-size: 15px;
  line-height: 1.45;
  /* break long unbreakable strings (legal terms, occasional URLs) so they
     wrap inside a narrow pane instead of forcing the column wider. */
  overflow-wrap: break-word;
}


/* Heading too — long article titles in narrow panes should wrap, not push. */
.article-heading {
  overflow-wrap: break-word;
}

.article-content p {
  margin: 0 0 0.55em;
  scroll-margin-top: 112px;  /* deep-link offset clears the sticky pane header */
}

.article-content p.para-num {
  /* "1. Esta ley será…" — top-level numbered paragraph. */
}

.article-content p.para-subnum {
  /* "9.1 Con objeto…" — sub-numbered outline item. A handful of articles
     (e.g. convenio art 9, ET art 16) outline their subsections as N.M
     instead of using a flat 1., 2., … sequence. */
}

.article-content p.para-sub {
  /* "a) La relación de servicio…" — lettered sub-item under the previous
     numbered paragraph. Indented so the hierarchy is visible. */
  padding-left: 1.8em;
  margin-top: -0.25em;  /* tighter coupling to the parent number */
}

.article-content p.para-plain {
  /* Leading prose or paragraph-less dispositions. */
}

/* Bolded outline marker — leads each "num" / "subnum" paragraph as a
   visual hierarchy cue separating the number from the prose. */
.article-content .para-marker {
  font-weight: 700;
}

.article-content mark {
  background: var(--ref-bg);
  padding: 0 2px;
}

/* Cross-reference highlight (matches the .REF style from
   double_pane_style.html for inline "artículo X ET" type spans) */
.REF {
  background: var(--ref-bg);
  padding: 0 3px;
  border-radius: 2px;
}

/* In-wiki cross-references injected by linkifyContent(). Same visual
   language as .REF (yellow highlight) but clickable. */
.article-content a.xref {
  background: var(--ref-bg);
  padding: 0 3px;
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted #6b6320;
  cursor: pointer;
}

.article-content a.xref:hover {
  background: #ffd83d;
  border-bottom-style: solid;
}

/* (paragraph anchors are now the <p id="para-N"> elements themselves;
   the old zero-width <span class="para-anchor"> approach is gone. The
   scroll-margin-top is set in `.article-content p` above.) */

/* Article navigation strip (prev / next at bottom of content) */
.article-nav {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}

.article-nav a {
  color: #1a4a8a;
  text-decoration: none;
  max-width: 45%;
}

.article-nav a:hover {
  text-decoration: underline;
}

.article-nav .nav-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Search matches: render the matched text in the article body */
.match-highlight {
  background: var(--ref-bg);
  font-weight: 600;
}

/* ---------------- BOE-style salary tables ----------------
   Used both inline inside an article (rendered by main.js from a
   [TABLE:slug] placeholder) and in the standalone /data/BOE/tables/*.html
   pages. The look mirrors the BOE original: light gray header band, thin
   1px borders, all cells centered, Helvetica/Arial. */

.boe-table-wrap {
  margin: 1.2em 0;
}

/* Caption above a sub-table — used when a def carries several captioned
   sections (e.g. article 21's kilometraje + dietas tables). */
.boe-table-caption {
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: #1a1a1a;
  margin: 0 0 6px;
}

/* Vertical breathing room when a wrap stacks more than one table. */
.boe-table-wrap .boe-table + .boe-table,
.boe-table-wrap .boe-table + .boe-table-caption {
  margin-top: 1.2em;
}

.boe-table {
  border-collapse: collapse;
  margin: 0 auto;
  font-size: 14px;
  background: #fff;
  width: auto;
  max-width: 100%;
}

.boe-table th,
.boe-table td {
  border: 1px solid #c4c4c4;
  padding: 10px 14px;
  text-align: center;
  vertical-align: middle;
  line-height: 1.3;
}

.boe-table thead th {
  background: #ededed;
  font-weight: 700;
  color: #1a1a1a;
}

.boe-table tbody td {
  background: #fff;
}

/* Standalone table page wrapper (used by /data/BOE/tables/*.html). */
.standalone-table-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 60px;
}

.standalone-table-page h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}

.standalone-table-page .breadcrumb-back {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 13px;
  color: #1a4a8a;
  text-decoration: none;
}

.standalone-table-page .breadcrumb-back:hover { text-decoration: underline; }

.standalone-table-page .source {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 24px;
}

.standalone-table-page .note {
  font-size: 13px;
  color: #333;
  margin: 16px auto 0;
  max-width: 720px;
}

/* Two fixed compartments sit above the scrolling article tree:
     .index-indice  — labels the whole index (just a title)
     .index-tables  — quick-access shortcuts (Convenio salary tables today;
                      contracted to title-only on the Estatuto navigators)
   Both are flex: 0 0 auto so they stay pinned while .index-articles
   scrolls underneath. */
.index-indice {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-bottom: 1px solid var(--index-border);
  background: #1f1f1f;
}

.index-tables {
  flex: 0 0 auto;
  padding: 2px 12px 4px;   /* B22: tightened to give the article tree more height */
  border-bottom: 1px solid var(--index-border);
  background: #f0eedf;
}

.index-tables.empty {
  /* Contracted: title visible, no items, no extra bottom padding. */
  background: #ececec;
  padding: 2px 12px;
}

/* Shared section-title style (used by both ÍNDICE and ACCESO RÁPIDO). */
.index-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #5b4a10;
  margin: 0 0 3px;
}

.index-indice .index-section-title { color: #f0eedf; margin: 0; }
.index-tables.empty .index-section-title { margin: 0; }


.index-tables a {
  display: block;
  padding: 1px 4px;        /* B22: tight item rhythm — short labels, no need for breathing room */
  font-size: 12px;
  line-height: 1.25;       /* B22: tighter than the inherited 1.5 to reclaim interline space */
  color: #1a1a1a;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.index-tables a:hover {
  background: #fff4b8;
  border-left-color: #d4af37;
}

.index-tables a.active {
  background: #fffbd6;
  border-left-color: #d4af37;
  font-weight: 600;
}

/* Standalone table view rendered inside the left Convenio pane
   (URL hash `#table:<slug>`). Origin-article hyperlink sits right under the
   heading so the table is anchored in the doc tree at first sight. */
.table-origin {
  display: inline-block;
  margin: 0 0 22px;
  font-size: 13px;
  color: #1a4a8a;
  text-decoration: none;
  font-weight: 600;
}

.table-origin:hover { text-decoration: underline; }

.article-content .table-note {
  font-size: 13px;
  color: #333;
  margin-top: 1em;
}

/* Hamburger button — hidden on desktop, shown only at the phone breakpoint.
   3 stacked bars (no SVG/icon font to keep the SPA dependency-free). */
.menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  border: 1px solid #444;
  border-radius: 3px;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 1px;
}

.menu-toggle:hover { background: #1f1f1f; }

/* ---------------- Footer ----------------
   Short band spanning the full page width: load timestamp on the left,
   product name on the right. */
.app-footer {
  grid-column: 1 / -1;
  grid-row: 3;
  background: var(--header-bg);
  color: #8a8a8a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 11px;
  letter-spacing: 0.4px;
  border-top: 1px solid #000;
}

.app-footer .footer-brand {
  color: #cfcfcf;
  font-weight: 600;
  letter-spacing: 1.5px;
}

.app-footer .footer-time {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  :root { --tabs-w: 130px; --index-w: 220px; }
  .tab-entry { padding: 10px 10px; font-size: 11px; }
  /* Narrower tabs column → tighten the title block to fit (it still spans
     --tabs-w so the search bar stays aligned with the index). */
  .title-block { padding-left: 14px; }
  .title-block strong { font-size: 15px; }
  .title-block .subtitle { display: none; }
}

@media (max-width: 800px) {
  :root {
    --tabs-w: 110px;
    --index-w: 200px;
    --pane-pad-x: 20px;
    --pane-pad-y: 16px;
  }
  .pane-body { padding-bottom: 60px; }
  .title-block strong { font-size: 13px; }
}

/* ============================ Phone breakpoint =============================
   Restructure the 4-column desktop grid into a stacked single-column layout:
     row 1: app header (with hamburger)
     row 2: horizontal-scrolling tabs strip
     row 3: content (full width)
     row 4: footer
   The index becomes an off-canvas drawer toggled by the hamburger button.
   In split mode the right pane replaces the left (only the most recent hop
   is visible) — × close brings the left pane back. */
@media (max-width: 720px) {
  :root {
    --header-h: 48px;
    --tabs-w: 0;
    --index-w: 0;
    --pane-pad-x: 14px;
    --pane-pad-y: 14px;
  }

  .app,
  .app[data-split="1"] {
    grid-template-rows: var(--header-h) 40px 1fr var(--footer-h);
    grid-template-columns: 1fr;
  }

  .app-footer { grid-row: 4; }

  /* Header: hamburger + title + search, tight. */
  .sticky-header {
    grid-row: 1;
    grid-column: 1;
    padding: 0 10px;
    gap: 10px;
  }
  .menu-toggle { display: flex; }
  /* Phone: title goes back to natural width next to the hamburger. */
  .title-block { min-width: 0; flex: 0 1 auto; padding-left: 0; }
  .title-block strong { font-size: 14px; letter-spacing: 0.5px; }
  .title-block .subtitle { display: none; }
  .search-wrap { flex: 1 1 auto; justify-content: flex-end; }
  #search-input { width: 100%; max-width: 180px; }
  .search-count { display: none; }

  /* Tabs row: horizontal scroll strip below the app header. The active tab
     gets a bottom border (gold) instead of the desktop left-border accent. */
  .tabs-pane {
    grid-row: 2;
    grid-column: 1;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    border-right: none;
    border-bottom: 1px solid #111;
    height: 40px;
  }
  .tab-entry {
    flex: 0 0 auto;
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 9px 14px;
    font-size: 11px;
  }
  /* Mobile tab strip is 40 px tall, so the BOE-id subtitle is hidden;
     the active tab + its corpus capsule in the pane header carry the
     same info on phones. */
  .tab-entry .tab-sub { display: none; }
  .tab-entry.active {
    border-left-color: transparent;
    border-bottom-color: #d4af37;
  }

  /* Index: off-canvas drawer. Hidden by default; slides in from the left
     when `.app[data-index-open="1"]` is set (hamburger click). A backdrop
     overlay catches taps outside the drawer to close it. */
  .index-pane {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 84vw;
    max-width: 320px;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    box-shadow: 4px 0 14px rgba(0,0,0,0.35);
    grid-column: unset;
    grid-row: unset;
  }
  .app[data-index-open="1"] .index-pane { transform: translateX(0); }

  .app[data-index-open="1"]::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 50;
  }

  /* Content takes full width. In split mode show only the latest hop
     (right pane replaces left); × closes the right pane back to the left. */
  .content-pane {
    grid-row: 3;
    grid-column: 1;
  }
  .pane-body { padding-bottom: 60px; }
  .app[data-split="1"] .left-pane  { display: none; }
  .app[data-split="1"] .right-pane { grid-column: 1; }
  .right-pane { border-left: none; }

  /* Article content: smaller heading, tighter line-height. */
  .article-heading { font-size: 18px; margin: 6px 0 0; }
  .article-content { font-size: 14px; }

  /* Tables get a horizontal scroll on phones to keep them readable
     without forcing tiny text. */
  .boe-table-wrap { overflow-x: auto; }
}