/* Burn Rate game styles. Extracted from burn-rate.html, which stays as the
   standalone preview build. Everything is namespaced .sl- so it cannot
   collide with the site's css/styles.css. Keep the two in sync. */

/* ---------------------------------------------------------------------------
   Burn Rate, a 380 x 460 widget for businessfinanceweekly.com.

   Everything is namespaced .sl- so the file can be dropped into a page that
   already ships its own css/styles.css without either side bleeding.

   Two rules below are load-bearing and were each found by testing rather
   than by reading. They are commented where they sit.
--------------------------------------------------------------------------- */

.sl-widget, .sl-widget * { box-sizing: border-box; margin: 0; padding: 0; }

/* An author display rule outranks the UA sheet's [hidden]{display:none},
   so every flex child that can be hidden needs this or it stays visible. */
.sl-widget [hidden] { display: none !important; }

.sl-widget {
  --brand:   #15803d;
  --brand-dk:#166534;
  --live:    #4ade80;
  --warn:    #fbbf24;
  --bad:     #f87171;
  --bg:      #0e1512;
  --panel:   #151f1a;
  --line:    rgba(255,255,255,.09);
  --line-lt: rgba(255,255,255,.16);
  --ink:     #e8efe9;
  --muted:   #8ba094;

  position: relative;
  width: 380px;
  height: 460px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.sl-widget:focus { outline: none; }
.sl-widget:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }

