/* Embeddable ski-report widget (/ski-report-widget/embed/). Design language borrowed from
   the chat "Margin" layout (sno-chat-margin.css): Mulish body, Fraunces
   serif accents, paper background, navy/ice palette, hairline rules.

   The widget fills whatever iframe it is placed in. Body classes set by
   widget-embed.js:
     .sw-light | .sw-dark            theme (legacy color=white|dark)
     .sw-ledger | .sw-cards | .sw-table   design (design= param)
     .sw-ticker                      forced when the viewport is a short strip
     .sw-narrow                      forced below 300px wide                    */

.sw {
  --paper: #fdfcf9;
  --paper-2: #f5f3ee;
  --ink: #14283a;
  --body: #2d4356;
  --navy: #0d3b5c;
  --ice: #29b3d9;
  --ice-ink: #0f86a8;
  --muted: #71818d;
  --rule: rgba(13, 59, 92, .12);
  --rule-strong: rgba(13, 59, 92, .35);
  --wash: rgba(13, 59, 92, .045);
  --wash-hi: rgba(41, 179, 217, .12);
  --warm: #c9772a;
  --card: rgba(255, 255, 255, .72);
  --shadow: 0 14px 30px -22px rgba(13, 59, 92, .45);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Mulish', 'Proxima Nova', system-ui, sans-serif;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --pad: 18px;
}
.sw-dark {
  --paper: #0c141e;
  --paper-2: #101b27;
  --ink: #eef4f8;
  --body: #dbe5ec;
  --navy: #ffffff;
  --ice: #8fe3ff;
  --ice-ink: #8fe3ff;
  --muted: #8d9cab;
  --rule: rgba(255, 255, 255, .09);
  --rule-strong: rgba(143, 227, 255, .45);
  --wash: rgba(255, 255, 255, .05);
  --wash-hi: rgba(143, 227, 255, .12);
  --warm: #ffb88c;
  --card: rgba(255, 255, 255, .04);
  --shadow: none;
}

html, body { height: 100%; margin: 0; }
.sw {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 140px),
    var(--paper);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.sw-dark { background: linear-gradient(180deg, rgba(143, 227, 255, .06), transparent 160px), var(--paper); }
.sw *, .sw *::before, .sw *::after { box-sizing: border-box; }
.sw a { color: inherit; text-decoration: none; }
.sw sup { font-size: .6em; vertical-align: top; position: relative; top: .15em; }

.sw-root { height: 100%; display: flex; flex-direction: column; }

/* ---- Header ---------------------------------------------------------- */
.sw-head { padding: 14px var(--pad) 10px; border-bottom: 1px solid var(--rule); flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sw-eyebrow { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 7px; }
.sw-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--ice); flex: none; }
.sw-title {
  margin: 4px 0 0; font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 1.05;
  letter-spacing: -.01em; color: var(--navy); font-variation-settings: 'opsz' 144;
}
.sw-title em { font-style: italic; }
.sw-updated { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--muted); font-weight: 300; white-space: nowrap; padding-bottom: 2px; }

/* ---- Body / list ------------------------------------------------------ */
.sw-list {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
  padding: 0 var(--pad);
}
.sw-state { padding: 28px var(--pad); color: var(--muted); font-family: var(--serif); font-style: italic; font-size: 15px; }
.sw-state.is-error { color: var(--warm); }

/* Row (shared by ledger + cards) */
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); animation: sw-fade .45s var(--ease) both; }
.sw-row:last-child { border-bottom: 0; }
@keyframes sw-fade { from { opacity: 0; transform: translateY(5px); } }
.sw-row-main { min-width: 0; }
.sw-name { font-family: var(--serif); font-size: 16px; line-height: 1.2; color: var(--navy); display: inline-block; max-width: 100%; border-bottom: 1px solid transparent; transition: border-color .2s; }
.sw-name:hover { border-color: var(--ice); }
.sw-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sw-meta .sw-sep { opacity: .5; }
.sw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: none; opacity: .55; }
.sw-dot.is-open { background: var(--ice); opacity: 1; box-shadow: 0 0 0 3px var(--wash-hi); }
.sw-dot.is-soon { background: var(--warm); opacity: .9; }
.sw-status.is-open { color: var(--ice-ink); font-weight: 700; }

