/* ==== CONNECT Helper (/connect): flow diagram, request log, tiles, step-by-step mode, and its pages ====
   Same look as the rest of OneStop (app.css: panels, kpis, subtabs). One colour per path of the diagram, used everywhere:
   identity (tokens) amber, data (Sequential Data Store) blue, Change Broker violet, SQL Server green, errors red.
   Loaded by Components\App.razor for every page. Many classes are built in the markup (grep for the prefix, not the whole
   name): cn-@lane / cn-wire-@lane / part-@lane (identity, sds, broker, sql), st-@status (ConnectState.Status),
   hl-* (the step's Highlight), cn-wide / cn-tall (FlowLayout.Name).
   Dark theme: the colours of the paths and the greys of the diagram have their dark values in the second block below. */
:root {
  --cn-identity: #b7791f;
  --cn-identity-soft: #fbf1dc;
  --cn-sds: #2563a8;
  --cn-sds-soft: #e4eef9;
  --cn-broker: #7c4dba;
  --cn-broker-soft: #efe8f8;
  --cn-sql: #1f8a4c;
  --cn-sql-soft: #e3f3e9;
  --cn-bad: #d03b3b;
  --cn-bad-soft: #fde8e8;
  --cn-warn: #c2620f;
  --cn-warn-soft: #fdf0e3;
  --cn-mono: Consolas, "Cascadia Mono", "SFMono-Regular", Menlo, monospace;
  --cn-ink: #4b5563;            /* secondary text of the diagram and the log */
  --cn-ink-2: #374151;
  --cn-good-ink: #166b3a;
  --cn-identity-ink: #8a5a10;
  --cn-cloud: #aac3e2;          /* dashed outline of AVEVA CONNECT */
  --cn-wire: #d6dbe2;
  --cn-cyl-top: #d5ecdd;
  --cn-ring-track: #efe7d3;
  --cn-switch-off: #cfd4db;
}
:root[data-theme="dark"] {
  --cn-identity: #d99d42;
  --cn-identity-soft: #3a2c17;
  --cn-sds: #6fa4e2;
  --cn-sds-soft: #1a2a3d;
  --cn-broker: #ab8ce0;
  --cn-broker-soft: #2c2339;
  --cn-sql: #52c381;
  --cn-sql-soft: #1a3324;
  --cn-bad: #f08787;
  --cn-bad-soft: #3e2121;
  --cn-warn: #ec9c52;
  --cn-warn-soft: #3b2a19;
  --cn-ink: #b8bdc5;
  --cn-ink-2: #c9cdd3;
  --cn-good-ink: #80d6a3;
  --cn-identity-ink: #e4b269;
  --cn-cloud: #45607f;
  --cn-wire: #41454c;
  --cn-cyl-top: #24412f;
  --cn-ring-track: #3a3428;
  --cn-switch-off: #4c4f55;
}
/* The gradients of the diagram (FlowSvg.razor: their light colours are the stops' own) */
:root[data-theme="dark"] .cn-svg .cn-cloud-a { stop-color: #1d2735; }
:root[data-theme="dark"] .cn-svg .cn-cloud-b { stop-color: #19212d; }
:root[data-theme="dark"] .cn-svg .cn-sqlg-a { stop-color: #1c2e22; }
:root[data-theme="dark"] .cn-svg .cn-sqlg-b { stop-color: #223629; }
:root[data-theme="dark"] .cn-svg .cn-sqlg-c { stop-color: #1a2b20; }

/* Inside the Reporting portal (html.framed) or in full screen (html.wall-mode): the app bar is hidden, its pages are tabs on
   the page */
.subtabs.cn-framed-nav { display: none; margin-bottom: 10px; }
html.framed .subtabs.cn-framed-nav, html.wall-mode .subtabs.cn-framed-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-fullscreen-exit, html.wall-mode .cn-fullscreen, html.framed .cn-fullscreen { display: none !important; }
html.wall-mode .cn-fullscreen-exit { display: inline-flex !important; }

.cn-good { color: var(--cn-sql); }
.cn-bad { color: var(--cn-bad); }
.mono { font-family: var(--cn-mono); }
.table .sub.mono { font-size: 0.74rem; }

/* ---- Toolbar: the CONNECT instance, method, state, controls ---- */
.cn-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cn-toolbar .spacer { flex: 1; }
.cn-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  font-size: 0.84rem; font-weight: 800; white-space: nowrap;
}
.cn-badge.on { background: var(--cn-sql-soft); color: var(--cn-good-ink); }
.cn-badge.off { background: var(--cn-bad-soft); color: var(--cn-bad); }

/* The CONNECT instance is not configured: how to set it up (every page, under the demo bar) */
.cn-setup { margin-bottom: 12px; border-left: 4px solid var(--cn-bad); }
.cn-setup h2 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--cn-bad); font-size: 1rem; font-weight: 900; }
/* The file path is one long word: it wraps on a phone instead of leaving the panel */
.cn-setup p { margin: 4px 0; font-size: 0.88rem; line-height: 1.5; overflow-wrap: anywhere; }
.cn-setup h3 { margin: 6px 0 2px; font-size: 0.86rem; font-weight: 900; }
.cn-setup-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 18px; }
@media (max-width: 720px) { .cn-setup-ways { grid-template-columns: minmax(0, 1fr); } }
.cn-seg { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); }
.cn-seg button {
  padding: 5px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 0.82rem; font-weight: 800; white-space: nowrap;
}
.cn-seg button:hover:not(:disabled) { color: var(--text); }
.cn-seg button.on { background: var(--text); color: var(--panel); }
.cn-seg button:disabled { cursor: wait; }
.cn-pill {
  padding: 5px 12px; border-radius: 999px; background: var(--chip); color: var(--muted);
  font-size: 0.82rem; font-weight: 800; white-space: nowrap;
}
.cn-pill.st-running { background: var(--cn-sds-soft); color: var(--cn-sds); }
.cn-pill.st-waiting { background: var(--cn-sql-soft); color: var(--cn-sql); }
.cn-pill.st-paused, .cn-pill.st-outage { background: var(--chip); color: var(--cn-ink); }
.cn-pill.st-backoff { background: var(--cn-warn-soft); color: var(--cn-warn); }
.cn-pill.st-auth-failed, .cn-pill.st-forbidden, .cn-pill.st-config, .cn-pill.st-no-database, .cn-pill.st-error, .cn-pill.st-not-configured { background: var(--cn-bad-soft); color: var(--cn-bad); }

