/*
 * ARNIE skin - dedicated stylesheet (the persisted internal key remains
 * "tech" for backward compatibility with existing saved preferences).
 *
 * Scope rule: every selector starts with html[data-skin="tech"], so this file
 * is inert for CLASSIC / RETRO / GARAGE / ALIEN. Loaded last, after the other
 * per-skin sheets, so it wins over index.html's base rules without !important.
 *
 * ---------------------------------------------------------------------------
 * The design language
 *
 * The original TECH skin was a neon CRT: cyan glow, scanline overlay, blinking
 * cursor, pulsing headline. It read as hacker-movie set dressing, and the glow
 * cost legibility on the numbers people come here for.
 *
 * This is a technical SPEC SHEET, in the idiom of a foil manufacturer's
 * catalogue: a light ground, hairline rules, condensed uppercase display type
 * over monospaced data, and hours rendered as measured ROWS rather than tiles.
 * Ten hours occupy the space three cards used to, and scanning down a single
 * percentage column is faster than reading across a row of cards.
 *
 * Two colours, each with one job:
 *   BLUE (--tk-blue)   structure - section rules, primary actions, the mark.
 *   RED  (--tk-red)    the answer - the triangle in the mark, and the one hour
 *                      the model picks. It appears at most twice on a screen.
 * Tiers stay green/amber/grey as outlined chips so the semantic colours a
 * weather page needs are not spent on decoration.
 *
 * Everything colour-related is a token in the first block, so re-tinting is an
 * edit to that block and nothing else.
 *
 * Presentation only. No forecast logic, no data contract, no new values -
 * every number still comes from dashboard_data.json and missing data still
 * renders "--".
 */

/* ============================================================== tokens === */

html[data-skin="tech"] {
  /* Surface */
  --tk-paper:#F7F7F6;          /* page */
  --tk-panel:#FFFFFF;          /* cards */
  --tk-panel-2:#FAFAFA;        /* row hover */
  --tk-hair:#E3E3E1;           /* hairline rules */
  --tk-hair-2:#151515;         /* heavy rules - the spec-sheet header rule */

  /* Type */
  --tk-ink:#151515;
  --tk-grey:#6B6B6B;
  --tk-grey-2:#9B9B9B;

  /* The two accents. */
  --tk-blue:#0047BA;
  --tk-blue-dim:#003792;
  --tk-red:#E3242B;

  /* Tiers - outlined chips, semantic and quiet. */
  --tk-good:#1F7A43;
  --tk-marginal:#A96C12;
  --tk-unlikely:#9B9B9B;

  /* Base-sheet variables. Most of the page is built on these, so overriding
     them does the bulk of the reskin before a single component rule. */
  --ice:var(--tk-paper);
  --card:var(--tk-panel);
  --line:var(--tk-hair);
  --line-soft:#EDEDEB;
  --ink:var(--tk-ink);
  --ink-2:var(--tk-grey);
  --ink-3:var(--tk-grey-2);

  --blue:var(--tk-blue);
  --blue-soft:#EAF0FA;
  --blue-deep:var(--tk-blue-dim);
  --good:var(--tk-good);        --good-soft:#EAF4EE;  --good-ink:var(--tk-good);
  --warn:var(--tk-marginal);    --warn-soft:#FAF2E4;  --warn-ink:var(--tk-marginal);
  --bad-soft:#F1F1F0;           --bad-ink:var(--tk-grey);
  --crit:#C0272D;               --crit-soft:#FBECEC;  --crit-ink:#A81F24;

  /* Chakra Petch is a squared technical face - drafting-table rather than
     boardroom. IBM Plex Mono is already loaded by index.html, but the base
     sheet points --mono at JetBrains Mono, which is not in the font request at
     all; the tech skin names the face that actually arrives. */
  --display:'Chakra Petch',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  /* Hardware has edges. */
  --radius:0px;
  --radius-lg:0px;
  --shadow:none;

  color-scheme:light;
}

/* ================================================================ page === */

html[data-skin="tech"] body {
  background:var(--tk-paper);
  background-image:none;
  padding-top:5px;
}
/* Brand band. Deliberately a plain rule and not a fake announcement bar - it
   carries colour, not invented content. */
html[data-skin="tech"] body::before {
  content:"";
  position:fixed;
  z-index:60;
  top:0;
  right:0;
  left:0;
  height:5px;
  background:var(--tk-blue);
}
html[data-skin="tech"] body::after { content:none; }   /* was a scanline overlay */

