/* ============================================================
   Older TV browsers (Chrome 53 and up).

   app.css and layouts.css are written for a current engine: grid, flex
   gap, clamp(), aspect-ratio, display: contents. A television can
   carry a browser from 2016 for the whole of its life — webOS 4 is
   Chrome 53 — and there each of those is dropped on the floor: the
   home grid falls into a single column, the gaps close, and because
   --fs and --pad are clamp()s the page loses its font size and every
   padding that uses them.

   This file puts them back the old way, and only where they are
   missing: every section is behind a feature query (or, for flex gap,
   which no feature query can detect, behind the .no-flexgap class the
   script at the top of index.html sets on <html>). A current browser
   skips all of it and renders exactly what app.css says.

   Keep it in step. A new clamp(), grid, gap or aspect-ratio in app.css
   or layouts.css needs its line here — tests/css-compat.test.js fails
   until it has one.
   ============================================================ */


/* ---------- clamp() (Chrome 79) ----------
   clamp(A, B, C) is B between the widths (or heights) where B equals A
   and C, and A or C outside them — so each is three rules: the floor,
   the fluid middle, the ceiling. */
@supports not (width: clamp(1px, 1px, 1px)) {
  :root { --pad: 12px; }
  @media (min-width: 600px) { :root { --pad: 2vw; } }
  @media (min-width: 1600px) { :root { --pad: 32px; } }
  :root { --fs: 14px; }
  @media (min-width: 1217.39px) { :root { --fs: 1.15vw; } }
  @media (min-width: 1913.04px) { :root { --fs: 22px; } }

  .topbar .logo { height: 34px; }
  @media (min-width: 1000px) { .topbar .logo { height: 3.4vw; } }
  @media (min-width: 1764.71px) { .topbar .logo { height: 60px; } }

  .scanpickbox, .scanbox { padding: 18px; }
  @media (min-width: 750px) { .scanpickbox, .scanbox { padding: 2.4vw; } }
  @media (min-width: 1250px) { .scanpickbox, .scanbox { padding: 30px; } }

  .tile img { width: 40px; height: 40px; }
  @media (min-width: 1025.64px) { .tile img { width: 3.9vw; height: 3.9vw; } }
  @media (min-width: 1897.44px) { .tile img { width: 74px; height: 74px; } }
  .tile.big img { width: 62px; height: 62px; }
  @media (min-width: 1068.97px) { .tile.big img { width: 5.8vw; height: 5.8vw; } }
  @media (min-width: 1793.1px) { .tile.big img { width: 104px; height: 104px; } }

  .card { width: 190px; }
  @media (min-width: 1187.5px) { .card { width: 16vw; } }
  @media (min-width: 1812.5px) { .card { width: 290px; } }
  .card.wide { width: 220px; }
  @media (min-width: 1100px) { .card.wide { width: 20vw; } }
  @media (min-width: 1700px) { .card.wide { width: 340px; } }
  .card.ap { width: 170px; }
  @media (min-width: 1214.29px) { .card.ap { width: 14vw; } }
  @media (min-width: 1642.86px) { .card.ap { width: 230px; } }

  .spinner { width: 46px; height: 46px; }
  @media (min-width: 920px) { .spinner { width: 5vw; height: 5vw; } }
  @media (min-width: 1520px) { .spinner { width: 76px; height: 76px; } }

  .live-boot .lb img { width: 64px; height: 64px; }
  @media (min-width: 1066.67px) { .live-boot .lb img { width: 6vw; height: 6vw; } }
  @media (min-width: 1733.33px) { .live-boot .lb img { width: 104px; height: 104px; } }

  .player .osd { font-size: 18px; }
  @media (min-width: 1028.57px) { .player .osd { font-size: 1.75vw; } }
  @media (min-width: 1942.86px) { .player .osd { font-size: 34px; } }
  .player .osd { padding-top: 20px; }
  @media (min-height: 666.67px) { .player .osd { padding-top: 3vh; } }
  @media (min-height: 1133.33px) { .player .osd { padding-top: 34px; } }
  .player .osd { padding-left: 30px; padding-right: 30px; }
  @media (min-width: 882.35px) { .player .osd { padding-left: 3.4vw; padding-right: 3.4vw; } }
  @media (min-width: 1823.53px) { .player .osd { padding-left: 62px; padding-right: 62px; } }
  .player .osd { padding-bottom: 24px; }
  @media (min-height: 600px) { .player .osd { padding-bottom: 4vh; } }
  @media (min-height: 1150px) { .player .osd { padding-bottom: 46px; } }

  .application-card { height: 100px; }
  @media (min-width: 952.38px) { .application-card { height: 10.5vw; } }
  @media (min-width: 2095.24px) { .application-card { height: 220px; } }

  .register { font-size: 14px; }
  @media (min-height: 823.53px) { .register { font-size: 1.7vh; } }
  @media (min-height: 1176.47px) { .register { font-size: 20px; } }
  .register .box { padding-top: 12px; padding-bottom: 12px; }
  @media (min-height: 600px) { .register .box { padding-top: 2vh; padding-bottom: 2vh; } }
  @media (min-height: 1200px) { .register .box { padding-top: 24px; padding-bottom: 24px; } }
  .register .box { padding-left: 18px; padding-right: 18px; }
  @media (min-width: 600px) { .register .box { padding-left: 3vw; padding-right: 3vw; } }
  @media (min-width: 1200px) { .register .box { padding-left: 36px; padding-right: 36px; } }
  .register .logo { height: 32px; }
  @media (min-height: 533.33px) { .register .logo { height: 6vh; } }
  @media (min-height: 1066.67px) { .register .logo { height: 64px; } }
  /* app.css's taller-screen block, restated after the lines above so it still wins. */
  @media (min-height: 600px) {
    .register .box { padding-top: 28px; padding-bottom: 28px; }
    .register .logo { height: 8vh; }          /* clamp(44px, 8vh, 80px): 8vh is past 44 already */
  }
  @media (min-height: 1000px) { .register .logo { height: 80px; } }

  /* The shorthands these came from are dropped whole, so their plain parts are restated. */
  .player .epg .epg-head { padding-top: 14px; padding-bottom: 8px; }
  @media (min-height: 583.33px) { .player .epg .epg-head { padding-top: 2.4vh; } }
  @media (min-height: 1083.33px) { .player .epg .epg-head { padding-top: 26px; } }
  .player .epg .epg-rows { padding-top: 6px; padding-bottom: 10px; }
  .player .epg .epg-foot { padding-top: 10px; padding-bottom: 14px; }
  @media (min-height: 466.67px) { .player .epg .epg-foot { padding-bottom: 3vh; } }
  @media (min-height: 1000px) { .player .epg .epg-foot { padding-bottom: 30px; } }
  .player .epg .epg-head, .player .epg .epg-rows, .player .epg .epg-foot { padding-left: 24px; padding-right: 24px; }
  @media (min-width: 800px) { .player .epg .epg-head, .player .epg .epg-rows, .player .epg .epg-foot { padding-left: 3vw; padding-right: 3vw; } }
  @media (min-width: 1800px) { .player .epg .epg-head, .player .epg .epg-rows, .player .epg .epg-foot { padding-left: 54px; padding-right: 54px; } }
  .player .epg .epg-row { height: 54px; }
  @media (min-height: 750px) { .player .epg .epg-row { height: 7.2vh; } }
  @media (min-height: 1055.56px) { .player .epg .epg-row { height: 76px; } }
  .player .epg .epg-ch { flex: 0 0 180px; }
  @media (min-width: 1000px) { .player .epg .epg-ch { flex: 0 0 18vw; } }
  @media (min-width: 1555.56px) { .player .epg .epg-ch { flex: 0 0 280px; } }

  .cal-day { height: 34px; }
  @media (min-height: 607.14px) { .cal-day { height: 5.6vh; } }
  @media (min-height: 857.14px) { .cal-day { height: 48px; } }

  /* layouts.css */
  [data-layout="rail"][data-route="home"] .greeting { padding-top: 0; padding-right: 0; padding-bottom: 8vh; padding-left: 24px; }
  @media (min-width: 600px) { [data-layout="rail"][data-route="home"] .greeting { padding-left: 4vw; } }
  @media (min-width: 1750px) { [data-layout="rail"][data-route="home"] .greeting { padding-left: 70px; } }
  [data-layout="rail"][data-route="home"] .grid { -webkit-padding-end: 20px; }
  @media (min-width: 1000px) { [data-layout="rail"][data-route="home"] .grid { -webkit-padding-end: 2vw; } }
  @media (min-width: 1400px) { [data-layout="rail"][data-route="home"] .grid { -webkit-padding-end: 28px; } }
  [data-layout="rail"][data-route="home"] .tile { padding: 7px 16px; }
  @media (min-height: 636.36px) { [data-layout="rail"][data-route="home"] .tile { padding-top: 1.1vh; padding-bottom: 1.1vh; } }
  @media (min-height: 1181.82px) { [data-layout="rail"][data-route="home"] .tile { padding-top: 13px; padding-bottom: 13px; } }
  [data-layout="rows"][data-route="home"] .tile { padding: 8px 22px; }
  @media (min-height: 666.67px) { [data-layout="rows"][data-route="home"] .tile { padding-top: 1.2vh; padding-bottom: 1.2vh; } }
  @media (min-height: 1166.67px) { [data-layout="rows"][data-route="home"] .tile { padding-top: 14px; padding-bottom: 14px; } }
  [data-layout="rows"][data-route="home"] .tile img,
  [data-layout="rows"][data-route="home"] .tile.big img { width: 30px; height: 30px; }
  @media (min-height: 750px) {
    [data-layout="rows"][data-route="home"] .tile img,
    [data-layout="rows"][data-route="home"] .tile.big img { width: 4vh; height: 4vh; }
  }
  @media (min-height: 1100px) {
    [data-layout="rows"][data-route="home"] .tile img,
    [data-layout="rows"][data-route="home"] .tile.big img { width: 44px; height: 44px; }
  }
  [data-layout="rows"][data-route="home"] .tile .name { flex: 0 0 140px; }
  @media (min-width: 933.33px) { [data-layout="rows"][data-route="home"] .tile .name { flex: 0 0 15vw; } }
  @media (min-width: 1466.67px) { [data-layout="rows"][data-route="home"] .tile .name { flex: 0 0 220px; } }
}