/* Scenarios of the presenter: a panel over the top of the diagram (the diagram does not move), closed after a choice */
.cn-top { position: relative; }
.cn-scenarios {
  position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; left: 0; display: flex; flex-wrap: wrap; gap: 10px 22px;
  padding: 12px 14px; box-shadow: 0 14px 34px rgba(17, 24, 39, 0.18);
}
.cn-scenarios-back { position: fixed; z-index: 19; inset: 0; }
.cn-sc-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cn-sc-title { margin-right: 2px; color: var(--muted); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.3px; text-transform: uppercase; }
.cn-sc {
  padding: 6px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--text);
  cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 700; white-space: nowrap;
}
.cn-sc:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.cn-sc.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.cn-sc:disabled { cursor: wait; opacity: 0.6; }

.cn-banner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.cn-banner.good { background: var(--cn-sql-soft); color: var(--cn-good-ink); }
.cn-banner.bad { background: var(--cn-bad-soft); color: var(--cn-bad); }

.cn-verify .panel-head h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cn-verify-table .cn-row-bad td { background: var(--cn-bad-soft); }
.cn-verify-ex { max-width: 520px; color: var(--muted); font-family: var(--cn-mono); font-size: 0.74rem; overflow-wrap: anywhere; }

/* ---- Main area: the diagram and the request log (or the step guide) ---- */
/* The diagram takes the whole width (its texts stay readable on a laptop or a projector); from 1440 px the request log is
   beside it, as tall as the diagram. The step guide is beside it from 1100 px: the presenter reads the step while the
   diagram shows it, without scrolling. */
.cn-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.cn-side > .cn-net .cn-net-scroll { max-height: 420px; }
/* The log under the step guide: never squeezed by the page's column (it would spill over the tiles) */
.cn-net-below { flex-shrink: 0; }
@media (min-width: 1100px) {
  .cn-main.with-guide { grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr); align-items: stretch; }
  .cn-main.with-guide .cn-side { position: relative; min-height: 380px; }
  .cn-main.with-guide .cn-side > .cn-guide { position: absolute; inset: 0; }
}
@media (min-width: 1440px) {
  .cn-main { grid-template-columns: minmax(0, 1.75fr) minmax(400px, 1fr); align-items: stretch; }
  .cn-side { position: relative; min-height: 420px; }
  .cn-side > .cn-net { position: absolute; inset: 0; }
  .cn-side > .cn-net .cn-net-scroll { max-height: none; }
}
@media (min-width: 2200px) {
  .cn-main { grid-template-columns: minmax(0, 2fr) minmax(480px, 1fr); }
  .cn-net-table { font-size: 0.86rem; }
}
.cn-flow { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.cn-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.cn-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; }
.cn-legend i.identity { background: var(--cn-identity); }
.cn-legend i.sds { background: var(--cn-sds); }
.cn-legend i.broker { background: var(--cn-broker); }
.cn-legend i.sql { background: var(--cn-sql); }
.cn-legend i.bad { background: var(--cn-bad); }


