/* ─────────────────────────────────────────────────────────────────────────────
   Scene: an operations manager at a Riyadh travel company, 10am, bright office,
   glancing between a laptop and his phone while three agents work the pool in
   the field. Bright room + glancing + task = light, warm, dense, high-legibility.

   Colour strategy: Restrained. Warm tinted neutrals carry the surface; one
   accent (a deep spruce that sits in WhatsApp's hue family at a fraction of its
   chroma) marks actions, selection and state. The saturated colour in this
   product lives inside the handsets, where it is quoted, not invented.

   Deliberately NOT navy-and-blue: that is the first reflex for a B2B ops console
   and it makes every one of them look like the same product.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  /* warm paper neutrals, all tinted toward the accent hue (h 150-90) */
  --paper:      oklch(0.968 0.005 95);
  --surface:    oklch(0.995 0.003 95);
  --panel:      oklch(0.945 0.006 95);
  --line:       oklch(0.895 0.007 95);
  --hair:       oklch(0.935 0.006 95);
  --ink:        oklch(0.245 0.012 150);
  --ink-2:      oklch(0.475 0.014 150);
  --ink-3:      oklch(0.635 0.012 150);

  --accent:     oklch(0.435 0.072 165);
  --accent-ink: oklch(0.985 0.004 165);
  --accent-bg:  oklch(0.945 0.023 165);

  --good:       oklch(0.505 0.098 155);
  --good-bg:    oklch(0.948 0.030 155);
  --warn:       oklch(0.545 0.098 72);
  --warn-bg:    oklch(0.955 0.040 82);
  --bad:        oklch(0.505 0.152 27);
  --bad-bg:     oklch(0.950 0.032 27);

  /* the handsets quote WhatsApp; these five are the only saturated values here */
  --wa-green:   oklch(0.792 0.176 152);
  --wa-teal:    oklch(0.365 0.055 178);
  --wa-bubble:  oklch(0.945 0.055 133);
  --wa-paper:   oklch(0.914 0.014 78);
  --wa-link:    oklch(0.628 0.152 240);
  --bezel:      oklch(0.185 0.008 150);

  /* type: one family, product-tight ratio (~1.14) */
  --t-micro: 10.5px; --t-mini: 11.5px; --t-sm: 12.5px; --t-base: 14px;
  --t-md: 16px; --t-lg: 20px; --t-xl: 26px; --t-2xl: 34px;

  --r-sm: 7px; --r: 10px; --r-lg: 14px;
  --ease: cubic-bezier(.22, 1, .36, 1);         /* ease-out-quint, no bounce */
  --dur: 180ms;
  --shadow: 0 1px 2px oklch(0.245 0.012 150 / .06), 0 6px 18px oklch(0.245 0.012 150 / .05);
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:'IBM Plex Sans Arabic', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:var(--paper); color:var(--ink);
  font-size:var(--t-base); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden;
}
/* Arabic letterforms connect. Letter-spacing shatters them; never set it globally. */
[dir="rtl"]{letter-spacing:0}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; border:0; background:none}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.num,.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.mono{direction:ltr; unicode-bidi:isolate}

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

/* ── shell ────────────────────────────────────────────────────────────────── */
#app{display:flex; flex-direction:column; height:100dvh}

.topbar{
  display:flex; align-items:center; gap:12px; padding:0 16px;
  height:54px; flex:0 0 54px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:9px; min-width:0}
.brand .mark{width:10px; height:10px; border-radius:50%; background:var(--wa-green); box-shadow:0 0 0 3px oklch(0.792 0.176 152 / .2); flex:0 0 auto}
.brand b{font-size:var(--t-base); font-weight:600; letter-spacing:-.01em; display:block; white-space:nowrap}
.brand small{display:block; font-size:var(--t-mini); color:var(--ink-3); font-weight:400; white-space:nowrap}
.topbar .spacer{flex:1}