/* ---------- grid (Chrome 57) ----------
   Flex rows that wrap, with the gap as margins: the container pulls back
   half a gap on every side and each item puts it back, so items meet the
   edges where grid put them and sit a whole gap apart. */
@supports not (display: grid) {
  /* The main menu: six columns, TV and Radio two wide. */
  .grid { display: flex; flex-wrap: wrap; margin: -8px; }
  .grid > .tile { width: calc(100% / 6 - 16px); margin: 8px; }
  .grid > .tile.big { width: calc(100% / 3 - 16px); }
  @media (max-width: 900px) {
    .grid > .tile { width: calc(25% - 16px); }
    .grid > .tile.big { width: calc(50% - 16px); }
  }
  @media (max-width: 640px) {
    .grid > .tile { width: calc(50% - 16px); }
    .grid > .tile.big { width: calc(100% - 16px); }
  }
  .grid.scan > .tile, .grid.scan > .tile.big { width: calc(50% - 16px); }
  .grid.scan.three > .tile, .grid.scan.three > .tile.big { width: calc(100% / 3 - 16px); }
  /* Dock, Rail and Rows make the menu a flex row or column of their own. */
  [data-layout="dock"][data-route="home"] .grid,
  [data-layout="rail"][data-route="home"] .grid,
  [data-layout="rows"][data-route="home"] .grid { flex-wrap: nowrap; margin: 0; }
  [data-layout="dock"][data-route="home"] .grid > .tile { margin: 0; }
  [data-layout="rail"][data-route="home"] .grid > .tile,
  [data-layout="rows"][data-route="home"] .grid > .tile { width: auto; margin: 0; }
  /* Rail: the menu column first, the greeting in the rest, at the foot. */
  [data-layout="rail"][data-route="home"] section { display: flex; }
  [data-layout="rail"][data-route="home"] .grid { order: -1; flex: 0 0 27vw; min-width: 260px; }
  [data-layout="rail"][data-route="home"] .greeting { flex: 1; min-width: 0; align-self: flex-end; }

  .info-layout { display: flex; }
  .info-layout > :first-child { flex: 1 1 0; min-width: 0; }
  .info-layout > :last-child { flex: 1.2 1 0; min-width: 0; -webkit-margin-start: 22px; }
  @media (max-width: 760px) {
    .info-layout { display: block; }
    .info-layout > :last-child { -webkit-margin-start: 0; margin-top: 22px; }
  }

  /* Label and value side by side. Grid sized the label column to the longest
     label; a fixed share is the nearest a row-by-row layout can come. */
  .kv { display: flex; flex-wrap: wrap; margin-bottom: -6px; }
  .kv > * { margin-bottom: 6px; }
  .kv > :nth-child(odd) { width: 30%; -webkit-padding-end: 20px; }
  .kv > :nth-child(even) { width: 70%; }
  .chat-layout .kv { margin-bottom: -10px; }
  .chat-layout .kv > * { margin-bottom: 10px; }

  /* Replaced elements are not stretched in grid, and are in flex. */
  .movie-layout { display: flex; align-items: flex-start; }
  .movie-layout > img { flex: 0 0 240px; width: 240px; }
  .movie-layout > div { flex: 1; min-width: 0; -webkit-margin-start: 22px; }
  @media (max-width: 640px) {
    .movie-layout { display: block; }
    .movie-layout > div { -webkit-margin-start: 0; margin-top: 22px; }
  }

  .wx-days { display: flex; flex-wrap: wrap; margin: 20px -4px -8px; }
  .wx-days > .wx-day { width: calc(100% / 7 - 8px); margin: 0 4px 8px; }
  @media (max-width: 760px) { .wx-days > .wx-day { width: calc(25% - 8px); } }

  /* padding 12px 6px 24px and a 16px gap, as margins. */
  .application-grid { display: flex; flex-wrap: wrap; padding: 4px 0 16px; margin: 0 -2px; }
  .application-grid > * { width: calc(20% - 16px); margin: 8px; }
  @media (max-width: 700px) { .application-grid > * { width: calc(100% / 3 - 16px); } }
  @media (max-width: 420px) { .application-grid > * { width: calc(50% - 16px); } }

  .chat-layout { display: flex; align-items: flex-start; }
  .chat-layout > .qr { flex: 0 0 340px; width: 340px; }
  .chat-layout > .qr + div { flex: 1; min-width: 0; -webkit-margin-start: 28px; }
  @media (max-width: 760px) {
    .chat-layout { display: block; }
    .chat-layout > .qr { width: auto; }
    .chat-layout > .qr + div { -webkit-margin-start: 0; margin-top: 28px; }
  }

  .cal-dow, .cal-week { display: flex; margin-left: -3px; margin-right: -3px; }
  .cal-dow > *, .cal-week > * { flex: 1 1 0; min-width: 0; margin: 0 3px; }
}


