/* Trunk Manager - "Quiet Instrument". A warm grey ground with an indigo
   accent, softer corners and more air than a network tool usually gets,
   because tenants sign in to this and not only operators.
   Light and dark are both defined at token level; nothing below this block
   should name a colour directly. */

:root {
  --bg: #f7f6f4;
  --surface: #ffffff;
  --surface-2: #efedea;
  --border: #e2dfda;
  --ink: #1a1a19;
  --ink-2: #4f4e4a;
  --ink-3: #6a6862;
  --blue: #3f4bb8;
  --blue-ink: #ffffff;
  --green: #1f6b4d;
  --green-bg: #e0efe7;
  --amber: #8a5a1b;
  --amber-bg: #f7ecd9;
  --red: #a03528;
  --red-bg: #f8e7e2;
  --shadow: 0 1px 3px rgba(26, 26, 25, .05), 0 8px 24px rgba(26, 26, 25, .05);

  /* Corner radius as a token, so the softness is one decision rather than
     twenty literals scattered down the file. */
  --radius: 10px;
  --radius-sm: 8px;
}

/* The surfaces sit further off the ground than they first did. In light a
   card is lifted by its shadow; in dark that shadow is black on black and
   does nothing, so the only separation is the surface itself being lighter. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141412;
    --surface: #242320;
    --surface-2: #302f2c;
    --border: #41413b;
    --ink: #eeece7;
    --ink-2: #adaba5;
    --ink-3: #95938c;
    --blue: #8b93ee;
    --blue-ink: #101024;
    --green: #63c79c;
    --green-bg: #152e24;
    --amber: #d9a45c;
    --amber-bg: #332715;
    --red: #e07f72;
    --red-bg: #331915;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

/* An explicit choice beats the operating system, in both directions: the
   media query above is guarded against [data-theme="light"], and this wins
   for anyone whose machine is light but who wants dark anyway. */
