/* WelcomeTo Studios - how the page fits a screen: long words that must
   wrap, controls big enough for a finger, and room kept for what is still
   loading. Loaded last, after community.css, so it can size what the other
   sheets (and the template's inline styles) lay out; it changes no colour,
   rim or face.

   Three rules hold everywhere, and test/mobile-browser.test.js holds the
   page to them at phone, tablet and desktop sizes, portrait and landscape
   (README, "Small screens and slow connections"):
     - nothing scrolls sideways, and no text runs out of its box: a word,
       an address or an id too long for its line breaks inside it, and a
       table or a code block too wide for the screen scrolls inside its own
       box;
     - on a touch screen (or any window narrower than 720px) every control
       is at least 44 x 44 CSS pixels, or has that much room around it -
       links inside a sentence excepted, as WCAG 2.5.8 has it;
     - what arrives late (the page's text, a list, a picture, the faces)
       comes into a space already its size, so nothing on screen jumps. */

/* ================================================================ wrapping */

/* A word with nowhere to break - an address, an id, a name typed without
   spaces - breaks wherever it must rather than running out of its box.
   (break-word, not anywhere: an ordinary word in a tight row keeps
   whole - "HEADING" never becomes "HEADIN G" - and only a word longer than
   its whole line is broken.) */
body { overflow-wrap: break-word; }

/* What people type - a page's headline and words, a format's or a bot's
   name, a reviewer's name and where they played, a channel, a season - can
   be one long word inside a row that sizes itself to its content. There it
   may break anywhere, so the row fits the screen instead of the word. */
.hero__copy, .show-card__name, .show-card__blurb, .rev-card__where, .rev-card__name,
.arc-crumbs li, .arc-fmt__name, .arc-season__title, .bm-pickbtn__sub, .bm-pickbtn__item,
.arc-admin__fname, .arc-admin__name, .arc-admin__meta, .site-panel__meta, .com-card__name, .com-rev__season, .com-play__what,
.sm-item__name, .sm-item__sub, .sm-card__title, .sm-key__label, .bm-log__label, .bm-log__desc,
.arc-head__eyebrow, .arc-chans__season, .com-season__title, .com-list-title, .wiki-title { overflow-wrap: anywhere; }

/* A table keeps its words whole and scrolls inside its box instead
   (.table-scroll, the wiki's tables): squeezed to a letter a column, a
   table is no longer readable. */
table, [style*="display:table"] { overflow-wrap: break-word; }

/* Chips and pills that keep to one line wrap inside themselves when what
   they say is longer than the screen is wide: a format's tag, a mention of
   someone with a long name. */