/* ---- The diagram (SVG: wide layout, tall one on phones) ---- */
.cn-diagram { position: relative; }
.cn-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: "Segoe UI", Roboto, Arial, sans-serif; }
/* Never taller than the screen below the OneStop bars, the demo bar and the toolbar (a 1366 x 768 laptop, a 1280 x 720
   projector): the drawing keeps its proportions and stays centred */
.cn-svg.cn-wide { max-height: max(340px, calc(100vh - 296px)); margin: 0 auto; }
/* The portal's viewer is small: the drawing stays readable there, the bottom of it may need a scroll */
html.framed .cn-svg.cn-wide { max-height: max(340px, calc(100vh - 250px)); }
html.wall-mode .cn-svg.cn-wide { max-height: max(340px, calc(100vh - 250px)); }
.cn-svg.cn-tall { display: none; }
@media (max-width: 700px) {
  .cn-svg.cn-wide { display: none; }
  .cn-svg.cn-tall { display: block; max-width: 460px; margin: 0 auto; }
}
.cn-thinned {
  position: absolute; top: 6px; right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-strong); font-size: 0.74rem; font-weight: 800;
}

.cn-svg text { fill: var(--text); }
.cn-svg .cn-h1 { font-size: 17px; font-weight: 900; letter-spacing: -0.2px; }
.cn-svg .cn-h2 { font-size: 13.5px; font-weight: 800; }
.cn-svg .cn-sub { fill: var(--muted); font-size: 11px; font-weight: 600; }
.cn-svg .cn-mono { fill: var(--cn-ink); font-family: var(--cn-mono); font-size: 10.5px; }
.cn-svg .cn-mono.small { font-size: 9.5px; }
.cn-svg .cn-note { fill: var(--muted); font-size: 10.5px; }
.cn-svg .cn-note.strong { fill: var(--text); font-weight: 700; }
.cn-svg .cn-last { fill: var(--cn-ink-2); font-family: var(--cn-mono); font-size: 10px; font-weight: 600; }
.cn-svg .cn-last.bad { fill: var(--cn-bad); }
.cn-svg .cn-big { font-size: 26px; font-weight: 900; fill: var(--cn-sql); }

.cn-svg .cn-cloud { stroke: var(--cn-cloud); stroke-width: 1.5; stroke-dasharray: 6 5; }
.cn-svg .cn-box { fill: var(--panel); stroke: var(--border); stroke-width: 1.2; }
.cn-svg .cn-connector { fill: var(--panel-2); stroke: var(--accent); stroke-width: 1.6; }
.cn-svg .cn-service.cn-identity { stroke: rgba(183, 121, 31, 0.45); }
.cn-svg .cn-service.cn-sds { stroke: rgba(37, 99, 168, 0.4); }
.cn-svg .cn-service.cn-broker { stroke: rgba(124, 77, 186, 0.4); }
.cn-svg .part.on .cn-service { stroke-width: 2.2; }
.cn-svg .part.on .cn-service.cn-identity { stroke: var(--cn-identity); }
.cn-svg .part.on .cn-service.cn-sds { stroke: var(--cn-sds); }
.cn-svg .part.on .cn-service.cn-broker { stroke: var(--cn-broker); }
.cn-svg .part.dim { opacity: 0.5; }
.cn-svg .cn-ico-bg.cn-identity { fill: var(--cn-identity-soft); }
.cn-svg .cn-ico-bg.cn-sds { fill: var(--cn-sds-soft); }
.cn-svg .cn-ico-bg.cn-broker { fill: var(--cn-broker-soft); }
.cn-svg .cn-ico { fill: var(--accent); }
.cn-svg .cn-ico.cn-identity, .cn-svg .cn-ico.token { fill: var(--cn-identity); }
.cn-svg .cn-ico.cn-sds { fill: var(--cn-sds); }
.cn-svg .cn-ico.cn-broker { fill: var(--cn-broker); }
.cn-svg .cn-ico.sql { fill: var(--cn-sql); }