:root[data-theme="dark"] {
    --bg: #141412;
    --surface: #242320;
    --surface-2: #302f2c;
    --border: #41413b;
    --ink: #eeece7;
    --ink-2: #adaba5;
    --ink-3: #95938c;
    --blue: #8b93ee;
    --blue-ink: #101024;
    --green: #63c79c;
    --green-bg: #152e24;
    --amber: #d9a45c;
    --amber-bg: #332715;
    --red: #e07f72;
    --red-bg: #331915;
    --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

code, .mono, td.mono, .id {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------- chrome ---------- */
/* A sidebar rather than a row: thirteen sections do not fit across the top,
   and a row cannot say that they belong to four groups. */
.shell { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: 100vh; }
.shell.bare { grid-template-columns: minmax(0, 1fr); }
.content { min-width: 0; }

.side {
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side-head {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; letter-spacing: -.01em; font-size: 15px;
  padding: 18px 20px 10px; font-size: 14px;
}
/* Who you are and the way out, at the top. The address can be long, so it
   wraps and the icon never gives up its space to it. */
/* Which company, who you are, the way out. One block, at the top. */
.side-id {
  display: grid; gap: 8px; justify-items: start;
  padding: 0 14px 14px 20px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--ink-3);
}
.side-id .tenant-switch { display: block; width: 100%; margin: 0; }
.side-id .tenant-switch select { width: 100%; }
.side-id .tenant-name { font-weight: 600; color: var(--ink-2); font-size: 12.5px; }
.side-user {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  width: 100%; flex-wrap: wrap;
}
.side-acts { display: flex; align-items: center; gap: 4px; flex: none; }
/* Three states, not two: an explicit light or dark choice, or follow the
   machine. A two-way switch cannot say "follow", which is the default. */
.themebar { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.themebar button {
  display: inline-flex; padding: 5px 7px; border: 0; background: transparent;
  color: var(--ink-3); cursor: pointer; min-height: 0;
}
.themebar button:hover { color: var(--ink-2); background: var(--surface-2); }
.themebar button[aria-pressed="true"] { background: var(--blue); color: var(--blue-ink); }
.themebar button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.themebar .ico { width: 14px; height: 14px; opacity: 1; }
.side-out {
  flex: none; display: inline-flex; padding: 6px; border-radius: var(--radius-sm);
  color: var(--ink-3);
}
.side-out:hover { color: var(--blue); background: var(--surface-2); }
.side-out:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.side-out .ico { opacity: 1; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.mark {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
  background: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

.side-nav { display: flex; flex-direction: column; padding: 0 12px 18px; flex: 1; }
.side-nav a {
  padding: 8px 12px; margin-bottom: 1px; border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; font-size: 13px;
  display: flex; align-items: center; gap: 10px;
}
/* Inline SVG, so it takes the link's colour and follows the active state and
   the theme without a second set of assets. */
.ico { width: 16px; height: 16px; flex: none; opacity: .75; }
.side-nav a:hover .ico { opacity: 1; }
.side-nav a.on .ico { opacity: 1; }
.side-nav a:hover { background: var(--surface-2); color: var(--ink); }
.side-nav a.on {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue); font-weight: 500;
}
.side-nav a:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
/* The label is the only thing saying these belong together, so it needs to
   read as a heading and not as another item in the list. */
.side-group {
  margin: 18px 0 6px; padding: 0 12px;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

.side-who { word-break: break-word; min-width: 0; line-height: 1.4; }

/* Shown only where the sidebar is off-canvas. */
.topbar { display: none; }
.hamburger {
  width: 38px; height: 38px; padding: 0; display: grid; place-content: center;
  gap: 4px; background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
}
.hamburger span { display: block; width: 16px; height: 1.5px; background: var(--ink-2); }
.side-scrim {
  position: fixed; inset: 0; z-index: 41; background: rgba(10, 10, 9, .45);
  display: none;
}
/* Driven by the attribute, not by the breakpoint: display:block in a media
   query silently overrides [hidden] and the scrim never goes away. */
.side-scrim:not([hidden]) { display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 30px 24px 90px; }

/* ---------- headings ---------- */
h1 { font-size: 1.55rem; font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 12px; }
.sub { color: var(--ink-3); margin: 0 0 26px; font-size: .95rem; }

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0 0 20px;
  box-shadow: var(--shadow);
}
.card > h2 { margin-bottom: 4px; }
.card .hint { color: var(--ink-3); font-size: .88rem; margin: 0 0 16px; }

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.stat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 14px 16px; }
.stat dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.stat dd { margin: 0; font-size: 1.35rem; font-weight: 600; }

/* ---------- tables ---------- */
.tw { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin: 0 0 20px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; padding: 10px 14px;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--ink-2); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.mono { color: var(--ink); white-space: nowrap; }
.empty { padding: 26px 14px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

/* ---------- pills ---------- */
.pill {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
.pill.ok { background: var(--green-bg); color: var(--green); }
.pill.warn { background: var(--amber-bg); color: var(--amber); }
.pill.bad { background: var(--red-bg); color: var(--red); }
.pill.idle { background: var(--surface-2); color: var(--ink-3); }

/* ---------- forms ---------- */
form.stack { display: grid; gap: 14px; }
.row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin: 0 0 5px; }
label .opt { color: var(--ink-3); font-weight: 400; }
input[type=text], input[type=password], input[type=email], select, textarea {
  width: 100%; padding: 8px 10px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit; font-size: 13.5px;
}
textarea { min-height: 74px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
.help { font-size: 12px; color: var(--ink-3); margin: 5px 0 0; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0; }
legend { font-size: 12px; color: var(--ink-3); padding: 0 6px; }
.checks { display: grid; gap: 6px; }
.checks label { display: flex; gap: 8px; align-items: center; font-weight: 400; margin: 0; }
.checks input { width: auto; }

button, .btn {
  display: inline-block; padding: 8px 15px;
  background: var(--blue); color: var(--blue-ink);
  border: 1px solid var(--blue); border-radius: var(--radius-sm);
  font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; text-decoration: none;
}
button:hover, .btn:hover { filter: brightness(1.08); }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button.ghost, .btn.ghost { background: transparent; color: var(--ink-2); border-color: var(--border); }
button.ghost:hover { background: var(--surface-2); color: var(--ink); }
button.danger { background: transparent; color: var(--red); border-color: var(--red); }
button.danger:hover { background: var(--red-bg); }
button.small { padding: 4px 10px; font-size: 12px; }
.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- messages ---------- */
.msg { padding: 11px 15px; border-radius: var(--radius-sm); margin: 0 0 20px; font-size: 13.5px; border: 1px solid; }
.msg.ok { background: var(--green-bg); color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.msg.bad { background: var(--red-bg); color: var(--red); border-color: color-mix(in srgb, var(--red) 35%, transparent); }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--blue) 13%, transparent) 0, transparent 45%),
    radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--blue) 9%, transparent) 0, transparent 45%),
    var(--bg);
}
.login-card { width: 100%; max-width: 372px; }
.login-card .card { margin: 0; }
.login-head { text-align: center; margin: 0 0 22px; }
.login-head .mark {
  width: 34px; height: 34px; border-radius: 7px; background: var(--blue);
  display: inline-block; margin: 0 0 12px;
}
.login-head h1 { font-size: 1.25rem; margin: 0 0 4px; }
.login-head p { color: var(--ink-3); font-size: 13px; margin: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Whose data you are looking at - kept next to the account, because on a
   multi-tenant console that is the other half of "who am I". */
.who .tenant-name { font-weight: 600; }
.who .tenant-switch { display: inline-flex; margin: 0; }
.who select.theme {
  font: inherit; font-size: 12.5px; padding: 3px 22px 3px 8px; width: auto;
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.who .tenant-switch select {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 3px 22px 3px 8px; width: auto;
  border: 1px solid var(--border, #d0cfc9); border-radius: var(--radius-sm);
}

/* Tools page: per-row actions sit side by side rather than stacking, so a
   long tool list stays scannable. */
.inline { display: inline-flex; gap: 5px; align-items: center; margin: 0 0 0 6px; }
.inline input[type=text] { width: auto; padding: 5px 7px; font-size: 12.5px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }


/* ---------- numbers page ---------- */

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
.page-head h1 { margin-bottom: 4px; }
.page-head .sub { margin: 0; }

/* Grouped fields inside the drawer. Shown and hidden as a unit, so the form
   only ever asks for what the chosen option actually needs. */
.sub-block {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px 16px; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface-2);
}
.sub-block legend {
  padding: 0 6px; font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
}
.sub-block[hidden] { display: none; }

/* A switch reads as a state you can flip, which a checkbox does not.
   The knob is adapted from "Switch" by vinodjangid07 on uiverse.io (MIT).
   Built from the theme's own tokens rather than fixed greys, so it stays
   metallic in the dark theme instead of turning into a flat blob. */
.switch-row { padding: 2px 0; }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.track, button.toggle {
  flex: none; width: 52px; height: 26px; padding: 0; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  position: relative; transition: background .3s, border-color .3s;
}
button.toggle { cursor: pointer; }
button.toggle:hover { filter: none; background: var(--border); }

/* Exactly half the track, because translateX(100%) moves it by its own
   width - any other ratio and it stops short or runs off the end. */
.knob {
  position: absolute; top: -1px; left: -1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: conic-gradient(
    var(--ink-3), var(--surface), var(--ink-3), var(--surface), var(--ink-3));
  box-shadow: 3px 1px 6px rgba(8, 8, 8, .30);
  transition: transform .3s;
}

.switch input:checked + .track,
button.toggle.on { background: var(--blue); border-color: var(--blue); }
.switch input:checked + .track .knob,
button.toggle.on .knob { transform: translateX(100%); }
.switch input:focus-visible + .track,
button.toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .track, button.toggle, .knob { transition: none; }
}

button.icon {
  background: transparent; border: 0; color: var(--ink-3);
  font-size: 24px; line-height: 1; padding: 0 4px; cursor: pointer;
}
button.icon:hover { color: var(--ink); filter: none; }

/* ---------- drawer ---------- */

.drawer-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(16, 24, 32, .38);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 41;
  width: min(470px, 94vw); height: 100%;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -10px 0 30px rgba(16, 24, 32, .16);
  padding: 20px 24px 40px; overflow-y: auto;
  transform: translateX(100%); transition: transform .22s ease;
}
.drawer.open { transform: translateX(0); }
.drawer .stack { gap: 18px; }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.drawer-head h2 { margin: 0; }
.drawer-actions {
  display: flex; gap: 10px; align-items: center;
  padding-top: 4px; border-top: 1px solid var(--border); margin-top: 4px;
}
.drawer-actions button { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-scrim { transition: none; }
}