/* ---------- display: contents (Chrome 65) ----------
   The info bar's NOW and NEXT are a grid whose rows are made of the
   children of .ev. Without contents, each .ev is a row of its own. */
@supports not (display: contents) {
  /* app.css aligns the grid's items on their baseline; in a column that would
     stop the rows stretching, and the progress bar would have no width. */
  .player .osd .prog { display: flex; flex-direction: column; align-items: stretch; }
  .player .osd .prog > * + * { margin-top: .34em; }
  .player .osd .ev { display: flex; align-items: baseline; }
  .player .osd .ev > * + * { -webkit-margin-start: .6em; }
  .player .osd .ev > * + .tm { -webkit-margin-start: .706em; }                            /* .6 / .85, see flex gap */
  .player .osd .ev > * + .ttl { -webkit-margin-start: .571em; }                           /* .6 / 1.05 */
  /* Grid gave both labels the width of the longer word; this keeps NOW and
     NEXT in step, and a longer word only moves its own row. */
  .player .osd .ev .lbl { min-width: 2.6em; }                                             /* NEXT */
}


/* ---------- aspect-ratio (Chrome 88) ----------
   The card's width is known (see .card above), and the picture fills it
   inside the 2px focus border: its height is that width less 4px, over 1.6,
   or times 1.5 for a film poster. */