.seg{display:flex; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); padding:2px; gap:2px}
.seg button{padding:5px 11px; border-radius:5px; font-size:var(--t-sm); font-weight:500; color:var(--ink-2); white-space:nowrap; transition:background var(--dur) var(--ease), color var(--dur) var(--ease)}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 2px oklch(0.245 0.012 150 / .09)}

.btn{
  padding:7px 13px; border-radius:var(--r-sm); font-size:var(--t-sm); font-weight:600;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--panel)}
.btn:active{background:var(--line)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{background:oklch(0.385 0.072 165)}
.btn.ghost{border-color:transparent; background:none; color:var(--ink-2); font-weight:500}
.btn.ghost:hover{background:var(--panel); color:var(--ink)}
.btn[disabled]{opacity:.4; cursor:not-allowed; pointer-events:none}
.btn .sp{display:inline-block; width:10px; height:10px; border:2px solid oklch(1 0 0 / .35); border-top-color:currentColor; border-radius:50%; animation:spin .6s linear infinite; vertical-align:-1px; margin-inline-end:5px}
@keyframes spin{to{transform:rotate(360deg)}}

.lens{display:flex; align-items:center; gap:7px; font-size:var(--t-sm); color:var(--ink-2)}
.lens select{padding:6px 9px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); font-size:var(--t-sm); cursor:pointer}
.lens select:hover{background:var(--panel)}
.lens[data-restricted="1"] select{border-color:var(--bad); color:var(--bad); font-weight:600; background:var(--bad-bg)}

.main{flex:1; display:grid; grid-template-columns:minmax(330px, 38%) 1fr; min-height:0}

