/*
 * Alien skin - dedicated stylesheet.
 *
 * Mirrors docs/garage-dashboard.css: new alien-only work lands here rather
 * than growing the 120KB+ cartoon-dashboard.css shared by both cartoon skins.
 * Loaded after it, so these rules win without !important. Every selector is
 * scoped to html[data-skin="alien"], so this file is inert for the other
 * four skins.
 *
 * Presentation only - values still come from dashboard_data.json, and missing
 * data still renders "--".
 */

/* ============================================================ hour cards ===
 *
 * The hour card used to be a painted plate (alien-forecast-card.webp) with
 * decorative energy streaks hue-rotated per tier. Those streaks looked like
 * data but were byte-identical on a 34% hour and a 98% one, and their busy
 * centre left nothing legible on top of them.
 *
 * The card is now an instrument read rather than an illustration: a dark
 * glass slab with tier-coloured corner brackets, and a real METEOROLOGICAL
 * WIND BARB as its centre mark (windBarb() in cartoon-dashboard.js). The
 * barb is the notation used on synoptic charts worldwide - shaft points
 * into the wind, half barb 5 kt, full barb 10 kt, pennant 50 kt - so it
 * carries an exact speed to 5 kt AND the bearing in one mark, and anyone
 * who has read a weather chart can already read it.
 *
 * The painted art is kept underneath as faint texture so the card still
 * belongs to the illustrated world, just far enough back to stay quiet.
 */

/* ------------------------------------------------------------- the slab */

html[data-skin="alien"] .cs-hour {
  /* Row 3 is the glyph row; the barb is square, so it needs real height
     rather than the 22px strip the flat glyph sat in. */
  grid-template-rows:auto auto minmax(68px,1fr) auto auto;
  min-height:232px;
  /* The bottom strip is reserved on every card, not just the selected one, so
     the "BEST WINDOW" ribbon has somewhere to sit inside the slab. It used to
     be pinned at bottom:-9px on a card with overflow:hidden, which sliced the
     label in half on whichever hour won. */
  padding:14px 9px 28px;
  border:1px solid rgba(38,110,168,.55);
  /* One clipped corner: a straight-edged panel with a single cut reads as
     built rather than drawn, and it is the same corner on every card so it
     never implies a difference between hours. */
  border-radius:3px 3px 3px 16px;
  background-color:#061529;
  background-image:linear-gradient(180deg,rgba(23,102,154,.16),transparent 46%);
  box-shadow:
    inset 0 1px 0 rgba(140,220,255,.07),
    0 10px 26px rgba(0,0,0,.5);
}

/* Tier tint: a wash at the head of the slab, not a full-bleed fill. The old
   per-tier backgrounds (#0b261b / #21190b) muddied the whole card. */
html[data-skin="alien"] .cs-hour.good {
  background-color:#05170f;
  background-image:linear-gradient(180deg,rgba(184,255,46,.17),transparent 44%);
  border-color:rgba(133,208,44,.5);
}
html[data-skin="alien"] .cs-hour.marginal {
  background-color:#161005;
  background-image:linear-gradient(180deg,rgba(255,176,32,.17),transparent 44%);
  border-color:rgba(200,138,32,.5);
}
html[data-skin="alien"] .cs-hour.unlikely {
  background-color:#04101f;
  background-image:linear-gradient(180deg,rgba(0,223,252,.13),transparent 44%);
  border-color:rgba(38,110,168,.5);
}

/* Corner brackets, drawn as eight background segments on one pseudo-element -
   the tier colour is carried by currentColor, so it follows the card without
   a rule per tier. */
html[data-skin="alien"] .cs-hour::before {
  content:"";
  display:block;
  position:absolute;
  z-index:2;
  inset:5px;
  pointer-events:none;
  opacity:.55;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor),
    linear-gradient(currentColor,currentColor), linear-gradient(currentColor,currentColor);
  background-size:10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px,10px 1px,1px 10px;
  background-position:
    0 0,0 0,
    100% 0,100% 0,
    0 100%,0 100%,
    100% 100%,100% 100%;
}

/* The painted plate drops to texture. The hue-rotate filters that used to
   recolour it per tier go with it - the tier signal now lives in the border,
   the wash, the brackets and the barb, all of which are actually legible. */