.cn-svg .cn-ribbon rect { fill: var(--cn-bad); }
.cn-svg .cn-ribbon text { fill: #ffffff; font-size: 10.5px; font-weight: 900; letter-spacing: 0.6px; }
.cn-svg .cn-cut rect { fill: #4b5563; }
.cn-svg .cn-cut text { fill: #ffffff; font-size: 12px; font-weight: 800; }

/* SQL Server: a cylinder */
.cn-svg .cn-cyl { stroke: rgba(31, 138, 76, 0.45); stroke-width: 1.4; }
.cn-svg .cn-cyl-top { fill: var(--cn-cyl-top); stroke: rgba(31, 138, 76, 0.45); stroke-width: 1.4; }

/* Wires: a grey line; while requests go through, a moving dash of the path's colour */
.cn-svg .cn-wire-base { stroke: var(--cn-wire); stroke-width: 4; stroke-linecap: round; }
.cn-svg .cn-wire-flow { stroke: transparent; stroke-width: 2.4; stroke-dasharray: 3 9; stroke-linecap: round; }
.cn-svg .cn-wire.on .cn-wire-flow { animation: cn-dash 0.9s linear infinite; }
.cn-svg .cn-wire-identity.on .cn-wire-flow { stroke: var(--cn-identity); }
.cn-svg .cn-wire-sds.on .cn-wire-flow { stroke: var(--cn-sds); }
.cn-svg .cn-wire-broker.on .cn-wire-flow { stroke: var(--cn-broker); }
.cn-svg .cn-wire-sql.on .cn-wire-flow { stroke: var(--cn-sql); }
.cn-svg.st-outage .cn-wire-identity .cn-wire-base, .cn-svg.st-outage .cn-wire-sds .cn-wire-base, .cn-svg.st-outage .cn-wire-broker .cn-wire-base,
.cn-svg.st-paused .cn-wire-base { stroke: #b8bec7; stroke-dasharray: 2 8; }
@keyframes cn-dash { to { stroke-dashoffset: -24; } }

/* Packets: CSS transforms of SVG elements are in user units, so px here = units of the viewBox */
.cn-svg .cn-pkt { animation: cn-move var(--d, 650ms) cubic-bezier(0.45, 0, 0.25, 1) var(--delay, 0ms) both; pointer-events: none; }
.cn-svg .cn-pkt .dot { stroke: var(--panel); stroke-width: 2; }
.cn-svg .cn-pkt .halo { opacity: 0.22; }
.cn-svg .cn-pkt-label { font-family: var(--cn-mono); font-size: 10.5px; font-weight: 800; paint-order: stroke; stroke: var(--panel); stroke-width: 3.5px; }
.cn-svg .cn-pkt.identity .dot, .cn-svg .cn-pkt.identity .halo { fill: var(--cn-identity); }
.cn-svg .cn-pkt.sds .dot, .cn-svg .cn-pkt.sds .halo { fill: var(--cn-sds); }
.cn-svg .cn-pkt.broker .dot, .cn-svg .cn-pkt.broker .halo { fill: var(--cn-broker); }
.cn-svg .cn-pkt.sql .dot, .cn-svg .cn-pkt.sql .halo { fill: var(--cn-sql); }
.cn-svg .cn-pkt.bad .dot, .cn-svg .cn-pkt.bad .halo { fill: var(--cn-bad); }
.cn-svg .cn-pkt.identity .cn-pkt-label { fill: var(--cn-identity-ink); }
.cn-svg .cn-pkt.sds .cn-pkt-label { fill: var(--cn-sds); }
.cn-svg .cn-pkt.broker .cn-pkt-label { fill: var(--cn-broker); }
.cn-svg .cn-pkt.sql .cn-pkt-label { fill: var(--cn-sql); }
.cn-svg .cn-pkt.bad .cn-pkt-label { fill: var(--cn-bad); }
@keyframes cn-move {
  0% { transform: translate(var(--x0), var(--y0)); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)); opacity: 0; }
}

/* A box flashes: red on an error, gold on a presenter control */
.cn-svg .cn-flash { fill: transparent; stroke-width: 4; pointer-events: none; animation: cn-flash 1.3s ease-out both; }
.cn-svg .cn-flash.bad { stroke: var(--cn-bad); fill: rgba(208, 59, 59, 0.12); }
.cn-svg .cn-flash.gold { stroke: var(--brand-gold); fill: rgba(224, 191, 63, 0.12); }
@keyframes cn-flash { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }

/* The token ring: drains until the renewal */
.cn-svg .cn-ring-bg { fill: var(--panel); stroke: var(--cn-ring-track); stroke-width: 7; }
.cn-svg .cn-ring {
  fill: none; stroke: var(--cn-identity); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: var(--c); animation: cn-drain var(--dur) linear both;
}
.cn-svg .cn-ring.soon { stroke: var(--cn-warn); }
@keyframes cn-drain { from { stroke-dashoffset: var(--from); } to { stroke-dashoffset: var(--c); } }
.cn-svg .cn-ring-time { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.cn-svg .cn-ring-cap { fill: var(--muted); font-size: 9.5px; font-weight: 700; }

.cn-svg .cn-status { font-size: 13px; font-weight: 900; }
.cn-svg .cn-status.st-running { fill: var(--cn-sds); }
.cn-svg .cn-status.st-waiting { fill: var(--cn-sql); }
.cn-svg .cn-status.st-paused, .cn-svg .cn-status.st-outage { fill: var(--cn-ink); }
.cn-svg .cn-status.st-backoff { fill: var(--cn-warn); }
.cn-svg .cn-status.st-auth-failed, .cn-svg .cn-status.st-forbidden, .cn-svg .cn-status.st-config, .cn-svg .cn-status.st-no-database,
.cn-svg .cn-status.st-error, .cn-svg .cn-status.st-not-configured { fill: var(--cn-bad); }

/* The cycle token -> read -> write -> wait */
.cn-svg .cn-chip { fill: var(--chip); stroke: var(--rule); transition: fill 200ms ease; }
.cn-svg .cn-chip.on { fill: var(--accent); }
.cn-svg .cn-chip-text { fill: var(--muted); font-size: 10.5px; font-weight: 800; }
.cn-svg .cn-chip-text.on { fill: var(--on-accent); }

/* Step by step: the parts of the step stay, the others fade */
.cn-svg .part, .cn-svg .cn-wire { transition: opacity 300ms ease; }
.cn-svg.hl .part, .cn-svg.hl .cn-wire { opacity: 0.22; }
.cn-svg.hl .part-cloud { opacity: 0.55; }
.cn-svg.hl-identity .part-identity, .cn-svg.hl-identity .cn-wire-identity,
.cn-svg.hl-sds .part-sds, .cn-svg.hl-sds .cn-wire-sds,
.cn-svg.hl-broker .part-broker, .cn-svg.hl-broker .cn-wire-broker,
.cn-svg.hl-connector .part-connector,
.cn-svg.hl-sql .part-sql, .cn-svg.hl-sql .cn-wire-sql { opacity: 1; }
.cn-svg.hl-identity .part-identity .cn-service, .cn-svg.hl-sds .part-sds .cn-service, .cn-svg.hl-broker .part-broker .cn-service { stroke-width: 2.6; }

@media (prefers-reduced-motion: reduce) {
  /* No movement: the packet appears at its end and fades; the wire lights up without moving dashes */
  .cn-svg .cn-pkt { animation-name: cn-blink; }
  .cn-svg .cn-wire.on .cn-wire-flow { animation: none; stroke-dasharray: none; opacity: 0.6; }
  .cn-svg .cn-ring { animation: none; stroke-dashoffset: var(--from); }
  .cn-tile-value { animation: none !important; }
}
@keyframes cn-blink {
  0% { transform: translate(var(--x1), var(--y1)); opacity: 0; }
  30%, 70% { transform: translate(var(--x1), var(--y1)); opacity: 1; }
  100% { transform: translate(var(--x1), var(--y1)); opacity: 0; }
}

/* ---- Request log (like a browser's network tab) ---- */
.cn-net { display: flex; flex-direction: column; min-height: 0; padding: 10px 0 0; }
.cn-net-head { flex-wrap: wrap; padding: 0 12px; }
.cn-net-head h2 { display: flex; align-items: center; gap: 6px; }
.cn-count { padding: 0 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.74rem; font-weight: 800; }
.cn-filters { display: flex; gap: 4px; }
.cn-filter {
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--muted);
  cursor: pointer; font: inherit; font-size: 0.76rem; font-weight: 800;
}
.cn-filter.on { border-color: var(--text); background: var(--text); color: var(--panel); }
.cn-net-scroll { flex: 1; min-height: 260px; max-height: 560px; overflow: auto; border-top: 1px solid var(--border); }
.cn-net-below .cn-net-scroll { max-height: 340px; }
.cn-net-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; table-layout: fixed; }
.cn-net-table th {
  position: sticky; top: 0; z-index: 1; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--panel-2);
  color: var(--muted); font-size: 0.72rem; font-weight: 800; text-align: left; text-transform: uppercase;
}
.cn-net-table td { padding: 5px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cn-net-table .t { width: 66px; color: var(--muted); font-family: var(--cn-mono); font-size: 0.74rem; white-space: nowrap; }
.cn-net-table .m { width: 66px; }
.cn-net-table .s { width: 48px; }
.cn-net-table .n { width: 54px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-net-table .u { overflow: hidden; }
.cn-net-table tr.cn-req { cursor: pointer; }
.cn-net-table tr.cn-req:hover td { background: var(--accent-soft); }
.cn-net-table tr.err td { background: color-mix(in srgb, var(--cn-bad-soft) 50%, var(--panel)); }
.cn-net-table tr.cn-msg td { color: var(--cn-ink); font-size: 0.76rem; font-style: italic; }
.cn-net-table tr.cn-msg td .mud-icon-root { margin-right: 4px; font-size: 1rem; vertical-align: -3px; }
.cn-net-table tr.cn-msg.err td { color: var(--cn-bad); font-style: normal; font-weight: 700; }
.cn-net-table tr.cn-msg.control td { color: var(--gold-text); font-style: normal; font-weight: 700; }
.cn-tagname { margin-left: 6px; color: var(--muted); font-style: normal; }
.cn-path { display: block; overflow: hidden; font-family: var(--cn-mono); font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.cn-sub-note { display: block; overflow: hidden; color: var(--muted); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.cn-empty { padding: 24px !important; color: var(--muted); text-align: center; }
.cn-method {
  display: inline-block; min-width: 42px; padding: 1px 6px; border-radius: 5px; background: var(--chip); color: var(--cn-ink-2);
  font-family: var(--cn-mono); font-size: 0.72rem; font-weight: 800; text-align: center;
}
.cn-method.identity { background: var(--cn-identity-soft); color: var(--cn-identity-ink); }
.cn-method.sds { background: var(--cn-sds-soft); color: var(--cn-sds); }
.cn-method.broker { background: var(--cn-broker-soft); color: var(--cn-broker); }
.cn-method.sql { background: var(--cn-sql-soft); color: var(--cn-sql); }
.cn-code { display: inline-block; padding: 1px 6px; border-radius: 5px; font-family: var(--cn-mono); font-size: 0.74rem; font-weight: 800; }
.cn-code.ok { background: var(--cn-sql-soft); color: var(--cn-sql); }
.cn-code.warn { background: var(--cn-warn-soft); color: var(--cn-warn); }
.cn-code.bad { background: var(--cn-bad-soft); color: var(--cn-bad); }

/* The request opened: a panel on the right */
.cn-drawer-back { position: fixed; z-index: 1300; inset: 0; background: rgba(17, 24, 39, 0.25); }
.cn-drawer {
  position: fixed; z-index: 1301; top: 0; right: 0; bottom: 0; display: flex; width: min(620px, 100vw); flex-direction: column;
  background: var(--panel); box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
}
.cn-drawer-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.cn-drawer-title { overflow: hidden; flex: 1; font-family: var(--cn-mono); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.cn-drawer-body { overflow: auto; flex: 1; padding: 6px 16px 18px; }
.cn-drawer-body h4 { margin: 14px 0 6px; color: var(--muted); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.3px; text-transform: uppercase; }
.cn-close {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer;
}
.cn-close:hover { background: var(--chip); color: var(--text); }
.cn-dl { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 0.82rem; }
.cn-dl dt { color: var(--muted); font-weight: 700; }
.cn-dl dd { margin: 0; overflow-wrap: anywhere; }
.cn-dl.mono dd, .cn-dl.mono dt { font-family: var(--cn-mono); font-size: 0.76rem; }
.cn-dl.wide { grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); }
.cn-pre {
  overflow: auto; max-height: 420px; margin: 6px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2);
  color: var(--text); font-family: var(--cn-mono); font-size: 0.76rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.cn-pre.small { max-height: 220px; font-size: 0.72rem; }
.cn-link { padding: 0; border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 700; text-decoration: none; }
.cn-link:hover { text-decoration: underline; }
.cn-link .mud-icon-root { font-size: 1rem; vertical-align: -3px; }

/* ---- Headline numbers and tag tiles ---- */
.cn-kpis .kpi .value { font-variant-numeric: tabular-nums; }
.cn-kpi-time { font-size: 1.5rem !important; }
/* Six tags on one row from a 1280 px screen */
.cn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.cn-tile {
  display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 12px 14px 10px; border-top: 4px solid var(--cn-sds);
  color: inherit; text-decoration: none; transition: box-shadow 150ms ease, transform 150ms ease;
}
.cn-tile:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1); transform: translateY(-1px); }
.cn-tile.err { border-top-color: var(--cn-bad); }
.cn-tile.off { border-top-color: #c4c9d1; opacity: 0.7; }
.cn-tile-head { display: flex; align-items: baseline; gap: 6px; }
.cn-tile-name { display: -webkit-box; overflow: hidden; flex: 1; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 0.86rem; font-weight: 800; overflow-wrap: anywhere; }
.cn-units { padding: 0 7px; border-radius: 999px; background: var(--cn-sds-soft); color: var(--cn-sds); font-size: 0.72rem; font-weight: 800; white-space: nowrap; }
.cn-tile-id { color: var(--faint); font-family: var(--cn-mono); font-size: 0.7rem; }
.cn-tile-value { margin: 4px 0 2px; font-size: 1.65rem; font-weight: 900; font-variant-numeric: tabular-nums; animation: cn-pop 900ms ease-out; }
@keyframes cn-pop { 0% { color: var(--cn-sds); } 100% { color: var(--text); } }
.cn-state { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 1.1rem; }
.cn-state.good { background: var(--cn-sql-soft); color: var(--cn-sql); }
.cn-state.warn { background: var(--cn-warn-soft); color: var(--cn-warn); }
.cn-state.bad { background: var(--cn-bad-soft); color: var(--cn-bad); }
.cn-spark { display: block; width: 100%; height: 44px; }
.cn-spark-line { fill: none; stroke: var(--cn-sds); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.cn-spark-area { fill: rgba(37, 99, 168, 0.08); }
.cn-spark-dot { fill: var(--cn-sds); }
.cn-tile-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin-top: 4px; color: var(--muted); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.cn-lag { padding: 0 7px; border-radius: 999px; background: var(--chip); font-weight: 800; }
.cn-lag.good { background: var(--cn-sql-soft); color: var(--cn-sql); }
.cn-lag.warn { background: var(--cn-warn-soft); color: var(--cn-warn); }
.cn-lag.bad { background: var(--cn-bad-soft); color: var(--cn-bad); }
.cn-tile-error { overflow: hidden; margin-top: 4px; color: var(--cn-bad); font-size: 0.74rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cn-tile-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); }

/* ---- Step by step ---- */
.cn-guide { display: flex; min-width: 0; flex-direction: column; }
/* Beside the diagram: the head and the steps stay, the step's text and its requests scroll */
.cn-side > .cn-guide .cn-step { overflow: auto; flex: 1; min-height: 0; margin: 0 -6px; padding: 0 6px; }
.cn-guide-keys { margin: 8px 0 0; color: var(--faint); font-size: 0.74rem; }
.cn-guide-nav { display: flex; align-items: center; gap: 6px; }
.cn-guide-nav .btn { min-width: 34px; padding: 4px 10px; font-size: 1rem; font-weight: 900; }
.cn-guide-pos { color: var(--muted); font-size: 0.82rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cn-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.cn-step-pill {
  width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 50%; background: var(--panel); color: var(--muted);
  cursor: pointer; font: inherit; font-size: 0.86rem; font-weight: 900;
}
.cn-step-pill.seen { border-color: var(--accent); color: var(--text); }
.cn-step-pill.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.cn-step h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.08rem; font-weight: 900; }
.cn-step-no {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-size: 0.9rem;
}
.cn-step > p { margin: 4px 0 10px; font-size: 0.92rem; line-height: 1.5; }
.cn-step h4 { margin: 12px 0 6px; color: var(--muted); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.3px; text-transform: uppercase; }
.cn-step-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-chip-mini.cn-explain { background: var(--cn-warn-soft); color: var(--cn-warn); font-size: 0.72rem; }
.cn-examples { display: flex; flex-direction: column; gap: 6px; }
.cn-example { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); }
.cn-example.err { border-color: rgba(208, 59, 59, 0.4); }
.cn-example summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; font-size: 0.8rem; list-style: none;
}
.cn-example summary::-webkit-details-marker { display: none; }
.cn-ex-path { overflow: hidden; flex: 1; min-width: 120px; font-family: var(--cn-mono); font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.cn-ex-note { color: var(--cn-ink); font-size: 0.8rem; }
.cn-ex-meta, .cn-ex-time { color: var(--muted); font-size: 0.74rem; }
.cn-ex-body { padding: 0 10px 8px; }
.cn-method.info { background: var(--chip); color: var(--cn-ink); font-family: inherit; }

/* ---- Tags page ---- */
.cn-search { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.cn-field {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel);
}
.cn-field.grow { flex: 1 1 320px; }
.cn-field .mud-icon-root { color: var(--muted); }
.cn-field .cn-input { border: 0; }
.cn-input {
  min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text);
  font: inherit; font-size: 0.88rem;
}
.cn-field .cn-input { flex: 1; padding-left: 0; }
.cn-input:focus { outline: 2px solid rgba(141, 127, 86, 0.35); outline-offset: 0; }
.cn-input.cn-small { padding: 4px 6px; font-size: 0.8rem; }
.cn-input.cn-date { width: auto; }
.cn-results .cn-check, .cn-results th.cn-check { width: 70px; text-align: center; }
.cn-results tr.cn-added td { color: var(--muted); }
.cn-chip-mini {
  display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--chip); color: var(--muted);
  font-size: 0.7rem; font-weight: 800; white-space: nowrap;
}
.cn-chip-mini.warn { background: var(--cn-warn-soft); color: var(--cn-warn); }
.cn-backfill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.cn-backfill .spacer { flex: 1; }
.cn-tags tr.cn-off td { color: var(--muted); }
.cn-err-cell { max-width: 260px; font-size: 0.78rem; }
.cn-err-cell .cn-bad { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cn-actions { white-space: nowrap; }
.cn-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: 4px; border: 0;
  border-radius: 8px; background: none; color: var(--muted); cursor: pointer; vertical-align: middle;
}
.cn-icon-btn:hover:not(:disabled) { background: var(--cn-bad-soft); color: var(--cn-bad); }
/* On / off switch */
.cn-switch { position: relative; display: inline-block; width: 38px; height: 22px; cursor: pointer; }
.cn-switch input { position: absolute; width: 0; height: 0; opacity: 0; }
.cn-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--cn-switch-off); transition: background 150ms ease; }
.cn-switch span::after {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); content: ""; transition: transform 150ms ease;
}
.cn-switch input:checked + span { background: var(--cn-sql); }
.cn-switch input:checked + span::after { transform: translateX(16px); }
.cn-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Data page ---- */
.cn-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .cn-two { grid-template-columns: minmax(0, 1fr); } }
.cn-chart { min-height: 330px; }
.cn-rows-scroll { max-height: 520px; overflow: auto; }
.cn-rows td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn-rows tr.cn-updated td { background: var(--cn-warn-soft); }
.cn-sql-block { margin-top: 10px; }
.cn-sql-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.84rem; font-weight: 800; }