/* ── left: the wall of handsets ───────────────────────────────────────────── */
.stage{background:var(--bezel); display:flex; flex-direction:column; min-height:0; min-width:0}
.stage-head{
  display:flex; align-items:center; gap:5px; padding:9px 11px; flex-wrap:wrap;
  border-bottom:1px solid oklch(1 0 0 / .07);
}
.chip{
  display:flex; align-items:center; gap:6px; padding:5px 9px; border-radius:var(--r-sm);
  font-size:var(--t-mini); font-weight:500; white-space:nowrap;
  color:oklch(1 0 0 / .58); background:oklch(1 0 0 / .06);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chip:hover{background:oklch(1 0 0 / .12); color:oklch(1 0 0 / .85)}
.chip[aria-pressed="true"]{background:oklch(1 0 0 / .17); color:oklch(0.99 0 0); font-weight:600}
.chip .pip{width:6px; height:6px; border-radius:50%; flex:0 0 auto}
.chip .pip.agent{background:var(--wa-green)}
.chip .pip.customer{background:var(--wa-link)}
.chip .pip.manager{background:oklch(0.78 0.145 78)}
.chip .badge{
  background:var(--bad); color:oklch(0.99 0 0); border-radius:9px; padding:0 5px;
  font-size:var(--t-micro); font-weight:700; min-width:15px; text-align:center; font-variant-numeric:tabular-nums;
}

.phones{flex:1; display:flex; gap:13px; padding:13px; overflow:auto; align-items:stretch; justify-content:center}
.phone{
  flex:1 1 0; max-width:352px; min-width:246px; background:oklch(0.12 0.006 150);
  border-radius:25px; padding:6px; display:flex; flex-direction:column;
  box-shadow:0 16px 36px oklch(0.12 0.006 150 / .5), inset 0 0 0 1px oklch(1 0 0 / .07);
}
.phone-inner{background:var(--wa-paper); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; flex:1; min-height:0}
.phone-head{background:var(--wa-teal); color:oklch(0.99 0 0); padding:9px 11px; display:flex; align-items:center; gap:9px; flex:0 0 auto}
.phone-head .av{
  width:29px; height:29px; border-radius:50%; background:oklch(1 0 0 / .2);
  display:grid; place-items:center; font-size:var(--t-mini); font-weight:700; flex:0 0 auto;
}
.phone-head .id{min-width:0}
.phone-head .who{font-size:var(--t-sm); font-weight:600; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.phone-head .meta{font-size:var(--t-micro); opacity:.72; direction:ltr; unicode-bidi:isolate; text-align:start}
.role-tag{
  margin-inline-start:auto; flex:0 0 auto; font-size:var(--t-micro); font-weight:700;
  padding:3px 7px; border-radius:5px; background:oklch(1 0 0 / .18);
}
.role-tag.agent{background:var(--wa-green); color:oklch(0.24 0.06 152)}
.role-tag.customer{background:var(--wa-link); color:oklch(0.99 0 0)}
.role-tag.manager{background:oklch(0.80 0.145 78); color:oklch(0.28 0.07 60)}

.thread{
  flex:1; overflow-y:auto; padding:11px 9px; display:flex; flex-direction:column; gap:6px;
  background-color:var(--wa-paper);
  background-image:radial-gradient(oklch(0.245 0.012 150 / .05) 1px, transparent 1px);
  background-size:17px 17px;
  scroll-behavior:smooth;
}
.thread-empty{
  margin:auto; max-width:20ch; text-align:center; text-wrap:balance;
  font-size:var(--t-mini); line-height:1.6; color:var(--ink-3);
}
.bubble, .wa-card{
  max-width:87%; border-radius:9px; font-size:var(--t-sm); line-height:1.55;
  box-shadow:0 1px 1px oklch(0.245 0.012 150 / .1);
  animation:rise 200ms var(--ease);
}
@keyframes rise{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
.bubble{padding:7px 10px; white-space:pre-wrap; word-break:break-word}
.bubble.out, .wa-card{align-self:flex-start; background:var(--surface); border-start-start-radius:2px}
.bubble.in{align-self:flex-end; background:var(--wa-bubble); border-start-end-radius:2px}
.bubble .time{font-size:var(--t-micro); color:var(--ink-3); margin-top:3px; text-align:end; direction:ltr; unicode-bidi:isolate}
.bubble.interim{opacity:.6; font-style:italic}
.tag-ai{
  display:inline-block; margin-inline-start:5px; font-size:var(--t-micro); font-weight:700;
  color:oklch(0.44 0.115 300); background:oklch(0.945 0.028 300); padding:1px 4px; border-radius:4px; vertical-align:1px;
}

.wa-card{overflow:hidden; padding:0}
.wa-card .title{padding:8px 10px; font-size:var(--t-sm); line-height:1.5; white-space:pre-wrap}
.wa-card .opt{
  display:block; width:100%; text-align:center; padding:9px 10px;
  font-size:var(--t-sm); font-weight:600; color:var(--wa-link);
  border-top:1px solid var(--hair); transition:background var(--dur) var(--ease);
}
.wa-card .opt:hover:not([disabled]){background:oklch(0.972 0.014 240)}
.wa-card .opt:active:not([disabled]){background:oklch(0.945 0.022 240)}
.wa-card .opt[disabled]{color:var(--ink-3); cursor:default; background:var(--panel)}
.wa-card .opt .desc{display:block; font-size:var(--t-micro); font-weight:400; color:var(--ink-3); margin-top:1px; direction:ltr; unicode-bidi:isolate}

.doc-row{display:flex; align-items:center; gap:8px; font-size:var(--t-sm)}
.doc-row .ic{
  width:27px; height:31px; border-radius:4px; background:oklch(0.52 0.17 27); color:oklch(0.99 0 0);
  display:grid; place-items:center; font-size:var(--t-micro); font-weight:700; flex:0 0 auto;
}
.voice-row{display:flex; align-items:center; gap:8px; min-width:168px}
.voice-row .play{
  width:25px; height:25px; border-radius:50%; background:var(--wa-teal); color:oklch(0.99 0 0);
  display:grid; place-items:center; flex:0 0 auto;
}
.voice-row .wave{flex:1; height:19px; display:flex; align-items:center; gap:1.5px}
.voice-row .wave i{flex:1; background:var(--ink-3); border-radius:1px; display:block}
.voice-row .secs{font-size:var(--t-micro); color:var(--ink-3); direction:ltr}
.transcript{font-size:var(--t-mini); color:var(--ink-2); border-top:1px dashed var(--line); margin-top:6px; padding-top:5px}

.composer{display:flex; gap:7px; padding:8px; background:var(--panel); flex:0 0 auto; border-top:1px solid var(--line)}
.composer input{
  flex:1; min-width:0; padding:8px 12px; border-radius:19px; border:1px solid var(--line);
  background:var(--surface); font-size:var(--t-sm);
}
.composer input:focus{outline:none; border-color:var(--wa-green); box-shadow:0 0 0 3px oklch(0.792 0.176 152 / .18)}
.composer input::placeholder{color:var(--ink-3)}
.composer button{
  width:34px; height:34px; border-radius:50%; background:var(--wa-green); color:oklch(0.24 0.06 152);
  display:grid; place-items:center; flex:0 0 auto; transition:filter var(--dur) var(--ease);
}
.composer button:hover{filter:brightness(1.06)}
.composer button.aux{background:var(--surface); color:var(--ink-2); border:1px solid var(--line)}
.composer button[disabled]{opacity:.4; cursor:not-allowed}

/* ── right: the console ───────────────────────────────────────────────────── */
/* min-width:0 matters: grid children default to min-width:auto, so one wide
   table would push the whole document sideways instead of scrolling itself. */
.console{display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--paper)}

/* Deliberately not a grid of identical stat tiles. One live figure leads, the
   rest run as a hairline-separated strip: hierarchy by size, not by box. */
.opsbar{display:flex; align-items:stretch; background:var(--surface); border-bottom:1px solid var(--line); flex:0 0 auto}
.ops-lead{padding:10px 16px; display:flex; align-items:baseline; gap:9px; flex:0 0 auto}
.ops-lead .v{font-size:var(--t-2xl); font-weight:700; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums}
.ops-lead .k{font-size:var(--t-sm); color:var(--ink-2); line-height:1.3}
.ops-lead .k b{display:block; color:var(--ink); font-weight:600}
.ops-lead[data-alert="1"] .v{color:var(--bad)}
.ops-strip{
  flex:1; display:flex; align-items:center; gap:0; overflow-x:auto;
  border-inline-start:1px solid var(--line);
}
.ops-strip .s{padding:9px 15px; white-space:nowrap; border-inline-end:1px solid var(--hair)}
.ops-strip .s:last-child{border-inline-end:0}
.ops-strip .s .k{font-size:var(--t-micro); color:var(--ink-3); font-weight:500}
.ops-strip .s .v{font-size:var(--t-md); font-weight:600; letter-spacing:-.015em; font-variant-numeric:tabular-nums; line-height:1.3}
.ops-strip .s .v small{font-size:var(--t-mini); font-weight:500; color:var(--ink-3)}
.ops-strip .s[data-tone="bad"] .v{color:var(--bad)}
.ops-strip .s[data-tone="good"] .v{color:var(--good)}

.tabs{display:flex; gap:1px; padding:7px 12px 0; border-bottom:1px solid var(--line); background:var(--surface); overflow-x:auto; flex:0 0 auto}
.tabs button{
  padding:8px 12px 9px; font-size:var(--t-sm); font-weight:500; color:var(--ink-2);
  border-bottom:2px solid transparent; white-space:nowrap; transition:color var(--dur) var(--ease);
}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-pressed="true"]{color:var(--ink); font-weight:600; border-bottom-color:var(--accent)}

.pane{flex:1; overflow:auto; min-height:0; min-width:0}
.pane-inner{padding:13px 15px 34px; min-width:0}
/* Wide tables scroll inside their own container; the page body never does. */
.tbl{overflow-x:auto; max-width:100%}
.sec-h{
  font-size:var(--t-micro); font-weight:600; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.07em; margin:17px 0 7px;
}
.sec-h:first-child{margin-top:0}

thead th{
  text-align:start; font-size:var(--t-micro); font-weight:600; color:var(--ink-3);
  padding:7px 9px; border-bottom:1px solid var(--line); white-space:nowrap;
  background:var(--paper); position:sticky; top:0; z-index:1;
}
tbody td{padding:8px 9px; border-bottom:1px solid var(--hair); font-size:var(--t-sm); vertical-align:middle}
tbody tr{transition:background var(--dur) var(--ease)}
tbody tr:hover{background:var(--surface)}
td.n, th.n{text-align:end; font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}

.pill{display:inline-block; padding:2px 7px; border-radius:5px; font-size:var(--t-micro); font-weight:600; white-space:nowrap}
.pill.pending{background:var(--warn-bg); color:var(--warn)}
.pill.approved,.pill.claimed{background:var(--accent-bg); color:var(--accent)}
.pill.paid,.pill.won{background:var(--good-bg); color:var(--good)}
.pill.lost,.pill.breach{background:var(--bad-bg); color:var(--bad)}
.pill.pool{background:var(--warn-bg); color:var(--warn)}
.pill.lock{background:var(--panel); color:var(--ink-3)}

/* Empty states teach the interface rather than announcing emptiness. */
.empty{padding:30px 16px; text-align:center}
.empty p{font-size:var(--t-sm); color:var(--ink-2); max-width:44ch; margin:0 auto; line-height:1.65}
.empty p + p{margin-top:6px; color:var(--ink-3); font-size:var(--t-mini)}

.feed{display:flex; flex-direction:column}
.feed .row{display:flex; gap:9px; padding:7px 6px; border-bottom:1px solid var(--hair); font-size:var(--t-sm); align-items:baseline}
.feed .row .t{font-size:var(--t-micro); color:var(--ink-3); flex:0 0 78px; direction:ltr; text-align:start; white-space:nowrap; font-variant-numeric:tabular-nums}
.feed .row .a{flex:0 0 58px; font-size:var(--t-micro); font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.03em}
.feed .row .x{flex:1; min-width:0}
.feed .row.deny{background:var(--bad-bg); border-radius:var(--r-sm); border-bottom-color:transparent}
.feed .row.deny .x{color:var(--bad); font-weight:600}
.feed .code{
  font-size:var(--t-micro); color:var(--ink-3); background:var(--panel); border:1px solid var(--line);
  padding:1px 5px; border-radius:4px; direction:ltr; unicode-bidi:isolate; margin-inline-start:6px;
}

.filters{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.filters input, .filters select{padding:6px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); font-size:var(--t-sm)}
.filters input{flex:1; min-width:128px}
.filters input:focus, .filters select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px oklch(0.435 0.072 165 / .15)}

