/* ============================================================
   PIPELINE RUSH — CRO Daily homepage widget
   Fixed 380 x 460. All styles namespaced .pw- so it cannot
   collide with the live site stylesheet.
   Brand: #dc2626 primary | Inter | dark ops console skin
   ============================================================ */

/* The standalone preview's `body { display: grid; place-items: center }` rule
   lived here and is deliberately gone: applied to the real site it re-laid the
   whole page as a centred grid, so the full-bleed ticker stopped constraining
   to the viewport and overflowed by up to 99px between 1024 and 1120px.
   games/pipeline-rush/pipeline-rush.html carries its own body rule instead. */

.pw-widget {
  --pw-w: 380px;
  --pw-h: 460px;
  --pw-cell: 42px;
  --pw-cols: 7;
  --pw-rows: 7;

  --pw-bg:      #0e1220;
  --pw-sunken:  #0a0d18;
  --pw-line:    #262d44;
  --pw-tile:    #171d31;
  --pw-tile-hi: #212a45;
  --pw-wall:    #4b5885;
  --pw-bore:    #0d1220;

  --pw-brand:   #dc2626;
  --pw-flow:    #ef4444;
  --pw-flow-lt: #fca5a5;
  --pw-accent:  #f87171;
  --pw-ok:      #10b981;
  --pw-warn:    #f59e0b;

  --pw-text:    #eceef5;
  --pw-muted:   #8b93ab;

  --pw-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  position: relative;
  box-sizing: border-box;
  width: var(--pw-w);
  height: var(--pw-h);
  padding: 11px 12px 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  background: radial-gradient(120% 90% at 50% 0%, #171d33 0%, var(--pw-bg) 62%);
  color: var(--pw-text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 8px 32px rgba(14, 18, 32, .28);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pw-widget *, .pw-widget *::before, .pw-widget *::after { box-sizing: border-box; }
/* the cards space themselves with flex gap, so default <p> margins
   were quietly adding ~23px between every paragraph */
.pw-widget p, .pw-widget h2, .pw-widget h3 { margin: 0; }
.pw-widget ul { margin: 0; padding: 0; list-style: none; }

/* An author display rule outranks the UA's [hidden]{display:none},
   so hidden must be forced or el.hidden silently does nothing. */
.pw-widget [hidden] { display: none !important; }

/* --- header --- */
.pw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 34px;
  flex: none;
}
.pw-brandmark { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pw-mark { width: 18px; height: 18px; flex: none; color: var(--pw-accent); }
.pw-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
.pw-kicker {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pw-muted);
  white-space: nowrap;
}
.pw-mode {
  flex: none;
  padding: 4px 8px;
  border: 1px solid var(--pw-line);
  border-radius: 4px;
  background: var(--pw-tile);
  color: var(--pw-muted);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.pw-mode:hover { color: var(--pw-accent); border-color: var(--pw-accent); }
.pw-mode:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 1px; }

/* --- status --- */
.pw-status {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  margin-top: 7px;
  padding: 0 4px;
  flex: none;
  border: 1px solid var(--pw-line);
  border-radius: 5px;
  background: var(--pw-sunken);
}
.pw-readout {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 5px;
  font-family: var(--pw-mono);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pw-readout svg { width: 13px; height: 13px; flex: none; }
.pw-readout--flow { color: var(--pw-warn); }
.pw-readout--flow.pw-count { color: var(--pw-flow); }
.pw-readout--flow.pw-live  { color: var(--pw-flow); }
.pw-readout--flow.pw-urgent { animation: pw-pulse .9s ease-in-out infinite; }
@keyframes pw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.pw-readout--laid { color: var(--pw-muted); }
.pw-spacer { flex: 1 1 auto; }

.pw-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  flex: none;
  padding: 0;
  border: 1px solid var(--pw-line);
  border-radius: 4px;
  background: var(--pw-tile);
  color: var(--pw-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pw-btn svg { width: 13px; height: 13px; }
.pw-btn:hover { background: var(--pw-tile-hi); color: var(--pw-text); }
.pw-btn:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 1px; }

/* --- play area --- */
.pw-play {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 0;
  margin: 7px 0;
}

.pw-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
  width: 48px;
  align-self: flex-start;
}
.pw-rail-btn {
  width: 100%;
  padding: 4px 0;
  border: 1px solid var(--pw-line);
  border-radius: 4px;
  background: var(--pw-tile);
  color: var(--pw-muted);
  font: inherit;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.pw-rail-btn:hover:not(:disabled) {
  background: var(--pw-tile-hi);
  border-color: var(--pw-accent);
  color: var(--pw-accent);
}
.pw-rail-btn:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 1px; }
.pw-rail-btn:disabled { opacity: .4; cursor: default; }
/* the longer label needs to fit the same 48px rail */
.pw-delegate { font-size: 7.5px; letter-spacing: .04em; line-height: 1.25; }
.pw-left { display: block; font-size: 7px; opacity: .7; letter-spacing: .02em; }
.pw-delegate:hover:not(:disabled) { border-color: var(--pw-ok); color: var(--pw-ok); }

.pw-queue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 4px;
  border: 1px solid var(--pw-line);
  border-radius: 6px;
  background: var(--pw-sunken);
}
/* All four look identical. Which are worth playing is the player's read,
   not something the interface gives away. */
.pw-slot {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: var(--pw-tile);
  cursor: pointer;
  transition: background .12s;
}
.pw-slot:hover { background: var(--pw-tile-hi); }
.pw-slot:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 1px; }

