/* Product shots: the Merchant Health tool, drawn in HTML in Apple's design language.
   Everything is sized in em on a 120 × 80em artboard (1em = 1/120 of the host width);
   the tool window sets its own font-size and sizes its parts in that em.
   Icons are SF Symbols (src/data/sf.ts): 1em of font-size draws a symbol at that point size. */

.ab {
  position: absolute; inset: 0; overflow: hidden;
  transform: scale(var(--zoom, 1));
  font-size: calc(100cqw / 120);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', Inter, system-ui, sans-serif;
  color: #1d1d1f; line-height: 1.3; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; font-feature-settings: 'kern';
  transition: transform 0.9s cubic-bezier(.2,.75,.2,1), transform-origin 0.9s cubic-bezier(.2,.75,.2,1);
}
.ab * { box-sizing: border-box; }
.ab svg { display: block; }
.ab svg.sf { display: inline-block; flex: none; fill: currentColor; overflow: visible; }
.ab .sf.off { opacity: .35; }
.ab b { font-weight: 600; }
.ab p { margin: 0; }
.ab i { font-style: normal; }

/* Close-ups: one component, centred and enlarged. */
.cu { position: absolute; inset: 0; display: grid; place-items: center; }

/* Wide 16:9 heroes on case pages: the same scene, centred, with more air around it.
   The visible area becomes 132 × 74.25em; --cx/--cy move each scene's centre there. */
:host(.c) .ab { font-size: calc(100cqw / 132); }
:host(.c) .ab > * { translate: var(--cx, 0) var(--cy, 1.8em); }

@keyframes rise { from { opacity: 0; transform: translateY(1.4em); } to { opacity: 1; transform: none; } }

/* ---------- Merchant Health: an internal web tool in Apple's look ----------
   macOS 26 window, Apple's web palette and type: label #1d1d1f, secondary #6e6e73,
   tertiary #86868b, separators rgba(0,0,0,.08), grouped background #f5f5f7, accent #0071e3,
   system red/orange/green for status. 1em inside .con is one point of the app. */