/* ---- Settings ---- */
.cn-settings { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
@media (max-width: 1100px) { .cn-settings { grid-template-columns: minmax(0, 1fr); } }
.cn-fieldset { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.cn-fieldset legend { margin-bottom: 6px; padding: 0; color: var(--muted); font-size: 0.74rem; font-weight: 900; letter-spacing: 0.3px; text-transform: uppercase; }
.cn-choice { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.cn-choice:hover { border-color: var(--accent); }
.cn-choice.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cn-choice input { margin-top: 3px; accent-color: var(--accent); }
.cn-choice span { display: flex; flex-direction: column; gap: 2px; }
.cn-choice small { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }
.cn-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.cn-form label { display: flex; flex-direction: column; gap: 4px; }
.cn-form label > span:first-child { font-size: 0.84rem; font-weight: 800; }
.cn-form small { color: var(--muted); font-size: 0.76rem; }
.cn-unit { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.84rem; }
.cn-unit .cn-input { width: 120px; }
.cn-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.cn-list { margin: 6px 0; padding-left: 20px; font-size: 0.88rem; line-height: 1.5; }
.cn-list li { margin: 3px 0; }
.notice .mud-icon-root { margin-right: 4px; vertical-align: -3px; }

/* ---- How it works ---- */
.cn-how { display: flex; flex-direction: column; gap: 12px; }
.cn-how-intro p { max-width: 980px; font-size: 0.95rem; line-height: 1.55; }
.cn-how-title { margin: 8px 0 0; font-size: 1.1rem; font-weight: 900; }
.cn-how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: cn-step; }
.cn-how-steps > li { position: relative; padding-left: 52px; counter-increment: cn-step; }
.cn-how-steps > li::before {
  position: absolute; top: 14px; left: 14px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--accent); color: var(--on-accent); content: counter(cn-step); font-weight: 900;
}
.cn-how-steps h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 1rem; font-weight: 900; }
.cn-how-steps p { margin: 6px 0; font-size: 0.88rem; line-height: 1.5; }
.cn-when { color: var(--muted); font-size: 0.76rem; font-weight: 700; }
.cn-compare th { width: 18%; color: var(--muted); font-size: 0.8rem; text-align: left; vertical-align: top; }
.cn-compare td { vertical-align: top; }
.cn-how .table th { white-space: nowrap; }

