/* managed by Fedwiki CSS Fix — https://css.fedwiki.club/fedwiki-css-fix.html
   — deployed farm-wide by wiki-theme-deploy; redeploys overwrite this file */

/* Three Miller columns sized to the MONITOR, not the browser window.
   CSS has no screen-width unit, so a ladder of min-device-width media
   queries (which read the display, not the viewport) pins --wiki-screen
   to the monitor's CSS-pixel width. Resizing the window then never
   changes the column width - only moving to a different display does.

   Modern wiki-client lays out .main with display:flex and sizes each
   .page with flex: 0 0 490px, so flex-basis must carry the calc; the
   width rule covers older float-based clients. Each .page keeps its
   8px side margins, hence the n * 2 * margin term.

   The hover/pointer guards split the world cleanly:
   - mouse devices (hover:hover, pointer:fine) get the 3-column layout
   - touch devices (hover:none, pointer:coarse) up to 960px get ONE
     full-width column in BOTH orientations, extending the wiki's own
     portrait-only max-width:490px mobile rule to landscape. */
:root {
  --wiki-columns: 3;
  --wiki-page-margin: 8px;
  --wiki-screen: 1440px; /* fallback, overridden by the ladder below */
}

/* Desktop / mouse devices: three monitor-sized columns */
@media (hover: hover) and (pointer: fine) and (min-device-width: 832px) {
  .page {
    flex: 0 0 calc((var(--wiki-screen) - (var(--wiki-columns) * 2 * var(--wiki-page-margin))) / var(--wiki-columns));
    width: calc((var(--wiki-screen) - (var(--wiki-columns) * 2 * var(--wiki-page-margin))) / var(--wiki-columns));
  }
}

/* Phones (and small tablets) in any orientation: one full-width column.
   Matches the wiki's own mobile sizing (flex: 0 0 100vw) so portrait
   behaviour is unchanged; landscape now fills the screen too. */
@media (hover: none) and (pointer: coarse) and (max-width: 960px) {
  .page {
    flex: 0 0 100vw;
    width: 100vw;
  }

  /* Disable page dragging on touch devices: the .page-handle overlay is
     the jQuery UI sortable handle; with pointer-events off it can never
     start a drag, while taps fall through to the title and flag beneath. */
  .page-handle {
    pointer-events: none;
  }
}

/* Phones rotated to landscape: hide the bottom bar (padlock, search,
   page count) and give its 60px back to the lineup. */
@media (hover: none) and (pointer: coarse) and (max-width: 960px) and (orientation: landscape) {
  footer {
    display: none;
  }
  .main {
    bottom: 0;             /* older clients position with bottom: 60px */
    height: 100vh;         /* modern client sets height: calc(100vh - 40px) */
  }
}

/* Markdown task-list checkboxes: the plugin's margin-left: -1.8em
   overshoots, hanging the checkbox out in the page margin left of the
   other bullets. Pull it back so the checkbox sits in the bullet
   position and its label lines up with the other list items' text.
   The .story prefix out-ranks the plugin stylesheet, which loads
   after the theme. */
.story li.task-list-item {
  list-style: none;
  position: relative;
  padding-left: 0;   /* markdown plugin adds 8px, pushing the label out of line */
}
.story li.task-list-item input {
  position: absolute;
  left: -16px;   /* the ul's padding — puts the checkbox at the paragraph text edge */
  top: 0.2em;
  margin: 0;
}

/* Video-item embeds: the video plugin hardcodes iframe width="420"
   height="236" (YouTube etc), so embeds don't scale with the wider
   columns the way HTML5 <video> does. Let the iframe fill the column
   and keep its 16:9 shape. */
.item.video iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Screen-width ladder: 64px steps plus common display widths.
   Ascending order - the widest matching rule wins. */