/* ---------- settings as a list of groups ---------- */

/* Each row summarises what is configured, so the state is readable without
   opening anything. The drawer is for changing it, not for finding it. */
.setting-groups { list-style: none; margin: 0; padding: 0; }
.setting-groups li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--border);
}
.setting-groups li:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-groups li:first-child { padding-top: 0; }
.setting-groups h3 { margin: 0 0 3px; font-size: .98rem; }
.setting-groups .help { margin: 0; }
.setting-groups form { margin: 0; }
.setting-groups button { white-space: nowrap; }

/* Something is unset or switched off - worth noticing, not an error. */
.warn { color: var(--amber); font-weight: 500; }


/* The colour well should match the height of the inputs beside it. */
input[type=color] {
  width: 100%; height: 38px; padding: 3px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
}
input[type=file] { font-size: 13px; color: var(--ink-2); }


/* Snippets are for copying, not editing - selectable, but visibly inert. */
textarea.snippet {
  background: var(--bg); color: var(--ink-2);
  font-size: 12px; line-height: 1.5; resize: vertical; cursor: text;
}
.help code {
  background: var(--surface-2); padding: .1em .35em;
  border-radius: 3px; font-size: .92em;
}

/* Agent page: a breadcrumb, and a quiet marker for fields that are still
   following the tenant rather than set on the agent. */
