/* ---------------------------------------------------------------------------
   First Response, a 380 x 460 widget for businessoperationspro.com.

   Diner Dash as SLA triage. Requests arrive in a queue, each with a clock that
   runs until the work is COMPLETE, and each desk only handles its own kind of
   work. You seat the work rather than the customer.

   Two ideas carry the whole game:

   1. Every SLA bar is drawn on ONE absolute scale, so a P1 arrives with a
      short bar and a P3 with a long one. "Shortest bar wins" is then literally
      true across the queue and the triage decision is visible rather than
      arithmetic.

   2. Ops floor takes anything but is slow, so it is a release valve and not a
      default. Sending everything there is the losing line.

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

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

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

.fr-widget {
  --brand:   #6d28d9;
  --brand-dk:#5b21b6;
  --lit:     #c4b5fd;
  --lit-dim: #8b5cf6;
  --warn:    #fbbf24;
  --bad:     #f87171;
  --bg:      #12101a;
  --panel:   #1b1826;
  --line:    rgba(255,255,255,.09);
  --line-lt: rgba(255,255,255,.17);
  --ink:     #ece9f5;
  --muted:   #8e88a3;

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

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

/* ---- queue ---- */
.fr-qwrap { flex: none; margin-top: 8px; }
.fr-qhead {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 7.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px; height: 10px;
}
.fr-qhead b { font-weight: 700; color: var(--lit); letter-spacing: .06em; }
.fr-qhead b.fr-jam { color: var(--bad); }
.fr-q { display: flex; gap: 5px; height: 70px; }
.fr-slot {
  flex: 1 1 0; min-width: 0; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); padding: 6px 5px 5px; cursor: pointer;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.fr-slot.fr-empty { background: transparent; border-style: dashed; cursor: default; }
.fr-slot.fr-empty .fr-pr, .fr-slot.fr-empty .fr-track { display: none; }
.fr-slot.fr-pick { border-color: var(--lit); background: rgba(139,92,246,.2); transform: translateY(-2px); }
.fr-slot:not(.fr-empty):hover { border-color: var(--line-lt); }
.fr-pr {
  align-self: flex-start; font-size: 7.5px; font-weight: 700; letter-spacing: .06em;
  border: 1px solid var(--line-lt); border-radius: 3px; padding: 1px 3px; color: var(--muted);
}
.fr-ty {
  font-size: 8.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px;
}
/* One scale for every bar in the queue, so the shortest bar is always the most
   urgent no matter what its priority label says. */
.fr-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 4px; }
.fr-fill { width: 0; height: 100%; border-radius: 2px; background: var(--lit-dim); transition: background .2s linear; }
.fr-fill.fr-mid { background: var(--warn); }
.fr-fill.fr-hot { background: var(--bad); }
.fr-secs { font-size: 8px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 3px; }
.fr-secs.fr-hot { color: var(--bad); }

/* ---- desks ---- */
.fr-desks { flex: none; margin-top: 7px; display: flex; flex-direction: column; gap: 6px; }
.fr-desk {
  position: relative; height: 52px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); padding: 7px 9px; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  transition: border-color .12s ease, background .12s ease;
}
.fr-desk.fr-shut { border-style: dashed; background: transparent; cursor: default; opacity: .5; }
.fr-desk.fr-open:hover { border-color: var(--line-lt); }
.fr-desk.fr-target { border-color: var(--lit); background: rgba(139,92,246,.14); }
.fr-desk.fr-cue { border-color: var(--lit-dim); }
.fr-dl { min-width: 0; }
.fr-dn { font-size: 10.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.fr-dt {
  font-size: 7.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fr-dr { flex: none; text-align: right; }
.fr-free { font-size: 9.5px; font-weight: 600; color: var(--lit); }
.fr-shutlab { font-size: 9px; font-weight: 600; color: var(--muted); }
.fr-job { font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.fr-jobs { font-size: 8px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 3px; }
.fr-jobs.fr-hot { color: var(--bad); }
/* Work done GROWS along the bottom edge; time left SHRINKS in the queue. The
   two bars never mean the same thing so they must never move the same way. */
.fr-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--brand); }
.fr-desk.fr-pop { animation: fr-pop .36s ease; }
@keyframes fr-pop {
  0%   { background: rgba(139,92,246,.45); border-color: var(--lit); }
  100% { background: var(--panel); border-color: var(--line); }
}
.fr-desk.fr-no { animation: fr-no .3s ease; }
@keyframes fr-no {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-4px); border-color: var(--bad); }
  75%     { transform: translateX(4px);  border-color: var(--bad); }
}
.fr-desk.fr-cheer { animation: fr-cheer .5s ease; }
@keyframes fr-cheer {
  0%   { background: var(--panel); }
  35%  { background: rgba(139,92,246,.5); border-color: var(--lit); }
  100% { background: var(--panel); }
}

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

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