/* ---- header ---- */
.sl-head {
  flex: none; height: 34px;
  display: flex; align-items: center; justify-content: space-between;
}
.sl-brand { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sl-name {
  font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
}
.sl-site {
  font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-chip {
  flex: none;
  border: 1px solid var(--line-lt); background: rgba(255,255,255,.04);
  color: var(--ink); border-radius: 999px;
  height: 21px; padding: 0 9px;
  font: 600 9px/1 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.sl-chip:hover { border-color: var(--live); color: var(--live); }
.sl-chip b { font-weight: 700; }

/* ---- sky ---- */
.sl-sky {
  flex: none; position: relative;
  width: 358px; height: 283px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: #0b1210;
}
.sl-sky canvas { display: block; width: 358px; height: 283px; }

/* ---- readouts ---- */
.sl-panel {
  flex: none; height: 44px; margin-top: 8px;
  display: flex; gap: 6px;
}
.sl-cell {
  flex: 1 1 0; min-width: 0;
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.sl-lab {
  font-size: 7.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.sl-val { font-size: 13px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sl-val.sl-low { color: var(--warn); }
.sl-val.sl-out { color: var(--bad); }
.sl-spd { display: flex; gap: 7px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sl-spd span { color: var(--bad); }
.sl-spd span.sl-ok { color: var(--live); }

/* ---- thruster pad ---- */
.sl-pad {
  flex: none; height: 34px; margin-top: 6px;
  display: flex; gap: 6px;
}
.sl-key {
  flex: 1 1 0;
  border: 1px solid var(--line-lt); border-radius: 7px;
  background: rgba(255,255,255,.04); color: var(--ink);
  font: 600 13px/1 'Inter', sans-serif;
  cursor: pointer; touch-action: none;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.sl-key small {
  font-size: 7.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.sl-key.sl-fire { background: var(--brand); border-color: var(--brand); color: #fff; }
.sl-key.sl-fire small { color: rgba(255,255,255,.75); }
.sl-key:disabled { opacity: .4; cursor: default; }

/* ---- ticker ---- */
.sl-tick {
  flex: none; height: 15px; margin-top: 6px;
  font-size: 9.5px; line-height: 15px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-tick b { color: var(--ink); font-weight: 600; }

/* ---- cards ---- */
/* Starts below the header rather than at inset 0. At inset 0 the scrim
   covers the mode chip, so the difficulty cannot be changed while any card
   is up, which is exactly when a player wants to change it. 45px is the
   11px widget padding plus the 34px header. */
.sl-over {
  position: absolute; top: 45px; right: 0; bottom: 0; left: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; padding: 14px;
  background: rgba(8,14,11,.93); backdrop-filter: blur(3px);
}
.sl-card { width: 100%; text-align: center; }
.sl-kick {
  font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--live); margin-bottom: 7px;
}
.sl-kick.sl-kick-bad { color: var(--bad); }
.sl-title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.sl-sub { font-size: 10.5px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.sl-sub b { color: var(--ink); font-weight: 600; }

.sl-keys {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 7px; margin-top: 12px;
}
.sl-hintkey { display: flex; align-items: center; gap: 4px; }
.sl-cap {
  min-width: 19px; height: 19px; padding: 0 5px;
  border: 1px solid var(--line-lt); border-radius: 4px; background: rgba(255,255,255,.05);
  font-size: 9.5px; font-weight: 600; line-height: 17px; text-align: center;
}
.sl-caplab { font-size: 8.5px; color: var(--muted); }
.sl-note { font-size: 9px; line-height: 1.45; color: var(--muted); margin-top: 9px; }

.sl-facts { margin-top: 11px; display: flex; flex-direction: column; gap: 5px; text-align: left; }
.sl-fact { display: flex; gap: 6px; font-size: 9px; line-height: 1.4; color: var(--muted); }
.sl-fact i { flex: none; font-style: normal; font-weight: 700; color: var(--live); }
.sl-fact b { color: var(--ink); font-weight: 600; }

.sl-lines { margin-top: 11px; display: flex; flex-direction: column; gap: 4px; }
.sl-line {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  padding: 5px 8px; font-size: 9.5px;
}
.sl-line span:first-child { color: var(--muted); }
.sl-line b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sl-line b.sl-good { color: var(--live); }
.sl-line b.sl-hard { color: var(--warn); }

.sl-go {
  margin-top: 13px;
  border: none; border-radius: 7px; background: var(--brand); color: #fff;
  height: 33px; padding: 0 18px;
  font: 700 11.5px/1 'Inter', sans-serif; letter-spacing: .03em;
  cursor: pointer;
}
.sl-go:hover { background: var(--brand-dk); }
.sl-go.sl-ghost {
  background: transparent; border: 1px solid var(--line-lt); color: var(--ink);
  height: 29px; font-size: 10.5px;
}
.sl-go.sl-ghost:hover { border-color: var(--live); color: var(--live); }
.sl-row { display: flex; gap: 7px; justify-content: center; align-items: center; }

/* ---- bridge round ---- */
.sl-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 11px; }
.sl-opt {
  border: 1px solid var(--line-lt); border-radius: 6px; background: var(--panel);
  color: var(--ink); text-align: left; padding: 7px 9px;
  font: 500 10px/1.35 'Inter', sans-serif; cursor: pointer;
}
.sl-opt:hover { border-color: var(--live); }
.sl-opt.sl-right { border-color: var(--live); background: rgba(74,222,128,.12); }
.sl-opt.sl-wrong { border-color: var(--bad); background: rgba(248,113,113,.12); }

/* ---- signup ---- */
.sl-form { margin-top: 12px; display: flex; gap: 6px; }
.sl-in {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid var(--line-lt); border-radius: 6px; background: rgba(255,255,255,.05);
  color: var(--ink); height: 30px; padding: 0 9px;
  font: 500 10.5px/1 'Inter', sans-serif;
}
.sl-in::placeholder { color: var(--muted); }
.sl-in:focus { outline: none; border-color: var(--live); }
.sl-sub-btn {
  flex: none; border: none; border-radius: 6px; background: var(--brand); color: #fff;
  height: 30px; padding: 0 12px; font: 700 10px/1 'Inter', sans-serif; cursor: pointer;
}
.sl-sub-btn:hover { background: var(--brand-dk); }
.sl-msg { font-size: 9px; line-height: 1.45; color: var(--muted); margin-top: 7px; }
.sl-msg.sl-err { color: var(--bad); }
.sl-msg.sl-done { color: var(--live); }

/* ---- tooltips ---- */
/* Native title= sits on a browser delay of about a second that cannot be
   changed, which is too slow for a control you are holding down. */
.sl-widget [data-tip] { position: relative; }
.sl-widget [data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 168px;
  border: 1px solid var(--line-lt); border-radius: 5px; background: #0a100d;
  padding: 5px 7px;
  font: 500 8.5px/1.35 'Inter', sans-serif; color: var(--ink); text-align: center;
  /* The mode chip sets white-space: nowrap, uppercase and letter spacing, and
     the tooltip inherits all three. Without these it refuses to wrap, spills
     out of its own box, and shouts. */
  white-space: normal; text-transform: none; letter-spacing: normal;
  pointer-events: none; opacity: 0; z-index: 9;
  transition: opacity .1s ease .45s;
}
.sl-widget [data-tip]:hover::after,
.sl-widget [data-tip]:focus-visible::after { opacity: 1; transition-delay: .09s; }

/* A centred tooltip on an outer control hangs past the frame and is cut off
   by the widget's own overflow:hidden, so the outer ones anchor inward. The
   mode chip sits against the top edge, so its tooltip drops below instead. */
.sl-pad .sl-key:first-child[data-tip]::after { left: 0; transform: none; }
.sl-pad .sl-key:last-child[data-tip]::after { left: auto; right: 0; transform: none; }
.sl-chip[data-tip]::after {
  top: calc(100% + 6px); bottom: auto; left: auto; right: 0; transform: none;
}
.sl-widget .sl-key:disabled[data-tip]::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .sl-widget [data-tip]::after { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   SITE EMBED LAYOUT
   Not present in the standalone burn-rate.html, which centres the
   widget on a blank page. These rules only matter once the widget
   sits in the homepage hero grid.
   ══════════════════════════════════════════════════════════════ */

/* Two levels on purpose. .sl-fit is the LAYOUT box and is sized to the scaled
   dimensions; .sl-widget keeps its real 380 x 460 and is transformed down to
   fill it. Putting the transform on .sl-fit itself does not work: a transform
   leaves the layout box at full size, so a 380px box would stay 380px inside a
   narrower grid track and push the page sideways. Sizing the box and scaling
   the contents means the track only ever sees the scaled width. */
.sl-fit {
  --sl-s: 1;
  width:  calc(380px * var(--sl-s));
  height: calc(460px * var(--sl-s));
  margin-inline: auto;
}

.sl-fit > .sl-widget {
  transform: scale(var(--sl-s));   /* --sl-s inherits from .sl-fit */
  transform-origin: top left;
}

/* styles.css hides .hero__sidebar at <=1024px, where it held Top Stories.
   The game is meant to show on tablets and phones, so that is reverted here.
   .hero__grid is already a single column at this width (a plain rule, not a
   :has() selector, so there is no specificity trap to work around), and the
   widget simply stacks under the cover story. */
@media (max-width: 1024px) {
  .hero__grid .hero__sidebar { display: flex; }
}

/* The widget is a fixed 380px block whose copy was measured at that width, and
   its ticker is white-space: nowrap. Reflowing it would truncate the ticker and
   reintroduce runts, so it is scaled instead. Each step is the largest scale
   that still fits 380px inside the viewport minus the container's 48px of
   padding, so the widget never overflows and never triggers a sideways scroll.
   Unscaled above 435px, where the widget clears the container by 8px. */
@media (max-width: 435px) { .sl-fit { --sl-s: .94; } }  /* 409-435 */
@media (max-width: 408px) { .sl-fit { --sl-s: .89; } }  /* 390-408 */
@media (max-width: 389px) { .sl-fit { --sl-s: .85; } }  /* 374-389 */
@media (max-width: 373px) { .sl-fit { --sl-s: .81; } }  /* 359-373 */
@media (max-width: 358px) { .sl-fit { --sl-s: .73; } }  /* 329-358 */
@media (max-width: 328px) { .sl-fit { --sl-s: .67; } }  /* to 320   */