@media (min-device-width: 832px) { :root { --wiki-screen: 832px; } }
@media (min-device-width: 896px) { :root { --wiki-screen: 896px; } }
@media (min-device-width: 960px) { :root { --wiki-screen: 960px; } }
@media (min-device-width: 1024px) { :root { --wiki-screen: 1024px; } }
@media (min-device-width: 1088px) { :root { --wiki-screen: 1088px; } }
@media (min-device-width: 1152px) { :root { --wiki-screen: 1152px; } }
@media (min-device-width: 1216px) { :root { --wiki-screen: 1216px; } }
@media (min-device-width: 1280px) { :root { --wiki-screen: 1280px; } }
@media (min-device-width: 1344px) { :root { --wiki-screen: 1344px; } }
@media (min-device-width: 1366px) { :root { --wiki-screen: 1366px; } }
@media (min-device-width: 1408px) { :root { --wiki-screen: 1408px; } }
@media (min-device-width: 1440px) { :root { --wiki-screen: 1440px; } }
@media (min-device-width: 1470px) { :root { --wiki-screen: 1470px; } }
@media (min-device-width: 1472px) { :root { --wiki-screen: 1472px; } }
@media (min-device-width: 1512px) { :root { --wiki-screen: 1512px; } }
@media (min-device-width: 1536px) { :root { --wiki-screen: 1536px; } }
@media (min-device-width: 1600px) { :root { --wiki-screen: 1600px; } }
@media (min-device-width: 1664px) { :root { --wiki-screen: 1664px; } }
@media (min-device-width: 1680px) { :root { --wiki-screen: 1680px; } }
@media (min-device-width: 1710px) { :root { --wiki-screen: 1710px; } }
@media (min-device-width: 1728px) { :root { --wiki-screen: 1728px; } }
@media (min-device-width: 1792px) { :root { --wiki-screen: 1792px; } }
@media (min-device-width: 1856px) { :root { --wiki-screen: 1856px; } }
@media (min-device-width: 1920px) { :root { --wiki-screen: 1920px; } }
@media (min-device-width: 1984px) { :root { --wiki-screen: 1984px; } }
@media (min-device-width: 2048px) { :root { --wiki-screen: 2048px; } }
@media (min-device-width: 2112px) { :root { --wiki-screen: 2112px; } }
@media (min-device-width: 2176px) { :root { --wiki-screen: 2176px; } }
@media (min-device-width: 2240px) { :root { --wiki-screen: 2240px; } }
@media (min-device-width: 2304px) { :root { --wiki-screen: 2304px; } }
@media (min-device-width: 2368px) { :root { --wiki-screen: 2368px; } }
@media (min-device-width: 2432px) { :root { --wiki-screen: 2432px; } }
@media (min-device-width: 2496px) { :root { --wiki-screen: 2496px; } }
@media (min-device-width: 2560px) { :root { --wiki-screen: 2560px; } }
@media (min-device-width: 2624px) { :root { --wiki-screen: 2624px; } }
@media (min-device-width: 2688px) { :root { --wiki-screen: 2688px; } }
@media (min-device-width: 2752px) { :root { --wiki-screen: 2752px; } }
@media (min-device-width: 2816px) { :root { --wiki-screen: 2816px; } }
@media (min-device-width: 2880px) { :root { --wiki-screen: 2880px; } }
@media (min-device-width: 2944px) { :root { --wiki-screen: 2944px; } }
@media (min-device-width: 3008px) { :root { --wiki-screen: 3008px; } }
@media (min-device-width: 3072px) { :root { --wiki-screen: 3072px; } }
@media (min-device-width: 3136px) { :root { --wiki-screen: 3136px; } }
@media (min-device-width: 3200px) { :root { --wiki-screen: 3200px; } }
@media (min-device-width: 3264px) { :root { --wiki-screen: 3264px; } }
@media (min-device-width: 3328px) { :root { --wiki-screen: 3328px; } }
@media (min-device-width: 3392px) { :root { --wiki-screen: 3392px; } }
@media (min-device-width: 3440px) { :root { --wiki-screen: 3440px; } }
@media (min-device-width: 3456px) { :root { --wiki-screen: 3456px; } }
@media (min-device-width: 3520px) { :root { --wiki-screen: 3520px; } }
@media (min-device-width: 3584px) { :root { --wiki-screen: 3584px; } }
@media (min-device-width: 3648px) { :root { --wiki-screen: 3648px; } }
@media (min-device-width: 3712px) { :root { --wiki-screen: 3712px; } }
@media (min-device-width: 3776px) { :root { --wiki-screen: 3776px; } }
@media (min-device-width: 3840px) { :root { --wiki-screen: 3840px; } }
@media (min-device-width: 3904px) { :root { --wiki-screen: 3904px; } }
@media (min-device-width: 3968px) { :root { --wiki-screen: 3968px; } }
@media (min-device-width: 4032px) { :root { --wiki-screen: 4032px; } }
@media (min-device-width: 4096px) { :root { --wiki-screen: 4096px; } }
@media (min-device-width: 4160px) { :root { --wiki-screen: 4160px; } }
@media (min-device-width: 4224px) { :root { --wiki-screen: 4224px; } }
@media (min-device-width: 4288px) { :root { --wiki-screen: 4288px; } }
@media (min-device-width: 4352px) { :root { --wiki-screen: 4352px; } }
@media (min-device-width: 4416px) { :root { --wiki-screen: 4416px; } }
@media (min-device-width: 4480px) { :root { --wiki-screen: 4480px; } }
@media (min-device-width: 4544px) { :root { --wiki-screen: 4544px; } }
@media (min-device-width: 4608px) { :root { --wiki-screen: 4608px; } }
@media (min-device-width: 4672px) { :root { --wiki-screen: 4672px; } }
@media (min-device-width: 4736px) { :root { --wiki-screen: 4736px; } }
@media (min-device-width: 4800px) { :root { --wiki-screen: 4800px; } }
@media (min-device-width: 4864px) { :root { --wiki-screen: 4864px; } }
@media (min-device-width: 4928px) { :root { --wiki-screen: 4928px; } }
@media (min-device-width: 4992px) { :root { --wiki-screen: 4992px; } }
@media (min-device-width: 5056px) { :root { --wiki-screen: 5056px; } }
@media (min-device-width: 5120px) { :root { --wiki-screen: 5120px; } }