/* Full border + tinted ground + a leading label. Never a coloured side stripe. */
.note{
  border:1px solid var(--line); background:var(--surface); border-radius:var(--r);
  padding:10px 12px; font-size:var(--t-sm); color:var(--ink-2); margin-bottom:11px; line-height:1.65;
}
.note .lbl{
  display:inline-block; font-size:var(--t-micro); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); margin-inline-end:7px;
}
.note b{color:var(--ink); font-weight:600}
.note.good{background:var(--good-bg); border-color:oklch(0.855 0.045 155)}
.note.good .lbl{color:var(--good)}
.note.bad{background:var(--bad-bg); border-color:oklch(0.865 0.048 27)}
.note.bad .lbl{color:var(--bad)}
.note.warn{background:var(--warn-bg); border-color:oklch(0.875 0.055 82)}
.note.warn .lbl{color:var(--warn)}

.proof{
  background:oklch(0.215 0.012 165); color:oklch(0.875 0.012 165); border-radius:var(--r);
  padding:11px 13px; font-size:var(--t-mini); line-height:1.8; direction:ltr; text-align:left;
  overflow-x:auto; margin-bottom:11px; font-variant-numeric:tabular-nums;
}
.proof .k{color:oklch(0.745 0.075 220)}
.proof .ok{color:oklch(0.815 0.145 152); font-weight:700}
.proof .no{color:oklch(0.735 0.145 27); font-weight:700}
.proof .cm{color:oklch(0.565 0.015 165)}