@supports not (aspect-ratio: 1 / 1) {
  .card .img { height: 116.25px; }
  @media (min-width: 1187.5px) { .card .img { height: calc(10vw - 2.5px); } }
  @media (min-width: 1812.5px) { .card .img { height: 178.75px; } }
  .card.wide .img { height: 135px; }
  @media (min-width: 1100px) { .card.wide .img { height: calc(12.5vw - 2.5px); } }
  @media (min-width: 1700px) { .card.wide .img { height: 210px; } }
  .card .img.poster { height: 279px; }
  @media (min-width: 1187.5px) { .card .img.poster { height: calc(24vw - 6px); } }
  @media (min-width: 1812.5px) { .card .img.poster { height: 429px; } }
  .card.vod-card .img.poster { position: relative; height: 0; padding-top: 150%; }
  .card.vod-card .img.poster img { position: absolute; top: 0; left: 0; }
  /* The QR column is 340px wide wherever the dialog is two columns. */
  .chat-layout .qrbox { height: 340px; }
}


/* ---------- flex gap (Chrome 84) ----------
   A row: every item after the first steps away from the one before it
   (-webkit-margin-start follows the reading direction, as gap does). A
   column: the same downwards. Rows that wrap use half a gap all round,
   taken back from the container's padding or margin. Where an item already
   had a margin of its own, the rule adds the two together. */
