/* ---------------------------------------------------------------------------
   Callout Repair, a 380 x 460 widget for industrialoperationsweekly.com.

   Frogger on a plant floor. Forklifts and AGVs are the traffic, the conveyor
   is the river (you have to ride a pallet across and a gap drops you), and the
   machine bays are the home slots.

   A tall narrow frame is the one shape Frogger actually wants, so for once the
   380 x 460 slot helps rather than squeezes.

   Namespaced .co- so it can drop into a page that already ships its own
   css/styles.css without either side bleeding.
--------------------------------------------------------------------------- */

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

/* An author display rule outranks the UA sheet's [hidden]{display:none}. */
.co-widget [hidden] { display: none !important; }

.co-widget {
  --brand:   #92400e;
  --brand-dk:#78350f;
  /* Tints of the brand, never yellow: Tailwind amber-100 was rejected twice
     for reading as yellow rather than as this site's brown. */
  --lit:     #cb9168;
  --lit-dim: #a55a2c;
  --bad:     #f87171;
  --bg:      #14100d;
  --panel:   #1d1713;
  --line:    rgba(255,255,255,.09);
  --line-lt: rgba(255,255,255,.17);
  --ink:     #efe8e2;
  --muted:   #9b8a7e;

  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;
}
.co-widget:focus { outline: none; }
.co-widget:focus-visible { outline: 2px solid var(--lit); outline-offset: 2px; }

/* ---- header ---- */
.co-head { flex: none; height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.co-brand { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.co-name { font-size: 14px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.co-site {
  font-size: 8px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.co-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;
}
.co-chip:hover { border-color: var(--lit); color: var(--lit); }

/* ---- floor ---- */
.co-floor {
  flex: none; position: relative; align-self: center; margin-top: 8px;
  width: 351px; height: 279px;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #0f0c0a;
}
.co-floor canvas { display: block; width: 351px; height: 279px; }

/* ---- readouts ---- */
.co-panel { flex: none; height: 42px; margin-top: 8px; display: flex; gap: 6px; }
.co-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;
}
.co-lab { font-size: 7px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.co-val { font-size: 13px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.co-val.co-low { color: var(--bad); }
.co-val.co-good { color: var(--lit); }
.co-hearts { display: flex; gap: 4px; align-items: center; height: 13px; }
.co-hp { width: 7px; height: 9px; border-radius: 2px; background: var(--lit); }
.co-hp.co-gone { background: transparent; border: 1px solid rgba(255,255,255,.2); }

/* ---- pad ---- */
.co-pad { flex: none; height: 30px; margin-top: 6px; display: flex; gap: 6px; }
.co-key {
  flex: 1 1 0; border: 1px solid var(--line-lt); border-radius: 7px;
  background: rgba(255,255,255,.05); color: var(--ink);
  font: 600 13px/1 'Inter', sans-serif; cursor: pointer; touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
.co-key:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.co-key:active { background: var(--brand-dk); }

/* ---- ticker ---- */
.co-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;
}
.co-tick b { color: var(--ink); font-weight: 600; }

/* ---- cards ---- */
/* Starts below the header. At inset 0 the scrim covers the mode chip, so the
   floor cannot be changed while any card is up, which is exactly when a player
   wants to change it. 45px is 11px padding plus the 34px header. */
.co-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(14,10,8,.94); backdrop-filter: blur(3px);
}
.co-card { width: 100%; text-align: center; }
.co-kick {
  font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lit); margin-bottom: 7px;
}
.co-kick.co-kick-bad { color: var(--bad); }
.co-title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.co-sub { font-size: 10.5px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.co-sub b { color: var(--ink); font-weight: 600; }
.co-note { font-size: 9px; line-height: 1.45; color: var(--muted); margin-top: 9px; }

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

.co-lines { margin-top: 11px; display: flex; flex-direction: column; gap: 4px; }
.co-row {
  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;
}
.co-row span:first-child { color: var(--muted); }
.co-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.co-row b.co-hit { color: var(--lit); }
.co-row b.co-miss { color: var(--bad); }

.co-go {
  margin-top: 12px; 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;
}
.co-go:hover { background: var(--brand-dk); }
.co-go.co-ghost { background: transparent; border: 1px solid var(--line-lt); color: var(--ink); height: 29px; font-size: 10.5px; }
.co-go.co-ghost:hover { border-color: var(--lit); color: var(--lit); }
.co-rowc { display: flex; gap: 7px; justify-content: center; align-items: center; }

.co-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 11px; }
.co-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;
}
.co-opt:hover { border-color: var(--lit); }
.co-opt.co-right { border-color: var(--lit); background: rgba(203,145,104,.15); }
.co-opt.co-wrong { border-color: var(--bad); background: rgba(248,113,113,.12); }

.co-form { margin-top: 12px; display: flex; gap: 6px; }
.co-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;
}
.co-in::placeholder { color: var(--muted); }
.co-in:focus { outline: none; border-color: var(--lit); }
.co-send {
  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;
}
.co-send:hover { background: var(--brand-dk); }
.co-msg { font-size: 9px; line-height: 1.45; color: var(--muted); margin-top: 7px; }
.co-msg.co-err { color: var(--bad); }
.co-msg.co-done { color: var(--lit); }

