/* The guest pages (t-176): the Botnest components under the karlmh.com brand.

   Not a parallel token set. Only Botnest's own semantic tokens are overridden, inside the
   [data-bn-brand="karlmh"] scope, with the values measured from karlmh.com (canvas #2B2C30, deeper
   surfaces #1C1D28 and #1B1B1D, raised #393E46, body text #99A9B5, titles #F6F4EF, accent #FF7C43;
   Montserrat for titles, Source Sans Pro for text). karlmh.com has no light theme, so in dawn the
   Botnest dawn tokens stand and only the accent and the type follow the brand: #FF7C43 is a fill with
   dark text there (about 7:1), never text on white, and links keep the text colour with an underline.

   The brand faces are named first and used where the visitor has them; the self-hosted Botnest faces
   are the fallback, because the guest host loads no font from anywhere else (the CSP, and law 10). */

[data-bn-brand="karlmh"] {
  --gx-title-font: "Montserrat", var(--bn-font-ui);
  --bn-font-ui: "Source Sans Pro", "Source Sans 3", "Alegreya Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --bn-action: #FF7C43;
  --bn-action-hover: #FF7C43;
  --bn-action-press: #FF7C43;
  --bn-on-action: #1B1B1D;
  --bn-focus-ring: #FF7C43;
}
[data-bn-brand="karlmh"][data-bn-theme="night"] {
  --bn-bg: #2B2C30;
  --bn-surface: #1C1D28;
  --bn-surface-2: #393E46;
  --bn-surface-3: #393E46;
  --bn-inset: #1B1B1D;
  --bn-chrome-bg: #1B1B1D;
  --bn-chrome-text: #F6F4EF;
  --bn-chrome-text-dim: #99A9B5;
  --bn-text: #F6F4EF;
  --bn-text-2: #99A9B5;
  --bn-text-3: #99A9B5;
  --bn-border-subtle: #393E46;
  --bn-border: #393E46;
  --bn-border-strong: #99A9B5;
  --bn-link: #FF7C43;
  --bn-link-hover: #F6F4EF;
  --bn-action-subtle: #393E46;
  --bn-action-subtle-hover: #393E46;
  --bn-selected: #393E46;
}
[data-bn-brand="karlmh"][data-bn-theme="dawn"] {
  --bn-link: var(--bn-text);
  --bn-link-hover: var(--bn-text);
}

.gx-body { margin: 0; background: var(--bn-bg); color: var(--bn-text); font-family: var(--bn-font-ui); }
.gx-shell { min-height: 100dvh; display: flex; flex-direction: column; max-width: 760px; margin: 0 auto;
  padding: 0 var(--bn-sp-4); box-sizing: border-box; }
.gx-top { display: flex; align-items: center; gap: var(--bn-sp-3); padding: var(--bn-sp-4) 0; border-bottom: 1px solid var(--bn-border); }
.gx-brand { font: var(--bn-weight-bold) var(--bn-text-h4)/1.2 var(--gx-title-font); color: var(--bn-text); text-decoration: none; }
.gx-ai { flex: none; }
.gx-topnav { margin-left: auto; display: flex; gap: var(--bn-sp-4); font-size: var(--bn-text-small); }
.gx-topnav a, .gx-text a, .gx-links a { color: var(--bn-link); text-decoration: underline; text-underline-offset: 2px; }
.gx-topnav a:hover, .gx-text a:hover, .gx-links a:hover { color: var(--bn-link-hover); }
.gx-main { flex: 1; padding: var(--bn-sp-6) 0; }
.gx-foot { padding: var(--bn-sp-4) 0 var(--bn-sp-6); color: var(--bn-text-2); font-size: var(--bn-text-tiny); border-top: 1px solid var(--bn-border); }

.gx-card { display: flex; flex-direction: column; gap: var(--bn-sp-4); }
.gx-h1 { margin: 0; font: var(--bn-weight-bold) var(--bn-text-h2)/1.25 var(--gx-title-font); color: var(--bn-text); text-wrap: balance; }
.gx-h2 { margin: 0 0 var(--bn-sp-2); font: var(--bn-weight-bold) var(--bn-text-h4)/1.3 var(--gx-title-font); color: var(--bn-text); }
.gx-lead { margin: 0; color: var(--bn-text-2); }
.gx-notice { display: flex; flex-direction: column; gap: var(--bn-sp-2); color: var(--bn-text-2); max-width: 68ch; }
.gx-notice p { margin: 0; }
.gx-notice strong { color: var(--bn-text); }
.gx-form { display: flex; flex-direction: column; gap: var(--bn-sp-3); align-items: flex-start; }
.gx-form .bn-field { width: 100%; }
.gx-primary { color: var(--bn-on-action); }

.gx-chat { display: flex; flex-direction: column; gap: var(--bn-sp-4); }
.gx-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bn-sp-3); }
.gx-msg { display: flex; flex-direction: column; gap: var(--bn-sp-1); max-width: 88%; padding: var(--bn-sp-3) var(--bn-sp-4);
  border-radius: var(--bn-radius-md); background: var(--bn-surface); border: 1px solid var(--bn-border-subtle); }
.gx-msg--you { align-self: flex-end; background: var(--bn-surface-2); }
.gx-msg--them { align-self: flex-start; }
.gx-who { font-size: var(--bn-text-tiny); color: var(--bn-text-2); }
.gx-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--bn-text); }
.gx-thinking .gx-text { color: var(--bn-text-2); }
.gx-links { margin: var(--bn-sp-1) 0 0; padding-left: var(--bn-sp-5); font-size: var(--bn-text-small); }
.gx-count { margin: 0; }
.gx-compose { display: flex; gap: var(--bn-sp-2); align-items: flex-end; }
.gx-input { flex: 1; min-height: 64px; }
.gx-forget { color: var(--bn-text-2); font-size: var(--bn-text-small); }
.gx-forget summary { cursor: pointer; }
.gx-forget .gx-form { margin-top: var(--bn-sp-3); }
.gx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gx-message { text-align: left; }
[hidden] { display: none !important; }

@media (max-width: 840px) {
  .gx-msg { max-width: 100%; }
  .gx-compose { flex-direction: column; align-items: stretch; }
  .gx-compose .bn-btn, .gx-form .bn-btn { min-height: 44px; }
  .gx-topnav { gap: var(--bn-sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}