/* ============================================================
   STACKERFOX - the six use-case windows
   The look of the windows that tell the use cases (js/cases.js): a call
   screen, an invoice, a site editor, a dashboard on two screens, a
   bakery's app, a workflow. They are built from the same kit as the
   three layer panels (styles/widgets.css, loaded first) and wear the
   coat's own dark. Where they stand, on a tile of the wall and on the
   stage of a case study, is in styles/sections.css.
   ============================================================ */

/* A window is a box with a window in it. Like a layer widget it is its own
   measuring stick: everything inside is set in em off a font-size keyed to
   the box's width (.sys, styles/widgets.css), and the phone layouts switch
   on its width too. It wants 1 of height to every 1.58 of width at the
   least; whoever places it sees to that. What is not inside one of its
   windows (a phone's frame, a laptop's lid) takes the light ink a dark
   card gives. */
.casewin { position: absolute; container: widget / inline-size; color: var(--bone); }

/* ---------------- what these six need of the kit, beyond the layer panels ---------------- */

/* the coat's own tones: paper and ink, or (the one worn here) void and ground */
.casewin .sys,
.casewin .sys[data-tone="light"] {
  --w-bg: var(--bone);
  --w-fg: var(--ink);
  --w-soft: rgb(var(--ink-rgb) / 0.62);
  --w-faint: rgb(var(--ink-rgb) / 0.36);
  --w-line: rgb(var(--ink-rgb) / 0.13);
  --w-fill: rgb(var(--ink-rgb) / 0.055);
  --w-accent: var(--signal);
  --w-accent-soft: rgb(var(--signal-rgb) / 0.13);
  --w-on-accent: #fff;
  --w-accent-text: var(--signal-deep);
  --w-mark: var(--signal);
  --w-mark-dim: rgb(var(--ink-rgb) / 0.2);
  /* --ok is tuned for dark panels; on paper it needs a deeper green */
  --w-ok: #0e7d52;
  --w-ok-fill: rgb(14 125 82 / 0.12);
}
.casewin .sys[data-tone="dark"] {
  --w-bg: color-mix(in srgb, var(--void) 89%, var(--ground));
  --w-fg: var(--bone);
  --w-soft: rgb(var(--ground-rgb) / 0.74);
  --w-faint: rgb(var(--ground-rgb) / 0.42);
  --w-line: rgb(var(--ground-rgb) / 0.16);
  --w-fill: rgb(var(--ground-rgb) / 0.075);
  --w-accent: var(--ground);
  --w-accent-soft: rgb(var(--ground-rgb) / 0.16);
  --w-on-accent: var(--void);
  --w-accent-text: var(--ground);
  --w-mark: var(--ground);
  --w-mark-dim: rgb(var(--ground-rgb) / 0.34);
  --w-ok: var(--ok);
  --w-ok-fill: rgb(63 213 154 / 0.14);
}
.casewin .win-bar {
  display: flex;
  align-items: center;
  gap: 0.8em;
  min-width: 0;
  padding: 0.6em 0.9em;
  background: var(--w-fill);
  border-bottom: 1px solid var(--w-line);
  font-size: 0.92em;
  white-space: nowrap;
}
.casewin .win-dots { display: flex; gap: 0.42em; flex: none; }
.casewin .win-dots i { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--w-faint); opacity: 0.75; }
.casewin .win-title { font-weight: 700; }
.casewin .win-meta {
  margin-left: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 0.84em;
  letter-spacing: 0.03em;
  color: var(--w-soft);
}
.casewin .win-meta b { color: var(--w-fg); font-weight: 500; }
.casewin .live-dot {
  width: 0.55em; height: 0.55em;
  flex: none;
  border-radius: 50%;
  background: var(--w-ok);
  animation: sys-blink 1.6s steps(1) infinite;
}
.casewin .ptr {
  position: absolute;
  z-index: 6;
  left: 0; top: 0;
  width: 1.5em; height: 1.5em;
  pointer-events: none;
  transition: transform 0.75s var(--ease-inout), opacity 0.3s;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.4));
}
@keyframes sys-pop {
  0% { opacity: 0; transform: translateY(0.6em) scale(0.97); }
  100% { opacity: 1; transform: none; }
}

