/* Mobile overflow guards.
 *
 * These pages were built desktop-first: wide data tables and link rows go
 * straight into the flow with nothing stopping them widening the document, so
 * on a phone the whole page scrolls sideways and the body text is cut off.
 * Loaded last on every page, so it wins over the inline styles above it.
 */
@media (max-width: 760px) {

  /* A wide table should scroll inside its own box, not drag the page with it. */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Flex rows of links that were never given permission to wrap. */
  .nav-links,
  .footer-links,
  .breadcrumbs,
  .tab-row,
  .chips {
    flex-wrap: wrap;
  }

  /* Nothing embedded should be able to exceed the screen. */
  img, svg, canvas, video, iframe, pre {
    max-width: 100%;
  }
  pre { overflow-x: auto; }

  /* Long unbroken strings (URLs, ARNs, figures) in body copy. */
  p, li, td, th, dd { overflow-wrap: anywhere; }

  /* Grid and flex children default to min-width:auto, so one wide child (a
     chart, a table) forces its track wider than the screen rather than
     scrolling inside it. */
  .layout, .panel, .results, .main-content, .input-panel, .card, .col, .content {
    min-width: 0;
  }
  .layout { grid-template-columns: minmax(0, 1fr); }

  /* Decorative watermark, deliberately hung past the right edge at 4% opacity.
     Its container does not clip it, so on a phone it is the only thing making
     the page scroll sideways. */
  .hero-wm { display: none; }

  /* The research-paper header is a nowrap flex row: a 348px brand plus its
     links needs 453px, which does not fit a phone. */
  .topnav { flex-wrap: wrap; }
  .nav-brand { min-width: 0; }

  /* Form controls carry an intrinsic size (the `size` attribute) that a grid
     track will happily grow to accommodate. */
  input, select, textarea, button { max-width: 100%; min-width: 0; }

  /* A three-column input grid whose tracks are sized from content: 113+114+146
     plus gaps does not fit 390px. One column on a phone. */
  .input-grid { grid-template-columns: 1fr; }
  .ig, .input-grid > * { min-width: 0; }
}


/* ------------------------------------------------------------------
 * Header: the "Sign in" call to action and the Programmes submenu.
 *
 * Loaded after styles.css and unversioned, so it needs no cache-bust
 * across the ~140 pages that link it.
 * ------------------------------------------------------------------ */

/* The button had no `white-space` of its own, so in a crowded nav bar
 * "Sign in" broke across two lines and the pill inflated into a navy
 * disc taller than every other item. Small, level and unbreakable. */
.nav .navcta {
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(14, 26, 64, .18);
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.nav .navcta:hover {
  background: var(--red);
  box-shadow: 0 6px 16px rgba(200, 32, 46, .28);
  transform: translateY(-1px);
}

/* Below the burger breakpoint the submenu stacks and its items run the
 * full width of the panel. The programme titles are long enough to
 * overflow a narrow phone, and .submenu a is nowrap for the desktop
 * dropdown's benefit — so let them wrap once they are stacked. */
@media (max-width: 1100px) {
  .nav .submenu a {
    white-space: normal;
    line-height: 1.4;
  }
}

/* ------------------------------------------------------------------
 * Session-aware nav (see js/nav-session.js).
 *
 * Members' menus are hidden by default and revealed by .is-member on
 * <html>. Hiding is the DEFAULT so that a visitor with JavaScript off,
 * or before the script runs, sees the public nav rather than a menu
 * full of pages they cannot open. Fails closed, cosmetically.
 *
 * This hides menu LABELS. It is not the access control — that is
 * nginx auth_request, and it is unaffected by anything here.
 * ------------------------------------------------------------------ */
.nav .members-only { display: none; }

html.is-member .nav .menu-item.members-only { display: flex; }
html.is-member .nav a.members-only { display: block; }
html.is-member .nav .public-only { display: none; }

/* ------------------------------------------------------------------
 * The TBC Program trigger is an <a>, not a <button>.
 *
 * Clicking it opens the manifesto page; hovering still drops the
 * submenu, because the dropdown is pure CSS on .menu-item:hover and
 * never cared what the trigger element was.
 *
 * Being an anchor, it picks up two things from `.nav nav a` that its
 * <button> siblings do not: the underline that sweeps out on hover,
 * and 4px of vertical padding. Both are undone here so the trigger
 * sits level with the rest of the row and does not grow an underline
 * the other menus have no way to show.
 *
 * The padding is undone only above the burger breakpoint. Below it
 * every nav item becomes a full-width row with real padding, and
 * removing it there would collapse this one line to nothing.
 * ------------------------------------------------------------------ */
.nav nav a.menu-trigger::after { display: none; }

@media (min-width: 1101px) {
  .nav nav a.menu-trigger { padding: 0; }
}

/* ── the copy editor ────────────────────────────────────────────────────────
   ✎ Edit copy, on the pages that carry it. The markup has existed on five
   pages since the site was built and had NO styling anywhere: the button
   rendered as a bare browser button below the footer, and #ed-bar toggles an
   .on class that nothing defined, so the "Edit mode on" bar was on screen
   permanently whether or not anyone was editing.

   These rules live here rather than in styles.css because styles.css is
   cache-busted with ?v= on ~45 pages and this file is not — so the fix reaches
   every page that already loads it without touching any of them. */
#ed-toggle{position:fixed;right:18px;bottom:18px;z-index:2147482000;
  font:600 13px/1 'DM Sans',system-ui,sans-serif;color:#fff;cursor:pointer;
  background:#16265C;border:1px solid #16265C;border-radius:999px;padding:11px 18px;
  box-shadow:0 4px 16px rgba(14,26,64,.22);transition:background .15s,transform .1s}
#ed-toggle:hover{background:#0E1A40}
#ed-toggle:active{transform:translateY(1px)}

#ed-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:2147482001;
  align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 18px;background:#16265C;color:#fff;
  font:500 13px/1.4 'DM Sans',system-ui,sans-serif;
  box-shadow:0 -4px 18px rgba(14,26,64,.20)}
#ed-bar.on{display:flex}
#ed-bar span{flex:1 1 260px}
#ed-bar b{font-weight:700}
#ed-bar button{font:600 12.5px/1 'DM Sans',system-ui,sans-serif;cursor:pointer;
  background:#fff;color:#16265C;border:1px solid #fff;border-radius:999px;padding:9px 15px}
#ed-bar button.sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
#ed-bar button:hover{opacity:.88}

/* Something has to show which text is editable, or "click any text" is a
   guess. Only while editing. */
body.editing .ed{outline:1px dashed rgba(200,32,46,.55);outline-offset:3px;border-radius:3px}
body.editing .ed:focus{outline:2px solid #C8202E;background:rgba(200,32,46,.04)}
body.editing{padding-bottom:76px}

@media print{#ed-toggle,#ed-bar{display:none!important}}