/* Phones, upright tablets and small windows (website only). Where the 1920 x 1080 cabinet would be
   shown at under half size, js/app.js puts .fluid on <html> and the panels are laid out at their
   real size instead, like a phone app. The screen doesn't scroll as a whole:
   - .phone-top, always on screen: a title bar (title, and a menu button for the four sections),
     the timeline as a straight tuning scale with the date and count, the map, and the controls;
   - .phone-scroll, the rest of the screen, scrolling: the story, then a footer linking to the
     Dock Museum.
   Held sideways, the title bar, timeline and controls take the left and the map sits on the right.
   The round dial (too big for a phone) isn't shown. The library and installation never use this. */

.menu-btn, .zone-strip, .phone-footer, .nav-extra { display: none; }
/* index.html is grouped as this layout needs; for the cabinet the groups have no box of their own. */
html:not(.fluid) .phone-top, html:not(.fluid) .phone-scroll, html:not(.fluid) .phone-bar { display: contents; }
/* For the cabinet the title and the date box wait for js/app.js to put them on the map. */
html:not(.fluid):not(.arranged) .cartouche, html:not(.fluid):not(.arranged) .map-readout { visibility: hidden; }
html.fluid .zone-dial, html.fluid .ctrl-fullscreen { display: none; }

html.fluid {
  --pad: 10px;
  --bar-h: 56px;
  /* The map keeps its drawn shape (1176 x 1032), leaving at least about 170 px below the controls
     for the story. svh: the height with the browser's bars showing, so it doesn't change size as
     they slide away. */
  --map-h: min(calc((100vw - 2 * var(--pad)) * 1032 / 1176), max(220px, calc(100svh - 390px)));
  --map-w: calc(var(--map-h) * 1176 / 1032);
}
/* Upright tablets: room for the whole story card under the map. */
@media (min-width: 600px) {
  html.fluid { --map-h: min(calc((100vw - 2 * var(--pad)) * 1032 / 1176), max(220px, calc(100svh - 490px))); }
}
html.fluid, html.fluid body { height: 100%; overflow: hidden; }

html.fluid body #stage {
  transform: none;
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  box-shadow: none;
}
/* z-index: each panel keeps its glass and shadows to itself. */
html.fluid .zone { position: relative; z-index: 0; left: auto; top: auto; width: auto; height: auto; }

html.fluid .phone-top {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--pad);
  padding: 0 var(--pad) var(--pad);
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.55);
}
html.fluid .phone-scroll {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pad);
  padding: var(--pad) var(--pad) 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* On an upright tablet, the panels don't stretch to the edges. */
html.fluid .phone-scroll > .zone, html.fluid .zone-controls { width: min(100%, 680px); align-self: center; }

/* ---------- Title bar ---------- */
html.fluid .phone-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--bar-h);
  margin: 0 calc(-1 * var(--pad));
  padding: 0 14px 0 var(--pad);
  background: rgba(248, 238, 214, 0.96);
  border-bottom: 2px solid var(--ink);
  box-shadow: 0 1px 0 rgba(43, 29, 16, 0.4), 0 3px 8px rgba(0, 0, 0, 0.35);
}
html.fluid .cartouche {
  position: static;
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 10px;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  outline: 0;
  box-shadow: none;
}
html.fluid .cartouche-small { grid-column: 1 / -1; font-size: 9px; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.fluid .cartouche h1 { margin: 0; font-size: 27px; white-space: nowrap; }
html.fluid .cartouche-years { margin: 0; font-size: 12px; letter-spacing: 0.12em; white-space: nowrap; }
/* Narrow phones: the title shrinks so the years don't run under the menu button (Pixel 3a, 393 px),
   and on the narrowest the years go (the date is on the map). */
html.fluid .cartouche { overflow: hidden; }
@media (max-width: 430px) {
  html.fluid .cartouche h1 { font-size: 23px; }
  html.fluid .cartouche-years { font-size: 11px; letter-spacing: 0.08em; }
}
@media (max-width: 359px) {
  html.fluid .cartouche-years { display: none; }
}

html.fluid .menu-btn {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
}
/* Three bars, turning into a cross while the menu is open. */
.menu-icon, .menu-icon::before, .menu-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s, background-color 0.2s;
}
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
html.menu-open .menu-icon { background-color: transparent; }
html.menu-open .menu-icon::before { transform: translateY(6px) rotate(45deg); }
html.menu-open .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Menu: the section buttons, dropped down over the map ---------- */
html.fluid .zone-nav {
  position: absolute;
  z-index: 20;
  top: var(--bar-h);
  left: 0; /* under the menu button, top left */
  width: min(100%, 320px);
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #3b2412 url('../images/walnut.webp') center / cover;
  border-radius: 0 0 10px 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}
