/* ---------------------------------------------------------------------------
   bbo-doc.css - the shared look for the teaser site's DOCUMENT pages
   ---------------------------------------------------------------------------
   Used by privacy.html, cookies.html and choices.html, and by their generated
   Spanish counterparts under /es/.

   WHY ONE FILE AND NOT ONE BLOCK PER PAGE
   The six teasers and the lobby each carry their own CSS on purpose - they are
   six different designs, and that is the point of them. The document pages are
   the opposite: they are the same document, and when the same thing was copied
   per page in this codebase it drifted every single time (the four event lists,
   the autosave partials, the two halves of the fee toggle). Three legal pages
   that quietly stop matching each other is a worse outcome than one extra
   request, and the stylesheet is 4 KB behind the same CDN as the pages.

   The palette and type were lifted from 05-fine-print.html, the one teaser that
   already reads as a document, so these pages are unmistakably part of the same
   site. Deliberately the LIGHT paper ground rather than the lobby's dark one:
   these are pages of prose, and the lobby palette is built for a theatre at
   night, not for reading.

   ⚠ Page-specific rules stay in that page's own small <style> block, not here.
   Anything added here lands on every legal page, including the live privacy
   policy.

   The rules below are the privacy page's original block, moved verbatim.
--------------------------------------------------------------------------- */
:root{
  --paper:#eef4fb;
  --ink:#091525;
  --rule:#0d1d31;
  --deep:#4069B2;
  --cyan:#2FACDD;
  --mute:#637a96;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:'Libre Franklin',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}

/* Header is in the normal flow, not fixed. The teasers pin their brand lockup and only unpin it
   below 1180px; on a long scrolling document a fixed overlay would sit on the text the whole way
   down, so it is static here by design. */
.top{max-width:min(92vw,980px);margin:0 auto;padding:1.4rem 0 .9rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.site-brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);padding:.35rem .5rem;margin-left:-.5rem;border-radius:10px;transition:background .2s}
.site-brand:hover,.site-brand:focus-visible{background:rgba(127,176,230,.14)}
.site-brand img{width:34px;height:34px;border-radius:8px;display:block}
.site-brand .bt{display:flex;flex-direction:column;line-height:1.05}
.site-brand .bt b{font-weight:700;font-size:.92rem;letter-spacing:-.01em}
.site-brand .bt span{font-size:.62rem;letter-spacing:.02em;opacity:.7}
.bbo-tm{font-size:.55em;vertical-align:super;line-height:0;letter-spacing:0}
.explore-more{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-size:.74rem;font-weight:500;color:var(--ink);opacity:.82;padding:.3rem .7rem;border:1px solid currentColor;border-radius:999px;transition:opacity .2s,background .2s}
.explore-more:hover,.explore-more:focus-visible{opacity:1;background:rgba(127,176,230,.16)}
.explore-more .arw{font-size:.8rem;line-height:1}

.sheet{max-width:min(92vw,980px);margin:0 auto;padding:0 0 4rem}
.masthead{border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.1rem 0 .9rem;margin-bottom:1.8rem}
h1{font-family:'Libre Franklin';font-weight:900;font-size:clamp(2rem,6vw,3.4rem);line-height:.96;letter-spacing:-.03em}
.updated{margin-top:.5rem;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

/* Reading column narrower than the masthead - long prose wants ~65 characters, the rules above
   want the full sheet width. */
.body{max-width:68ch}
.body p{font-family:'Newsreader',Georgia,serif;font-size:1.02rem;line-height:1.62;margin-bottom:1rem}
.body p.lead{font-size:1.14rem;color:#1b2b40}
h2{font-family:'Libre Franklin';font-weight:900;font-size:1.02rem;letter-spacing:.02em;text-transform:uppercase;margin:2.4rem 0 .2rem;padding-top:.9rem;border-top:1px solid var(--line,#c4d6ea);color:var(--deep)}
h2 .n{color:var(--cyan);margin-right:.5rem}
.body ul{list-style:none;margin:.4rem 0 1.1rem}
.body li{font-family:'Newsreader',Georgia,serif;font-size:1.02rem;line-height:1.6;padding-left:1.1rem;margin-bottom:.6rem;position:relative}
.body li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%;background:var(--cyan)}
.body li b,.body p b{font-family:'Libre Franklin';font-weight:600;font-size:.94em}
code{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:.86em;background:rgba(64,105,178,.1);padding:.08em .32em;border-radius:4px}
a{color:var(--deep)}
a:hover{color:var(--cyan)}
.addr{font-family:'Libre Franklin';font-size:.92rem;line-height:1.5;color:#1b2b40}
.foot{margin-top:3rem;padding-top:1rem;border-top:3px solid var(--rule);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot a{color:var(--mute);text-decoration:none}
.foot a:hover{color:var(--deep)}
@media(max-width:560px){
  .site-brand .bt{display:none}
  .body p,.body li{font-size:1rem}
}

/* ---- language switcher ---------------------------------------------------------------------
   Styled with currentColor only, so one block works on all six teaser palettes plus the lobby,
   the privacy page and the confirmation page without knowing any of their variables.
   position:absolute, not fixed: it is a one-time choice, and a fixed pill would track the reader
   down the page and sit over the copy. The Spanish counterpart is generated by
   teasers\tools\make-es.ps1 - never hand-edit teasers\es\*. */
.lang-switch{position:absolute;top:1.1rem;right:1.1rem;z-index:60;display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;letter-spacing:.08em;line-height:1}
.lang-switch a{color:inherit;text-decoration:none;opacity:.55;padding:.15rem}
.lang-switch a:hover{opacity:.9}
.lang-switch a[aria-current="true"]{opacity:1;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.lang-switch .bar{width:1px;height:.8em;background:currentColor;opacity:.3;display:inline-block}