.tag, .md-mention { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
button.md-mention { text-align: start; }

/* ================================================================ fingers */

/* On a touch screen, and in any window narrower than 720px, a control is
   at least 44 x 44 CSS px - Apple's and WCAG 2.5.5's size for a finger.
   Every button, field, menu item, switch and link that stands on its own
   gets it here, the template's inline-styled ones too (which is why some
   lines below say !important: they size what an inline style sets). A link
   inside a sentence keeps the line's height: min-height does nothing to an
   inline box, and WCAG exempts it. So do a few controls that live inside a
   line of a Discord message - the author's name, a reply's preview, a
   mention, the More button of a message one line tall - which keep their
   size and WCAG 2.5.8's 24px of room (test/mobile-browser.test.js lists
   them, and why). */
@media (pointer: coarse), (max-width: 720px) {
  /* Every control, at no specificity: a sheet that sizes one smaller on
     purpose says so with a class, and is overruled by name below. The
     controls inside a line of a message or of text are left out. */
  :where(a[href], button, select, summary, [role="button"], [role="link"], [role="tab"], [role="menuitem"],
    [role="menuitemradio"], [role="option"], [role="switch"],
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"])):not(:where(.md-mention, .md-spoiler, .arc-msg__name, .arc-msg__more, .arc-msg__jump, .arc-reply, .arc-cmd__who, .arc-msg__syslink, .md a, .md button)) { min-height: 44px; }
  :where(button, [role="button"], [role="tab"], [role="switch"]):not(:where(.md-mention, .md-spoiler, .arc-msg__name, .arc-msg__more, .arc-msg__jump, .arc-reply, .arc-cmd__who, .arc-msg__syslink, .md button)) { min-width: 44px; }
  .bm-pickbtn, .bm-opt, .rev-car__btn { min-height: 44px; min-width: 44px; }
  .sm-sample__link { min-height: 44px; }
  .site-panel__x { height: 44px; padding: 0 16px; }
  .site-panel__link { width: 44px; height: 44px; }

  /* Text that sat at the top of a taller link sits in its middle. */
  .wts-tab, .site-footer__links a, .site-footer__links button, .site-links a, .arc-chan, .com-side__back,
  .arc-linkbtn, .wl-read__link, .chip-link, .menu-item, .arc-menu__item { display: inline-flex; align-items: center; }
  .menu-item, .arc-menu__item { display: flex; }
  .com-side__link { padding-top: 11px; padding-bottom: 11px; }
  .site-footer__links { row-gap: 0; }
  .site-links { row-gap: 0; padding-top: 6px; }

  /* Pills that held a smaller button grow round it. */
  .arc-chip--on { height: auto; min-height: 44px; }
  .com-card__tool, .pf .com-card__tool { height: 44px; }
  .com-card__tool--icon, .pf .com-card__tool--icon { width: 44px; }
  .arc-pillcheck span { height: 44px; }

  /* Choices made with a box or a dot: the label is the target. */
  .sm-radio, .sm-check, .arc-person, .del-data__check, .bm-arc__check { min-height: 44px; }
  .com-starpick__opt, .wiki-swatch { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  /* A page's box keeps a finger's room from the handle beside it. */
  .wiki-bulk-check { width: 24px; height: 24px; margin-right: 6px; }

  /* Square icon buttons, square again. */
  .arc-iconbtn, .arc-iconbtn--sm, .arc-head__tools .arc-iconbtn, .arc-prof__x, .arc-rdlg__x, .arc-lightbox__x, .arc-voice__play, .rev-car__btn { width: 44px; height: 44px; }
  /* A date filter's remove button needs its column to be as wide. */
  .arc-date { grid-template-columns: 104px minmax(0, 1fr) 44px; }
  /* A search result's own Jump and More have the card's room. */
  .arc-item--result .arc-msg__more, .arc-item--result .arc-msg__jump { height: 44px; min-width: 44px; }

  /* The compendium's sidebar and contents (inline-styled in the page). */
  .wiki-caret--btn, .wiki-caret-gap { width: 44px; height: 44px; }
  .wiki-main a[href][style*="display:block"] { padding-top: 11px !important; padding-bottom: 11px !important; }
  .wiki-side span[role="link"] { line-height: 44px; }

  /* The header is taller by the size of its controls; what sticks under it
     moves down with it. */
  .sm-unsaved, .wiki-bulk { top: 122px; }
}
@media (pointer: coarse) and (min-width: 721px) {
  .sm-unsaved, .wiki-bulk { top: 76px; }
}
@media (max-width: 720px) {
  :root { --arc-top: calc(var(--arc-header-h, 122px) + 12px); }
}

/* A phone on its side has some 400px of height, and a header that stayed
   at the top would take a quarter of it. There the header scrolls away
   with the page, and what stuck under it sticks to the top instead. */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header { position: relative; }
  .sm-unsaved, .wiki-bulk { top: 8px; }
  /* A season's reader, sized to the window under the header, gets the
     whole window less a little air. */
  :root { --arc-top: 16px; }
}

/* ================================================================ room for what loads */

/* The footer starts below the first screen. A view whose content is still
   on its way is short, so the footer would sit in the window - and be
   pushed out of it the moment the content arrived, the biggest jump the
   page had. */
#main { min-height: 100vh; min-height: 100svh; }

/* About Us's hero, while /api/site is on its way: its skeleton stands for
   the eyebrow (one line), the headline (two) and the introduction (two
   lines on a phone, one wider), with the gaps between them - as tall as
   the words it stands for, so the buttons and counters under it stay
   where they are when the words come. */
.hero__copy:has(> .hero__cta) > .site-skel { min-height: calc(12px * 1.55 + 2 * 18px + 2 * 1.04 * clamp(42px, 7vw, 84px) + 1.65 * clamp(16px, 1.6vw, 19px)); }
@media (max-width: 720px) {
  .hero__copy:has(> .hero__cta) > .site-skel { min-height: calc(12px * 1.55 + 2 * 18px + 2 * 1.04 * clamp(42px, 7vw, 84px) + 2 * 1.65 * clamp(16px, 1.6vw, 19px)); }
}

/* The players' list of formats, on a phone above the players: until the
   formats arrive it holds two rows' room, as many as most visitors see,
   so the players under it do not drop when they come. */
@media (max-width: 960px) {
  .com-side__list:not(:has(li)) { min-height: 90px; }
}

/* Bot Management's log channels - a row for each of the thirteen kinds of
   log, taller than a screen - come with the server's channels; until then
   the section shows a few rows' skeleton. It holds a screen's height while
   it does, so the sections under it are below the fold already and do not
   jump when the real rows push them down. */
.sm-card[aria-labelledby="bm-logs-title"]:has(> .skel-rows) { min-height: 100vh; min-height: 100svh; }
/* So do the Players card, the first of its sub-tab, while its seasons or a
   season's players are on their way (it is taller than a phone's screen
   once they are in), and the Archives card while its seasons are. */
.sm-card[aria-labelledby="bm-players-title"]:has(.skel-rows), .sm-card[aria-labelledby="bm-archives-title"]:has(> .skel-rows) { min-height: 100vh; min-height: 100svh; }