/* =====================================================================
   XMAS-RADIO-v1: the Christmas radio's HOMEPAGE desktop skin.
   Loaded by index.html only, after xr-radio.css, with
   media="(min-width: 1024px)", inside the XMAS-RADIO-v1:css sentinel.
   See the header of xr-radio.css for the sentinel convention, how the
   radio is switched off after Christmas (scripts/xmas-banner.js "off")
   and where the music license record lives
   (files/account/audio/christmas-radio/LICENSE.txt).

   At 1024 and up the homepage radio is a small vintage set that sits by
   the Christmas hero's "Lights on" wall switch (xmas-banner.css). It
   starts collapsed and opens only when the visitor clicks it. Every rule
   is inside one min-width: 1024px block and scoped under
   #xr-radio.xr-band--home. Below 1024 the homepage uses the in-page
   console from xr-radio.css.
   ===================================================================== */
/* ---------- homepage, 1024 and up: the little vintage radio by the wall switch ----------
   Out of the flow (position: absolute inside the hero, so it scrolls away
   with it and can never move the page). Two states:
     (default)  a small radio, the same size family as the switch plate
     .is-open   the whole set: speaker, dial window, power, volume, next
   WHERE IT SITS. The switch is top 4.5rem / right 2rem and 83 x 102 at these
   widths (xmas-banner.css). The radio hangs directly under it on the same
   center line, but only when that patch of the photo is dark. The house is
   sized from the hero's height and slid sideways by its width, so on shorter
   or narrower desktops the right gable's lights run under the switch; there
   the radio sits beside the switch instead, in the sky. The choice is made
   here in CSS from the hero's own numbers (--pw photo width, --gut, --colw),
   so it is right at first paint and needs no script:
     --xr-lp   the photo's left edge
     --xr-x    the radio's left edge, measured across the photo
     --xr-fit  > 0 when the radio clears the lights. Measured from the photo:
               right of 0.84 of its width the highest bulbs are the lower
               eave at 0.299 of its width down, and the stack under the
               switch ends 278px down, so it needs 286
     --xr-u    1px when it fits under the switch, 0px when it does not */