.casewin .sys { --w-warn: var(--w-accent-text); --w-warn-fill: var(--w-accent-soft); --w-bar: var(--w-fill); }
.casewin .iphone {
  position: relative;
  height: 100%;
  min-height: 0;
  aspect-ratio: 9 / 19;
  padding: 0.32em;
  border-radius: 2.5em;
  background: linear-gradient(145deg, #55555b, #1a1a1c 38%, #2e2e33);
  box-shadow: 0 0 0 1px #000, 0 1.8em 3em -1.3em rgb(0 0 0 / 0.85);
}
.casewin .iphone::before, .casewin .iphone::after { content: ""; position: absolute; width: 0.13em; border-radius: 0.1em; background: #3c3c41; }
.casewin .iphone::before { left: -0.13em; top: 21%; height: 7%; box-shadow: 0 2.6em 0 #3c3c41; }
.casewin .iphone::after { right: -0.13em; top: 27%; height: 11%; }
.casewin .iphone-screen, .casewin .droid-screen {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--w-bg);
  color: var(--w-fg);
}
.casewin .iphone-screen { border-radius: 2.2em; }
.casewin .island { position: absolute; z-index: 9; top: 0.55em; left: 50%; width: 30%; height: 0.95em; border-radius: 1em; background: #000; transform: translateX(-50%); }
.casewin .ios-status, .casewin .droid-status { display: flex; align-items: center; justify-content: space-between; font-size: 0.72em; font-weight: 600; }
.casewin .ios-status { padding: 0.62em 1.35em 0.4em; }
.casewin .ios-status > span, .casewin .droid-status > span { display: flex; align-items: center; gap: 0.3em; }
.casewin .ios-status .ico, .casewin .droid-status .ico { width: 1.2em; height: 1.2em; }
.casewin .home-bar { justify-self: center; width: 36%; height: 0.3em; margin: 0.35em 0 0.45em; border-radius: 1em; background: currentColor; opacity: 0.85; }

.casewin .sys.pair > .iphone, .casewin .sys.pair > .droid, .casewin .sys.pair > .laptop + .iphone { position: absolute; z-index: 3; right: 0; bottom: 0; height: 100%; }
@container widget (max-width: 420px) {
  .casewin .sys.pair > .iphone, .casewin .sys.pair > .droid { height: 84%; }
}
.casewin .nat > .appx-tabs, .casewin .droid .nat > .appx-tabs { margin: 0; }
.casewin .iphone .push, .casewin .droid .push { z-index: 8; }

/* ============================================================
   editor (1C in the lab) - change it yourself: the owner retypes a headline, flips a switch,
   publishes
   ============================================================ */

.casewin .cms-publish {
  margin-left: auto;
  padding: 0.3em 1em;
  border-radius: 100px;
  background: var(--w-accent);
  color: var(--w-on-accent);
  font-weight: 700;
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-back);
}
.casewin .cms-publish::before { content: "Publish"; }
.casewin .cms-publish.is-busy { opacity: 0.65; }
.casewin .cms-publish.is-busy::before { content: "Publishing\2026"; }
.casewin .cms-publish.is-done { background: var(--w-ok-fill); color: var(--w-ok); }
.casewin .cms-publish.is-done::before { content: "\2713  Published"; }

.casewin .cms-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); min-height: 0; }
.casewin .cms-form { display: grid; gap: 0.75em; align-content: start; padding: 1em; border-right: 1px solid var(--w-line); }
.casewin .cms-field { display: grid; gap: 0.32em; font-family: var(--font-mono); font-size: 0.78em; letter-spacing: 0.05em; color: var(--w-soft); }
.casewin .cms-input {
  display: flex;
  align-items: center;
  min-height: 2.35em;
  padding: 0.45em 0.7em;
  border-radius: 0.6em;
  background: var(--w-bg);
  box-shadow: inset 0 0 0 1px var(--w-line);
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 1.26em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--w-fg);
  white-space: nowrap;
  transition: box-shadow var(--dur-1) var(--ease-out);
}
.casewin .cms-input.is-focus { box-shadow: inset 0 0 0 1.5px var(--w-accent), 0 0 0 0.22em var(--w-accent-soft); }
.casewin .cms-input.is-focus::after { content: ""; width: 1.5px; height: 1.15em; margin-left: 1px; background: var(--w-fg); animation: sys-blink 1s steps(1) infinite; }
.casewin .cms-switch { display: flex; align-items: center; justify-content: space-between; }
.casewin .cms-switch i { position: relative; width: 2.5em; height: 1.4em; border-radius: 100px; background: var(--w-mark-dim); transition: background-color var(--dur-2) var(--ease-out); }
.casewin .cms-switch i::after {
  content: "";
  position: absolute;
  top: 0.2em; left: 0.2em;
  width: 1em; height: 1em;
  border-radius: 50%;
  background: var(--w-bg);
  transition: transform var(--dur-2) var(--ease-back);
}
.casewin .cms-switch.is-on i { background: var(--w-accent); }
.casewin .cms-switch.is-on i::after { transform: translateX(1.1em); }
.casewin .cms-hint { align-self: end; font-family: var(--font-display); font-size: 1.15em; letter-spacing: 0; color: var(--w-faint); }