.sw-stats { display: flex; align-items: flex-end; gap: 14px; flex: none; }
.sw-stat { text-align: right; min-width: 38px; }
.sw-stat b { display: block; font-family: var(--serif); font-weight: 400; font-size: 17px; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sw-stat b small { font-size: 11px; color: var(--muted); font-family: var(--sans); font-weight: 600; }
.sw-stat span { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 4px; }
.sw-stat-snow b { font-size: 26px; font-weight: 300; color: var(--ice-ink); }
.sw-stat-snow.is-zero b { color: var(--muted); }
.sw-stat b.is-empty { color: var(--muted); font-weight: 300; }

/* Ledger: row hover like the Margin index */
.sw-ledger .sw-row { transition: padding-left .25s var(--ease); }
.sw-ledger .sw-row:hover { padding-left: 6px; }
.sw-ledger .sw-group { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 18px 0 2px; padding-bottom: 6px; border-bottom: 1px solid var(--navy); }
.sw-ledger .sw-group:first-child { margin-top: 10px; }

/* Cards */
.sw-cards .sw-list { padding-top: 14px; padding-bottom: 6px; }
.sw-cards .sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.sw-cards .sw-row {
  flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 14px 12px; margin: 0 0 10px;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--card); box-shadow: var(--shadow);
  transition: transform .3s var(--ease), border-color .25s;
}
.sw-cards .sw-grid .sw-row { margin: 0; }
.sw-cards .sw-row:hover { transform: translateY(-2px); border-color: var(--rule-strong); }
.sw-cards .sw-row-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sw-cards .sw-name { font-size: 17px; }
.sw-cards .sw-meta { margin-top: 4px; }
.sw-cards .sw-card-snow { text-align: right; flex: none; }
.sw-cards .sw-card-snow b { display: block; font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: .9; color: var(--ice-ink); }
.sw-cards .sw-card-snow.is-zero b { color: var(--muted); }
.sw-cards .sw-card-snow span { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 5px; }
.sw-cards .sw-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 10px; border-top: 1px solid var(--rule); padding-top: 9px; align-items: start; }
.sw-cards .sw-stat { text-align: left; min-width: 0; }
.sw-cards .sw-stat b { font-size: 15px; }
.sw-cards .sw-stat-snow { display: none; }

/* Table */
.sw-table .sw-list { padding-top: 6px; }
.sw-table table { border-collapse: collapse; width: 100%; }
.sw-table th {
  position: sticky; top: 0; z-index: 1; background: var(--paper);
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700;
  text-align: right; padding: 10px 6px 7px; border-bottom: 1px solid var(--navy); white-space: nowrap;
}
.sw-table th:first-child { text-align: left; padding-left: 0; }
.sw-table td { padding: 8px 6px; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 15px; color: var(--navy); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; vertical-align: middle; }
.sw-table td:first-child { text-align: left; padding-left: 0; white-space: normal; }
.sw-table tr:nth-child(even) td { background: var(--wash); }
.sw-table tr:hover td { background: var(--wash-hi); }
.sw-table td small { font-size: 11px; color: var(--muted); font-family: var(--sans); font-weight: 600; }
.sw-table td.sw-td-snow { color: var(--ice-ink); font-size: 17px; }
.sw-table td.sw-td-snow.is-zero { color: var(--muted); }
.sw-table td.is-empty { color: var(--muted); font-weight: 300; }
.sw-table .sw-name { font-size: 15px; }
.sw-table .sw-meta { margin-top: 1px; }

/* ---- Footer ----------------------------------------------------------- */
.sw-foot { flex: none; border-top: 1px solid var(--rule); padding: 8px var(--pad) 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sw-compact .sw-foot { flex-wrap: nowrap; }
.sw-compact .sw-foot:has(.sw-ad.has-ad) { flex-wrap: wrap; }
.sw-compact .sw-brand span { display: none; }
.sw-compact .sw-more { font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.sw-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--muted); }
.sw-brand img { height: 16px; width: auto; display: block; }
.sw-brand:hover { color: var(--navy); }
.sw-more { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ice-ink); }
.sw-more::after { content: ' →'; }
.sw-ad { flex-basis: 100%; display: none; text-align: center; }
.sw-ad.has-ad { display: block; }
.sw-ad a { display: inline-block; max-width: 100%; }
.sw-ad img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px; }
.sw-ad .sw-ad-mobile { display: none; }
.sw-ad-label { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }

/* State picker (legacy region pages with no state/code) */
.sw-pick { padding: 16px var(--pad) 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sw-pick label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.sw-pick select { font: inherit; font-size: 13px; color: var(--ink); background: var(--card); border: 1px solid var(--rule-strong); border-radius: 8px; padding: 6px 10px; }

/* ---- Compact (< 520px wide, e.g. 300x600 / 300x250): stats drop under the
   name instead of sitting beside it ----------------------------------------- */
.sw-compact .sw-head { flex-direction: column; align-items: flex-start; gap: 2px; }
.sw-compact .sw-updated { padding: 0; }
.sw-compact .sw-row { flex-direction: column; align-items: stretch; gap: 8px; }
.sw-compact .sw-cards .sw-row { gap: 10px; }
.sw-compact .sw-cards .sw-row-main { flex-direction: row; }
.sw-compact .sw-stats { justify-content: space-between; gap: 6px; }
.sw-compact .sw-stat { min-width: 0; text-align: left; }
.sw-compact .sw-stat-snow b { font-size: 22px; }
.sw-compact .sw-cards .sw-grid { grid-template-columns: 1fr; }
.sw-compact .sw-table td, .sw-compact .sw-table th { padding-left: 4px; padding-right: 4px; }

/* ---- Narrow (160px–300px wide, e.g. 160x600 skyscraper) ---------------- */
.sw-narrow { --pad: 12px; }
.sw-narrow .sw-title { font-size: 20px; }
.sw-narrow .sw-name { font-size: 15px; }
.sw-narrow .sw-stats { flex-wrap: wrap; gap: 8px 6px; }
.sw-narrow .sw-stat { flex: 1 1 40%; }
.sw-narrow .sw-cards .sw-stats { grid-template-columns: 1fr 1fr; }
.sw-narrow .sw-table th:nth-child(n+4), .sw-narrow .sw-table td:nth-child(n+4) { display: none; }
.sw-narrow .sw-foot { justify-content: center; }
.sw-narrow .sw-more { display: none; }
@media (max-width: 420px) {
  .sw-ad .sw-ad-desktop { display: none; }
  .sw-ad .sw-ad-mobile { display: block; }
  .sw-cards .sw-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Short (150–340px tall, e.g. 300x250 / 728x300): tighter chrome ------ */
.sw-short .sw-head { padding-top: 10px; padding-bottom: 7px; }
.sw-short .sw-title { font-size: 19px; margin-top: 2px; }
.sw-short .sw-updated { display: none; }
.sw-short .sw-foot { padding-top: 6px; padding-bottom: 6px; }
.sw-short .sw-ad { display: none !important; }
.sw-short .sw-cards .sw-list { padding-top: 10px; }
.sw-short .sw-row { padding-top: 8px; padding-bottom: 8px; }

/* ---- Ticker (short strips, e.g. 728x90) --------------------------------- */
.sw-ticker { --pad: 10px; }
.sw-ticker .sw-root { flex-direction: row; align-items: stretch; }
.sw-ticker .sw-head { border-bottom: 0; border-right: 1px solid var(--rule); padding: 0 14px 0 var(--pad); flex-direction: column; justify-content: center; align-items: flex-start; gap: 1px; }
.sw-ticker .sw-title { font-size: 15px; white-space: nowrap; }
.sw-ticker .sw-updated { display: none; }
.sw-ticker .sw-eyebrow { font-size: 8.5px; letter-spacing: .12em; }
.sw-ticker .sw-list { flex: 1 1 auto; overflow: hidden; padding: 0; display: flex; align-items: center; position: relative; }
.sw-ticker .sw-list::before, .sw-ticker .sw-list::after { content: ''; position: absolute; top: 0; bottom: 0; width: 24px; z-index: 1; pointer-events: none; }
.sw-ticker .sw-list::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.sw-ticker .sw-list::after { right: 0; background: linear-gradient(270deg, var(--paper), transparent); }
.sw-ticker .sw-track { display: flex; gap: 0; white-space: nowrap; animation: sw-marquee var(--sw-marquee, 40s) linear infinite; will-change: transform; }
.sw-ticker .sw-list:hover .sw-track { animation-play-state: paused; }
@keyframes sw-marquee { to { transform: translateX(-50%); } }
.sw-ticker .sw-chip { display: inline-flex; align-items: baseline; gap: 7px; padding: 0 16px; border-right: 1px solid var(--rule); line-height: 1; }
.sw-ticker .sw-chip .sw-name { font-size: 14px; border: 0; }
.sw-ticker .sw-chip .sw-dot { align-self: center; }
.sw-ticker .sw-chip b { font-family: var(--serif); font-weight: 300; font-size: 20px; color: var(--ice-ink); font-variant-numeric: tabular-nums; }
.sw-ticker .sw-chip b.is-zero { color: var(--muted); }
.sw-ticker .sw-chip small { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.sw-ticker .sw-foot { border-top: 0; border-left: 1px solid var(--rule); padding: 0 var(--pad); flex-wrap: nowrap; }
.sw-ticker .sw-foot .sw-brand span, .sw-ticker .sw-more, .sw-ticker .sw-ad { display: none; }
.sw-ticker .sw-brand img { height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .sw-row { animation: none; }
  .sw-ticker .sw-track { animation-duration: 240s; }
}