.crumb { margin: 0 0 4px; font-size: .8rem; }
.crumb a { color: var(--ink-3); text-decoration: none; }
.crumb a:hover { color: var(--ink-2); text-decoration: underline; }
.inherit { font-weight: 400; font-size: .72rem; opacity: .75; }
label .pill, label .help { margin-left: 6px; vertical-align: middle; }

/* ---------- tabs ----------
   Same shape as the header nav - an underline on the current one - so the
   page reads as one navigation idea at two levels rather than two designs.
   The strip carries `hidden` until tabs.js removes it: with scripting off
   every panel stays on the page and a dead row of buttons never appears. */
.tablist {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--border);
}
.tablist button {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 13px;
  margin-bottom: -1px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}
.tablist button:hover { color: var(--ink); background: var(--surface-2); filter: none; }
.tablist button.on { color: var(--blue); border-bottom-color: var(--blue); font-weight: 500; }
.tablist button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* An unsaved edit on a tab you are not looking at. Each tab saves on its own,
   so without this the changes are invisible until they are lost. */
.tablist button.dirty::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--amber);
  vertical-align: 2px;
}

/* A tab panel is the whole width of the page, so the 60ch measure that suits
   a narrow settings card leaves the description stranded in the left half of
   a very wide box. Inside a panel it uses the card. */
.tabpanel .card > .help { max-width: none; }

.tabpanel:focus { outline: none; }
.tabpanel > .card { margin-bottom: 20px; }
.tabpanel > .card:last-child { margin-bottom: 0; }
.tab-actions { margin-top: 18px; }

/* ---------- embed preview ----------
   Framed like a browser window so it reads as somebody else's site rather
   than as more of this page. The switch above it is the app's existing
   .switch component, not a second one. */