/* ---- keycaps on the start card ---- */
.co-keys { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 7px; margin-top: 11px; }
.co-hintkey { display: flex; align-items: center; gap: 4px; }
.co-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;
}
.co-caplab { font-size: 8.5px; color: var(--muted); }

/* ---- tooltips ---- */
/* Native title= sits on an uncontrollable browser delay of about a second. */
.co-widget [data-tip] { position: relative; }
.co-widget [data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 172px;
  border: 1px solid var(--line-lt); border-radius: 5px; background: #100c09;
  padding: 5px 7px; font: 500 8.5px/1.35 'Inter', sans-serif; color: var(--ink); text-align: center;
  /* Hosts set nowrap, uppercase and letter spacing, and the tooltip inherits
     all three, so without these it refuses to wrap and shouts. */
  white-space: normal; text-transform: none; letter-spacing: normal;
  pointer-events: none; opacity: 0; z-index: 9;
  transition: opacity .1s ease .45s;
}
.co-widget [data-tip]:hover::after,
.co-widget [data-tip]:focus-visible::after { opacity: 1; transition-delay: .09s; }
/* A centred tooltip on an outer control is clipped by the widget's own
   overflow:hidden, so the outer ones anchor inward. */
.co-pad .co-key:first-child[data-tip]::after { left: 0; transform: none; }
.co-pad .co-key:last-child[data-tip]::after { left: auto; right: 0; transform: none; }
.co-chip[data-tip]::after { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; transform: none; }

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

/* ── Embedding in the homepage hero sidebar ──────────────────────────
   Mirrors games/pipeline-rush on CRO Daily. .co-fit lets the fixed 380x460
   widget be scaled down by setting --co-s, without the engine knowing
   anything about it. .hero__grid is `1fr 380px`, so the track matches the
   widget exactly at desktop and no scaling applies there. */
.co-fit {
  --co-s: 1;
  width:  calc(var(--co-fit-w, 380px) * var(--co-s));
  height: calc(var(--co-fit-h, 460px) * var(--co-s));
  margin-inline: auto;
}

.co-fit > .co-widget {
  transform: scale(var(--co-s));   /* --co-s inherits from .co-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/pipeline-rush on CRO Daily
   (both sites use .container { padding: 0 24px }, so the widget must fit
   viewport minus 48px). Sizing .co-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) { .co-fit { --co-s: .94; } }  /* 409-435 */
@media (max-width: 408px) { .co-fit { --co-s: .89; } }  /* 390-408 */
@media (max-width: 389px) { .co-fit { --co-s: .85; } }  /* 374-389 */
@media (max-width: 373px) { .co-fit { --co-s: .81; } }  /* 359-373 */
@media (max-width: 358px) { .co-fit { --co-s: .73; } }  /* 329-358 */
@media (max-width: 328px) { .co-fit { --co-s: .67; } }  /* to 320    */