@media (min-width: 1024px) {
  #xr-radio.xr-band--home {
    --xr-ivory: linear-gradient(160deg, #faf7f0 0, #e7e0d2 55%, #d3cbba 100%);
    --xr-glassd: linear-gradient(#1b1813, #3a342b);
    --xr-lp: max(100vw - 15px - var(--pw), var(--gut) + var(--colw) + 28px - var(--pw) * .2514);
    --xr-x: calc(100vw - 121px - var(--xr-lp));
    --xr-fit: min(var(--xr-x) - var(--pw) * .84, var(--pw) * .299 - 286px);
    --xr-u: clamp(0px, var(--xr-fit) * 1000, 1px);
    position: absolute;
    z-index: 3;
    top: calc(4.5rem + var(--xr-u) * 112);
    right: calc(2rem + 8px + (1px - var(--xr-u)) * 91);
    height: calc(52px + var(--xr-u) * 42);
    width: 66px;
    margin: 0;
    padding: 0;
  }
  #xr-radio.xr-band--home:not(.is-open) .xr-inner,
  #xr-radio.xr-band--home:not(.is-open) .xr-foot { display: none; }
  #xr-radio.xr-band--home.is-open { top: calc(4.5rem + 112px); right: 2rem; width: 286px; height: auto; }
  #xr-radio.xr-band--home.is-open button.xr-tiny { display: none; }

  /* the small radio and its caption, lettered like the switch's "Lights on".
     Under the switch the caption sits over the set, as the switch's does;
     beside the switch it moves to the set's left, clear of "Lights on". */
  #xr-radio.xr-band--home button.xr-tiny {
    all: unset;
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 66px;
    height: 100%;
    padding-top: calc(var(--xr-u) * 42);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #xr-radio.xr-band--home button.xr-tiny:focus-visible {
    outline: 3px solid var(--xr-gold) !important;
    outline-offset: 5px;
    border-radius: 8px;
  }
  #xr-radio.xr-band--home .xr-chip {
    position: absolute;
    top: calc(15px - var(--xr-u) * 15);
    left: calc(-146px + var(--xr-u) * 135);
    box-sizing: border-box;
    width: calc(138px - var(--xr-u) * 50);
    padding: .38em 0 .38em .16em;
    text-align: center;
    border-radius: 11px;
    background: rgba(8, 10, 20, .62);
    font: 700 .72rem/1.18 'Titillium Web', Arial, sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #c9c1b2;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
  }
  #xr-radio.xr-band--home.is-blocked .xr-chip { color: var(--xr-gold); }
  #xr-radio.xr-band--home .xr-tiny-set {
    position: relative;
    display: block;
    width: 66px;
    height: 52px;
    border-radius: 17px 17px 10px 10px;
    background:
      radial-gradient(120% 80% at 20% 0, rgba(140, 86, 58, .9), rgba(140, 86, 58, 0) 60%),
      linear-gradient(160deg, #54301f 0, #371d13 55%, #1e0f0a 100%);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 235, 215, .3), inset 0 -3px 4px rgba(0, 0, 0, .4);
    transition: transform .15s ease;
  }
  #xr-radio.xr-band--home button.xr-tiny:hover .xr-tiny-set { transform: translateY(-2px); }
  #xr-radio.xr-band--home .xr-tiny-set span { position: absolute; display: block; }
  #xr-radio.xr-band--home .xr-tiny-dial {
    left: 10px;
    right: 10px;
    top: 9px;
    height: 15px;
    border-radius: 5px;
    background: var(--xr-glassd);
    box-shadow: 0 0 0 2px #e7e0d2, inset 0 2px 3px rgba(0, 0, 0, .6);
    transition: box-shadow .5s ease;
  }
  #xr-radio.xr-band--home .xr-tiny-dial::after {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 62%;
    width: 2px;
    border-radius: 1px;
    background: #b42929;
  }
  #xr-radio.xr-band--home.is-on .xr-tiny-dial {
    background: radial-gradient(120% 140% at 50% 40%, #fff6dc 0, #ffd88a 60%, #eebc63 100%);
    box-shadow: 0 0 0 2px #e7e0d2, 0 0 14px 2px rgba(255, 216, 138, .75);
  }
  #xr-radio.xr-band--home .xr-tiny-grille {
    left: 24px;
    right: 24px;
    bottom: 9px;
    height: 12px;
    background: repeating-linear-gradient(180deg, #b79a66 0 2px, rgba(0, 0, 0, 0) 2px 4.5px);
    opacity: .9;
  }
  #xr-radio.xr-band--home .xr-tiny-knobs { left: 0; right: 0; bottom: 10px; height: 9px; }
  #xr-radio.xr-band--home .xr-tiny-knobs::before,
  #xr-radio.xr-band--home .xr-tiny-knobs::after {
    content: "";
    position: absolute;
    top: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fffdf8, #d9d1c0 70%, #a89f8a);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  }
  #xr-radio.xr-band--home .xr-tiny-knobs::before { left: 9px; }
  #xr-radio.xr-band--home .xr-tiny-knobs::after { right: 9px; }

  /* the whole set: a brown cabinet on two stubby feet */
  #xr-radio.xr-band--home .xr-inner { display: block; width: auto; margin: 0; }
  #xr-radio.xr-band--home .xr-line { display: none; }
  #xr-radio.xr-band--home .xr-set {
    grid-template-columns: 80px 44px minmax(0, 1fr);
    grid-template-rows: 72px 51px 10px;
    grid-template-areas: "grille dial dial" "grille power ctl" "grille caps caps";
    gap: 0 9px;
    width: 286px;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 12px 12px 9px;
    border-radius: 24px 24px 13px 13px;
    background:
      radial-gradient(90% 70% at 14% 0, rgba(140, 86, 58, .85), rgba(140, 86, 58, 0) 62%),
      linear-gradient(160deg, #54301f 0, #371d13 52%, #1e0f0a 100%);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 235, 215, .32), inset 0 -4px 6px rgba(0, 0, 0, .42);
  }
  #xr-radio.xr-band--home .xr-screw {       /* the feet */
    display: block;
    position: absolute;
    top: auto;
    bottom: -4px;
    width: 26px;
    height: 5px;
    margin: 0;
    border-radius: 0 0 4px 4px;
    background: #140a06;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  }
  #xr-radio.xr-band--home .xr-screw-a { left: 30px; }
  #xr-radio.xr-band--home .xr-screw-b { left: auto; right: 30px; }
  #xr-radio.xr-band--home .xr-grille {      /* cloth behind moulded louvres */
    margin-bottom: 28px;
    border-radius: 14px 8px 8px 8px;
    background:
      linear-gradient(180deg, rgba(255, 235, 215, .2) 0 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 100% 12px,
      repeating-linear-gradient(180deg, #3d2216 0 6px, rgba(0, 0, 0, .55) 6px 7px, rgba(0, 0, 0, 0) 7px 12px),
      repeating-linear-gradient(90deg, rgba(60, 40, 14, .5) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
      linear-gradient(180deg, #c2a56f, #9a7d49);
    box-shadow: inset 0 3px 7px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 235, 215, .16);
  }
  /* dial window: ivory bezel, dark glass that lights up */
  #xr-radio.xr-band--home .xr-dial {
    border: 3px solid transparent;
    border-radius: 11px;
    background: var(--xr-glassd) padding-box, var(--xr-ivory) border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  }
  #xr-radio.xr-band--home.is-on .xr-dial { box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 0 16px 1px rgba(255, 216, 138, .5); }
  #xr-radio.xr-band--home .xr-glass {
    border-radius: 8px;
    background: radial-gradient(120% 150% at 50% 45%, #fff6dc 0, #ffd88a 58%, #e9b45c 100%);
    box-shadow: inset 0 1px 3px rgba(92, 52, 8, .45);
  }
  #xr-radio.xr-band--home .xr-win { display: none; }
  #xr-radio.xr-band--home .xr-read {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    height: 66px;
    padding: 5px 10px 13px;
  }
  #xr-radio.xr-band--home .xr-read span {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: color .4s ease;
  }
  #xr-radio.xr-band--home .xr-read-k,
  #xr-radio.xr-band--home .xr-read-by { font: 700 .62rem/1.1 'Titillium Web', Arial, sans-serif; color: #d6cdbb; }
  #xr-radio.xr-band--home .xr-read-k { letter-spacing: .12em; text-transform: uppercase; }
  #xr-radio.xr-band--home .xr-read-by { font-weight: 600; }
  #xr-radio.xr-band--home .xr-read-by:empty { display: none; }
  #xr-radio.xr-band--home .xr-read-t {
    padding-top: 2px;
    font: 600 1.42rem/1 'Teko', 'Titillium Web', Arial, sans-serif;
    letter-spacing: .02em;
    color: var(--xr-gold);
  }
  #xr-radio.xr-band--home .xr-read-t.xr-long {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1.06rem;
    white-space: normal;
  }
  #xr-radio.xr-band--home.is-on .xr-read-k,
  #xr-radio.xr-band--home.is-on .xr-read-by { color: #5a3a12; }
  #xr-radio.xr-band--home.is-on .xr-read-t { color: #2a1608; }
  /* station scale and needle; the needle moves one stop per carol */
  #xr-radio.xr-band--home .xr-dial::after {
    left: 8px;
    right: 8px;
    bottom: 4px;
    height: 6px;
    background: repeating-linear-gradient(90deg, currentColor 0 1px, rgba(0, 0, 0, 0) 1px 6px);
    color: rgba(214, 205, 187, .5);
    opacity: 1;
  }
  #xr-radio.xr-band--home.is-on .xr-dial::after { color: rgba(60, 34, 8, .6); opacity: 1; }
  #xr-radio.xr-band--home .xr-needle {
    left: calc(8px + (100% - 16px) * var(--xr-nf, .08));
    bottom: 2px;
    width: 2px;
    height: 11px;
    margin-left: -1px;
    border-radius: 1px;
    background: #b42929;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
    transform: none;
  }
  #xr-radio.xr-band--home .xr-needle::before { display: none; }

  /* power: a fluted ivory knob with a pointer line that turns from off to on */
  #xr-radio.xr-band--home button.xr-power {
    align-self: end;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
  }
  #xr-radio.xr-band--home .xr-slot,
  #xr-radio.xr-band--home button.xr-knob {
    background:
      repeating-conic-gradient(from 0deg, rgba(60, 50, 30, .22) 0 7.5deg, rgba(255, 255, 255, 0) 7.5deg 15deg),
      radial-gradient(circle at 36% 30%, #fffdf8, #e2dbcb 60%, #b3aa95);
    box-shadow: 0 4px 7px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .5), inset 0 1px 0 #fff;
  }
  #xr-radio.xr-band--home .xr-slot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transform: rotate(-48deg);
    transition: transform .16s cubic-bezier(.5, 1.8, .5, 1);
  }
  #xr-radio.xr-band--home.is-on .xr-slot { transform: rotate(48deg); }
  #xr-radio.xr-band--home .xr-slot::before,
  #xr-radio.xr-band--home button.xr-knob::before {   /* the smooth cap */
    content: "";
    position: absolute;
    inset: 6px;
    width: auto;
    height: auto;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #fffdf8, #ebe4d5 62%, #cfc7b5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 #fff;
  }
  #xr-radio.xr-band--home .xr-lever,
  #xr-radio.xr-band--home.is-on .xr-lever {
    left: 50%;
    top: 8px;
    width: 4px;
    height: 11px;
    margin-left: -2px;
    border-radius: 2px;
    background: #3a2114;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
    transform: none;
  }
  #xr-radio.xr-band--home .xr-now {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #xr-radio.xr-band--home .xr-ctl { align-self: end; gap: 8px; height: 44px; }
  #xr-radio.xr-band--home button.xr-knob {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 2px;
    color: #3a2114;
  }
  #xr-radio.xr-band--home button.xr-knob:hover { filter: brightness(1.05); }
  #xr-radio.xr-band--home .xr-knob svg { position: relative; width: 16px; height: 16px; }
  #xr-radio.xr-band--home button.xr-mute { display: none; }
  #xr-radio.xr-band--home.xr-novol button.xr-mute { display: grid; margin-left: auto; margin-right: auto; }
  /* volume: a slot and a lever, like the switch */
  #xr-radio.xr-band--home .xr-volwrap { flex: 1 1 auto; width: auto; }
  #xr-radio.xr-band--home input.xr-vol { height: 44px; border-radius: 8px; background: transparent; }
  #xr-radio.xr-band--home input.xr-vol::-webkit-slider-runnable-track {
    background: var(--xr-glassd);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 235, 215, .2);
  }
  #xr-radio.xr-band--home input.xr-vol::-moz-range-track {
    background: var(--xr-glassd);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 235, 215, .2);
  }
  #xr-radio.xr-band--home.is-on input.xr-vol::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--xr-gold) 0 var(--xr-v, 70%), rgba(0, 0, 0, 0) var(--xr-v, 70%)), var(--xr-glassd);
  }
  #xr-radio.xr-band--home.is-on input.xr-vol::-moz-range-track {
    background: linear-gradient(90deg, var(--xr-gold) 0 var(--xr-v, 70%), rgba(0, 0, 0, 0) var(--xr-v, 70%)), var(--xr-glassd);
  }
  #xr-radio.xr-band--home input.xr-vol::-webkit-slider-thumb { height: 24px; margin-top: -8px; border-radius: 4px; }
  #xr-radio.xr-band--home input.xr-vol::-moz-range-thumb { height: 24px; border-radius: 4px; }
  /* moulded captions under the controls, with the pilot lamp */
  #xr-radio.xr-band--home .xr-caps {
    grid-area: caps;
    align-self: end;
    display: flex;
    justify-content: space-between;
    font: 700 .56rem/1 'Titillium Web', Arial, sans-serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #e3d2b4;
  }
  #xr-radio.xr-band--home .xr-caps span { position: relative; min-width: 44px; text-align: center; }
  #xr-radio.xr-band--home .xr-caps span:first-child::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2a1810;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 235, 215, .22);
    transition: background-color .4s ease, box-shadow .4s ease;
  }
  #xr-radio.xr-band--home.is-on .xr-caps span:first-child::before { background: var(--xr-gold); box-shadow: 0 0 6px 1px rgba(255, 216, 138, .9); }
  #xr-radio.xr-band--home.xr-novol .xr-cap-vol { font-size: 0; }
  #xr-radio.xr-band--home.xr-novol .xr-cap-vol::after { content: "Mute"; font-size: .56rem; }

  /* tuck away: a small ivory button on the cabinet's shoulder */
  #xr-radio.xr-band--home button.xr-tuck {
    all: unset;
    position: absolute;
    top: -11px;
    left: -11px;   /* the far corner from the wall switch */
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--xr-ivory);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0, 0, 0, .45), inset 0 1px 0 #fff;
    color: #3a2114;
    cursor: pointer;
  }
  #xr-radio.xr-band--home button.xr-tuck::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
  #xr-radio.xr-band--home button.xr-tuck svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  #xr-radio.xr-band--home button.xr-tuck:hover { filter: brightness(1.06); }

  /* music credits: the maker's plate under the speaker; the card opens below the set */
  #xr-radio.xr-band--home .xr-foot { position: absolute; left: 12px; bottom: 9px; width: 80px; max-width: none; margin: 0; }
  #xr-radio.xr-band--home button.xr-cred-b,
  #xr-radio.xr-band--home button.xr-cred-b:hover {
    position: relative;
    display: block;
    width: 80px;
    height: 21px;
    margin: 0;
    padding: 0;
    border-radius: 4px;
    background: var(--xr-ivory);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 0, 0, .45), inset 0 1px 0 #fff;
    font: 700 .68rem/21px 'Titillium Web', Arial, sans-serif;
    letter-spacing: .01em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: #2f1a0f;
  }
  #xr-radio.xr-band--home button.xr-cred-b::before { content: ""; position: absolute; inset: -14px 0 -9px; }
  #xr-radio.xr-band--home button.xr-cred-b:hover { filter: brightness(1.05); }
  #xr-radio.xr-band--home button.xr-cred-b[aria-expanded="true"] { background: linear-gradient(160deg, #e7e0d2, #c4bba7); color: #2f1a0f; }
  #xr-radio.xr-band--home p.xr-cred {
    position: absolute;
    left: -12px;
    top: calc(100% + 21px);
    z-index: 5;
    width: 286px;
    margin: 0;
    padding: 12px 14px;
    border-color: rgba(255, 216, 138, .3);
    border-radius: 12px;
    background: #0d101c;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5);
    font-size: .8125rem;
    line-height: 1.45;
  }

  /* gold ring with a night collar: reads on the cabinet and on the photo */
  #xr-radio.xr-band--home button.xr-power:focus-visible,
  #xr-radio.xr-band--home button.xr-knob:focus-visible,
  #xr-radio.xr-band--home button.xr-tuck:focus-visible,
  #xr-radio.xr-band--home button.xr-cred-b:focus-visible,
  #xr-radio.xr-band--home input.xr-vol:focus-visible {
    outline: 3px solid var(--xr-gold) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 8px rgba(8, 10, 20, .86);
  }
}