.shape-switch { display: flex; gap: 6px; }
.shape-switch .on { background: var(--surface-2); color: var(--ink); border-color: var(--ink-3); }
.embed-stage {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--surface-2);
}
.embed-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
}
.embed-chrome span { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.embed-chrome em {
  margin-left: 10px; font-style: normal; font-size: 12px; color: var(--ink-3);
}
.embed-frame { display: block; width: 100%; height: 560px; border: 0; background: #fff; }

/* ---------- the console ---------- */
/* A waiting caller has to be impossible to miss on a busy desk, and the
   pulse stops for anyone who has asked for less motion. */
.card.ringing { border-color: var(--amber); background: var(--amber-bg); }
.card.ringing h2 { color: var(--amber); }
@media (prefers-reduced-motion: no-preference) {
  .card.ringing { animation: ringing 1.6s ease-in-out infinite; }
  @keyframes ringing { 50% { border-color: var(--ink-3); } }
}
#presence.pill { font-size: 12.5px; }

/* ---------- transcripts ---------- */
/* Two speakers, told apart by indent and label rather than by colour alone. */
.transcript { display: grid; gap: 8px; }
.said { margin: 0; padding: 8px 12px; border-radius: 8px;
        background: var(--surface-2); font-size: .94rem; line-height: 1.5; }
.said span { display: block; font-size: 11px; letter-spacing: .04em;
             text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.said.agent { background: var(--surface-2); }
.said.caller { background: transparent; border: 1px solid var(--border); }

/* ---------- small screens ---------- */
/* The console is the page that has to work on a phone - an operator taking a
   call is not sitting at a desk - and everything else follows the same rules
   for free. Nothing is hidden at this width: a narrow screen is a smaller
   window on the same application, not a reduced version of it. */
@media (max-width: 720px) {
  /* Off-canvas: the sidebar becomes a panel over the page. */
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side {
    position: fixed; top: 0; left: 0; z-index: 42; width: min(280px, 84vw);
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 10px 0 30px rgba(0, 0, 0, .16);
  }
  .side.open { transform: translateX(0); }
  .topbar {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px calc(10px);
    padding-top: calc(10px + env(safe-area-inset-top));
    background: var(--surface); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20;
  }
  .side-nav a { padding: 11px 12px; }
  .wrap { padding: 18px 14px 70px; }
  h1 { font-size: 1.3rem; }
  .card { padding: 16px 14px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head > button { width: 100%; }
  .row { grid-template-columns: 1fr; }
  .actions { flex-wrap: wrap; }
  .actions > button, .actions > .btn { flex: 1 1 auto; justify-content: center; }
  /* Fingers, not cursors. */
  button, .btn { min-height: 44px; }
  /* Not the toggles - a fixed-size control, not a tap target to grow. */
  button.toggle { min-height: 0; }
  button.small, .btn.small { min-height: 38px; }
  /* Anything under 16px makes iOS zoom the page on focus and never zoom back. */
  input[type=text], input[type=password], input[type=email], select, textarea {
    font-size: 16px; padding: 10px 12px;
  }
  .inline { margin-left: 0; }
  .inline input[type=text], .inline input[type=password] { font-size: 16px; }
  /* A phone in a hand is the case the ring alert was drawn for. */
  .card.ringing .actions > button { min-height: 52px; font-size: 15px; }
}

/* Standalone on iOS draws under the status bar and the home indicator. */
@media (display-mode: standalone) {
  .wrap { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* A transcript needs more room than a form does. */
.drawer.wide { width: min(760px, 96vw); }
.drawer .card:last-child { margin-bottom: 0; }


/* ============================================================ Overview  */

.live-flags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.pill.live {
  background: var(--green-bg); color: var(--green);
  position: relative; padding-left: 20px;
}
.pill.live::before {
  content: ""; position: absolute; left: 8px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--green); animation: lk-pulse 2s ease-in-out infinite;
}
@keyframes lk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.warn-ink { color: var(--amber); }

/* ---- attention ---- */

.attention { display: grid; gap: 10px; margin-bottom: 20px; }

.att {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.att p { margin: 0; flex: 1 1 auto; font-size: 14.5px; }
.att .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.att.bad  { background: var(--red-bg);   border-color: var(--red); }
.att.bad .dot { background: var(--red); }
.att.warn { background: var(--amber-bg); border-color: var(--amber); }
.att.warn .dot { background: var(--amber); }

/* ---- headline figures ---- */

.kpis {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px 14px;
  box-shadow: var(--shadow);
}
.k-label {
  margin: 0 0 8px; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
}
.k-value {
  margin: 0; font-size: 2rem; line-height: 1.05; font-weight: 600;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.k-warn {
  font-size: 12px; font-weight: 600; letter-spacing: 0;
  color: var(--amber); background: var(--amber-bg);
  padding: 2px 8px; border-radius: 999px;
}
.k-foot { margin: 9px 0 0; font-size: 12.5px; color: var(--ink-3); }

.delta { font-weight: 600; }
.delta.up   { color: var(--green); }
.delta.down { color: var(--ink-3); }
.delta.flat { color: var(--ink-3); font-weight: 400; }

/* ---- the chart ---- */

.chan { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.chan-item { font-size: 12.5px; color: var(--ink-3); }
.chan-item b {
  color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums;
}

.chart {
  display: flex; align-items: flex-end; gap: 6px;
  height: 190px; margin-top: 10px; padding-top: 18px;
}
.bar-slot {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 6px;
}
.bar {
  width: 100%; max-width: 46px; border-radius: 5px 5px 2px 2px;
  background: var(--blue); min-height: 3px;
  transition: filter .15s;
}
/* A day with no calls still gets a mark. A gap where a bar should be reads
   as missing data rather than as a quiet Sunday. */
.bar.zero {
  height: 3px !important; background: var(--border); border-radius: 2px;
}
.bar-slot:hover .bar { filter: brightness(1.12); }
.bar-n {
  font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
  min-height: 14px;
}
.bar-d {
  font-size: 10.5px; color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* ---- two columns that become one ---- */

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

/* ---- feeds ---- */

.feed { list-style: none; margin: 0; padding: 0; }
.feed li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0; border-top: 1px solid var(--border);
}
.feed li:first-child { border-top: 0; padding-top: 0; }

.feed-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; margin-top: 7px;
}
.feed-dot.live  { background: var(--green); animation: lk-pulse 2s ease-in-out infinite; }
.feed-dot.phone { background: var(--blue); }
.feed-dot.web   { background: var(--ink-3); }

.feed-main { flex: 1 1 auto; min-width: 0; }
.feed-title {
  margin: 0; font-size: 14px; font-weight: 600;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.feed-when {
  font-weight: 400; font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.feed-sub {
  margin: 3px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-go {
  flex: 0 0 auto; color: var(--ink-3); text-decoration: none;
  font-size: 22px; line-height: 1; padding: 2px 4px; border-radius: 6px;
}
.feed-go:hover { color: var(--ink); background: var(--surface-2); }

.mini-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--ink-2);
}
.mini-row b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---- the wiring, as one row of counts ---- */

.facts {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.fact {
  display: flex; flex-direction: column; gap: 3px; padding: 13px 15px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  text-decoration: none; color: inherit; border: 1px solid transparent;
  transition: border-color .14s, transform .14s;
}
.fact:hover { border-color: var(--border); transform: translateY(-1px); }
.f-n {
  font-size: 1.45rem; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.f-l { font-size: 12px; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .pill.live::before, .feed-dot.live { animation: none; }
  .fact, .bar { transition: none; }
}


/* ==================================================== operator call stage */

/* Ink rather than paper: the console is the workshop, and a live call is the
   one thing on the page that must not read as another card. */
.stage {
  background: var(--ink); color: var(--surface);
  border-radius: var(--radius); padding: 20px 22px 18px;
  margin-bottom: 18px; box-shadow: var(--shadow);
}
.stage[hidden] { display: none; }

.stage-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 4px;
}
.stage-live {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
}
.stage-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 var(--green); animation: stage-ping 1.8s ease-out infinite;
}
@keyframes stage-ping {
  0%   { box-shadow: 0 0 0 0 rgba(99, 199, 156, .55); }
  70%  { box-shadow: 0 0 0 11px rgba(99, 199, 156, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 199, 156, 0); }
}
.stage-timer {
  font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.stage-who {
  margin: 0 0 16px; font-size: 13.5px; color: var(--ink-3);
  max-width: 70ch; line-height: 1.5;
}

/* ---- the meters ---- */

.meters {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.meter {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255, 255, 255, .05); border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.meter-l {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-3); width: 48px; flex: 0 0 48px;
}
.meter-bars {
  flex: 1 1 auto; display: flex; align-items: center; gap: 3px; height: 26px;
}
.meter-bars i {
  flex: 1 1 0; height: 16%; border-radius: 2px; background: rgba(255,255,255,.14);
  transition: height .07s linear, background .12s;
}
.meter-bars i.on { background: var(--green); }
.meter-s {
  font-size: 11.5px; color: var(--ink-3); width: 46px; flex: 0 0 46px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.meter.talking .meter-s { color: var(--green); }

/* Muted is a state you must be able to see. The operator's own meter goes
   red and flat, because "am I muted" is the question a button label saying
   "Unmute" answers only if you stop and read it. */
.stage.muted #m-me { background: var(--red-bg); }
.stage.muted #m-me .meter-bars i { background: rgba(160, 53, 40, .3); }
.stage.muted #m-me .meter-l,
.stage.muted #m-me .meter-s { color: var(--red); }

.stage .actions { margin: 0; }
.stage .actions > button.ghost {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18);
  color: var(--surface);
}
.stage .actions > button.ghost:hover { background: rgba(255,255,255,.16); }

@media (prefers-reduced-motion: reduce) {
  .stage-dot { animation: none; }
  .meter-bars i { transition: none; }
}


/* ---- pictures on a handed-over call ---- */

.vids {
  display: grid; gap: 10px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.vids[hidden] { display: none; }
.vid { position: relative; }
.vid[hidden] { display: none; }
.vid video {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: #000; border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, .14);
}
/* The operator's own picture is mirrored; everyone expects a mirror of
   themselves and nobody expects one of the person they are talking to. */
#v-me { transform: scaleX(-1); }
.vid-l {
  position: absolute; left: 8px; bottom: 8px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: #fff; background: rgba(0, 0, 0, .55);
  padding: 3px 8px; border-radius: 5px;
}
.stage .actions > button.ghost.on {
  background: var(--blue); border-color: var(--blue); color: var(--blue-ink);
}


/* A line that explains something that just happened on its own - a caller
   hanging up - and then gets out of the way. */
.notice {
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--blue); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 16px; font-size: 14.5px;
  color: var(--ink-2);
}
.notice[hidden] { display: none; }