.evidence{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px}
.evidence .ev{font-size:var(--t-micro); background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:3px 7px; color:var(--ink-2)}
.evidence .ev b{color:var(--ink); font-variant-numeric:tabular-nums}

.split{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:1460px){ .split{grid-template-columns:1fr} }

/* ── tour ─────────────────────────────────────────────────────────────────── */
.tour{
  position:fixed; inset-inline:0; bottom:0; z-index:60;
  background:var(--surface); border-top:1px solid var(--line);
  box-shadow:0 -6px 26px oklch(0.245 0.012 150 / .11);
  display:flex; align-items:center; gap:13px; padding:11px 16px;
  transform:translateY(110%); transition:transform 260ms var(--ease);
}
.tour[data-on="1"]{transform:none}
.tour .bar{position:absolute; inset-block-start:0; inset-inline-start:0; height:2px; background:var(--wa-green); transition:width 260ms linear}
.tour .step{
  flex:0 0 auto; font-size:var(--t-micro); font-weight:700; color:var(--accent-ink);
  background:var(--accent); border-radius:var(--r-sm); padding:4px 8px; font-variant-numeric:tabular-nums;
}
.tour .body{flex:1; min-width:0}
.tour .body h4{font-size:var(--t-base); font-weight:600; margin-bottom:1px}
.tour .body p{font-size:var(--t-sm); color:var(--ink-2); line-height:1.55}
.tour .acts{display:flex; gap:6px; flex:0 0 auto}

