/* Demo host styling.
 *
 * Deliberately plain: this is a UAT instrument, and anything that looks like a product
 * invites a tester to judge the chrome instead of the integration.
 *
 * THE `.anna-launcher` BLOCK IS THE INTEGRATION CONTRACT, NOT DECORATION.
 * `@anshinus/anna-sdk-react` ships no stylesheet. The published launcher renders
 * `class="anna-launcher anna-launcher--with-label"` (plus `--icon-only`) and a label span
 * `.anna-launcher__label`, and nothing else. An integrator who mounts the component and
 * writes no CSS gets a browser-default button. These rules are this host's styling of the
 * SDK's documented class names, which is what every consumer has to write.
 */

:root {
  --bg: #f6f7f9;
  --fg: #16181d;
  --muted: #5a6270;
  --line: #d8dde5;
  --card: #ffffff;
  --ok: #0f6b3f;
  --ok-bg: #e8f5ee;
  --warn: #8a5300;
  --warn-bg: #fdf3e3;
  --err: #a11b2b;
  --err-bg: #fbeced;
  /* The brand package's <Shield> colours from these. Without them it renders unpainted —
   * which is itself a finding worth not hiding behind a hardcoded fill. */
  --brand-shield: #1f6feb;
  --brand-shield-contrast: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11141a;
    --fg: #e8eaee;
    --muted: #9aa3b2;
    --line: #2a3140;
    --card: #181c24;
    --ok: #7ad1a3;
    --ok-bg: #12291e;
    --warn: #e5b765;
    --warn-bg: #2a2113;
    --err: #f09aa5;
    --err-bg: #2b1419;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* The pre-gate screen. Deliberately unbranded and nearly empty: §5 requires that the
 * app UI not paint before the gate decides, so there is nothing here that could appear
 * and then vanish when the redirect fires. */
.pregate {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding: 2rem 1rem;
  text-align: center;
}
.pregate__status { color: var(--muted); }

.demo { max-width: 56rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.head__title { display: flex; align-items: center; gap: 0.6rem; }
h1 { font-size: 1.35rem; margin: 0; }
h2 { font-size: 1rem; margin: 0 0 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}
.panel--muted { background: transparent; }
.panel--ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.panel--warn { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.panel--error { border-color: var(--err); background: var(--err-bg); color: var(--err); }
.panel p { margin: 0.4rem 0; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; margin: 0.75rem 0 0; }
.facts--stack { margin-top: 1rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; }
.break { overflow-wrap: anywhere; }
.small { font-size: 0.78rem; color: var(--muted); }
.note { color: var(--muted); font-size: 0.85rem; }

.brands { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.brandbtn {
  display: grid;
  gap: 0.15rem;
  text-align: left;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.brandbtn--on { border-color: var(--brand-shield); box-shadow: inset 0 0 0 1px var(--brand-shield); }
.brandbtn:disabled { cursor: not-allowed; opacity: 0.55; }
.brandbtn__name { font-weight: 600; }
.brandbtn__agent { color: var(--muted); font-size: 0.85rem; }
.brandbtn code { font-size: 0.78rem; color: var(--muted); }
.badge {
  justify-self: start;
  margin-top: 0.3rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--warn);
  border-radius: 999px;
  color: var(--warn);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.envs { display: flex; gap: 0.4rem; }
.envbtn {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.envbtn--on { border-color: var(--brand-shield); color: var(--brand-shield); font-weight: 600; }

.field { display: grid; gap: 0.3rem; margin: 0.75rem 0; }
.field span { color: var(--muted); font-size: 0.85rem; }
.field textarea {
  font: inherit;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: inherit;
  resize: vertical;
}

.action {
  padding: 0.45rem 1rem;
  border: 1px solid var(--brand-shield);
  border-radius: 8px;
  background: var(--brand-shield);
  color: var(--brand-shield-contrast);
  font: inherit;
  cursor: pointer;
}
.action:disabled { opacity: 0.6; cursor: progress; }

.mountpoint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--bg);
}

/* ---- the SDK's own class names ---- */
.anna-launcher {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.anna-launcher:hover { border-color: var(--brand-shield); }
.anna-launcher--icon-only { padding: 0.4rem; }
.anna-launcher__label { font-weight: 600; }

/* Security-tour capability matrix. */
.caps { border-collapse: collapse; margin: 0.75rem 0; font-size: 0.9rem; }
.caps th, .caps td { border: 1px solid var(--line); padding: 0.3rem 0.7rem; text-align: left; }
.caps thead th { color: var(--muted); font-weight: 600; text-transform: capitalize; }
.caps__you { color: var(--brand-shield); font-weight: 600; }

/* ---------------------------------------------------------------------------
 * THE CHROME SEAM.
 *
 * Tokens are scoped under [data-brand] so the UI-SDK's sheet can replace this block
 * wholesale without touching a component. Chrome and tokens are the UI-SDK's job
 * (@anshinus/ui) per Bryan's UI-standardisation ruling — these are LOCAL PLACEHOLDERS
 * until Infra pins the package and import order. Nothing below is brand-conditional:
 * there is one brand in this build.
 * ------------------------------------------------------------------------- */
:root[data-brand='anshin'] {
  --brand-shield: #1f6feb;
  --brand-shield-contrast: #ffffff;
  --brand-accent: #0f6b3f;
}

.layout { display: grid; grid-template-columns: 14rem 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 48rem) { .layout { grid-template-columns: 1fr; } }

.head__wordmark { font-weight: 700; font-size: 1.1rem; }
.head__sub { color: var(--muted); font-size: 0.85rem; }
.facts--inline { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); font-size: 0.8rem; margin-top: 0.75rem; }
.facts--inline dt { display: block; }

.nav { position: sticky; top: 1rem; }
.nav__group { margin-bottom: 1.1rem; }
.nav__heading { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.35rem; }
.nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.nav__link {
  width: 100%;
  text-align: left;
  padding: 0.3rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.nav__link:hover { border-color: var(--line); }
.nav__link--on { background: var(--card); border-color: var(--brand-shield); font-weight: 600; }
.content h1 { font-size: 1.3rem; margin: 0 0 0.2rem; }

/* Host B — the second host application, rendered in an iframe. */
.hostb { padding: 0.9rem; font-family: inherit; }
.hostb__bar { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; }
.hostb__note { color: var(--muted); font-size: 0.8rem; }
.hostframe { width: 100%; height: 19rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }

.code {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
}