/* ---- Phones ---- */
@media (max-width: 720px) {
  .cn-toolbar > .mud-button-root { flex: 1 1 auto; }
  .cn-scenarios { gap: 8px; }
  .cn-net-table .n, .cn-net-table .t { display: none; }
  .cn-net-table tr.cn-msg td:first-child { display: none; }
  /* A fixed layout keeps the width of the hidden columns: the address takes what is left instead */
  .cn-net-table { table-layout: auto; }
  .cn-net-table td.u { width: 100%; max-width: 0; }

  .cn-net-scroll { max-height: 420px; }
  .cn-guide-keys { display: none; }
  .cn-how-steps { grid-template-columns: minmax(0, 1fr); }
  .cn-how-steps > li { padding-left: 16px; }
  .cn-how-steps > li::before { position: static; display: inline-flex; margin-bottom: 6px; }
  .cn-tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .cn-tile-value { font-size: 1.35rem; }
  .cn-dl, .cn-dl.wide { grid-template-columns: minmax(0, 1fr); }
  .cn-dl dt { margin-top: 4px; }
}

/* Phones: the app bar's five pages scroll sideways inside the bar, never the page */
@media (max-width: 720px) {
  .appbar:has(.crumb-app[href="connect"]) .apptabs { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .appbar:has(.crumb-app[href="connect"]) .apptabs::-webkit-scrollbar { display: none; }
}