/* Bare-page layout — for the games and explainers.
 *
 * ===========================================================================
 * Why these pages do not use the standard .wrap
 * ===========================================================================
 *
 * Every game centres itself with `body { display:flex; align-items:center }`
 * and carries its own `.wrap` at its own max-width — 480px for Fire Drill
 * Bingo, wider for others. Dropping that inside page_head's `.wrap` would nest
 * two elements of the same class with competing max-widths, and the outer
 * `margin:0 auto` would fight the body's flex centring.
 *
 * So these pages keep their own body markup untouched, and this file supplies
 * only the scaffolding needed to hang shared chrome off it:
 *
 *     body.page-bare        flex column, full height
 *       > .rl-stage         flex:1, centres the page's own content
 *       > .rl-foot          sits below, out of the way
 *
 * The page's original vertical centring survives — it now happens inside
 * .rl-stage instead of on the body. The footer is new: the source files had
 * none at all, so the "not affiliated with the EU" disclaimer appeared on the
 * hub and nowhere else.
 *
 * LOAD ORDER MATTERS. This file is emitted AFTER assets/css/page/<slug>.css,
 * so it overrides the page's own `body` rule without needing !important. If you
 * move it earlier, every game's layout breaks and it will not be obvious why.
 */

body.page-bare {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}

/* Where the page's own content lives. Inherits the centring the body used to do. */
body.page-bare > .rl-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 20px 30px;
  min-width: 0;   /* lets wide children scroll rather than blow out the page */
}

/* A page that is a long document rather than a single centred panel — the nine
   explainers — already handles its own width and padding on `.wrap`
   (max-width:1000px; margin:0 auto; padding:20px 14px 50px) and never centred
   vertically. For those the stage is a plain block that adds nothing, so the
   layout is byte-for-byte what it was before the migration. */
body.page-bare.page-flow > .rl-stage {
  display: block;
  padding: 0;
}

body.page-bare > .rl-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line-dim);
  padding: 13px 20px 18px;
  font-size: 10px;
  color: var(--ink-dim);
  line-height: 1.7;
}

body.page-bare > .rl-foot .inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
}

body.page-bare > .rl-foot a { color: var(--line); text-decoration: none; }
body.page-bare > .rl-foot a:hover { text-decoration: underline; }
body.page-bare > .rl-foot .sep { opacity: .4; }
body.page-bare > .rl-foot .disclaimer { flex: 1; min-width: 240px; opacity: .8; }

/* Back to the section index. Deliberately quiet — on a game page the game is
   the point, and nineteen of these pages previously had no way back at all.
   ------------------------------------------------------------------------
   ALWAYS in the flow, never absolute.
   ------------------------------------------------------------------------
   The first attempt positioned it absolutely in the top-left, on the reasoning
   that a centred game leaves that corner empty. It does not, reliably:
   measured on Fire Drill Bingo at an 800px viewport, the 480px panel is
   centred from x=66 and the link runs to x=91, so they overlapped by 25px. The
   document pages were worse — their content starts at the very top left with
   an eyebrow label, directly under it.

   Fixing that with two behaviours (absolute for games, static for documents)
   meant two ways for it to go wrong and two things to check. One behaviour
   that costs a line of vertical space is the better trade. */
/* Appearance is in base.css, shared with .back on the framed pages. What is
   left here is placement, which is the part that is specific to a bare page. */
.rl-back {
  /* The body is a flex column with align-items:stretch, which blockifies a
     flex item and stretches it to full width — measured 597px for a 75px
     text link, rendering the border as a huge empty box. Shrink to content. */
  align-self: flex-start;
  margin: 14px 0 0 16px;
}

/* Documents already have generous top padding of their own, so close the gap. */
body.page-bare.page-flow > .rl-back { margin-bottom: -8px; }

/* A centred game loses the link's height from the space it centres within,
   which is what keeps the panel from shifting under it. */
body.page-bare:not(.page-flow) > .rl-stage { padding-top: 8px; }

/* --- Room for the pinned bar -----------------------------------------------
 *
 * This has to be here rather than in components.css. Twenty-six page
 * stylesheets set their own `body` padding — a CSS Pass A leftover, since each
 * source file had its own body rule — and every one of them loads after
 * components.css. A reservation there would be overridden on over half the
 * site and the bar would sit on top of the content.
 *
 * bare.css is the file that already exists to win that argument: it is loaded
 * AFTER the page stylesheet on purpose. Same reason the body background rule
 * lives here.
 * ------------------------------------------------------------------------- */
body.page-bare { padding-bottom: 52px; }

/* The stage centres the page's content in what is left, so it has to know the
   bar is there too — otherwise a centred game is centred in a viewport that
   includes 74px it cannot use, and sits slightly high. */
body.page-bare > .rl-stage { min-height: 0; }