.pw-slot svg { display: block; width: 100%; height: 100%; }

.pw-grid {
  display: grid;
  grid-template-columns: repeat(var(--pw-cols), var(--pw-cell));
  grid-template-rows: repeat(var(--pw-rows), var(--pw-cell));
  flex: none;
  border: 1px solid var(--pw-line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--pw-sunken);
}

.pw-cell {
  position: relative;
  width: var(--pw-cell);
  height: var(--pw-cell);
  padding: 0;
  border: none;
  outline-offset: -2px;
  background: var(--pw-tile);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .022);
  cursor: pointer;
  transition: background .12s;
}
.pw-cell:hover:not(:disabled) { background: var(--pw-tile-hi); }
.pw-cell:focus-visible { outline: 2px solid var(--pw-accent); }
.pw-cell:disabled { cursor: default; }
.pw-cell svg { display: block; width: 100%; height: 100%; }

.pw-wallpath { fill: none; stroke: var(--pw-wall); stroke-width: 16; }
.pw-bore     { fill: none; stroke: var(--pw-bore); stroke-width: 8; }
/* the travelling stroke: dashed to its own length so the offset can be
   transitioned from empty to full, which reads as flow moving */
.pw-flowpath {
  fill: none;
  stroke: var(--pw-flow);
  stroke-width: 8;
  stroke-linecap: butt;
  stroke-dasharray: 100;
}
.pw-cell.pw-filled .pw-wallpath { stroke: #7f2b32; }

.pw-cell.pw-port .pw-wallpath { stroke: #55618d; }
.pw-cell.pw-src  { background: #16203a; }
.pw-cell.pw-dst  { background: #16203a; }
.pw-portdot { fill: var(--pw-muted); }
.pw-cell.pw-filled .pw-portdot { fill: var(--pw-flow-lt); }
/* the closed-won column is reserved, so the route cannot dead-end in it */
.pw-cell.pw-wall { background: #12172a; cursor: not-allowed; }
.pw-cell.pw-wall:hover { background: #12172a; }
/* the open end: the only cell you can build on */
.pw-cell.pw-next {
  outline: 2px dashed var(--pw-ok);
  outline-offset: -3px;
  animation: pw-next-pulse 1.6s ease-in-out infinite;
}
@keyframes pw-next-pulse { 0%, 100% { outline-color: var(--pw-ok); } 50% { outline-color: rgba(16,185,129,.35); } }
.pw-cell.pw-leak { background: rgba(239, 68, 68, .3); }

/* --- ticker --- */
.pw-ticker {
  height: 15px;
  flex: none;
  padding: 0 2px;
  overflow: hidden;
  color: var(--pw-muted);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pw-ticker b { color: var(--pw-text); font-weight: 600; }

/* --- overlay --- */
/* Starts below the header rather than at inset 0. At inset 0 the
   scrim covered the mode chip, so the difficulty could not be
   changed while any card was up, which is when anyone would want
   to. 45px is this widget's 11px top padding plus its 34px
   header. */
.pw-over {
  position: absolute;
  top: 45px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 13px;
  background: rgba(10, 13, 24, .46);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
}
.pw-over.pw-show { opacity: 1; visibility: visible; }

.pw-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 13px 18px 11px;
  border: 1px solid #333c5c;
  border-radius: 8px;
  background: rgba(11, 14, 26, .965);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  transition: opacity .18s ease;
}
.pw-quizcard { gap: 7px; }
.pw-startcard { gap: 7px; padding: 15px 18px 14px; }
.pw-clearcard { gap: 5px; padding: 18px 22px; }
.pw-starthead { font-size: 21px; color: var(--pw-text); }
.pw-startsub {
  font-size: 11px;
  line-height: 1.4;
  color: var(--pw-muted);
  text-wrap: pretty;
}
.pw-rules {
  display: grid;
  gap: 7px;
  margin: 3px 0 1px;
  padding: 8px 0;
  border-top: 1px solid var(--pw-line);
  border-bottom: 1px solid var(--pw-line);
  text-align: left;
}
.pw-rule {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 9px;
  align-items: center;
  font-size: 9.5px;
  line-height: 1.4;
  color: var(--pw-muted);
  text-wrap: pretty;
}
.pw-rule svg { display: block; width: 22px; height: 22px; }
.pw-rule b { color: var(--pw-text); font-weight: 600; }
.pw-startbtn { align-self: center; min-width: 0; padding: 0 20px; margin-top: 3px; }

.pw-verdict {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pw-muted);
}
.pw-headline {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-wrap: balance;
}
.pw-headline.pw-bad  { color: var(--pw-flow); }
.pw-headline.pw-good { color: var(--pw-ok); }
.pw-detail {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--pw-muted);
  text-wrap: pretty;
}
.pw-detail b { color: var(--pw-text); font-weight: 600; }

.pw-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 6px 0;
  border-top: 1px solid var(--pw-line);
  border-bottom: 1px solid var(--pw-line);
}
.pw-stat-v {
  font-family: var(--pw-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pw-stat-l {
  white-space: nowrap;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pw-muted);
}

/* --- quiz --- */
.pw-qleak {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pw-flow);
  text-wrap: balance;
}
.pw-qtext {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--pw-text);
  text-wrap: pretty;
}
.pw-options { display: grid; gap: 5px; }
.pw-option {
  padding: 7px 10px;
  border: 1px solid var(--pw-line);
  border-radius: 5px;
  background: rgba(255, 255, 255, .035);
  color: var(--pw-text);
  font: inherit;
  font-size: 10.5px;
  line-height: 1.35;
  text-align: left;
  text-wrap: pretty;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.pw-option:hover:not(:disabled) {
  background: rgba(248, 113, 113, .14);
  border-color: var(--pw-accent);
}
.pw-option:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 1px; }
.pw-option:disabled { cursor: default; }
.pw-option.pw-right {
  border-color: var(--pw-ok);
  background: rgba(16, 185, 129, .16);
  color: var(--pw-ok);
}
.pw-option.pw-wrongpick {
  border-color: var(--pw-flow);
  background: rgba(239, 68, 68, .16);
  color: var(--pw-flow);
}
.pw-qfoot {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pw-muted);
  text-wrap: pretty;
}
.pw-qfoot.pw-good-t { color: var(--pw-ok); }
.pw-qfoot.pw-bad-t  { color: var(--pw-flow); }

/* --- capture --- */
.pw-capture { display: grid; gap: 6px; }
.pw-capture-copy {
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--pw-muted);
  text-wrap: pretty;
}
.pw-capture-copy.pw-err { color: var(--pw-flow); }
.pw-form { display: flex; gap: 5px; }
.pw-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--pw-line);
  border-radius: 4px;
  background: var(--pw-sunken);
  color: var(--pw-text);
  font: inherit;
  font-size: 11.5px;
}
.pw-input::placeholder { color: #5f6884; }
.pw-input:focus { outline: none; border-color: var(--pw-accent); }
.pw-input.pw-invalid { border-color: var(--pw-flow); }
.pw-input:disabled { opacity: .6; cursor: default; }
.pw-cta {
  flex: none;
  height: 30px;
  min-width: 92px;
  padding: 0 12px;
  border: none;
  border-radius: 4px;
  background: var(--pw-brand);
  color: #fff;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.pw-cta:hover:not(:disabled) { background: #ef4444; }
.pw-cta:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }
.pw-cta:disabled { opacity: .6; cursor: default; }

.pw-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.pw-divider { width: 1px; height: 10px; background: var(--pw-line); }
.pw-link {
  padding: 4px 2px;
  border: none;
  background: none;
  color: var(--pw-accent);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.pw-link:hover { color: var(--pw-text); }
.pw-link:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 1px; }

.pw-restore {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 7px 14px;
  border: 1px solid var(--pw-line);
  border-radius: 5px;
  background: rgba(11, 14, 26, .95);
  color: var(--pw-accent);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease;
}
.pw-restore:hover { color: var(--pw-text); border-color: var(--pw-accent); }
.pw-restore:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }

.pw-over.pw-peek { background: transparent; }
.pw-over.pw-peek .pw-card { opacity: 0; visibility: hidden; }
.pw-over.pw-peek .pw-restore { opacity: 1; visibility: visible; }

.pw-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .pw-widget *, .pw-widget *::before {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ── Embedding in the homepage hero sidebar ──────────────────────────
   Mirrors games/stack-fit on My Marketing Stack. .pw-fit lets the fixed
   380x460 widget be scaled down by setting --pw-s, without the engine
   knowing anything about it. */
.pw-fit {
  --pw-s: 1;
  width:  calc(var(--pw-fit-w, 380px) * var(--pw-s));
  height: calc(var(--pw-fit-h, 460px) * var(--pw-s));
  margin-inline: auto;
}

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

/* css/styles.css hides .hero__sidebar below 1024px. That suited the old Top
   Stories list, because those same stories repeat in Latest News. The game has
   no second home and ships its own touch controls, so it is revealed again
   here. .hero__grid is already one column at this width, so the widget simply
   stacks under the cover story. */
@media (max-width: 1024px) {
  .hero__grid .hero__sidebar { display: flex; }
}

/* Narrow-viewport scale ladder, same maths as games/stack-fit on My Marketing
   Stack (both sites use .container { padding: 0 24px }, so the widget must fit
   viewport minus 48px). Sizing .pw-fit and scaling its contents means the grid
   track only ever sees the SCALED width; scaling alone would leave a 380px
   track and push the page sideways. Each band is checked against the narrowest
   viewport in it minus 48px. Unscaled above 435px. */
@media (max-width: 435px) { .pw-fit { --pw-s: .94; } }  /* 409-435 */
@media (max-width: 408px) { .pw-fit { --pw-s: .89; } }  /* 390-408 */
@media (max-width: 389px) { .pw-fit { --pw-s: .85; } }  /* 374-389 */
@media (max-width: 373px) { .pw-fit { --pw-s: .81; } }  /* 359-373 */
@media (max-width: 358px) { .pw-fit { --pw-s: .73; } }  /* 329-358 */
@media (max-width: 328px) { .pw-fit { --pw-s: .67; } }  /* to 320    */