html.fluid.menu-open .zone-nav { display: flex; }
html.fluid .nav-btn { flex: none; min-height: 50px; padding: 8px 16px; font-size: 17px; text-align: left; }
/* Below the four sections: full screen (where the phone allows it) and the Museum's website. */
html.fluid .zone-nav { max-height: calc(100svh - var(--bar-h)); overflow-y: auto; }
html.fluid .nav-extra {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  background: none;
  box-shadow: inset 0 1px 0 rgba(243, 227, 189, 0.25);
  border-radius: 0;
}
html.fluid .nav-extra[hidden] { display: none; }
html.fluid #nav-fullscreen { margin-top: 4px; }
html.fluid .nav-museum { color: #f3e3bd; text-decoration: none; }
html.fluid .nav-museum::after { content: '\2197'; margin-left: auto; padding-left: 10px; font-family: system-ui, sans-serif; }

/* ---------- Map ---------- */
html.fluid .zone-map { align-self: center; width: var(--map-w); height: var(--map-h); }
/* Small zoom buttons: on a phone most people pinch, and they sit over the map. */
html.fluid .map-zoom { left: 6px; top: 6px; gap: 6px; }
html.fluid .map-zoom-btn { width: 34px; height: 34px; font-size: 20px; }
html.fluid .map-zoom-btn.zoom-all { font-size: 16px; }
html.fluid .map-credit { font-size: 10px; left: 4px; bottom: 3px; }

/* ---------- Timeline: a lit tuning window, the date and count above a straight scale ---------- */
html.fluid .zone-strip {
  display: block;
  flex: none;
  align-self: center;
  width: calc(var(--map-w) - 8px);
  overflow: visible;
  margin: 4px 4px 0;
  border-radius: 10px;
  box-shadow:
    0 0 0 2px var(--brass-dark),
    0 0 0 4px var(--brass-light),
    0 0 0 5px var(--brass-mid),
    0 3px 8px 5px rgba(0, 0, 0, 0.4);
  background: radial-gradient(ellipse at 50% 120%, #3d2709, #160d05 70%);
}
html.fluid .zone-strip .map-readout {
  position: static;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: auto;
  padding: 4px 12px 3px;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
html.fluid .readout-date { font-size: 15px; white-space: nowrap; }
html.fluid .readout-line { margin: 0; font-size: 14px; white-space: nowrap; }
/* The scale shows when it's after the war; no room for the words too. */
html.fluid .readout-phase { display: none; }
html.fluid #readout-count { font-size: 15px; }

html.fluid #strip { padding: 0 6px 6px; border-radius: 0 0 10px 10px; }
html.fluid .strip-scale {
  position: relative;
  height: 40px;
  border-radius: 5px;
  background: radial-gradient(ellipse at 50% 30%, #fff3d6, #ecd9ae 75%, #c9ad78);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  touch-action: none;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
}
html.fluid .strip-band, html.fluid .strip-progress { position: absolute; top: 26px; height: 5px; background: rgba(43, 29, 16, 0.22); }
html.fluid .strip-band.after { background: rgba(43, 29, 16, 0.4); }
html.fluid .strip-band.unknown { background: rgba(43, 29, 16, 0.55); }
html.fluid .strip-progress { left: 0; background: var(--poppy); }
html.fluid .strip-tick { position: absolute; top: 22px; width: 1px; height: 9px; background: rgba(43, 29, 16, 0.55); }
html.fluid .strip-tick.year { top: 15px; width: 2px; height: 22px; margin-left: -1px; background: var(--ink); }
html.fluid .strip-tick.armistice { top: 13px; width: 2px; height: 25px; margin-left: -1px; background: #8a0d14; }
html.fluid .strip-year {
  position: absolute;
  top: 3px;
  transform: translateX(-50%);
  font: 700 12px/1 "Cinzel", serif;
  color: var(--ink);
}
html.fluid .strip-end {
  position: absolute;
  top: 4px;
  text-align: center;
  font: italic 11px/1 "EB Garamond", serif;
  color: var(--ink-soft);
}
html.fluid .strip-needle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: #b8121b;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
html.fluid #strip:focus-visible { outline: none; }
html.fluid #strip:focus-visible .strip-scale { outline: 3px solid #ffe7b0; outline-offset: 1px; }

/* ---------- Controls ---------- */
/* container: the Start again button drops its words where the row is narrow (420 px: sideways on a
   Pixel 3a the row was wider than its column and the end buttons were cut off). */
html.fluid .zone-controls { container-type: inline-size; gap: 8px; }
html.fluid .controls-main { gap: 8px; }
html.fluid .ctrl-start { height: 46px; padding: 0 14px; font-size: 14px; gap: 6px; }
html.fluid .start-icon { font-size: 15px; }
html.fluid .arrow-icon { width: 24px; height: 24px; }
html.fluid .ctrl-arrow { width: 46px; height: 46px; font-size: 17px; }
html.fluid .ctrl-play { min-width: 128px; padding: 12px 18px 12px 14px; font-size: 18px; gap: 8px; }
@container (max-width: 420px) {
  html.fluid .ctrl-start { width: 46px; padding: 0; justify-content: center; }
  html.fluid .start-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Story ---------- */
/* A fixed height, so the dial below doesn't jump as the stories change. */
html.fluid .zone-stories { flex: none; height: 252px; }
html.fluid .story { gap: 14px; padding: 14px 14px 12px; }
html.fluid .story-photo { flex-basis: 108px; }
html.fluid .story-photo img { width: 108px; height: 124px; border-width: 4px; }
html.fluid .story-photo figcaption { margin-top: 130px; font-size: 12px; line-height: 1.2; }
html.fluid .photo-count { font-size: 10px; }
html.fluid .story-rank { font-size: 11px; }
html.fluid .story-name { margin-bottom: 6px; font-size: 20px; }
html.fluid .story-facts { gap: 1px 8px; font-size: 15px; line-height: 1.2; }
html.fluid .story-facts dt { font-size: 9px; line-height: 1.95; }
html.fluid .story-notes { margin-top: 6px; font-size: 14px; line-height: 1.25; }
html.fluid .story-position { padding-top: 4px; font-size: 10px; }
html.fluid .story-intro { padding: 14px 18px; }
html.fluid .story-intro .story-kicker { margin-bottom: 4px; font-size: 11px; }
html.fluid .story-intro h2 { margin-bottom: 10px; font-size: 24px; }
html.fluid .story-intro .story-lead { margin-bottom: 10px; font-size: 19px; }
html.fluid .story-intro .story-hint { font-size: 15px; }

/* ---------- Footer: the Dock Museum, under the story ---------- */
html.fluid .phone-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(100%, 680px);
  align-self: center;
  margin-top: 6px;
  padding: 14px 12px 6px;
  text-align: center;
  color: #f3e3bd;
  font-size: 16px;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
html.fluid .phone-footer p { margin: 0; }
html.fluid .phone-footer-logo {
  width: 56px;
  height: 56px;
  background: #f3e3bd;
  -webkit-mask: url('../images/dock-museum-logo.svg') center / contain no-repeat;
  mask: url('../images/dock-museum-logo.svg') center / contain no-repeat;
}
/* The links: plain text, underlined in brass, with a small "opens elsewhere" arrow (user, 9 Nov:
   the Museum's link as a button looked like one of the app's own controls). */
html.fluid .phone-footer-link,
html.fluid .phone-footer-credit a {
  color: #f3e3bd;
  text-decoration: underline;
  text-decoration-color: rgba(214, 178, 108, 0.75);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
html.fluid .phone-footer-link::after,
html.fluid .phone-footer-credit a::after {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.35em;
  vertical-align: -0.02em;
  background: currentColor;
  -webkit-mask: var(--icon-leave) center / contain no-repeat;
  mask: var(--icon-leave) center / contain no-repeat;
}
html.fluid {
  /* A box with an arrow leaving it. */
  --icon-leave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 9.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h3.5'/%3E%3Cpath d='M9.5 2H14v4.5M14 2 7.5 8.5'/%3E%3C/svg%3E");
}
html.fluid .phone-footer-link:hover,
html.fluid .phone-footer-credit a:hover { color: #fff6dc; text-decoration-color: currentColor; }
html.fluid .phone-footer-link:focus-visible,
html.fluid .phone-footer-credit a:focus-visible { outline: 2px solid #ffe7b0; outline-offset: 3px; border-radius: 2px; }
/* The Museum's link: the footer's main call, in the lettering of the app's headings, with room
   for a finger. */
html.fluid .phone-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 700 15px/1.2 "Cinzel", serif;
  letter-spacing: 0.04em;
}
html.fluid .phone-footer-credit { font-size: 13px; opacity: 0.85; }

/* Sideways, the left-hand column is at least this wide (phones: see .compact below). */
@media (min-aspect-ratio: 4/3) {
  html.fluid { --side-min: 360px; }
}

/* ---------- Held sideways (tablets, not phones): .side, set by js/app.js ----------
   Map on the right, pinned to the top, with the title and the date on it as on the cabinet. On
   the left, one column: the section buttons, the timeline strip, the controls, the story (taking
   whatever height is left) and a short footer.
   Spacing: one gap (--g) between the screen's edge and everything, between the column and the
   map, and between each box in the column. Every box sits in by the width of its own brass rim
   (--ring-*), so the rims, not the boxes inside them, line up left and right and the gaps between
   rims are all equal. */
html.fluid.tablet {
  --g: 14px;
  --ring-btn: 3px;   /* nav and control buttons */
  --ring-strip: 5px; /* the tuning strip */
  --ring-zone: 7px;  /* map and story windows */
}
html.fluid.side {
  --side-w: clamp(360px, 32vw, 440px);
  /* The map: as wide as the screen allows beside the column, but no taller than the screen. */
  --map-h: min(calc((100vw - var(--side-w) - 3 * var(--g) - 2 * var(--ring-zone)) * 1032 / 1176),
               calc(100svh - 2 * var(--g) - 2 * var(--ring-zone)));
}
/* The page itself scrolls if the column is ever taller than the screen; the map stays put. */
html.fluid.side, html.fluid.side body { height: auto; overflow: visible; }
html.fluid.side body { overflow-x: hidden; }
html.fluid.side body #stage {
  display: grid;
  grid-template-columns: minmax(var(--side-w), 1fr) auto;
  grid-template-rows: auto auto auto minmax(250px, 1fr) auto;
  gap: var(--g);
  min-height: 100svh;
  height: auto;
  padding: var(--g);
}
html.fluid.side .phone-top,
html.fluid.side .phone-scroll { display: contents; }
html.fluid.side .phone-bar,
html.fluid.side .menu-btn { display: none; }

/* Each box's margin = its rim, so rims line up with the column's edges. */
html.fluid.side .zone-nav { grid-column: 1; grid-row: 1; }
html.fluid.side .zone-strip { grid-column: 1; grid-row: 2; width: auto; align-self: stretch; margin: var(--ring-strip); }
html.fluid.side .zone-controls { grid-column: 1; grid-row: 3; width: auto; align-self: stretch; margin: var(--ring-btn); }
html.fluid.side .zone-stories { grid-column: 1; grid-row: 4; width: auto; height: auto; align-self: stretch; margin: var(--ring-zone); }
html.fluid.side .phone-footer { grid-column: 1; grid-row: 5; width: auto; align-self: stretch; margin: 0; }
html.fluid.side .zone-map {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  justify-self: start;
  position: sticky;
  top: calc(var(--g) + var(--ring-zone));
  margin: var(--ring-zone);
}

/* Tablets, sideways and upright (.tablet): what the two layouts share.
   Section buttons: always on show, in a row (no menu to find). Short labels; "Interactive map"
   left out, as Start again and every panel's "Back to the map" do its job. */
html.fluid.tablet .zone-nav {
  position: static;
  display: flex;
  flex-direction: row;
  gap: calc(var(--g) - 2 * var(--ring-btn));
  width: auto;
  max-height: none;
  margin: var(--ring-btn);
  padding: 0;
  overflow: visible;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
html.fluid.tablet #nav-map,
html.fluid.tablet .nav-extra,
html.fluid.tablet .nav-long { display: none; }
html.fluid.tablet .nav-btn {
  flex: 1 1 0;
  min-height: 52px;
  padding: 6px 8px;
  font-size: 16px;
  line-height: 1.1;
  text-align: center;
}
html.fluid.tablet #nav-roll { flex-grow: 1.6; }

/* Controls: Start again (just the icon where narrow), full screen, then previous / Begin / next;
   the two groups at the column's edges. */
html.fluid.tablet .zone-controls { justify-content: space-between; }
html.fluid.tablet .controls-left { gap: calc(var(--g) - 2 * var(--ring-btn)); }
html.fluid.tablet .controls-main { gap: calc(var(--g) - 2 * var(--ring-btn)); }
html.fluid.tablet .ctrl-fullscreen:not([hidden]) { display: flex; width: 48px; height: 48px; }
html.fluid.tablet .ctrl-fullscreen svg { width: 22px; height: 22px; }
html.fluid.tablet .ctrl-start, html.fluid.tablet .ctrl-arrow { height: 48px; }
html.fluid.tablet .ctrl-arrow { width: 48px; }
html.fluid.tablet .ctrl-play { min-width: 132px; }

/* Story: larger text for older eyes, and as tall as the column allows. */
html.fluid.tablet .story { gap: 16px; padding: 16px 16px 12px; }
html.fluid.tablet .story-photo { flex-basis: 128px; }
html.fluid.tablet .story-photo img { width: 128px; height: 148px; }
html.fluid.tablet .story-photo figcaption { margin-top: 154px; font-size: 13px; }
html.fluid.tablet .story-rank { font-size: 13px; }
html.fluid.tablet .story-name { margin-bottom: 8px; font-size: 24px; }
html.fluid.tablet .story-facts { gap: 2px 10px; font-size: 18px; line-height: 1.25; }
html.fluid.tablet .story-facts dt { font-size: 11px; line-height: 2; }
html.fluid.tablet .story-notes { margin-top: 8px; font-size: 17px; line-height: 1.3; }
html.fluid.tablet .story-position { font-size: 12px; }
html.fluid.tablet .story-intro h2 { font-size: 28px; }
html.fluid.tablet .story-intro .story-lead { font-size: 21px; }
html.fluid.tablet .story-intro .story-hint { font-size: 17px; }


/* On the map, as on the cabinet: the title top left with the zoom buttons under it, the date and
   count top right. */
html.fluid.tablet .zone-map .cartouche {
  position: absolute;
  z-index: 500;
  top: 12px;
  left: 12px;
  display: block;
  padding: 9px 18px 8px;
  text-align: center;
  background: rgba(248, 238, 214, 0.92);
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: -6px;
  box-shadow: 0 3px 12px rgba(40, 20, 0, 0.3);
  overflow: visible;
}
html.fluid.tablet .zone-map .cartouche-small { font-size: 9px; letter-spacing: 0.1em; }
html.fluid.tablet .zone-map .cartouche h1 { margin: 2px 0 0; font-size: 30px; }
html.fluid.tablet .zone-map .cartouche-years { display: block; margin-top: 2px; font-size: 13px; }
html.fluid.tablet .map-zoom { left: 14px; top: 108px; gap: 8px; }
html.fluid.tablet .map-zoom-btn { width: 40px; height: 40px; font-size: 22px; }
html.fluid.tablet .zone-map .map-readout {
  position: absolute;
  top: 12px;
  right: 12px;
  width: auto;
  min-width: 220px;
  padding: 5px 14px 6px;
}
html.fluid.tablet .zone-map .readout-date { font-size: 19px; }
html.fluid.tablet .zone-map .readout-line { display: flex; gap: 10px; margin-top: 1px; font-size: 15px; }
html.fluid.tablet .zone-map #readout-count { font-size: 17px; }
html.fluid.tablet .zone-map .readout-phase { display: inline; }
html.fluid.tablet .map-key { right: 8px; bottom: 8px; }

/* ---------- Panels: nearly the whole screen ---------- */
html.fluid .about-panel { width: calc(100vw - 16px); max-width: none; max-height: calc(100dvh - 16px); }
html.fluid .about-body { padding: 18px 18px 8px; font-size: 17px; line-height: 1.45; }
html.fluid .about-body h1 { font-size: 34px; }
html.fluid .about-body .years { font-size: 16px; margin-bottom: 14px; }
html.fluid .about-body h2 { font-size: 18px; margin-top: 20px; }
html.fluid .about-close { margin: 8px 0 10px; padding: 10px 26px; font-size: 16px; }

/* Roll of Honour: just the search box and the list (no intro, sorting or A-Z), one column per
   person rather than a table, so the names get the room. */
html.fluid .roll-panel { height: calc(100dvh - 16px); }
html.fluid .roll-panel .about-body { padding: 14px 14px 6px; }
html.fluid .roll-panel h1 { font-size: 30px; }
html.fluid .roll-intro, html.fluid .roll-sorts, html.fluid .roll-jump, html.fluid .roll-columns { display: none; }
html.fluid .roll-tools { margin: 6px 0 8px; }
html.fluid .roll-search { padding: 8px 12px; font-size: 18px; }
html.fluid .roll-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 6px; }
html.fluid .roll-person { grid-template-columns: 48px minmax(0, 1fr); gap: 2px 12px; padding: 8px 4px 2px; font-size: 16px; }
html.fluid .roll-person > span:not(.roll-thumb) { grid-column: 2; }
html.fluid .roll-thumb { grid-row: 1 / span 4; }
html.fluid .roll-person small { display: inline; font-size: 14px; }
html.fluid .roll-person small:not(:empty)::before { content: ' · '; }
html.fluid .roll-unit, html.fluid .roll-home { font-size: 15px; color: var(--ink-soft); }
html.fluid .roll-report { min-height: 34px; margin-right: 4px; font-size: 12px; }

/* Share what you know: one column, the email address below the form. */
html.fluid .share-panel .share-layout { grid-template-columns: minmax(0, 1fr); }
html.fluid .share-panel .share-other { margin-top: 18px; padding: 12px 0 0; border-left: none; border-top: 1px solid var(--ink-soft); }
html.fluid .share-form label { font-size: 17px; }
html.fluid .share-send { padding: 12px 26px; font-size: 17px; }
/* The Cenotaph key: one short line in the corner. */
.map-key .map-key-short { display: none; }
html.fluid .map-key { right: 4px; bottom: 4px; gap: 4px; padding: 1px 7px 1px 2px; border-radius: 4px; }
html.fluid .map-key-icon { width: 22px; height: 22px; }
html.fluid .map-key strong, html.fluid .map-key span { display: none; }
html.fluid .map-key .map-key-short { display: block; font-size: 12px; color: var(--ink); }

/* ==========================================================================================
   Phones (.compact: the screen's shorter side under 600 px, set by js/app.js). Tried on a
   Pixel 3a: a scrolling area inside a fixed screen felt odd, and there's no room for the map, the
   timeline strip and the story at once. So the page scrolls as a whole (upright) or down the
   left-hand side (sideways, the map staying put on the right); no timeline strip; the date and
   count sit small on the map's top-right corner, where there are fewest poppies.
   ========================================================================================== */
html.fluid.compact,
html.fluid.compact body { height: auto; overflow: visible; }
html.fluid.compact body { overflow-x: hidden; }
html.fluid.compact body #stage { height: auto; min-height: 100vh; gap: var(--pad); padding: 0 var(--pad) 20px; }
/* No groups of their own: every panel is one item in the page's column. */
html.fluid.compact .phone-top,
html.fluid.compact .phone-scroll { display: contents; }
html.fluid.compact .zone-strip { display: none; }
/* The map and the controls fit on the screen together under the title bar. */
html.fluid.compact {
  --map-h: min(calc((100vw - 2 * var(--pad)) * 1032 / 1176), calc(100svh - var(--bar-h) - 86px));
}

/* Title bar: stays at the top while the page scrolls, so the menu is always to hand. */
html.fluid.compact .phone-bar { position: sticky; top: 0; z-index: 30; }
html.fluid.compact .zone-nav { position: fixed; top: var(--bar-h); max-height: calc(100vh - var(--bar-h)); }
/* A finger on the whole map scrolls the page (the map fills much of a phone's screen); once zoomed
   in (+ button or pinch), a drag moves the map instead. js/map.js sets .zoomed. */
html.fluid.compact body:not(.kiosk) #map:not(.zoomed) { touch-action: pan-y; }
/* A story brought into view (from the Roll of Honour) stops below the title bar. */
html.fluid.compact .zone-stories { scroll-margin-top: calc(var(--bar-h) + var(--pad)); }

/* Date and count: a small lit window on the map. */
html.fluid.compact .zone-map .map-readout {
  position: absolute;
  top: 6px;
  right: 6px;
  width: auto;
  min-width: 0;
  padding: 2px 9px 3px;
  text-align: right;
  border-radius: 7px;
  box-shadow:
    0 0 0 1px var(--brass-dark),
    0 0 0 2px var(--brass-light),
    0 0 0 3px var(--brass-mid),
    0 2px 6px rgba(0, 0, 0, 0.4);
}
html.fluid.compact .zone-map .readout-date { font-size: 13px; line-height: 1.15; }
html.fluid.compact .zone-map .readout-line { display: block; margin: 0; font-size: 12px; line-height: 1.15; }
html.fluid.compact .zone-map #readout-count { font-size: 13px; }

/* Sideways: the left-hand side scrolls (it is the page), the map is fixed on the right. */
@media (min-aspect-ratio: 4/3) {
  html.fluid.compact {
    --map-h: min(calc(100svh - 2 * var(--pad)), calc((100vw - var(--side-min) - 3 * var(--pad)) * 1032 / 1176));
  }
  html.fluid.compact body #stage {
    display: flex;
    flex-direction: column;
    padding: 0 calc(var(--map-w) + 3 * var(--pad)) 20px var(--pad);
  }
  html.fluid.compact .phone-bar { position: relative; margin: 0 calc(-1 * var(--pad)) 0 calc(-1 * var(--pad)); }
  html.fluid.compact .zone-map { position: fixed; top: var(--pad); right: var(--pad); margin: 0; }
  html.fluid.compact .zone-controls { margin-top: 0; }
  html.fluid.compact .zone-nav { position: absolute; }
}
/* Short screens (phones sideways): smaller menu buttons, so the whole menu fits or nearly. */
@media (max-height: 430px) {
  html.fluid .zone-nav { gap: 5px; padding: 8px; }
  html.fluid .nav-btn { min-height: 40px; padding: 4px 14px; font-size: 15px; }
  html.fluid .nav-extra { min-height: 36px; font-size: 14px; }
}

/* Sideways story card: the column is narrow, so the rank and name run across the top, the photo
   sits beside the facts, and the notes take the full width below (filling the card's height). */
html.fluid.side .story:not(.story-intro) {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 0 14px;
  align-content: start;
}
html.fluid.side .story:not(.story-intro) .story-text { display: contents; }
html.fluid.side .story .story-rank { grid-column: 1 / -1; grid-row: 1; }
html.fluid.side .story .story-name { grid-column: 1 / -1; grid-row: 2; margin-bottom: 10px; }
html.fluid.side .story .story-photo { grid-column: 1; grid-row: 3; }
html.fluid.side .story .story-facts { grid-column: 2; grid-row: 3; align-self: start; }
html.fluid.side .story .story-notes { grid-column: 1 / -1; grid-row: 4; margin-top: 10px; }
html.fluid.side .story .story-position { grid-column: 1 / -1; grid-row: 5; }
/* No photo: the facts take the full width. */
html.fluid.side .story:not(:has(.story-photo)) .story-facts { grid-column: 1 / -1; }
html.fluid.side .story-photo { display: block; }
html.fluid.side .story-photo img { width: 112px; height: 130px; border-width: 4px; }
html.fluid.side .story-photo figcaption { margin-top: 134px; font-size: 12px; line-height: 1.2; }
/* Sideways the controls row is never wide enough for the words as well: Start again is its icon,
   the same on every tablet (its name is still read out). */
html.fluid.tablet .ctrl-start { width: 48px; padding: 0; justify-content: center; }
html.fluid.tablet .start-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* A smaller map (small windows, the smallest tablets): smaller title and date boxes, so they never
   meet. */
html.fluid.tablet .zone-map { container-type: inline-size; }
@container (max-width: 640px) {
  html.fluid.tablet .zone-map .cartouche { top: 10px; left: 10px; padding: 7px 12px 6px; outline-offset: -5px; }
  html.fluid.tablet .zone-map .cartouche-small { font-size: 7px; }
  html.fluid.tablet .zone-map .cartouche h1 { font-size: 22px; }
  html.fluid.tablet .zone-map .cartouche-years { font-size: 11px; }
  html.fluid.tablet .map-zoom { top: 84px; left: 12px; }
  html.fluid.tablet .zone-map .map-readout { top: 10px; right: 10px; min-width: 0; padding: 4px 10px 5px; }
  html.fluid.tablet .zone-map .readout-date { font-size: 15px; }
  html.fluid.tablet .zone-map .readout-line { font-size: 13px; }
  html.fluid.tablet .zone-map #readout-count { font-size: 14px; }
}
/* Controls as one row with equal gaps, Begin / Continue stretching between, so the row's ends line
   up with the boxes above and below whatever the column's width. */
html.fluid.tablet .zone-controls { gap: calc(var(--g) - 2 * var(--ring-btn)); }
html.fluid.tablet .controls-left, html.fluid.tablet .controls-main { display: contents; }
html.fluid.tablet .ctrl-play { flex: 1 1 auto; min-width: 0; padding: 0 12px; height: 48px; justify-content: center; }

/* ---------- Sideways, revised (user, 9 Nov): the timeline strip and controls under the story ----------
   Column: section buttons, story (taking the height left), strip, controls, footer. */
html.fluid.side body #stage {
  grid-template-areas:
    "nav map"
    "story map"
    "strip map"
    "controls map"
    "footer map";
  grid-template-rows: auto minmax(250px, 1fr) auto auto auto;
}
html.fluid.side .zone-nav { grid-area: nav; }
html.fluid.side .zone-stories { grid-area: story; }
html.fluid.side .zone-strip { grid-area: strip; }
html.fluid.side .zone-controls { grid-area: controls; }
html.fluid.side .phone-footer { grid-area: footer; }
html.fluid.side .zone-map { grid-area: map; }

/* Short sentences in the footer break into even lines, never inside "Barrow-in-Furness". */
.nowrap { white-space: nowrap; }
html.fluid .phone-footer p { text-wrap: balance; }

/* Big tablets held sideways (iPad Pro 12.9" and the like): room for the round dial, between its
   speaker grilles with the brass plaques, in place of the strip; the footer moves under the map.
   The dial panel is the cabinet's own (672 x 420), drawn at 65% to fit the 440 px column. */
@media (min-height: 880px) {
  html.fluid.side { --side-w: 440px; }
  html.fluid.side body #stage {
    grid-template-areas:
      "nav map"
      "story map"
      "controls map"
      "dial map"
      "dial footer";
    grid-template-rows: auto minmax(250px, 1fr) auto auto auto;
  }
  html.fluid.side .zone-strip { display: none; }
  html.fluid.side .zone-dial {
    grid-area: dial;
    display: flex;
    justify-self: center;
    align-self: end;
    width: 672px;
    height: 420px;
    zoom: 0.655;
    overflow: visible;
  }
  html.fluid.side .zone-dial .plaque { display: flex; }
}

/* ---------- Upright tablets (.upright, set by js/app.js; user's choice, 9 Nov) ----------
   The sideways column laid under the map: section buttons, the map across the full width, the
   story (taking the height left), then the timeline strip and the controls in one row; the footer
   just below the screen. Same spacing as sideways: one gap (--g), each box in by its rim.
   The oldest iPads (9.7", 10.2") are a little short for all that: the map's frame then gets up to
   9% shorter and js/map.js cuts off its top edge (no poppies there; a drag shows it). */
html.fluid.upright {
  --map-w: calc(100vw - 2 * var(--g) - 2 * var(--ring-zone));
  --map-full: calc(var(--map-w) * 1032 / 1176);
  /* --other-h: what's on the screen besides the map and the story (the page's padding and gaps, the
     buttons, the bottom row, the map's and story's rims; measured). The story gets what's left
     under the map, between --story-min and --story-max (more left the card mostly empty on the
     biggest tablets); room left after that brings the footer onto the screen. */
  --other-h: 218px;
  --story-min: 200px;
  --story-max: 270px;
  --map-h: clamp(calc(var(--map-full) * 0.91), calc(100svh - var(--other-h) - var(--story-min)), var(--map-full));
  --story-h: clamp(var(--story-min), calc(100svh - var(--other-h) - var(--map-h)), var(--story-max));
  --foot-h: 92px;
}
html.fluid.upright, html.fluid.upright body { height: auto; overflow: visible; }
html.fluid.upright body { overflow-x: hidden; }
html.fluid.upright body #stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nav nav"
    "map map"
    "story story"
    "strip controls"
    "footer footer";
  grid-template-rows: auto auto auto auto minmax(var(--foot-h), 1fr);
  gap: var(--g);
  min-height: 100svh;
  height: auto;
  padding: var(--g);
}
html.fluid.upright .phone-top,
html.fluid.upright .phone-scroll { display: contents; }
html.fluid.upright .phone-bar,
html.fluid.upright .menu-btn { display: none; }

html.fluid.upright .zone-nav { grid-area: nav; }
html.fluid.upright .zone-map { grid-area: map; justify-self: start; margin: var(--ring-zone); }
html.fluid.upright .zone-stories { grid-area: story; width: auto; height: var(--story-h); margin: var(--ring-zone); }
html.fluid.upright .zone-strip { grid-area: strip; width: auto; align-self: center; margin: var(--ring-strip); }
html.fluid.upright .zone-controls { grid-area: controls; width: auto; align-self: center; margin: var(--ring-btn); }
/* Not a size container here (it would measure 0 wide in its auto column); Start again is its icon
   on tablets anyway. */
html.fluid.upright .zone-controls { container-type: normal; }
html.fluid.upright .phone-footer { grid-area: footer; width: auto; margin: 0; }
html.fluid.upright #strip { padding: 6px; border-radius: 10px; }
/* Begin keeps its size here; the strip takes the rest of the row. */
html.fluid.upright .ctrl-play { flex: none; min-width: 132px; }

/* Story: wide and not very tall, so three columns: the photo, the facts, and the notes beside
   them (under the facts they were cut off on most tablets); the rank and name across the top. */
html.fluid.upright .story:not(.story-intro) {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) minmax(0, 1fr);
  /* 1fr, not minmax(0, 1fr): the row is at least as tall as the facts (the notes, which hide their
     overflow, don't stretch it), so the facts never run into the count below. */
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "photo rank rank"
    "photo name name"
    "photo facts notes"
    "photo facts pos";
  gap: 0 18px;
  align-content: start;
}
html.fluid.upright .story:not(.story-intro):not(:has(.story-photo)) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "rank rank" "name name" "facts notes" "facts pos";
}
html.fluid.upright .story:not(.story-intro) .story-text { display: contents; }
html.fluid.upright .story .story-photo { grid-area: photo; display: block; }
html.fluid.upright .story .story-rank { grid-area: rank; }
html.fluid.upright .story .story-name { grid-area: name; margin-bottom: 8px; }
html.fluid.upright .story .story-facts { grid-area: facts; align-self: start; }
html.fluid.upright .story .story-notes { grid-area: notes; margin: 0; overflow: hidden; }
html.fluid.upright .story .story-position { grid-area: pos; padding-top: 6px; text-align: right; }

/* The two oldest iPads upright (9.7", 10.2": 950-1006 px tall): shorter section buttons and a
   little smaller story text (still larger than on phones), so all of it fits on the screen. */
@media (max-height: 1010px) {
  html.fluid.upright { --other-h: 212px; --story-min: 180px; }
  html.fluid.upright .nav-btn { min-height: 46px; }
  html.fluid.upright .story { padding: 12px 16px 8px; }
  html.fluid.upright .story-name { font-size: 22px; }
  html.fluid.upright .story .story-name { margin-bottom: 4px; }
  html.fluid.upright .story-facts { font-size: 16px; line-height: 1.15; }
  html.fluid.upright .story-facts dt { line-height: 1.85; }
  html.fluid.upright .story-notes { font-size: 16px; line-height: 1.25; }
  html.fluid.upright .story-photo img { width: 112px; height: 130px; }
  html.fluid.upright .story-photo figcaption { margin-top: 134px; font-size: 12px; }
  html.fluid.upright .story:not(.story-intro) { grid-template-columns: 112px minmax(0, 1.15fr) minmax(0, 1fr); }
}
/* The tallest (iPad Pro 12.9"/13", Surface Pro: 1250 px and up), where the card reaches its
   cap: a bigger photo, filling the card's height (the cap leaves the Surface room for the footer). */
@media (min-height: 1250px) {
  html.fluid.upright .story:not(.story-intro) { grid-template-columns: 184px minmax(0, 1fr) minmax(0, 1fr); }
  html.fluid.upright .story-photo { flex-basis: 184px; }
  html.fluid.upright .story-photo img { width: 184px; height: 214px; }
  html.fluid.upright .story-photo figcaption { margin-top: 220px; }
}

/* ---------- Tablet footer (user, 9 Nov) ----------
   The Museum's logo in the bottom left corner, its sentence beside it with the Artfly credit just
   under it, both left-aligned; the Museum's link on the right. */
html.fluid.tablet .phone-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo text link"
    "logo credit link";
  align-content: center;
  align-items: center;
  gap: 1px 14px;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}