.no-flexgap .topbar > .left { -webkit-margin-end: 14px; }
@media (min-width: 700px) { .no-flexgap .topbar > .left { -webkit-margin-end: 2vw; } }
@media (min-width: 1500px) { .no-flexgap .topbar > .left { -webkit-margin-end: 30px; } }
.no-flexgap .topbar > .right,
.no-flexgap .topbar .home-btn + .fs-btn { -webkit-margin-start: 14px; }
@media (min-width: 700px) {
  .no-flexgap .topbar > .right,
  .no-flexgap .topbar .home-btn + .fs-btn { -webkit-margin-start: 2vw; }
}
@media (min-width: 1500px) {
  .no-flexgap .topbar > .right,
  .no-flexgap .topbar .home-btn + .fs-btn { -webkit-margin-start: 30px; }
}
.no-flexgap .topbar .left > * + * { -webkit-margin-start: 14px; }
.no-flexgap .topbar .left > .wx { -webkit-margin-start: 32px; }                          /* 14 + 18 */
.no-flexgap .topbar .left > .music-btn { -webkit-margin-start: 28px; }                   /* 14 + 14 */
.no-flexgap .topbar .left > .lang-btn, .no-flexgap .topbar .left > .set-btn { -webkit-margin-start: 22px; } /* 14 + 8 */
.no-flexgap .topbar .wx > * + * { -webkit-margin-start: 10px; }

.no-flexgap .scanbox .found > * + * { -webkit-margin-start: 22px; }
.no-flexgap .scanbox .sig > * + * { -webkit-margin-start: 18px; }