.focus-ring{position:relative; z-index:5}
.focus-ring::after{
  content:""; position:absolute; inset:-4px; border-radius:var(--r-lg); pointer-events:none;
  box-shadow:0 0 0 2px var(--wa-green), 0 0 0 8px oklch(0.792 0.176 152 / .17);
  animation:ring 700ms var(--ease);
}
@keyframes ring{from{box-shadow:0 0 0 2px oklch(0.792 0.176 152 / 0), 0 0 0 24px oklch(0.792 0.176 152 / 0)}}

.toast{
  position:fixed; inset-block-start:64px; inset-inline-end:16px; z-index:70;
  background:var(--ink); color:oklch(0.98 0.004 150); padding:9px 14px; border-radius:var(--r);
  font-size:var(--t-sm); font-weight:500; box-shadow:0 8px 26px oklch(0.245 0.012 150 / .26);
  animation:rise 200ms var(--ease); max-width:min(380px, calc(100vw - 32px));
}
.toast.bad{background:var(--bad)}
.toast.good{background:var(--good)}

/* ── structural responsive: stack, handsets first ─────────────────────────── */
@media (max-width:1020px){
  body{overflow:auto}
  #app{height:auto}
  .main{grid-template-columns:1fr}
  .stage{height:76vh}
  /* Handsets keep their real width and the wall scrolls sideways instead.
     Squeezing them below 246px truncates the phone number, which is the one
     thing this demo is about. The chips above pick which handsets are shown. */
  .phones{justify-content:flex-start}
  .console{min-height:82vh}
  .ops-strip{border-inline-start:0; border-top:1px solid var(--line)}
  .opsbar{flex-direction:column}
  .tour{flex-wrap:wrap; gap:9px}
  .tour .body{flex:1 0 100%; order:3}
}
/* Below 560px the five topbar controls cannot share one row. Rather than shrink
   them below a comfortable tap target, the bar becomes two rows: identity on
   top, controls beneath, each control keeping its full 44px-ish height. */
@media (max-width:560px){
  .topbar{gap:8px; padding:8px 10px; height:auto; flex:0 0 auto; flex-wrap:wrap; row-gap:8px}
  .brand{flex:1 1 100%}
  .brand small, .lens span{display:none}
  .topbar .spacer{display:none}
  .lens select{max-width:32vw}
  #tourBtn{flex:1 1 auto}
}