html.fluid.tablet .phone-footer-logo { grid-area: logo; width: 46px; height: 46px; }
html.fluid.tablet .phone-footer > p.phone-footer-text { grid-area: text; align-self: end; display: block; max-width: 26em; font-size: 15px; line-height: 1.3; text-wrap: pretty; }
html.fluid.tablet .phone-footer-credit { grid-area: credit; align-self: start; text-align: left; }
html.fluid.tablet .phone-footer-link { grid-area: link; justify-self: end; margin: 0; }
/* Sideways, in the narrow left-hand column (all but the biggest tablets): no room for the
   sentence; the link takes its place beside the logo. */
html.fluid.side .phone-footer { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo link" "logo credit"; }
html.fluid.side .phone-footer > p.phone-footer-text { display: none; }
html.fluid.side .phone-footer-link { justify-self: start; align-self: end; min-height: 0; padding-top: 4px; }
@media (min-height: 880px) {
  html.fluid.side .phone-footer {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo text link" "logo credit link";
  }
  html.fluid.side .phone-footer > p.phone-footer-text { display: block; }
  html.fluid.side .phone-footer-link { justify-self: end; align-self: center; min-height: 44px; padding-top: 0; }
}

/* Phones: the story card grows to show all of its text (Jennie, 9 Nov: the page scrolls now, so
   there's no need to cut the text off with "…"), in slightly larger type. The map and controls
   are above it, so only the footer moves as the stories change. */
html.fluid.compact .zone-stories { height: auto; min-height: 252px; }
html.fluid.compact #stories,
html.fluid.compact .story { position: relative; inset: auto; }
html.fluid.compact .story-name { font-size: 21px; }
html.fluid.compact .story-facts { font-size: 16px; line-height: 1.25; }
html.fluid.compact .story-facts dt { font-size: 10px; line-height: 2.1; }
html.fluid.compact .story-notes { font-size: 16px; line-height: 1.3; }
/* The notes across the card's full width, under the photo and the facts. */
html.fluid.compact .story:not(.story-intro) {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  grid-template-areas:
    "photo rank"
    "photo name"
    "photo facts"
    "notes notes"
    "pos pos";
  grid-template-rows: auto auto 1fr auto auto;
  gap: 0 14px;
  align-content: start;
}
html.fluid.compact .story:not(.story-intro):not(:has(.story-photo)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "rank" "name" "facts" "notes" "pos";
}
html.fluid.compact .story:not(.story-intro) .story-text { display: contents; }
html.fluid.compact .story .story-photo { grid-area: photo; }
html.fluid.compact .story .story-rank { grid-area: rank; }
html.fluid.compact .story .story-name { grid-area: name; }
html.fluid.compact .story .story-facts { grid-area: facts; align-self: start; }
html.fluid.compact .story .story-notes { grid-area: notes; margin-top: 12px; }
html.fluid.compact .story .story-position { grid-area: pos; }

/* While the page itself is zoomed in (a pinch outside the map), the map stops taking two-finger
   gestures, so a pinch over it zooms the page back out (js/map.js sets .page-zoomed). */
html.page-zoomed body:not(.kiosk) #map { touch-action: auto !important; }