html[data-skin="tech"] .wrap { max-width:1120px; }
html[data-skin="tech"] .global-report-trigger { display:none; }

html[data-skin="tech"] h1,
html[data-skin="tech"] h2,
html[data-skin="tech"] h3 {
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.02em;
}

/* ========================================================= brand lockup === */

/* The mark: a squared W whose centre peak is a red triangle. It is hidden by
   default in index.html and revealed here, so the other four skins - which
   have their own mastheads - are untouched. */
html[data-skin="tech"] .wc-brand {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:18px;
  color:var(--tk-ink);
}
html[data-skin="tech"] .wc-mark {
  display:block;
  width:48px;
  height:auto;
  flex:none;
}
html[data-skin="tech"] .wc-wordmark {
  display:flex;
  align-items:baseline;
  gap:7px;
  padding:0;
  font-family:var(--display);
  font-size:23px;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
  line-height:1;
}
html[data-skin="tech"] .wc-wordmark small {
  color:var(--tk-blue);
  font-family:var(--mono);
  font-size:8px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
/* Descriptor, the third element of the lockup. */
html[data-skin="tech"] .wc-brand::after {
  content:"SILVAPLANA";
  color:var(--tk-grey-2);
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.24em;
  padding-top:3px;
}
/* The kicker reads "SILVAPLANA · WINGCHECK", which the lockup above now says
   verbatim. Hidden rather than reworded: the markup is shared with four other
   skins that still use it. */
html[data-skin="tech"] .kicker { display:none; }

/* ============================================================== header === */

html[data-skin="tech"] .site-header {
  padding:30px 0 18px;
}
html[data-skin="tech"] .hero-wind { display:none; }

html[data-skin="tech"] h1 {
  font-family:'Arial Black','Chakra Petch',system-ui,sans-serif;
  font-size:clamp(32px,6.4vw,56px);
  font-weight:900;
  line-height:.96;
  letter-spacing:-.045em;
  -webkit-text-stroke:.35px currentColor;
}
html[data-skin="tech"] h1 em {
  color:var(--tk-blue);
  font-style:normal;
  text-shadow:none;
  animation:none;
}
html[data-skin="tech"] .kicker {
  margin-bottom:13px;
  padding:0;
  color:var(--tk-grey);
  border-radius:0;
  background:transparent;
  font-family:var(--mono);
  font-size:10px;
  font-weight:400;
  letter-spacing:.28em;
  text-transform:uppercase;
}
html[data-skin="tech"] .kicker::before {
  content:"";
  width:20px;
  height:2px;
  background:var(--tk-blue);
  flex:none;
}
html[data-skin="tech"] .header-sub {
  max-width:560px;
  margin-top:12px;
  color:var(--tk-grey);
  font-size:13.5px;
  line-height:1.6;
}
/* The clock has no base styling in any skin and renders as bare inline text. */
html[data-skin="tech"] .console-clock {
  display:block;
  margin-top:16px;
  color:var(--tk-grey);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
}
html[data-skin="tech"] .console-clock::before {
  content:"EUROPE/ZURICH  ";
  color:var(--tk-grey-2);
  font-size:9.5px;
  letter-spacing:.2em;
}
/* Heavy rule closing the masthead - the spec sheet's own header rule. */
html[data-skin="tech"] .header-inner::after {
  content:"";
  display:block;
  height:0;
  margin-top:22px;
  border-top:2px solid var(--tk-hair-2);
}

/* ================================================================ chips === */

html[data-skin="tech"] .chip,
html[data-skin="tech"] .badge {
  border-radius:0;
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
html[data-skin="tech"] .chip {
  padding:5px 10px;
  border:1px solid var(--tk-hair);
  background:transparent;
  color:var(--tk-grey);
}
html[data-skin="tech"] .badge { padding:4px 9px; }
html[data-skin="tech"] .badge .dot { border-radius:0; }

/* ================================================================ cards === */

html[data-skin="tech"] .card,
html[data-skin="tech"] details.tech,
html[data-skin="tech"] .latest-wind {
  position:relative;
  padding:20px 22px 22px;
  border:1px solid var(--tk-hair);
  border-radius:0;
  background:var(--tk-panel);
  box-shadow:none;
  clip-path:none;
}
html[data-skin="tech"] .card::before { content:none; }
html[data-skin="tech"] .card:hover { box-shadow:none; }

html[data-skin="tech"] .section-head {
  align-items:baseline;
  margin-bottom:12px;
  padding-bottom:9px;
  border-bottom:2px solid var(--tk-hair-2);
}
html[data-skin="tech"] .section-head h2 {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:15px;
  letter-spacing:.11em;
}
html[data-skin="tech"] .section-head h2::before {
  content:"";
  width:12px;
  height:2px;
  background:var(--tk-blue);
  flex:none;
}
html[data-skin="tech"] .section-head .hint,
html[data-skin="tech"] .hint {
  color:var(--tk-grey-2);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
}
html[data-skin="tech"] .explain {
  max-width:640px;
  color:var(--tk-grey);
  font-size:12.5px;
  line-height:1.65;
}

/* ======================================================= forecast rows === */

/* The spec-sheet move: hours become measured rows. The card's children are a
   fixed sequence (time, percentage, label, tier, wind), so a grid can lay them
   out as columns without touching the renderer. */
html[data-skin="tech"] .forecast-grid,
html[data-skin="tech"] .later-forecast-grid {
  display:block;
  gap:0;
  border-top:2px solid var(--tk-hair-2);
}
html[data-skin="tech"] .fc-card {
  display:grid;
  grid-template-columns:88px 112px 132px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:0;
  border-bottom:1px solid var(--tk-hair);
  border-radius:0;
  background:var(--tk-panel);
  box-shadow:none;
  text-align:left;
  transition:background .12s ease;
}
html[data-skin="tech"] .fc-card:hover { background:var(--tk-panel-2); }
html[data-skin="tech"] .fc-time {
  color:var(--tk-ink);
  font-family:var(--mono);
  font-size:12px;
  font-weight:400;
  letter-spacing:.1em;
}
html[data-skin="tech"] .fc-pct {
  margin:0;
  font-family:var(--display);
  font-size:27px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  font-variant-numeric:tabular-nums;
}
/* "est. likelihood" is the column's meaning, and a column says it once. The
   section head above already carries it. */
html[data-skin="tech"] .fc-pct-label { display:none; }
html[data-skin="tech"] .fc-badge {
  justify-self:start;
  margin:0;
  padding:4px 9px 3px;
  border-radius:0;
  background:transparent;
  box-shadow:inset 0 0 0 1px currentColor;
  font-family:var(--mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
}
html[data-skin="tech"] .fc-badge.good { color:var(--tk-good); }
html[data-skin="tech"] .fc-badge.marginal { color:var(--tk-marginal); }
html[data-skin="tech"] .fc-badge.unlikely {
  color:var(--tk-grey-2);
  box-shadow:inset 0 0 0 1px #D6D6D4;
}
html[data-skin="tech"] .fc-wind {
  color:var(--tk-grey);
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.5;
  letter-spacing:.04em;
}

/* The pick. Red appears here and in the mark's triangle, nowhere else. */
html[data-skin="tech"] .fc-card.recommended {
  background:var(--tk-panel);
  border-color:transparent;
  box-shadow:
    inset 5px 0 0 var(--tk-red),
    0 1px 0 var(--tk-hair-2),
    0 -1px 0 var(--tk-hair-2);
  color:var(--tk-ink);
}
html[data-skin="tech"] .fc-card.recommended .fc-pct { color:var(--tk-ink); }
html[data-skin="tech"] .fc-card.recommended .fc-time,
html[data-skin="tech"] .fc-card.recommended .fc-wind { color:var(--tk-grey); }
html[data-skin="tech"] .fc-card.recommended .fc-badge,
html[data-skin="tech"] .fc-card.recommended .fc-badge.good,
html[data-skin="tech"] .fc-card.recommended .fc-badge.marginal,
html[data-skin="tech"] .fc-card.recommended .fc-badge.unlikely {
  color:#FFFFFF;
  background:var(--tk-red);
  box-shadow:none;
}
html[data-skin="tech"] .fc-card.recommended:hover { background:var(--tk-panel); }

/* ============================================================ readouts === */

html[data-skin="tech"] .latest-wind { padding:16px 20px; }
html[data-skin="tech"] .latest-wind-item .label {
  color:var(--tk-grey-2);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.2em;
}
html[data-skin="tech"] .latest-wind-item .value {
  margin-top:6px;
  color:var(--tk-ink);
  font-family:var(--display);
  font-size:29px;
  font-weight:700;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
html[data-skin="tech"] .latest-wind-time {
  color:var(--tk-grey-2);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
}

html[data-skin="tech"] .summary-stat,
html[data-skin="tech"] .stat,
html[data-skin="tech"] .qs-card,
html[data-skin="tech"] .meteo-hour {
  border-radius:0;
}
html[data-skin="tech"] .summary-stat .s-label,
html[data-skin="tech"] .stat .st-label,
html[data-skin="tech"] .qs-label {
  color:var(--tk-grey-2);
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
}
html[data-skin="tech"] .summary-stat .s-value,
html[data-skin="tech"] .stat .st-value {
  color:var(--tk-ink);
  font-family:var(--display);
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
/* Some of these slots carry long string values, not numbers
   ("insufficient_evidence", "direct_lake -> sia_reference"), and the base
   sheet sets overflow-wrap:anywhere on them - at display size a condensed face
   broke those mid-word. */
html[data-skin="tech"] .stat .st-value { font-size:23px; line-height:1.15; }
html[data-skin="tech"] .summary-stat .s-value { font-size:22px; line-height:1.15; }
html[data-skin="tech"] .stat .st-sub {
  color:var(--tk-grey-2);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
}

/* Callouts: a left rule instead of a tinted rounded block. */
html[data-skin="tech"] .recommendation,
html[data-skin="tech"] .observed-callout {
  padding:12px 0 12px 14px;
  color:var(--tk-ink);
  border-left:3px solid var(--tk-blue);
  border-radius:0;
  background:transparent;
  font-size:13px;
  font-weight:400;
  line-height:1.6;
}
html[data-skin="tech"] .observed-callout { border-left-color:var(--tk-good); }

/* ============================================================= actions === */

html[data-skin="tech"] .eval-btn {
  padding:11px 20px;
  color:#FFFFFF;
  border-radius:0;
  background:var(--tk-blue);
  box-shadow:none;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
}
html[data-skin="tech"] .eval-btn:hover { background:var(--tk-blue-dim); }
/* Two filled buttons side by side fight each other; refresh is secondary. */
html[data-skin="tech"] .action-bar .eval-btn + .eval-btn,
html[data-skin="tech"] #forecastRefreshBtn {
  color:var(--tk-ink);
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--tk-ink);
}
html[data-skin="tech"] .action-bar .eval-btn + .eval-btn:hover,
html[data-skin="tech"] #forecastRefreshBtn:hover {
  color:#FFFFFF;
  background:var(--tk-ink);
}
html[data-skin="tech"] .eval-btn-tip {
  color:var(--tk-grey-2);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
}

html[data-skin="tech"] .skin-toggle {
  border:1px solid var(--tk-hair);
  border-radius:0;
  background:var(--tk-panel);
  font-family:var(--mono);
  font-size:10px;
}
html[data-skin="tech"] .skin-toggle button {
  color:var(--tk-grey);
  letter-spacing:.16em;
}
html[data-skin="tech"] .skin-toggle button.active {
  color:#FFFFFF;
  background:var(--tk-blue);
}

/* ========================================================== drill-down === */

html[data-skin="tech"] details.tech > summary {
  padding:16px 22px;
  font-family:var(--display);
  font-size:14px;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
}
html[data-skin="tech"] .day-block-head,
html[data-skin="tech"] .summary-day-head,
html[data-skin="tech"] .health-sub-head,
html[data-skin="tech"] .viz-title,
html[data-skin="tech"] .later-day-name {
  color:var(--tk-grey);
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
/* Every table on the page, not just .metrics-table - the station-coverage and
   attempt-history tables carry their own classes. */
html[data-skin="tech"] th {
  color:var(--tk-grey-2);
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
}
html[data-skin="tech"] td {
  font-family:var(--mono);
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
}
html[data-skin="tech"] .chart-box,
html[data-skin="tech"] .viz-box,
html[data-skin="tech"] .day-wind-chart,
html[data-skin="tech"] .table-wrap,
html[data-skin="tech"] .w-bar-wrap,
html[data-skin="tech"] .w-fill {
  border-radius:0;
}
html[data-skin="tech"] .w-name {
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.05em;
}

/* ========================================================== status bar === */

/* The old skin appended a blinking block cursor here. A status line should not
   demand attention every 1.1 seconds. */
html[data-skin="tech"] .status-line::after { content:none; }

/* ======================================================== reduced motion */

@media (prefers-reduced-motion:reduce) {
  html[data-skin="tech"] * { animation:none !important; }
}

/* ============================================================== narrow === */

@media (max-width:680px) {
  /* Four columns will not fit; the tier chip and wind wrap under the number. */
  html[data-skin="tech"] .fc-card {
    grid-template-columns:72px 92px minmax(0,1fr);
    row-gap:4px;
  }
  html[data-skin="tech"] .fc-wind { grid-column:2 / -1; }
}