/* ---- cards ---- */
/* Starts below the header. At inset 0 the scrim covers the mode chip, so the
   day 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. */
.fr-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(18,16,26,.94); backdrop-filter: blur(3px);
}
.fr-card { width: 100%; text-align: center; }
.fr-kick {
  font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lit); margin-bottom: 7px;
}
.fr-kick.fr-kick-bad { color: var(--bad); }
.fr-title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.fr-sub { font-size: 10.5px; line-height: 1.5; color: var(--muted); margin-top: 8px; }
.fr-sub b { color: var(--ink); font-weight: 600; }
.fr-note { font-size: 9px; line-height: 1.45; color: var(--muted); margin-top: 9px; }

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

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

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

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

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

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

/* ---- shift-cleared plate ---- */
.fr-plate {
  position: absolute; top: 45px; right: 0; bottom: 0; left: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.fr-plateIn {
  border: 1px solid var(--lit); border-radius: 9px; background: rgba(18,16,26,.9);
  padding: 13px 20px; text-align: center; animation: fr-plate .42s cubic-bezier(.2,1.5,.4,1);
}
@keyframes fr-plate { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.fr-plateK { font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--lit); }
.fr-plateT { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-top: 5px; }
.fr-plateS { font-size: 9px; color: var(--muted); margin-top: 5px; }

/* ---- tooltips ---- */
/* Native title= sits on an uncontrollable browser delay of about a second. */
.fr-widget [data-tip] { position: relative; }
.fr-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: #0e0c16;
  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;
}
.fr-widget [data-tip]:hover::after,
.fr-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. */
.fr-chip[data-tip]::after { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fr-widget [data-tip]::after { transition: none; }
  .fr-slot, .fr-desk { transition: none; }
  .fr-desk.fr-pop, .fr-desk.fr-no, .fr-desk.fr-cheer { animation: none; }
  .fr-plateIn { animation: none; }
}

/* Two levels on purpose. .fr-fit is the LAYOUT box and is sized to the scaled
   dimensions; .fr-widget keeps its real 380 x 460 and is transformed down to
   fill it. Putting the transform on .fr-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. */
.fr-fit {
  --fr-s: 1;
  width:  calc(380px * var(--fr-s));
  height: calc(460px * var(--fr-s));
  margin-inline: auto;
}

.fr-fit > .fr-widget {
  transform: scale(var(--fr-s));   /* --fr-s inherits from .fr-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, 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) { .fr-fit { --fr-s: .94; } }  /* 409-435 */
@media (max-width: 408px) { .fr-fit { --fr-s: .89; } }  /* 390-408 */
@media (max-width: 389px) { .fr-fit { --fr-s: .85; } }  /* 374-389 */
@media (max-width: 373px) { .fr-fit { --fr-s: .81; } }  /* 359-373 */
@media (max-width: 358px) { .fr-fit { --fr-s: .73; } }  /* 329-358 */
@media (max-width: 328px) { .fr-fit { --fr-s: .67; } }  /* to 320   */