/* The About lines: 3px between lines, 22px between pairs (the rule between
   them sits at -11px, the middle of that). */
.no-flexgap .settings .hint.block { margin-bottom: -3px; -webkit-margin-end: -22px; }
.no-flexgap .settings .hint.block > * { margin-bottom: 3px; -webkit-margin-end: 22px; }

.no-flexgap .tile > * + * { margin-top: 10px; }
.no-flexgap .row .cards > * + * { -webkit-margin-start: 16px; }

/* The loader's words are a bare text node, so the spinner carries the gap. */
.no-flexgap .loader > .spinner { margin-bottom: 20px; }
.no-flexgap .dialog .loader > .spinner { margin-bottom: 0; -webkit-margin-end: 12px; }

/* padding 14px 16px, gap 14px */
.no-flexgap .errbox { padding: 7px 9px; }
.no-flexgap .errbox > * { margin: 7px; }

.no-flexgap .actions { margin-bottom: -12px; -webkit-margin-start: -12px; }
.no-flexgap .actions > * { margin-bottom: 12px; -webkit-margin-start: 12px; }

.no-flexgap .chips { margin-bottom: -10px; -webkit-margin-start: -10px; }
.no-flexgap .chips > * { margin-bottom: 10px; -webkit-margin-start: 10px; }
.no-flexgap .chips.nights { margin-bottom: 8px; }                                         /* 18 - 10 */
.no-flexgap .chips.nights .chip > * + * { margin-top: 2px; }
.no-flexgap .chips.skins .chip.skin > .sw { -webkit-margin-end: 9px; }
.no-flexgap .assistant-suggestions { margin-bottom: -12px; -webkit-margin-start: -12px; }
.no-flexgap .assistant-suggestions > * { margin-bottom: 12px; -webkit-margin-start: 12px; }
.no-flexgap .assistant-quick { margin-bottom: 0; }
.no-flexgap .assistant-heading > * + * { -webkit-margin-start: 16px; }
.no-flexgap .assistant-compose > * + * { -webkit-margin-start: 12px; }
.no-flexgap .assistant-feedback > * + * { -webkit-margin-start: 12px; }

/* The title is a bare text node; whatever element follows it steps away. */
.no-flexgap .dialog header > * { -webkit-margin-start: 12px; }
/* padding 10px 24px 18px, gap 12px */
.no-flexgap .dialog footer { padding: 4px 18px 12px; }
.no-flexgap .dialog footer > * { margin: 6px; }
.no-flexgap .dialog .content.choices > * + * { margin-top: 12px; }

/* padding 8px, gap 16px 32px */
.no-flexgap .wake-time-picker { padding: 0; margin: 0 -8px; }
.no-flexgap .wake-time-picker > * { margin: 8px 16px; }
.no-flexgap .wake-time-part > * + * { margin-top: 8px; }
.no-flexgap .wake-time-controls > * + * { -webkit-margin-start: 16px; }

.no-flexgap .info-layout .times > * + * { -webkit-margin-start: 20px; }
.no-flexgap .list > * + * { margin-top: 10px; }
.no-flexgap .list .item > * + * { -webkit-margin-start: 14px; }
.no-flexgap .qty > * + * { -webkit-margin-start: 22px; }
.no-flexgap .stars > * + * { -webkit-margin-start: 6px; }
.no-flexgap .question > * + * { -webkit-margin-start: 14px; }

.no-flexgap .boot > * + * { margin-top: 18px; }
.no-flexgap .boot > .errbox { margin-top: 34px; }                                         /* 18 + 16 */
.no-flexgap .settings .checkbox-option > input { -webkit-margin-end: 12px; }

.no-flexgap .wx-now { margin-bottom: -22px; -webkit-margin-end: -22px; }
.no-flexgap .wx-now > * { margin-bottom: 22px; -webkit-margin-end: 22px; }
.no-flexgap .wx-search > * + * { -webkit-margin-start: 10px; }
.no-flexgap .card .img.wx-card > * + * { margin-top: 4px; }

