/*
 * Somebody else's application.
 *
 * Institutional navy, system fonts, denser than anything we ship, and nothing from
 * `frontend/components`. A demonstration where the host chrome and the embedded panel share a design
 * language hides the thing worth seeing: that the widget is a guest inside an application it does not
 * control and cannot restyle.
 *
 * Its own custom properties with their own prefix, for the same reason. If these were `--ddds-*` a
 * customer reading the page would reasonably conclude the host is part of what we ship.
 */
:root {
  color-scheme: light dark;
  --crm-bg: #eef1f5;
  --crm-surface: #ffffff;
  --crm-rail: #0f2b4a;
  --crm-rail-ink: #b6c6d9;
  --crm-rail-on: #1c4570;
  --crm-brand: #0f2b4a;
  --crm-accent: #c8102e;
  --crm-accent-ink: #ffffff;
  --crm-link: #1c5aa0;
  --crm-ink: #1a222b;
  --crm-quiet: #64707e;
  --crm-line: #d9e0e8;
  --crm-ok: #2e7d5b;
  --crm-ok-bg: #e4f2ea;
  --crm-warn: #8a6410;
  --crm-warn-bg: #fbf0d8;
  --crm-bad: #b2453d;
  --crm-bad-bg: #f9e8e6;
  --crm-log-bg: #0d1319;
  --crm-log-ink: #9fd0a8;
  --crm-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --crm-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/*
 * The host's own dark mode, which the page pushes into the widget as `theme` on `iqz-ddds:init`.
 * An embedded panel that stayed light inside a dark host would read as a rendering fault.
 */
:root[data-crm-theme="dark"] {
  color-scheme: dark;
  --crm-bg: #10141a;
  --crm-surface: #1a1f27;
  --crm-rail: #0a1725;
  --crm-rail-ink: #8ba0b8;
  --crm-rail-on: #16334f;
  --crm-brand: #dbe6f2;
  --crm-accent: #e84256;
  --crm-link: #6ba6e0;
  --crm-ink: #e5eaf1;
  --crm-quiet: #929fb0;
  --crm-line: #2a313b;
  --crm-ok: #6cc79b;
  --crm-ok-bg: #16301f;
  --crm-warn: #dcb160;
  --crm-warn-bg: #2c2415;
  --crm-bad: #e79a92;
  --crm-bad-bg: #311c1a;
}

* { box-sizing: border-box; }

/*
 * `hidden` means hidden, whatever else a rule says.
 *
 * The attribute is only a `display: none` in the user-agent stylesheet, so any author rule setting
 * `display` beats it - and this file has several. `.embed__bar` is `display: flex`, so marking it
 * hidden did exactly nothing and the origin line stayed on screen with the toggle off. The `!important`
 * is the point rather than a shortcut: it is what makes the attribute mean what it says.
 */
[hidden] { display: none !important; }

/*
 * A column that fills the viewport: the banner takes what it needs and the application takes the rest.
 *
 * This was `min-height: 90vh` on the app itself, which is a guess rather than a measurement - the
 * banner sits *above* it, so the two together ended short of the bottom and left a strip of page
 * background under the rail. The taller the screen the more obvious it was, and on 1440 it read as the
 * navigation failing to fill its column.
 *
 * `dvh` because a mobile browser's chrome makes `vh` taller than what you can actually see, with `vh`
 * first as the fallback for anything that does not know the newer unit.
 */
body {
  margin: 0;
  background: var(--crm-bg);
  color: var(--crm-ink);
  font: 14px/1.5 var(--crm-font);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.standin {
  flex: 0 0 auto;
  margin: 0;
  background: #241a3d;
  color: #ded6f5;
  padding: 0.6rem 1.1rem;
  font-size: 0.78rem;
}

.screen { display: none; }
/* Flex rather than block, so the one that is showing can hand its own height to the layout inside it. */
.screen[data-on="yes"] { display: flex; flex-direction: column; flex: 1 1 auto; }
.pane { display: none; padding: 1.1rem 1.25rem 2rem; min-width: 0; }
.pane[data-on="yes"] { display: block; }

.mark { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 1.4rem; white-space: nowrap; }
.mark--rail { color: #fff; font-size: 0.98rem; padding: 0 0.5rem 1rem; margin: 0; }
.mark__logo {
  width: 26px; height: 26px; border-radius: 4px; flex: none;
  background: var(--crm-accent); color: var(--crm-accent-ink);
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 800;
}

/* --- sign in ---------------------------------------------------------- */
.signin { flex: 1 1 auto; display: grid; place-items: center; padding: 2rem 1.25rem; background: var(--crm-brand); }
:root[data-crm-theme="dark"] .signin { background: #0a1725; }
.signin__card { background: var(--crm-surface); border-radius: 8px; padding: 2rem; width: 100%; max-width: 24rem; box-shadow: 0 12px 40px rgb(0 0 0 / 25%); }
.signin__h { margin: 0 0 0.3rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
.signin__p { margin: 0 0 1.4rem; color: var(--crm-quiet); font-size: 0.86rem; }
.signin__note { margin: 1.2rem 0 0; font-size: 0.74rem; color: var(--crm-quiet); border-top: 1px solid var(--crm-line); padding-top: 0.8rem; }
.signin__note--bad { color: var(--crm-bad); }

/* --- chrome ----------------------------------------------------------- */
/* A grid container that is itself a flex item, so it takes the height the column gives it. */
.app { display: grid; grid-template-columns: 210px minmax(0, 1fr); flex: 1 1 auto; }
@media (max-width: 60rem) { .app { grid-template-columns: minmax(0, 1fr); } }

/* A column, so the demonstration toggle can sit at the foot rather than under the last nav item. */
.rail {
  background: var(--crm-rail); color: var(--crm-rail-ink); padding: 0.9rem 0.6rem;
  display: flex; flex-direction: column;
}
@media (max-width: 60rem) { .rail { flex-direction: row; gap: 0.3rem; overflow-x: auto; padding: 0.5rem 0.6rem; align-items: center; } }

/* Pushes what follows to the bottom on a column, and to the right on the narrow strip. */
.rail__spacer { flex: 1 1 auto; min-height: 1rem; }

.rail__group {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em;
  opacity: 0.5; margin: 0 0 0.3rem; padding: 0 0.55rem;
}
@media (max-width: 60rem) { .rail__group { display: none; } }

/*
  The one control here that is ours rather than the CRM's.

  Deliberately unlike a nav item: quieter, with a pip that fills when it is on, so it does not read as
  a sixth place to go. `aria-pressed` rather than a checkbox because it acts immediately and is not a
  form field being filled in.
*/
.rail__toggle {
  display: flex; align-items: center; gap: 0.5rem; flex: none;
  width: 100%; text-align: left;
  padding: 0.45rem 0.55rem; border: 0; border-radius: 4px;
  background: none; color: inherit; font: inherit; font-size: 0.8rem;
  white-space: nowrap; cursor: pointer; opacity: 0.75;
}
@media (max-width: 60rem) { .rail__toggle { width: auto; } }
.rail__toggle:hover { background: rgb(255 255 255 / 8%); opacity: 1; }
.rail__toggle:focus-visible { outline: 2px solid var(--crm-link); outline-offset: 2px; }
.rail__toggle[aria-pressed="true"] { opacity: 1; color: #fff; }
.rail__pip {
  width: 26px; height: 15px; flex: none; border-radius: 99px;
  background: rgb(255 255 255 / 18%); position: relative; transition: background 120ms linear;
}
.rail__pip::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 11px; height: 11px; border-radius: 50%; background: #fff;
  transition: transform 120ms linear;
}
.rail__toggle[aria-pressed="true"] .rail__pip { background: var(--crm-accent); }
.rail__toggle[aria-pressed="true"] .rail__pip::after { transform: translateX(11px); }
@media (prefers-reduced-motion: reduce) {
  .rail__pip, .rail__pip::after { transition: none; }
}
@media (max-width: 60rem) { .mark--rail { padding: 0 0.75rem 0 0.25rem; } }
.rail__item {
  display: block; width: 100%; text-align: left;
  padding: 0.45rem 0.55rem; border: 0; border-radius: 4px;
  background: none; color: inherit; font: inherit; font-size: 0.86rem;
  white-space: nowrap; cursor: pointer;
}
@media (max-width: 60rem) { .rail__item { width: auto; } }
.rail__item:hover:not(:disabled) { background: rgb(255 255 255 / 8%); }
.rail__item--on { background: var(--crm-rail-on); color: #fff; font-weight: 600; }
/* The sections this demonstration does not implement, said plainly rather than faked. */
.rail__item:disabled { opacity: 0.45; cursor: not-allowed; }

.top { background: var(--crm-surface); border-bottom: 1px solid var(--crm-line); padding: 0.55rem 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.top__crumb { font-size: 0.82rem; color: var(--crm-quiet); }
.top__crumb b { color: var(--crm-ink); }
.top__crumb button { border: 0; background: none; font: inherit; color: var(--crm-link); cursor: pointer; text-decoration: underline; padding: 0; }
.top__right { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }
.who { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; }
.who__pic { width: 26px; height: 26px; border-radius: 50%; background: var(--crm-brand); color: #fff; display: grid; place-items: center; font-size: 0.68rem; font-weight: 600; }
:root[data-crm-theme="dark"] .who__pic { color: #0a1725; }

.btn {
  font: inherit; font-size: 0.83rem; padding: 0.4rem 0.8rem;
  border: 1px solid var(--crm-line); border-radius: 4px;
  background: var(--crm-surface); color: var(--crm-ink);
  cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover { border-color: var(--crm-link); color: var(--crm-link); }
.btn--primary { background: var(--crm-accent); border-color: var(--crm-accent); color: var(--crm-accent-ink); font-weight: 600; }
.btn--primary:hover { filter: brightness(0.92); color: var(--crm-accent-ink); }
.btn--wide { width: 100%; padding: 0.6rem; font-size: 0.9rem; text-align: center; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible, .tab:focus-visible, .crow:focus-visible, .rail__item:focus-visible { outline: 2px solid var(--crm-link); outline-offset: 2px; }

.pane__h { margin: 0 0 0.15rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.015em; }
.pane__p { margin: 0 0 1rem; color: var(--crm-quiet); font-size: 0.86rem; }
.card { background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: 6px; margin-bottom: 1rem; }

/* --- the book --------------------------------------------------------- */
.tablewrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
table.list th {
  text-align: left; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--crm-quiet); font-weight: 600; padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--crm-line); white-space: nowrap;
}
table.list td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--crm-line); vertical-align: middle; }
table.list tr:last-child td { border-bottom: 0; }
.crow { cursor: pointer; }
.crow:hover td { background: var(--crm-bg); }
.cwho { display: flex; align-items: center; gap: 0.6rem; }
.cpic { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--crm-brand); color: #fff; display: grid; place-items: center; font-size: 0.7rem; font-weight: 600; }
:root[data-crm-theme="dark"] .cpic { color: #0a1725; }
.cname { display: block; font-weight: 600; }
.cmail { display: block; color: var(--crm-quiet); font-size: 0.78rem; }
.num { font-variant-numeric: tabular-nums; color: var(--crm-quiet); white-space: nowrap; }

.chip { display: inline-flex; font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 9px; font-weight: 600; white-space: nowrap; }
.chip--ok { background: var(--crm-ok-bg); color: var(--crm-ok); }
.chip--wait { background: var(--crm-warn-bg); color: var(--crm-warn); }
.chip--bad { background: var(--crm-bad-bg); color: var(--crm-bad); }

/* --- one record ------------------------------------------------------- */
.record__head { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.15rem; flex-wrap: wrap; }
.record__pic { width: 44px; height: 44px; border-radius: 50%; background: var(--crm-brand); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
:root[data-crm-theme="dark"] .record__pic { color: #0a1725; }
.record__name { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.record__meta { color: var(--crm-quiet); font-size: 0.83rem; margin: 0.1rem 0 0; }
.facts { display: flex; flex-wrap: wrap; gap: 0 2rem; padding: 0 1.15rem 0.9rem; }
.fact__k { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--crm-quiet); }
.fact__v { font-size: 0.87rem; font-variant-numeric: tabular-nums; }

.tabs { display: flex; gap: 0.15rem; padding: 0 0.6rem; border-top: 1px solid var(--crm-line); overflow-x: auto; }
.tab { font: inherit; font-size: 0.85rem; padding: 0.6rem 0.8rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--crm-quiet); cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--crm-ink); }
.tab[aria-selected="true"] { color: var(--crm-accent); border-bottom-color: var(--crm-accent); font-weight: 600; }
.tabpane { display: none; }
.tabpane[data-on="yes"] { display: block; }
.placeholder { padding: 2.5rem 1.15rem; color: var(--crm-quiet); font-size: 0.88rem; text-align: center; }

/* --- the frame -------------------------------------------------------- */
.embed { padding: 0.9rem 1.15rem 1.15rem; }
.embed__bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.7rem; color: var(--crm-quiet); font-family: var(--crm-mono); padding-bottom: 0.5rem; margin: 0; }
.embed__frame { border: 1px solid var(--crm-line); border-radius: 6px; overflow: hidden; background: var(--crm-bg); min-height: 6rem; }
.embed__status { padding: 2.2rem 1.15rem; text-align: center; color: var(--crm-quiet); font-size: 0.88rem; margin: 0; }
.embed__status--bad { color: var(--crm-bad); }
/* No border and no scrollbar: the frame reports its own height and the host sizes to it. */
.embed__frame iframe { display: block; width: 100%; border: 0; }

/* --- instrumentation -------------------------------------------------- */
.demo__head { padding: 0.7rem 1.15rem; border-bottom: 1px solid var(--crm-line); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.demo__title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--crm-quiet); font-weight: 700; }
.demo__actions { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.demo__body { padding: 0.9rem 1.15rem 1.15rem; display: grid; gap: 1rem; }
@media (min-width: 62rem) { .demo__body { grid-template-columns: 19rem minmax(0, 1fr); } }
.demo__prose { font-size: 0.76rem; color: var(--crm-quiet); margin: 0; }
.field__label { display: block; font-size: 0.72rem; color: var(--crm-quiet); margin-bottom: 0.25rem; }
.kv { font-family: var(--crm-mono); font-size: 0.78rem; background: var(--crm-bg); border: 1px solid var(--crm-line); border-radius: 4px; padding: 0.35rem 0.5rem; margin-bottom: 0.6rem; overflow-wrap: anywhere; }
.log { font-family: var(--crm-mono); font-size: 0.71rem; line-height: 1.7; background: var(--crm-log-bg); color: var(--crm-log-ink); border-radius: 5px; padding: 0.7rem 0.85rem; height: 13rem; overflow-y: auto; white-space: pre-wrap; }
.log__in { color: #7fc4ff; }
.log__out { color: #ffd88a; }
.log__bad { color: #ff9d94; }
.log__note { color: #7d8a96; }