.ab[class*="merchant-health"] { background: radial-gradient(90% 80% at 15% 10%, #dfe7f5, transparent 60%), radial-gradient(80% 70% at 90% 95%, #efe4ea, transparent 60%), #e9eaee; }
.ab.merchant-health { --cx: 3.3em; --cy: -1.5em; }
.con { --fg: #1d1d1f; --mfg: #6e6e73; --tfg: #86868b; --sep: rgba(0,0,0,.08); --bg2: #f5f5f7; --blue: #0071e3; --red: #ff3b30; --orange: #ff9500; --green: #34c759;
  position: absolute; font-size: 1.85em; width: 54em; height: 35em; display: grid; grid-template-columns: 12.5em minmax(0, 1fr); overflow: hidden;
  border-radius: 1.15em; background: var(--bg2); color: var(--fg); letter-spacing: -.01em;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 .4em 1em rgba(0,0,0,.08), 0 2em 4em -1em rgba(20,25,40,.32); }
.con .sf { font-size: .95em; }
.con aside { margin: .5em 0 .5em .5em; border-radius: .65em; background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.06), 0 .1em .4em rgba(0,0,0,.04);
  backdrop-filter: blur(1.2em) saturate(1.6); padding: .8em .55em; display: flex; flex-direction: column; font-size: .9em; }
.con .wl { display: flex; gap: .45em; padding: .1em .45em 1.1em; }
.con .wl i { width: .85em; height: .85em; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.con .wl i:nth-child(2) { background: #febc2e; } .con .wl i:nth-child(3) { background: #28c840; }
.con .brand { display: flex; align-items: center; gap: .45em; padding: 0 .5em .9em; font-size: 1.05em; }
.con .brand b { font-weight: 600; letter-spacing: -.015em; }
.con .grp { font-size: .82em; font-weight: 600; color: var(--tfg); padding: 0 .65em .35em; }
.con aside ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .05em; }
.con aside li { display: flex; align-items: center; gap: .55em; padding: .4em .6em; border-radius: .55em; color: var(--fg); }
.con aside li .sf { color: var(--blue); width: 1.15em; }
.con aside li.on { background: rgba(0,0,0,.07); font-weight: 600; }
.con aside li em { margin-left: auto; font-style: normal; font-size: .85em; font-weight: 500; color: var(--mfg); }
.con .me { margin-top: auto; display: flex; gap: .55em; align-items: center; padding: .45em; }
.con .me b { font-weight: 500; }
.con .me small, .con small { display: block; color: var(--mfg); font-size: .88em; }
.con .av { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; background: linear-gradient(#a7a7ad, #86868b); display: grid; place-items: center; font-size: .78em; font-weight: 600; color: #fff; letter-spacing: .02em; }
.con main { display: flex; flex-direction: column; min-width: 0; }
.con header { height: 3.4em; flex: none; display: flex; align-items: center; gap: .9em; padding: 0 1.3em 0 1.1em; font-size: .9em; }
.con header > .sf { color: var(--mfg); }
.con .crumb { color: var(--mfg); font-weight: 500; }
.con .search { margin-left: auto; width: 15em; height: 2.2em; border-radius: 2em; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.08), 0 .1em .3em rgba(0,0,0,.04);
  display: flex; align-items: center; gap: .45em; padding: 0 .8em; color: var(--tfg); white-space: nowrap; overflow: hidden; }
.con kbd { flex: none; margin-left: auto; font: inherit; font-size: .82em; color: var(--tfg); }
.con .body { flex: 1; padding: .4em 1.5em 1.4em; display: grid; gap: .85em; align-content: start; overflow: hidden; font-size: .9em; }
.con .title h4 { margin: 0; font-size: 1.75em; font-weight: 700; letter-spacing: -.03em; }
.con .title p { color: var(--mfg); margin-top: .15em; }
.con .card { border-radius: .95em; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.05), 0 .1em .3em rgba(0,0,0,.04); }
.con .ch { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .8em 1.1em; border-bottom: .5px solid var(--sep); }
.con .ch b { font-weight: 600; }
.con .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85em; }
.con .kpi { padding: .95em 1.1em; display: grid; gap: .2em; }
.con .kpi small { font-size: .9em; font-weight: 500; color: var(--mfg); }
.con .kpi b { font-size: 2.1em; font-weight: 700; letter-spacing: -.035em; }
.con .kpi b.red { color: var(--red); }
.con .kpi span { color: var(--tfg); font-size: .88em; }
.con .tabs { display: inline-flex; background: rgba(0,0,0,.06); border-radius: .6em; padding: .15em; }
.con .tabs i { padding: .2em .8em; border-radius: .48em; color: var(--fg); font-weight: 500; font-size: .95em; }
.con .tabs i.on { background: #fff; box-shadow: 0 .05em .2em rgba(0,0,0,.14), 0 0 0 .5px rgba(0,0,0,.04); }
.con .tbl { width: 100%; border-collapse: collapse; }
.con .tbl th { text-align: left; font-weight: 500; font-size: .9em; color: var(--tfg); padding: .65em 1.1em; border-bottom: .5px solid var(--sep); }
.con .tbl td { padding: .6em 1.1em; border-bottom: .5px solid var(--sep); vertical-align: middle; }
.con .tbl tr:last-child td { border-bottom: 0; }
.con .tbl td b { font-weight: 500; }
.con .bdg { display: inline-flex; align-items: center; gap: .35em; height: 1.75em; padding: 0 .65em; border-radius: 2em; font-size: .86em; font-weight: 600; white-space: nowrap; background: rgba(0,0,0,.06); color: var(--fg); }
.con .bdg.secondary { background: rgba(0,0,0,.06); color: var(--mfg); }
.con .bdg.outline { background: none; color: var(--mfg); box-shadow: inset 0 0 0 .5px rgba(0,0,0,.18); }
.con .bdg.red { background: rgba(255,59,48,.12); color: #d70015; }
.con .bdg.amber { background: rgba(255,149,0,.14); color: #c93400; }
.con .bdg.red-soft { background: none; color: #d70015; padding: 0; }
.con .bdg.green-soft { background: none; color: #248a3d; padding: 0; }
.con .bdg.red-soft::before, .con .bdg.green-soft::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.con .btn { display: inline-flex; align-items: center; gap: .4em; height: 2.2em; padding: 0 1em; border-radius: 2em; background: var(--blue); color: #fff; font-weight: 500; white-space: nowrap; }
.con .btn.sm { height: 2em; padding: 0 .85em; font-size: .95em; }
.con .btn.outline { background: rgba(0,0,0,.06); color: var(--blue); }
.con .alert { display: flex; gap: .7em; padding: .85em 1.1em; border-radius: .95em; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.05); }
.con .alert b { display: block; font-weight: 600; margin-bottom: .05em; color: var(--fg); }
.con .alert span { color: var(--mfg); }
.con .alert .sf { font-size: 1.2em; margin-top: .05em; }
.con .alert.red .sf { color: var(--red); }
.con .alert.amber .sf { color: var(--orange); }
.con .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .85em; align-items: start; }
.con .split.wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.con .people { list-style: none; margin: 0; padding: .2em 0; }
.con .people li { display: flex; align-items: center; gap: .75em; padding: .55em 1.1em; }
.con .people li + li { box-shadow: inset 3.9em .5px 0 #fff, inset 0 .5px 0 var(--sep); }
.con .people li > span:nth-child(2) { flex: 1; }
.con .tl { list-style: none; margin: 0; padding: .9em 1.1em .9em 2.4em; display: grid; gap: .85em; position: relative; }
.con .tl::before { content: ''; position: absolute; left: 1.45em; top: 1.3em; bottom: 1.3em; width: 1px; background: var(--sep); }
.con .tl li { position: relative; }
.con .tl li::before { content: ''; position: absolute; left: -1.27em; top: .35em; width: .62em; height: .62em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #c7c7cc; }
.con .tl li.done::before { background: #c7c7cc; box-shadow: none; }
.con .tl li.now::before { background: var(--blue); box-shadow: 0 0 0 .25em rgba(0,113,227,.15); }
.con .tl li.bad::before { background: var(--red); box-shadow: 0 0 0 .25em rgba(255,59,48,.15); }
.con .tl b { font-weight: 600; margin-right: .45em; }
.con .cert { padding-bottom: .3em; }
.con .cert dl { margin: 0; padding: .6em 1.1em; display: grid; grid-template-columns: auto 1fr; gap: .45em 1.2em; }
.con .cert dt { color: var(--mfg); }
.con .cert dd { margin: 0; font-weight: 500; }
.con .steps4 { list-style: none; margin: 0; padding: .3em 0; }
.con .steps4 li { display: grid; grid-template-columns: 1.6em 1fr auto; align-items: center; gap: .05em .75em; padding: .4em 1.1em; }
.con .steps4 li small { grid-column: 2; }
.con .steps4 li .sf { grid-row: span 2; font-size: 1.2em; }
.con .steps4 li.done .sf { color: var(--green); }
.con .steps4 li.now .sf { color: var(--blue); }
.con .steps4 li.now { background: rgba(0,113,227,.05); }
.con .steps4 li.locked { color: var(--tfg); }
.con .checks { list-style: none; margin: 0; padding: .2em 0; }
.con .checks li { display: grid; grid-template-columns: 1.6em 1fr auto; gap: .75em; align-items: center; padding: .65em 1.1em; }
.con .checks li + li { box-shadow: inset 0 .5px 0 var(--sep); }
.con .checks li .sf { font-size: 1.2em; }
.con .checks .ok .sf { color: var(--green); } .con .checks .bad .sf { color: var(--red); } .con .checks .wait .sf { color: var(--tfg); }
.con .checks li.bad { background: rgba(255,59,48,.06); }
.con .checks em { font-style: normal; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .9em; color: var(--tfg); }
.con .checks .bad em { color: #d70015; font-weight: 600; }
.con .fix { padding: .95em 1.1em; display: grid; grid-template-columns: 1fr auto; gap: .2em 1em; align-items: center; }
.con .fix b { font-weight: 600; }
.con .fix p { color: var(--mfg); grid-column: 1; }
.con .fix .btn { grid-row: 1 / span 2; grid-column: 2; }
.con .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .86em; color: var(--tfg); }
.con .msg { display: flex; gap: .75em; padding: .95em 1.1em; }
.con .msg b { display: block; font-weight: 600; }
.con .msg small { margin-top: .35em; }
.con .draft { margin: 0 1.1em 1.1em; padding: .85em 1em; border-radius: .8em; background: var(--bg2); display: grid; gap: .5em; justify-items: start; }
.con .draft small { font-weight: 600; color: var(--blue); }
/* Problems first: an attention banner, severity on the KPIs, rows grouped by when they break. */
.con .title.row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1em; }
.con .attn { display: flex; align-items: center; gap: .8em; padding: .85em 1em .85em 1.1em; border-radius: .95em; background: #fff; box-shadow: inset 0 0 0 1px rgba(255,59,48,.3), 0 .2em .8em rgba(255,59,48,.08); }
.con .attn > .sf { font-size: 1.35em; color: var(--red); }
.con .attn > span:nth-child(2) { flex: 1; color: var(--mfg); }
.con .attn b { display: block; color: var(--fg); font-weight: 600; font-size: 1.08em; margin-bottom: .05em; }
.con .btn.red { background: var(--red); }
.con .kpi.crit { box-shadow: inset 0 0 0 1px rgba(255,59,48,.3); }
.con .kpi.crit b { color: var(--red); }
.con .kpi.warn b { color: #c93400; }
.con .kpi.crit small::before, .con .kpi.warn small::before { content: ''; display: inline-block; width: .5em; height: .5em; border-radius: 50%; margin-right: .4em; vertical-align: .08em; background: var(--red); }
.con .kpi.warn small::before { background: var(--orange); }
.con .tbl tr.grp td { padding: .45em 1.1em; background: #fafafa; font-size: .82em; font-weight: 600; color: var(--tfg); }
.con .tbl tr.grp td em { font-style: normal; margin-left: .45em; font-weight: 500; }
.con .tbl tr.grp.crit td { color: #d70015; background: rgba(255,59,48,.05); }
.con .tbl tr.crit td:first-child { box-shadow: inset .2em 0 0 var(--red); }
.con .tbl tr.warn td:first-child { box-shadow: inset .2em 0 0 var(--orange); }
.con .tbl tr.more td { padding: .65em 1.1em; color: var(--blue); font-weight: 500; }
/* Micro motion. Numbers count up, rows arrive in order, severity bars draw down. */
.con .kpi b.num { --v: var(--to); counter-reset: v var(--v); font-variant-numeric: tabular-nums; }
.con .kpi b.num::after { content: counter(v); }
:host(.anim.play) .con .kpi b.num { animation: count 1.3s cubic-bezier(.2,.7,.2,1) .45s both; }
@keyframes count { from { --v: 0; } }
:host(.anim) .con .tbl tbody tr { opacity: 0; }
:host(.anim.play) .con .tbl tbody tr { animation: rowin .6s cubic-bezier(.2,.75,.2,1) both; }
:host(.anim.play) .con .tbl tbody tr:nth-child(1) { animation-delay: .35s; } :host(.anim.play) .con .tbl tbody tr:nth-child(2) { animation-delay: .42s; }
:host(.anim.play) .con .tbl tbody tr:nth-child(3) { animation-delay: .49s; } :host(.anim.play) .con .tbl tbody tr:nth-child(4) { animation-delay: .56s; }
:host(.anim.play) .con .tbl tbody tr:nth-child(5) { animation-delay: .63s; } :host(.anim.play) .con .tbl tbody tr:nth-child(6) { animation-delay: .7s; }
:host(.anim.play) .con .tbl tbody tr:nth-child(n+7) { animation-delay: .77s; }
@keyframes rowin { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
.con .tbl tr.crit td:first-child, .con .tbl tr.warn td:first-child { box-shadow: none; position: relative; }
.con .tbl tr.crit td:first-child::before, .con .tbl tr.warn td:first-child::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .2em; background: var(--red); transform-origin: top; }
.con .tbl tr.warn td:first-child::before { background: var(--orange); }
:host(.anim.play) .con .tbl tr.crit td:first-child::before, :host(.anim.play) .con .tbl tr.warn td:first-child::before { animation: bar .7s cubic-bezier(.2,.75,.2,1) .7s both; }
@keyframes bar { from { transform: scaleY(0); } }
:host(.anim.play) .con .attn > .sf { animation: nudge .5s cubic-bezier(.3,1.6,.5,1) 1s both; }
@keyframes nudge { 0% { transform: scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
:host(.anim) .con .card, :host(.anim) .con .alert { opacity: 0; }
:host(.anim.play) .con .card, :host(.anim.play) .con .alert { animation: rise .8s cubic-bezier(.2,.75,.2,1) both; }
:host(.anim.play) .con .body > :nth-child(2) { animation-delay: .1s; } :host(.anim.play) .con .body > :nth-child(3) { animation-delay: .2s; } :host(.anim.play) .con .body > :nth-child(4) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) { :host(.anim) .con .card, :host(.anim) .con .alert, :host(.anim) .con .tbl tbody tr { opacity: 1; } .con * { animation: none !important; } }

/* Owners screen: equal-height cards, and what happens next along the bottom. */
.con .split.even { align-items: stretch; }
.con .split.even > .card { display: flex; flex-direction: column; }
.con .split.even .people { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.con .card.next { display: flex; align-items: center; gap: .75em; padding: .85em 1.1em; }
.con .card.next > .sf { font-size: 1.2em; color: var(--blue); }
.con .card.next > span:nth-child(2) { flex: 1; color: var(--mfg); }
.con .card.next b { display: block; color: var(--fg); font-weight: 600; }

/* The merchant's Apple Developer account, opened over the tool for the rotation story. */
.portal { position: absolute; z-index: 4; font-size: 1.85em; width: 27em; border-radius: .9em; overflow: hidden; background: #fff; color: #1d1d1f;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 1.4em 3em -.6em rgba(20,25,40,.45); letter-spacing: -.01em; }
.portal .pbar { display: flex; align-items: center; gap: .8em; height: 2.4em; padding: 0 .8em; background: #f5f5f7; border-bottom: .5px solid rgba(0,0,0,.08); }
.portal .wl { display: flex; gap: .4em; padding: 0; }
.portal .wl i { width: .75em; height: .75em; border-radius: 50%; background: #ff5f57; }
.portal .wl i:nth-child(2) { background: #febc2e; } .portal .wl i:nth-child(3) { background: #28c840; }
.portal .url { margin: 0 auto; display: inline-flex; align-items: center; gap: .35em; font-size: .85em; color: #6e6e73; background: rgba(0,0,0,.05); padding: .2em .9em; border-radius: .5em; }
.portal .url .sf { font-size: .8em; }
.portal .pbody { padding: 1em 1.2em 1.1em; font-size: .9em; }
.portal .pk { font-size: .85em; color: #6e6e73; }
.portal h5 { margin: .15em 0 .7em; font-size: 1.3em; font-weight: 600; letter-spacing: -.02em; }
.portal .prow { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .65em 0; border-top: .5px solid rgba(0,0,0,.08); }
.portal .prow b { display: block; font-weight: 500; }
.portal .prow small { display: block; color: #6e6e73; font-size: .88em; }
.portal .btn { display: inline-flex; align-items: center; gap: .35em; height: 2em; padding: 0 .85em; border-radius: 2em; font-weight: 500; white-space: nowrap; font-size: .95em; }
.portal .btn.outline { background: rgba(0,0,0,.06); color: #0071e3; }
.portal .btn.off { background: rgba(0,0,0,.05); color: #aeaeb2; }
.portal .btn.off .sf { font-size: .85em; }
.portal .pin { display: none; position: absolute; z-index: 3; left: -.75em; top: -.2em; width: 1.7em; height: 1.7em; place-items: center; border-radius: 50%; background: #0071e3; color: #fff; font: 600 .82em/1 -apple-system, system-ui, sans-serif; font-style: normal; box-shadow: 0 0 0 .22em #fff; }
:host(.notes) .portal .pin { display: grid; animation: pinin .5s cubic-bezier(.2,.75,.2,1) both; }
.portal .pin.hl { transform: scale(1.35); }
.portal .spot { outline: .14em solid #0071e3; outline-offset: .18em; border-radius: .45em; background: #fff; }
:host(.anim) .portal { opacity: 0; }
:host(.anim.play) .portal { animation: rise .9s cubic-bezier(.2,.75,.2,1) .5s both; }
@media (prefers-reduced-motion: reduce) { :host(.anim) .portal { opacity: 1; } }

/* Cover: the app's icon and name, for the home page. The icon is a squircle-ish rounded
   square with a glass highlight; the badge is the two merchants at risk this week. */
.cover { position: absolute; inset: 0; align-content: center; display: grid; justify-items: center; gap: 2.6em; text-align: center; }
.appicon { position: relative; width: 26em; height: 26em; border-radius: 23%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(165deg, #6ad2ff, #0a84ff 48%, #0040dd);
  box-shadow: inset 0 .35em .7em rgba(255,255,255,.4), inset 0 -.8em 1.6em rgba(0,20,90,.25), 0 0 0 .12em rgba(255,255,255,.35), 0 3.2em 6.4em -2em rgba(0,50,140,.45); }
.appicon::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(rgba(255,255,255,.38), transparent 46%); }
.appicon .sf { position: relative; font-size: 13em; filter: drop-shadow(0 .02em .05em rgba(0,30,110,.35)); }
.appicon i { position: absolute; top: -.55em; right: -.55em; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center;
  font: 600 3.4em/1 -apple-system, system-ui, sans-serif; font-style: normal; background: #ff3b30; color: #fff; box-shadow: 0 0 0 .14em rgba(255,255,255,.9), 0 .3em .7em rgba(255,59,48,.4); }
.cover h3 { margin: .3em 0 0; font-size: 6.4em; font-weight: 600; letter-spacing: -.03em; color: #1d1d1f; }
.cover p { margin-top: -.5em; font-size: 2.7em; color: #6e6e73; }
:host(.anim) .cover > * { opacity: 0; }
:host(.anim.play) .cover > * { animation: rise 1s cubic-bezier(.2,.75,.2,1) both; }
:host(.anim.play) .cover > :nth-child(2) { animation-delay: .12s; } :host(.anim.play) .cover > :nth-child(3) { animation-delay: .2s; }
:host(.anim.play) .appicon i { animation: nudge .6s cubic-bezier(.3,1.6,.5,1) .9s both; }
@media (prefers-reduced-motion: reduce) { :host(.anim) .cover > * { opacity: 1; } }

/* The window fills its frame edge to edge: no backdrop margin around it. The frame's own
   rounded corners and clipping become the window's corners. */
.ab > .con { left: 0 !important; top: 0 !important; right: 0; bottom: 0; width: auto; height: auto; translate: none !important;
  font-size: min(calc(100cqw / 54), calc(100cqh / 35)); border-radius: 0; box-shadow: none; }

/* Annotation pins (case page toggle). Each sits on the top-left corner of what it explains. */
.con th, .con .alert, .con .ch, .con li, .con .msg, .con .draft, .con .fix { position: relative; }
.con .pin { display: none; position: absolute; z-index: 3; left: -.75em; top: -.7em; width: 1.7em; height: 1.7em; place-items: center; border-radius: 50%;
  background: #0071e3; color: #fff; font: 600 .82em/1 -apple-system, system-ui, sans-serif; font-style: normal; box-shadow: 0 0 0 .22em #fff, 0 .3em .8em rgba(0,113,227,.4);
  transition: transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s; }
.con th .pin { left: auto; right: .4em; top: 50%; translate: 0 -50%; }
.con .ch .pin { left: -.6em; top: -.6em; }
:host(.notes) .con .pin { display: grid; animation: pinin .5s cubic-bezier(.2,.75,.2,1) both; }
:host(.notes) .con [data-pin="2"] { animation-delay: .08s; } :host(.notes) .con [data-pin="3"] { animation-delay: .16s; }
.con .pin.hl { transform: scale(1.35); box-shadow: 0 0 0 .22em #fff, 0 0 0 .6em rgba(0,113,227,.22); }
@keyframes pinin { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } }
.con .spot { z-index: 2; outline: .14em solid #0071e3; outline-offset: .18em; border-radius: .45em; box-shadow: 0 0 0 100em rgba(20,24,34,.22); transition: box-shadow .5s; }
.con th.spot, .con li.spot, .con .ch.spot { background: #fff; }
.con aside, .con header { transition: filter .5s; }
:host(.notes) .con aside, :host(.notes) .con header { filter: brightness(.8); }
.con th.spot { outline-offset: -.1em; }

/* Pins are tappable: each opens a short note beside it. */
:host(.notes) .pin { cursor: pointer; transition: transform .25s cubic-bezier(.2,.75,.2,1); }
:host(.notes) .pin:hover { transform: scale(1.18); }

/* Room to breathe: a quieter, narrower sidebar, a wider content well, and generous rhythm.
   Each screen now holds one idea in two or three parts at most. */
.con { grid-template-columns: 11em minmax(0, 1fr); }
.con aside { margin: .6em 0 .6em .6em; padding: .9em .5em; }
.con aside li { padding: .45em .6em; }
.con .grp { padding-top: .2em; }
.con header { height: 3.8em; padding: 0 1.6em 0 1.4em; }
.con .body { padding: .6em 2.1em 2em; gap: 1.15em; }
.con .title { margin-bottom: .2em; }
.con .title h4 { font-size: 1.85em; }
.con .card { border-radius: 1.05em; }
.con .ch { padding: .95em 1.3em; }
.con .tbl th { padding: .8em 1.3em; }
.con .tbl td { padding: .75em 1.3em; }
.con .alert { padding: 1em 1.3em; }
.con .split { gap: 1.15em; }
.con .people li { padding: .7em 1.3em; }
.con .tl { padding: 1.15em 1.3em 1.2em 2.7em; gap: 1.05em; }
.con .tl::before { left: 1.7em; }
.con .tl li::before { left: -1.32em; }
.con .cert dl { padding: .85em 1.3em 1em; gap: .6em 1.4em; }
.con .steps4 li { padding: .6em 1.3em; }
.con .checks li { padding: .8em 1.3em; }
.con .fix { padding: 1.15em 1.3em; }
.con .msg { padding: 1.15em 1.3em; }
.con .steps4 li.locked { position: relative; }
/* The rotation screen carries four steps: a tighter rhythm so the locked last step stays in view. */
.con:has(.steps4) .body { gap: .85em; padding-bottom: 1.2em; }
.con:has(.steps4) .cert dl { padding: .6em 1.3em .75em; gap: .4em 1.4em; }
.con:has(.steps4) .steps4 li { padding: .45em 1.3em; }
.con:has(.steps4) .alert { padding: .8em 1.3em; }

/* Rows without an avatar: the text takes the room, the badge stays its size. */
.con .people li > span.bdg { flex: none; }
.con .people li > span:first-child:not(.av) { flex: 1; }

/* The old console: flat and plain, no glass, no blue icons, a narrower sidebar. */
.con.old { --bg2: #f2f2f2; grid-template-columns: 10em minmax(0, 1fr); }
.con.old aside { background: #e6e6e6; box-shadow: none; backdrop-filter: none; border-radius: .5em; }
.con.old aside li .sf { color: var(--mfg); }
.con.old aside li.on { background: rgba(0,0,0,.08); }
.con.old .brand { padding-bottom: 1.1em; font-size: .95em; }
.con.old .card, .con.old .alert { border-radius: .5em; box-shadow: 0 0 0 .5px rgba(0,0,0,.12); }
.con.old .title h4 { font-weight: 600; font-size: 1.6em; }

/* Last in the file, so the compact layout wins over the roomier desktop rhythm above
   (including the old console's narrower sidebar column). */
/* Narrow frames (phones): the tool takes its compact layout instead of shrinking.
   The host .shot is the size container; queries reach through the shadow root. */
@container (max-width: 640px) {
  .cover { font-size: 1.9em; }
  .portal { left: 1.2em !important; right: 1.2em; top: auto !important; bottom: 1.6em; width: auto; font-size: 4.6em; }
  .ab > .con { translate: none !important; }
  .ab > .con { left: 0 !important; right: 0; top: 0 !important; bottom: 0; width: auto; height: auto; font-size: 5em; grid-template-columns: minmax(0, 1fr); border-radius: 0; }
  .con aside { display: none; }
  .con header { height: 2.9em; padding: 0 .9em; gap: .7em; }
  .con header > .sf:first-child { display: none; }
  .con .search { display: none; }
  .con header > .sf:last-child { margin-left: auto; }
  .con kbd { display: none; }
  .con .body { padding: .1em .9em 1em; gap: .7em; }
  .con .title h4 { font-size: 1.55em; }
  .con .title.row { flex-direction: column; align-items: flex-start; gap: .5em; }
  .con .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
  .con .kpi { padding: .75em .85em; }
  .con .kpi b { font-size: 1.8em; }
  .con .attn { flex-wrap: wrap; padding: .8em .9em; }
  .con .attn .btn { display: none; }
  .con .split, .con .split.wide { grid-template-columns: minmax(0, 1fr); }
  .con .tbl th:nth-child(2), .con .tbl td:nth-child(2) { display: none; }
  .con .tbl th, .con .tbl td { padding-left: .85em; padding-right: .85em; }
  .con .tbl td small { display: none; }
  /* A table with an action per row (the old certificate list) keeps its dates: without them the rows read the same. */
  .con .tbl:has(td .btn) th:nth-child(2), .con .tbl:has(td .btn) td:nth-child(2) { display: table-cell; }
  .con .tbl:has(td .btn) td small { display: block; }
  /* In a case frame the screen takes its content's height (the host drops its fixed ratio). */
  :host(.fit) .ab { position: relative; inset: auto; min-height: 100%; display: grid; }
  :host(.fit) .ab > .con { position: relative; }
  .con .ch { padding: .7em .85em; }
  .con .fix { grid-template-columns: minmax(0, 1fr); }
  .con .fix .btn { grid-row: auto; grid-column: 1; justify-self: start; margin-top: .4em; }
  .con .checks li { padding: .6em .85em; }
  .con .checks small { display: none; }
}