.no-flexgap .live-boot .lb > * + * { margin-top: 16px; }
.no-flexgap .live-boot .lb > .btns { margin-top: 22px; }                                  /* 16 + 6 */
.no-flexgap .live-boot .btns { margin-bottom: -12px; -webkit-margin-end: -12px; }
.no-flexgap .live-boot .btns > * { margin-bottom: 12px; -webkit-margin-end: 12px; }

.no-flexgap .player .radio-art > * + * { margin-top: 18px; }
/* The info bar spaces in em. A gap's em is the bar's; a margin's is the item's
   own, so an item with a font size of its own gets the gap divided by it. */
.no-flexgap .player .osd > * + * { margin-top: .5em; }
.no-flexgap .player .osd.live-banner > * + * { margin-top: 0; }
.no-flexgap .player .osd.live-banner > .live-progress { margin-top: .7em; }
.no-flexgap .player .osd > .hint { margin-top: .926em; }                                  /* .5 / .54 */
.no-flexgap .player .osd .osd-main > * + * { -webkit-margin-start: 1em; }
.no-flexgap .player .osd .ch > * + * { -webkit-margin-start: .55em; }
.no-flexgap .player .osd .ch > .name { -webkit-margin-start: .423em; }                    /* .55 / 1.3 */
.no-flexgap .player .osd .mid > * + * { -webkit-margin-start: .5em; }
.no-flexgap .player .osd .mid > .left { -webkit-margin-start: .641em; }                   /* .5 / .78 */
.no-flexgap .player .tracks > * + * { -webkit-margin-start: 10px; }
.no-flexgap .player .chlist .ci > * + * { -webkit-margin-start: 12px; }
.no-flexgap .bouquet-strip > * + * { -webkit-margin-start: 8px; }
.no-flexgap .player .epg .epg-head > * + *,
.no-flexgap .player .epg .epg-row > * + * { -webkit-margin-start: 12px; }
.no-flexgap .player .epg .epg-ch > * + * { -webkit-margin-start: 10px; }

.no-flexgap .application-live > * + * { -webkit-margin-start: 12px; }
.no-flexgap .register .devid > * + * { -webkit-margin-start: 8px; }

/* padding 14px 20px, gap 18px */
.no-flexgap .ap-head { padding: 5px 11px; }
.no-flexgap .ap-head > * { margin: 9px; }
.no-flexgap .ap-head .apwx > * + * { -webkit-margin-start: 10px; }

/* On the text, not the icon: the icon is a .cal, and .cal { margin: 0 auto } is
   what places it — a margin set on it would replace one of those autos. */
.no-flexgap .datebtn > :first-child { -webkit-margin-end: 10px; }
.no-flexgap .cal-head > * + * { -webkit-margin-start: 12px; }

/* layouts.css */
.no-flexgap[data-layout="dock"][data-route="home"] .grid > * + * { -webkit-margin-start: 12px; }
.no-flexgap[data-layout="dock"][data-route="home"] .tile > * + * { margin-top: 6px; }
.no-flexgap[data-layout="rail"][data-route="home"] .grid > * + * { margin-top: 6px; }
.no-flexgap[data-layout="rail"][data-route="home"] .tile > * + * { margin-top: 0; -webkit-margin-start: 14px; }
.no-flexgap[data-layout="rows"][data-route="home"] .grid > * + * { margin-top: 5px; }
@media (min-height: 625px) { .no-flexgap[data-layout="rows"][data-route="home"] .grid > * + * { margin-top: .8vh; } }
@media (min-height: 1250px) { .no-flexgap[data-layout="rows"][data-route="home"] .grid > * + * { margin-top: 10px; } }
.no-flexgap[data-layout="rows"][data-route="home"] .tile > * + * { margin-top: 0; -webkit-margin-start: 20px; }