.casewin .cms-preview { display: grid; min-height: 0; padding: 1em; background: var(--w-fill); }
.casewin .cms-page {
  display: grid;
  gap: 0.6em;
  align-content: start;
  justify-items: start;
  min-height: 0;
  padding: 1em 1.1em;
  border-radius: 0.8em;
  overflow: hidden;
  background: var(--w-bg);
  box-shadow: 0 0 0 1px var(--w-line), 0 0.9em 1.6em -1.1em rgb(0 0 0 / 0.35);
}
.casewin .cms-page .site-logo { font-size: 0.86em; }
.casewin .cms-page h4 { min-height: 1.9em; font-size: 1.9em; font-weight: 700; line-height: 0.95; letter-spacing: -0.035em; }
.casewin .cms-page p { display: flex; align-items: center; gap: 0.4em; font-size: 0.95em; color: var(--w-soft); }
.casewin .cms-page p b { color: var(--w-fg); font-weight: 700; }
.casewin .cms-live {
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--w-ok) !important;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}
.casewin .cms-live.is-in { opacity: 1; }

@container widget (max-width: 420px) {
  .casewin .cms-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .casewin .cms-form { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); padding: 0.7em; border-right: 0; border-bottom: 1px solid var(--w-line); }
  .casewin .cms-form .cms-price, .casewin .cms-hint { display: none; }
  .casewin .cms-switch { align-self: end; min-height: 2.9em; }
  .casewin .cms-preview { padding: 0.7em; }
}

/* ============================================================
   flow (2B in the lab) - the job moves by itself: one enquiry in, three apps updated,
   on a workflow canvas
   ============================================================ */

.casewin .flow-body { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.casewin .flow-canvas {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 3.6em 1.5em;
  align-content: center;
  padding: 1em 1.2em;
  background-image: radial-gradient(var(--w-line) 1px, transparent 1.2px);
  background-size: 1.15em 1.15em;
}
.casewin .flow-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.casewin .flow-wires path { fill: none; stroke: var(--w-faint); stroke-width: 1.5; transition: stroke var(--dur-2) var(--ease-out); }
.casewin .flow-wires path.is-lit { stroke: var(--w-accent); }
.casewin .flow-wires circle { fill: var(--w-accent); }
.casewin .fnode {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.6em;
  align-items: center;
  padding: 0.7em 0.7em;
  border-radius: 0.8em;
  background: var(--w-bg);
  box-shadow: 0 0 0 1px var(--w-line), 0 0.5em 1em -0.7em rgb(0 0 0 / 0.4);
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-back);
}
.casewin .fnode > .ico-box { grid-row: span 2; }
.casewin .ico-box { display: grid; place-items: center; width: 2.1em; height: 2.1em; flex: none; border-radius: 0.6em; background: var(--w-fill); }
.casewin .fnode b { overflow: hidden; font-size: 0.95em; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.casewin .fnode span { overflow: hidden; font-family: var(--font-mono); font-size: 0.72em; color: var(--w-soft); white-space: nowrap; text-overflow: ellipsis; }
.casewin .fnode::after {
  content: "";
  position: absolute;
  top: -0.3em; right: -0.3em;
  width: 0.95em; height: 0.95em;
  border-radius: 50%;
  background: var(--w-bg);
  box-shadow: inset 0 0 0 1.5px var(--w-faint);
  transition: background-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.casewin .fnode.is-on { box-shadow: 0 0 0 1.5px var(--w-accent), 0 0 0 0.3em var(--w-accent-soft); transform: translateY(-1px); }
.casewin .fnode.is-done::after { background: var(--w-ok); box-shadow: 0 0 0 2px var(--w-bg); }
.casewin .flow-log {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 1.2em;
  align-items: end;
  padding: 0.6em 1em 0.7em;
  border-top: 1px solid var(--w-line);
  background: var(--w-fill);
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.02em;
}
.casewin .flow-lines { display: grid; gap: 0.15em; min-height: 3.9em; align-content: end; color: var(--w-soft); }
.casewin .flow-lines p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; animation: sys-pop 0.4s var(--ease-out) both; }
.casewin .flow-lines p b { color: var(--w-fg); font-weight: 500; }
.casewin .flow-count { display: grid; gap: 0.15em; text-align: right; color: var(--w-soft); white-space: nowrap; }
.casewin .flow-count b { color: var(--w-fg); font-weight: 500; }

@container widget (max-width: 420px) {
  /* a narrow card stands its icon on top of its name */
  .casewin .flow-canvas { gap: 3em 0.7em; padding: 0.8em 0.7em; }
  .casewin .fnode { grid-template-columns: minmax(0, 1fr); gap: 0.1em; padding: 0.6em 0.6em; }
  .casewin .fnode > .ico-box { grid-row: auto; margin-bottom: 0.35em; }
  .casewin .flow-count { display: none; }
  .casewin .flow-log { grid-template-columns: minmax(0, 1fr); }
}

/* parts the next windows share with a lab window that did not ship (3A) */
.casewin .dash-rail { display: grid; gap: 0.45em; align-content: start; justify-items: center; padding: 0.8em 0; border-right: 1px solid var(--w-line); }
.casewin .dash-rail i { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 0.6em; color: var(--w-soft); }
.casewin .dash-rail i.is-on { background: var(--w-fill); color: var(--w-fg); }
.casewin .kpi-label { font-size: 0.8em; color: var(--w-soft); white-space: nowrap; }
.casewin .plot { position: relative; display: flex; align-items: flex-end; gap: 2px; min-height: 0; padding-left: 2.5em; border-bottom: 1px solid var(--w-line); }
.casewin .col {
  position: relative;
  flex: 1;
  max-width: 24px;
  height: calc(var(--v, 0) * 100%);
  min-height: 1px;
  border-radius: 4px 4px 0 0;
  background: var(--w-mark-dim);
  transition: height 0.8s var(--ease-back), background-color var(--dur-1) var(--ease-out);
}
.casewin .col:hover { background: var(--w-soft); }
.casewin .col.is-today, .casewin .col.is-today:hover { background: var(--w-mark); }
.casewin .col.is-today::after {
  content: attr(data-label);
  position: absolute;
  right: 0; bottom: 100%;
  padding-bottom: 0.35em;
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--w-fg);
  white-space: nowrap;
}
@container widget (max-width: 420px) {
  .casewin .dash-rail, .casewin .kpi-spark, .casewin .kpi-delta { display: none; }
}