html[data-skin="alien"] .alien-hour-art {
  z-index:0;
  opacity:.13;
  filter:saturate(.55) contrast(.9);
  mix-blend-mode:screen;
  -webkit-mask:linear-gradient(180deg,#000,rgba(0,0,0,.25) 55%,transparent);
  mask:linear-gradient(180deg,#000,rgba(0,0,0,.25) 55%,transparent);
}
html[data-skin="alien"] .cs-hour.marginal .alien-hour-art,
html[data-skin="alien"] .cs-hour.unlikely .alien-hour-art {
  filter:saturate(.55) contrast(.9);
}

/* --------------------------------------------------------- the wind barb */

/* windGlyph()'s stencil mark is the garage read; alien shows the barb. */
html[data-skin="alien"] .cs-hour > .cs-windglyph { display:none; }

html[data-skin="alien"] .cs-hour > .cs-windbarb {
  display:block;
  position:relative;   /* above .alien-hour-art, like the other card children */
  z-index:2;
  align-self:center;
  width:78px;
  height:78px;
  margin:0 auto;
  overflow:visible;
  filter:drop-shadow(0 0 5px currentColor);
}
/* The station circle sits on the plotted point, so it is filled with the
   slab colour rather than left transparent over the texture. */
html[data-skin="alien"] .cs-barb-core {
  fill:rgba(3,12,26,.9);
  stroke-width:1.9;
}
/* Stroke weight is tuned per skin rather than baked into the markup - the
   barb reads thin against a glowing card at the SVG's neutral default. */
html[data-skin="alien"] .cs-barb-shaft,
html[data-skin="alien"] .cs-barb-tick { stroke-width:2.7; }
/* Calm and "no fix" are deliberately quieter than a real reading. */
html[data-skin="alien"] .cs-barb-calm { opacity:.5; }
html[data-skin="alien"] .cs-barb-void { opacity:.4; }

/* -------------------------------------------------------------- readouts */

html[data-skin="alien"] .cs-hour span {
  color:#8fb6d6;
  letter-spacing:.1em;
}
html[data-skin="alien"] .cs-hour strong {
  margin-top:8px;
  color:#f2f7ff;
  text-shadow:0 0 10px currentColor;
}
html[data-skin="alien"] .cs-hour small {
  margin-top:6px;
  color:#8fb6d6;
  letter-spacing:.1em;
}

/* ----------------------------------------------------------- tier badge */

/* The plate asset carried an opaque surround, leaving a hard rectangle on
   the card - the same matte problem the garage badge had. Drawn in CSS. */
html[data-skin="alien"] .cs-hour b {
  width:88%;
  min-height:0;
  margin:0 auto;
  padding:5px 8px 4px;
  color:inherit;                /* the card's tier colour, not a per-tier list */
  border:1px solid currentColor;
  border-radius:2px;
  background:rgba(4,12,28,.66);
  background-image:none;
  box-shadow:inset 0 0 10px rgba(0,0,0,.5);
  text-shadow:0 0 7px currentColor;
  letter-spacing:.1em;
}
/* The old badge recoloured itself by hue-rotating the whole element. That
   worked on a painted plate; on a CSS-drawn one it dragged the border and the
   text off-hue too - UNLIKELY came out magenta. Repeated at tier specificity
   because that is where the hue-rotate lives. */
html[data-skin="alien"] .cs-hour.good b,
html[data-skin="alien"] .cs-hour.marginal b,
html[data-skin="alien"] .cs-hour.unlikely b {
  color:inherit;
  filter:none;
}

/* ------------------------------------------------------- selected window */

/* The pick gets an active scan sweep - one animated card, not ten. */
html[data-skin="alien"] .cs-hour.selected {
  /* Full shorthand: the rule this replaces sets `border:0`, so a longhand
     width/colour pair alone would leave border-style at none. */
  border:1px solid rgba(184,255,46,.85);
  background-color:#06200f;
  background-image:linear-gradient(180deg,
    transparent 0 60%,
    rgba(184,255,46,.42) 78%,
    rgba(184,255,46,.9) 92%,
    rgba(214,255,150,.95) 100%);
  background-repeat:no-repeat;
  background-size:100% 44px;
  box-shadow:
    inset 0 0 26px rgba(184,255,46,.1),
    0 0 0 1px rgba(184,255,46,.28),
    0 0 26px rgba(184,255,46,.3);
  animation:alienScan 3.4s linear infinite;
}
html[data-skin="alien"] .cs-hour.selected::before { opacity:1; }

/* Sits in the reserved bottom strip instead of hanging off the card edge at
   bottom:-9px, where the slab's own overflow:hidden sliced it in half. */
html[data-skin="alien"] .cs-hour.selected::after {
  content:"\2605 BEST WINDOW";
  z-index:3;
  right:9px;
  bottom:7px;
  left:9px;
  padding:3px 2px 2px;
  color:#06180a;
  border-radius:2px;
  background:#b8ff2e;
  box-shadow:0 0 12px rgba(184,255,46,.55);
  font:700 8.5px/1 var(--mono);
  letter-spacing:.13em;
}

@keyframes alienScan {
  from { background-position:0 -44px; }
  to   { background-position:0 100%; }
}

/* --------------------------------------------------------------- masthead */

/* The eyebrow repeated the <h1> verbatim, printing "WINGCHECK · SILVAPLANA"
   twice, stacked - the same duplication that was fixed in garage. */
html[data-skin="alien"] .cs-eyebrow { display:none; }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion:reduce) {
  html[data-skin="alien"] .cs-hour.selected { animation:none; }
  html[data-skin="alien"] .cs-windbarb { filter:none; }
}