/* ============================================================================
   Dollmaker NEO — the family layer.

   Loaded AFTER styles/mainstylesheet.css and styles/colors.css, which are kept
   byte-identical to upstream. Everything the family host changes lives here, so
   re-vendoring a new upstream commit cannot lose it and the diff against
   upstream is this one file plus the two edits patch_upstream.py makes to
   index.html / colors.css.

   1. the web font, self-hosted (upstream @imports it from fonts.cdnfonts.com)
   2. the phone layout — upstream ships an inert viewport meta, so a phone lays
      the page out at ~980px and zooms out: tiny text and imprecise taps on a
      page whose entire interface is dragging small pieces.
   ========================================================================== */

/* --- 1. Pixelify Sans (SIL OFL 1.1, licence beside the files) -------------- */
/* latin-ext */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/pixelify-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/pixelify-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- 2. The attribution line the licences require ------------------------- */
#page-licence {
  clear: both;
  text-align: center;
  font-size: 11px;
  margin: 1.5em 10px 1em;
  line-height: 1.5em;
  opacity: 0.85;
}
#page-licence a {
  color: inherit;
}

/* --- 3. Phone layout ------------------------------------------------------- */
/* Upstream's layout is TWO columns in a 915px flex box: a 249px doll column and
   a piece picker that takes the rest. On a 390px phone the picker is left with
   ~110px, so the tabs fall outside the viewport and the pieces stack one per
   row. Below 700px the two columns become a stack, in DOM order — doll, colour
   swatches, then the piece picker — and the swatch panel leaves absolute
   positioning so it can take its own place in that stack instead of being pinned
   at the desktop offset (top: 415px) and buried under the picker. */
@media (max-width: 700px) {
  #page-header {
    font-size: 32px;
  }
  #page-subheader {
    font-size: 17px;
    margin-bottom: 0.6em;
  }
  #dollmaker_container {
    flex-direction: column;
    max-width: 100%;
  }
  #bodyArea {
    margin: 0 auto;
  }
  #swatchesArea {
    position: static;
    top: auto;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    padding: 0 10px 10px;
  }
  #piecesArea {
    left: 0;
    width: auto;
    margin: 0 10px 10px;
    /* The tab panels are absolutely positioned (upstream), so nothing in the
       picker contributes height. On desktop the flex row is tall anyway; in this
       stack it would collapse and the pieces would paint outside the page. */
    min-height: 460px;
  }
  #tabsbar {
    padding: 5px 4px;
  }
  #tabsbar li a {
    padding: 4px 6px;
  }
  /* Touch targets: 20px swatches and the small piece art are hard to hit. */
  #swatchesArea a {
    width: 30px;
    height: 30px;
    margin: 3px;
  }
  #swatchesArea a img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
  }
  .ui-tabs-panel img {
    min-width: 44px;
    min-height: 44px;
  }
}