/* parts the next windows share with a lab window that did not ship (3B) */
.casewin .pk { display: grid; gap: 0.5em; align-content: start; min-height: 0; padding: 0.5em 0.85em 0.8em; overflow: hidden; }
.casewin .pk-hero { font-size: 2.3em; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.casewin .pk-spark { width: 100%; height: 2.4em; overflow: visible; }
.casewin .pk-spark polyline { fill: none; stroke: var(--w-mark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.casewin .pk-spark polygon { fill: var(--w-mark); opacity: 0.1; }
.casewin .pk-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4em; }
.casewin .pk-tiles div { display: grid; gap: 0.05em; padding: 0.5em 0.6em; border-radius: 0.7em; background: var(--w-fill); }
.casewin .pk-tiles span { font-size: 0.72em; color: var(--w-soft); white-space: nowrap; }
.casewin .pk-tiles b { font-size: 1.15em; font-weight: 700; letter-spacing: -0.02em; }
.casewin .pk-h { margin-top: 0.2em !important; font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.06em; color: var(--w-soft); }
.casewin .pk-push {
  position: absolute;
  z-index: 5;
  top: 0.45em; left: 0.45em; right: 0.45em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 0.7em;
  border-radius: 1.2em;
  background: var(--w-fg);
  color: var(--w-bg);
  font-size: 0.78em;
  line-height: 1.2;
  transform: translateY(-140%);
  transition: transform 0.6s var(--ease-back);
}
.casewin .pk-push.is-in { transform: none; }
.casewin .pk-push b { display: block; font-weight: 700; }

/* parts the next windows share with a lab window that did not ship (1D) */
@container widget (max-width: 420px) {
  .casewin .prod:nth-child(4), .casewin .shop-hero > span, .casewin .tab:not(.is-on), .casewin .tab-new { display: none; }
}

/* parts the next windows share with a lab window that did not ship (1E) */
.casewin .appx-tabs { display: flex; justify-content: space-around; padding: 0.45em 0 0; border-top: 1px solid var(--w-line); font-size: 0.6em; color: var(--w-soft); }
.casewin .appx-tabs span { display: grid; justify-items: center; gap: 0.2em; }
.casewin .appx-tabs .ico { width: 1.9em; height: 1.9em; }
.casewin .appx-tabs span.is-on { color: var(--w-accent-text); font-weight: 600; }
.casewin .sheet {
  position: absolute;
  z-index: 4;
  left: 0; right: 0; bottom: 0;
  display: grid;
  gap: 0.5em;
  padding: 0.6em 0.8em 0.9em;
  border-radius: 1.3em 1.3em 0 0;
  background: var(--w-bg);
  box-shadow: 0 -1em 2em -1em rgb(0 0 0 / 0.5), 0 0 0 100em rgb(0 0 0 / 0);
  transform: translateY(105%);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.casewin .sheet.is-in { transform: none; box-shadow: 0 -1em 2em -1em rgb(0 0 0 / 0.5), 0 0 0 100em rgb(0 0 0 / 0.35); }
.casewin .sheet::before { content: ""; justify-self: center; width: 2.4em; height: 0.28em; border-radius: 1em; background: var(--w-faint); }
.casewin .sheet h5 { font-size: 0.95em; }

/* ============================================================
   quote (2E in the lab) - quote to paid: the paperwork writes and chases itself
   ============================================================ */

.casewin .books { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.casewin .steps { display: flex; align-items: center; gap: 0.5em; padding: 0.55em 1em; border-bottom: 1px solid var(--w-line); font-size: 0.78em; color: var(--w-faint); white-space: nowrap; overflow: hidden; }
.casewin .steps span { display: inline-flex; align-items: center; gap: 0.4em; transition: color var(--dur-2) var(--ease-out); }
.casewin .steps span::before { content: ""; width: 1.05em; height: 1.05em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; transition: background-color var(--dur-2) var(--ease-out); }
.casewin .steps span.is-done { color: var(--w-fg); }
.casewin .steps span.is-done::before { background: var(--w-ok); box-shadow: none; }
.casewin .steps i { flex: 1; min-width: 0.6em; height: 1px; background: var(--w-line); }
.casewin .books-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 0; }
.casewin .desk-paper { display: grid; min-height: 0; padding: 0.9em 1em 0; overflow: hidden; background: var(--w-fill); }
.casewin .paper {
  position: relative;
  display: grid;
  gap: 0.5em;
  align-content: start;
  padding: 1em 1.1em;
  border-radius: 0.25em 0.25em 0 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 0.8em 1.6em -0.8em rgb(0 0 0 / 0.3);
  font-size: 0.74em;
  color: #1d1d1f;
}
.casewin .paper-top { display: flex; justify-content: space-between; align-items: start; }
.casewin .paper-top .site-logo { font-size: 1.2em; }
.casewin .paper-top p { font-size: 0.9em; color: #6a6a70; text-align: right; }
.casewin .paper-top h5 { font-size: 1.5em; font-weight: 700; letter-spacing: 0.04em; text-align: right; }
.casewin .paper-to { color: #6a6a70; }
.casewin .paper-to b { color: #1d1d1f; }
.casewin .paper table { width: 100%; border-collapse: collapse; }
.casewin .paper th { padding: 0.3em 0; border-bottom: 1.5px solid #1d1d1f; font-size: 0.86em; font-weight: 600; text-align: left; }
.casewin .paper td { padding: 0.32em 0; border-bottom: 1px solid #e6e6ea; }
.casewin .paper th:last-child, .casewin .paper td:last-child { text-align: right; }
.casewin .paper tr.is-hid { visibility: hidden; }
.casewin .paper-sum { display: grid; gap: 0.15em; justify-self: end; width: 46%; }
.casewin .paper-sum div { display: flex; justify-content: space-between; color: #6a6a70; }
.casewin .paper-sum div:last-child { padding-top: 0.25em; border-top: 1.5px solid #1d1d1f; font-size: 1.15em; font-weight: 700; color: #1d1d1f; }
.casewin .paid-mark {
  position: absolute;
  right: 8%; top: 30%;
  padding: 0.1em 0.5em;
  border: 0.16em solid var(--w-ok);
  border-radius: 0.3em;
  font-size: 2.2em;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--w-ok);
  opacity: 0;
  transform: rotate(-12deg) scale(1.6);
  transition: opacity 0.25s var(--ease-out), transform 0.4s var(--ease-back);
}
.casewin .sys[data-tone="real-dark"] .paid-mark { --w-ok: #15803d; }
.casewin .paid-mark.is-in { opacity: 0.85; transform: rotate(-12deg); }
.casewin .history { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border-left: 1px solid var(--w-line); font-size: 0.82em; }
.casewin .history > p { padding: 0.7em 0.9em 0.4em; font-weight: 600; }
.casewin .history ul { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; min-height: 0; margin: 0; padding: 0 0.9em; overflow: hidden; list-style: none; }
.casewin .history li { position: relative; display: grid; gap: 0.05em; padding: 0 0 0.75em 1.3em; animation: sys-pop 0.45s var(--ease-out) both; }
.casewin .history li::before { content: ""; position: absolute; left: 0.2em; top: 0.3em; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--w-faint); box-shadow: 0 0 0 0.2em var(--w-bg); z-index: 1; }
.casewin .history li::after { content: ""; position: absolute; left: 0.44em; top: 0.5em; bottom: -0.4em; width: 1px; background: var(--w-line); }
.casewin .history li:last-child::after { display: none; }
.casewin .history li.is-ok::before { background: var(--w-ok); }
.casewin .history li.is-warn::before { background: var(--w-warn); }
.casewin .history li span { font-size: 0.88em; color: var(--w-soft); }

@container widget (max-width: 420px) {
  .casewin .books-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
  .casewin .history { border-left: 0; border-top: 1px solid var(--w-line); }
  .casewin .steps span:not(.is-done) { display: none; }
  .casewin .steps i { display: none; }
}

/* ============================================================
   loyalty (1G in the lab) - the site brings them in, the app brings them back
   ============================================================ */

.casewin .bake-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em; padding: 0 1.1em 1.1em; }
.casewin .food { display: grid; place-items: center; aspect-ratio: 1.45; border-radius: 0.7em; background: var(--tile); }
.casewin .food svg { width: 56%; height: 84%; }
.casewin .menu-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6em; }
.casewin .menu-card { display: grid; gap: 0.1em; font-size: 0.84em; }
.casewin .menu-card .food { margin-bottom: 0.3em; aspect-ratio: 1.3; }
.casewin .menu-card span { color: var(--w-soft); }
.casewin .menu-card em { justify-self: start; margin-top: 0.15em; padding: 0 0.5em; border-radius: 100px; background: var(--w-warn-fill); color: var(--w-warn); font-size: 0.82em; }
.casewin .getapp { display: grid; gap: 0.2em; padding: 0.9em 1em; border-radius: 0.9em; background: var(--w-fill); }
.casewin .getapp b { font-family: var(--font-display); font-size: 1.3em; letter-spacing: -0.02em; }
.casewin .getapp span { font-size: 0.86em; color: var(--w-soft); }
.casewin .getapp i { color: #e2a019; letter-spacing: 0.12em; }
.casewin .sys[data-tone$="dark"] .food { filter: brightness(0.8) saturate(0.9); }

.casewin .loy { display: grid; gap: 0.5em; padding: 0.7em; border-radius: 1em; background: linear-gradient(135deg, var(--signal), var(--signal-deep)); color: #fff; }
.casewin .loy p { display: flex; justify-content: space-between; font-size: 0.66em; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; }
.casewin .stamps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35em; }
.casewin .stamps i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5); color: transparent; }
.casewin .stamps i .ico { width: 58%; height: 58%; stroke-width: 2.2; }
.casewin .stamps i.is-on { background: #fff; box-shadow: none; color: var(--signal-deep); }
.casewin .stamps i.is-pop { animation: stamp-pop 0.7s var(--ease-back); }
@keyframes stamp-pop { 0% { transform: scale(0.2) rotate(-40deg); } 100% { transform: none; } }
.casewin .usual, .casewin .order-track { display: grid; gap: 0.35em; padding: 0.65em; border-radius: 1em; box-shadow: inset 0 0 0 1px var(--w-line); font-size: 0.78em; line-height: 1.25; }
.casewin .usual span, .casewin .order-track span { color: var(--w-soft); }
.casewin .usual .nat-btn { margin-top: 0.2em; font-size: 1em; }
.casewin .order-track { display: none; }
.casewin .is-ordered .usual { display: none; }
.casewin .is-ordered .order-track { display: grid; animation: sys-pop 0.45s var(--ease-out) both; }
.casewin .track-h { display: flex; justify-content: space-between; font-weight: 600; }
.casewin .track-bar { height: 0.42em; border-radius: 1em; overflow: hidden; background: var(--w-mark-dim); }
.casewin .track-bar i { display: block; width: var(--p, 10%); height: 100%; border-radius: inherit; background: var(--w-mark); transition: width 2.4s linear; }
.casewin .track-steps { display: flex; justify-content: space-between; font-size: 0.9em; color: var(--w-soft); }
.casewin .track-steps b { font-weight: 400 !important; color: var(--w-soft); }
.casewin .track-steps b.is-on { font-weight: 600 !important; color: var(--w-fg); }
.casewin .paysheet { justify-items: center; text-align: center; }
.casewin .paysheet p { font-size: 0.74em; color: var(--w-soft); }
.casewin .paysheet b { font-size: 1.5em; letter-spacing: -0.02em; }
.casewin .face { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.8em; box-shadow: inset 0 0 0 1.5px var(--w-faint); color: var(--w-soft); }
.casewin .face.is-ok { background: var(--w-ok-fill); box-shadow: none; color: var(--w-ok); }

/* parts the next windows share with a lab window that did not ship (1I) */
.casewin .next-class { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 0.55em; align-items: center; padding: 0.55em 0.6em; border-radius: 0.9em; box-shadow: inset 0 0 0 1px var(--w-line); font-size: 0.74em; line-height: 1.25; }
.casewin .next-class .ico-box { grid-row: span 2; width: 2.1em; height: 2.1em; }
.casewin .next-class span { grid-column: 2; font-size: 0.92em; color: var(--w-soft); }

/* ============================================================
   call (2G in the lab) - the phone rings. It gets answered.
   ============================================================ */

.casewin .sys.voice { grid-template-columns: auto minmax(0, 1fr); gap: 1.5em; }
.casewin .voice .iphone { height: 100%; }
.casewin .is-call { color: #fff; }
.casewin .is-call > .ios-status, .casewin .is-call > .callx, .casewin .is-call > .recents, .casewin .is-call > .home-bar { position: relative; z-index: 1; }
.casewin .call-wall { position: absolute; inset: 0; background: radial-gradient(130% 55% at 50% 0%, rgb(var(--signal-rgb) / 0.6), transparent 72%), linear-gradient(180deg, #2a2a30, #0d0d0f); transition: opacity 0.5s var(--ease-out); }
.casewin .callx { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 0.3em; justify-items: center; min-height: 0; padding: 0.9em 0.7em 0.3em; text-align: center; }
.casewin .call-av { position: relative; display: grid; place-items: center; width: 4em; height: 4em; margin-bottom: 0.2em; border-radius: 50%; background: linear-gradient(180deg, #b0b0b9, #787880); font-size: 1em; font-weight: 600; }
.casewin .call-av::before, .casewin .call-av::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.5); opacity: 0; }
.casewin .is-ringing .call-av::before, .casewin .is-ringing .call-av::after { animation: call-ring 1.4s ease-out infinite; }
.casewin .is-ringing .call-av::after { animation-delay: 0.5s; }
@keyframes call-ring { 0% { opacity: 0.8; transform: none; } 100% { opacity: 0; transform: scale(1.7); } }
.casewin .call-name { font-size: 1.25em; font-weight: 600; }
.casewin .call-status { font-size: 0.72em; opacity: 0.85; }
.casewin .call-status em { display: inline-block; margin-top: 0.4em; padding: 0.15em 0.7em; border-radius: 100px; background: var(--signal); color: #fff; font-size: 0.9em; opacity: 0; transition: opacity var(--dur-2); }
.casewin .is-live .call-status em { opacity: 1; }
.casewin .wave { display: flex; align-items: center; gap: 0.17em; align-self: center; height: 2.6em; }
.casewin .wave i { width: 0.19em; height: 14%; border-radius: 1em; background: #fff; opacity: 0.9; }
.casewin .is-live .wave i { animation: call-wave 0.9s ease-in-out infinite; animation-delay: calc(var(--i) * -0.13s); }
@keyframes call-wave { 0%, 100% { height: 14%; } 50% { height: var(--h, 80%); } }
.casewin .call-keys { display: grid; grid-template-columns: repeat(3, auto); gap: 0.5em 1em; }
.casewin .call-keys i { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: rgb(255 255 255 / 0.16); }
.casewin .call-keys i.is-end { grid-column: 2; background: #ff3b30; }
.casewin .call-keys i.is-end .ico { transform: rotate(135deg); }
.casewin .recents { display: none; align-content: start; min-height: 0; padding: 0.2em 0.85em; }
.casewin .recents h5 { padding: 0.1em 0 0.35em; font-size: 1.4em; font-weight: 700 !important; letter-spacing: -0.02em; }
.casewin .rec { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.5em; padding: 0.45em 0; border-top: 1px solid var(--w-line); font-size: 0.76em; line-height: 1.25; }
.casewin .rec span { grid-column: 1; font-size: 0.88em; color: var(--w-soft); }
.casewin .rec time { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 0.88em; color: var(--w-soft); }
.casewin .rec.is-ai { animation: sys-pop 0.5s var(--ease-out) both; }
.casewin .rec.is-ai span { color: var(--w-accent-text); font-weight: 600; }
.casewin .is-over { color: var(--w-fg); }
.casewin .is-over .call-wall { opacity: 0; }
.casewin .is-over .callx { display: none; }
.casewin .is-over .recents { display: grid; }

.casewin .tscript { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.casewin .tlines { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.55em; min-height: 0; padding: 0.8em 0.9em; overflow: hidden; font-size: 0.9em; line-height: 1.35; }
.casewin .tline { flex: none; display: grid; grid-template-columns: 4.7em minmax(0, 1fr); gap: 0.6em; animation: sys-pop 0.4s var(--ease-out) both; }
.casewin .tline b { padding-top: 0.12em; font-size: 0.82em; font-weight: 500 !important; color: var(--w-soft); }
.casewin .tline.is-ai b { color: var(--w-accent-text); }
.casewin .tsum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2em 0.9em; max-height: 0; margin: 0 0.9em; padding: 0 0.8em; border-radius: 0.8em; overflow: hidden; background: var(--w-ok-fill); font-size: 0.84em; opacity: 0; transition: max-height 0.6s var(--ease-out), opacity 0.4s, padding 0.6s var(--ease-out), margin 0.6s var(--ease-out); }
.casewin .tsum.is-in { max-height: 9em; margin-bottom: 0.9em; padding: 0.7em 0.8em; opacity: 1; }
.casewin .tsum > b { grid-column: 1 / -1; color: var(--w-ok); }
.casewin .tsum span { color: var(--w-soft); }
@container widget (max-width: 420px) {
  .casewin .sys.voice { gap: 0.8em; }
  .casewin .tline { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ============================================================
   sync (3I in the lab) - same numbers, every screen: a laptop and a phone in step
   ============================================================ */

.casewin .laptop { position: absolute; left: 5.5%; top: 3%; width: 80.5%; }
.casewin .laptop-lid { position: relative; aspect-ratio: 16 / 10.3; padding: 0.5em 0.5em 0.6em; border-radius: 0.95em 0.95em 0.25em 0.25em; background: #0b0b0c; box-shadow: 0 0 0 1px #2b2b2f; }
.casewin .laptop-lid::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 0.5em; width: 9%; height: 0.55em; border-radius: 0 0 0.35em 0.35em; background: #0b0b0c; transform: translateX(-50%); }
.casewin .laptop-ui { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); height: 100%; border-radius: 0.4em; overflow: hidden; background: var(--w-bg); color: var(--w-fg); }
.casewin .laptop-base { position: relative; display: block; height: 0.75em; margin: 0 -7%; border-radius: 0.15em 0.15em 1.1em 1.1em; background: linear-gradient(180deg, #e2e2e6, #b3b3b9 55%, #8c8c92); box-shadow: 0 1.4em 2em -1em rgb(0 0 0 / 0.7); }
.casewin .laptop-base::after { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 0.24em; border-radius: 0 0 0.45em 0.45em; background: #8f8f95; transform: translateX(-50%); }
.casewin .lap-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 0.55em; min-height: 0; padding: 0.95em 18% 0.7em 0.9em; font-size: 0.86em; }
.casewin .lap-top { display: flex; align-items: baseline; gap: 0.7em; white-space: nowrap; }
.casewin .lap-top h5 { font-size: 1.15em; font-weight: 700 !important; letter-spacing: -0.02em; }
.casewin .synced { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8em; color: var(--w-soft); }
.casewin .lap-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0.7em; min-height: 0; }
.casewin .feed { display: grid; align-content: start; min-height: 0; margin: 0; padding: 0; overflow: hidden; list-style: none; font-size: 0.92em; }
.casewin .feed li { display: flex; justify-content: space-between; gap: 0.8em; padding: 0.34em 0; border-bottom: 1px solid var(--w-line); overflow: hidden; white-space: nowrap; animation: sys-row-in 0.5s var(--ease-out) both; }
.casewin .feed li span { overflow: hidden; color: var(--w-soft); text-overflow: ellipsis; }
.casewin .feed li.is-alert { padding-inline: 0.5em; border-radius: 0.5em; border-bottom: 0; background: var(--w-warn-fill); color: var(--w-warn); font-weight: 600; }
.casewin .feed li.is-alert.is-ok { background: var(--w-ok-fill); color: var(--w-ok); }
.casewin .pair .pk { padding-top: 0.3em; }
.casewin .iphone .pk-push { top: 2em; }
.casewin .pk-push em { margin-left: auto; padding: 0.25em 0.7em; border-radius: 100px; background: var(--w-accent); color: var(--w-on-accent); font-weight: 600; white-space: nowrap; transition: transform var(--dur-1); }
.casewin .pk-push em.is-down { transform: scale(0.9); }
@container widget (max-width: 420px) {
  .casewin .laptop { left: 6%; width: 86%; }
  .casewin .lap-main { padding-right: 34%; }
  /* one figure is all a laptop this small has room for */
  .casewin .lap-main .ana-kpis { grid-template-columns: minmax(0, 1fr) !important; }
  .casewin .lap-main .ana-kpis div:nth-child(n + 2) { display: none; }
  .casewin .lap-body { grid-template-columns: minmax(0, 1fr); }
  .casewin .lap-body .feed { display: none; }
  .casewin .sys.pair > .laptop + .iphone { height: 84%; }
}