:root { --bg:#10141a; --card:#1a212b; --line:#354153; --text:#f2f6fb; --muted:#c3cedb; --blue:#9ec0ff; --red:#ff5d5d; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; background:radial-gradient(900px 420px at 10% -10%, #1c2836 0%, transparent 55%), var(--bg); color:var(--text); font:17px/1.45 "Segoe UI","Noto Sans","Liberation Sans",sans-serif; padding:24px; }
form { width:min(440px, 100%); background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 10px 30px rgba(0,0,0,.28); }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.brand img { width:48px; height:48px; border-radius:12px; object-fit:cover; flex:none; background:#000; }
.brand img.bc-wordmark {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  width:auto; height:40px; border-radius:0; object-fit:contain;
  background:transparent; box-shadow:none;
  -webkit-mask:none; mask:none;
}
.brand :is(h1,h2.bc-h1) { margin:0; font-size:28px; letter-spacing:-.03em; }
p { margin:0 0 16px; color:var(--muted); }
label { display:block; margin:12px 0 6px; color:var(--muted); }
input { width:100%; font:inherit; color:var(--text); background:#121820; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
/* iphone-zoom: double-tap zoom off; keep fields ≥16px so iOS does not auto-zoom on focus */
html, body { touch-action: manipulation; }
input, textarea, select, [contenteditable="true"], [contenteditable=""] { font-size: max(16px, 1em); }
button { margin-top:16px; font:inherit; color:#07110c; background:var(--blue); border:0; border-radius:12px; padding:10px 16px; cursor:pointer; }
button.ghost { color:var(--text); background:transparent; border:1px solid var(--line); }
.msg { min-height:1.4em; margin-top:12px; color:var(--red); }
a { color:var(--blue); }
.secure { display:flex; align-items:center; gap:8px; margin:0 0 14px; color:var(--muted); font-size:14px; }
.secure .led { width:10px; height:10px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 8px #ff4d4d; }
.secure .led.on { background:#3ddc84; box-shadow:0 0 8px #3ddc84; }
form[hidden], div[hidden] { display: none !important; }
button.linkish { display: block; margin: 12px 0 0; padding: 0; border: 0; background: transparent; color: var(--blue); text-decoration: underline; cursor: pointer; text-align: left; }
textarea { width: 100%; min-height: 0; font: inherit; color: var(--text); background: #121820; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ok { min-height: 1.4em; margin-top: 12px; color: var(--muted); }

/* ===== Glass UI (2026-10-10): faded forest backdrop, UI floats in focus ===== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: bc-fade-out 450ms ease both; }
::view-transition-new(root) { animation: bc-fade-in 600ms ease both; }
@keyframes bc-fade-out { to { opacity: 0; transform: scale(0.98); filter: blur(4px); } }
@keyframes bc-fade-in { from { opacity: 0; transform: scale(1.02); filter: blur(4px); } }
.bc-leaving { animation: bc-fade-out 450ms ease forwards; }
.bc-app-enter { animation: bc-fade-in 600ms ease both; }
html { background: #0f1117; }
body::before {
  content: ""; position: fixed; inset: -40px; z-index: -2; pointer-events: none;
  background: url("/static/forest-bg.webp?v=26.11.1007-763b3d5b") center / cover no-repeat;
  filter: blur(6px) saturate(0.9) brightness(0.72); transform: scale(1.05);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(15,17,23,0.45), rgba(15,17,23,0.8) 75%), rgba(15,17,23,0.3);
}
.ver { font-size: .62em; font-weight: 500; letter-spacing: .06em; color: var(--muted); opacity: .7; margin-left: .35em; vertical-align: .12em; }
body { background: transparent; }
form {
  background: color-mix(in srgb, var(--card) 42%, transparent);
  border-color: rgba(255,255,255,.1);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
input, textarea { background-color: rgba(18,24,32,.6); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { form { background: rgba(26,33,43,.94); } }
@media (prefers-reduced-transparency: reduce) {
  body::before, body::after { display: none; }
  body { background: var(--bg); }
  form { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
  input, textarea { background-color: #121820; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root), .bc-leaving, .bc-app-enter { animation: none; }
}
.ver { vertical-align: baseline; }

/* Two-tone Branch Chat wordmark (option B). */
@font-face { font-family: "BC Outfit"; src: url("/static/outfit.woff?v=26.11.1007-763b3d5b") format("woff"); font-weight: 100 900; font-display: swap; }
.bc-logo { font-family: "BC Outfit", "Segoe UI", "Noto Sans", sans-serif; font-size: 1.3em; letter-spacing: -.005em; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.bc-logo b { font-weight: 700; }
.bc-logo i { font-style: normal; font-weight: 300; color: #7cc98c; }
html[data-scheme="light"] .bc-logo { text-shadow: 0 1px 3px rgba(0,0,0,.25); }
html[data-scheme="light"] .bc-logo i { color: #2e7d48; }
/* Approved wordmark (Oct 19 2026, as in the email mock-ups): bold "Branch", thin green "Chat", small TM, no space.
   Light theme: "Branch" in near-black #1b2a20 (mock-up colour) instead of the page text colour. */
html[data-scheme="light"] .bc-logo b { color: #1b2a20; }
.ver { vertical-align: baseline; }
.brand { gap: 12px; } .brand img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12); }

/* Softer icon edges on the sign-in page. */
.brand .bc-icon { display: inline-flex; flex: none; filter: drop-shadow(0 3px 7px rgba(0,0,0,.45)); }
.brand img {
  box-shadow: none; filter: blur(.25px);
  -webkit-mask: linear-gradient(to right, transparent, #000 4px, #000 calc(100% - 4px), transparent), linear-gradient(to bottom, transparent, #000 4px, #000 calc(100% - 4px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
html[data-scheme="light"] .brand .bc-icon { filter: drop-shadow(0 3px 7px rgba(0,0,0,.18)); }

/* Performance: pre-blurred backdrop, no live filter. */
body::before { background-image: url("/static/forest-bg-dark.webp?v=26.11.1007-763b3d5b"); filter: none; transform: translateZ(0) scale(1.02); will-change: transform; }
/* Small trademark mark at the top right of the T in Chat. */
.bc-logo .tm { font-size: .32em; font-weight: 500; font-style: normal; letter-spacing: .02em; vertical-align: top; position: relative; top: .25em; margin-left: .08em; opacity: .7; color: inherit; line-height: 1; }

/* Version label links to patch notes. */
a.ver { text-decoration: none; color: inherit; } a.ver:hover { text-decoration: underline; }

/* Site footer (copied from app.css). */
#bc-footer { flex: none; margin: 0 12px 10px; padding: 6px 14px; text-align: center; border-radius: 14px; background: color-mix(in srgb, var(--card) 40%, transparent); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--muted); font-size: 12px; line-height: 1.4; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
#bc-footer p { margin: 0; }
#bc-footer .verse { font-style: italic; }
#bc-footer .ref { font-style: normal; opacity: .8; margin-left: .3em; }
#bc-footer .memorial { opacity: .85; font-size: 11px; }
html[data-scheme="light"] #bc-footer { border-color: rgba(255,255,255,.55); text-shadow: 0 1px 3px rgba(255,255,255,.6); color: color-mix(in srgb, var(--text) 70%, transparent); }
@media (max-width: 800px) { #bc-footer { margin: 0 8px 6px; padding: 4px 10px; font-size: 11px; } #bc-footer .memorial { font-size: 10px; } }
@media (prefers-reduced-transparency: reduce) { #bc-footer { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; } }
html[data-scheme="light"] #bc-footer { color: color-mix(in srgb, var(--text) 48%, transparent); text-shadow: 0 1px 2px rgba(255,255,255,.45); }
#bc-footer { width: fit-content; max-width: calc(100% - 24px); align-self: center; margin-left: auto; margin-right: auto; padding: 5px 12px; box-sizing: border-box; }
html[data-scheme="light"] #bc-footer { text-shadow: 0 1px 3px rgba(0,0,0,.22); background: color-mix(in srgb, var(--card) 22%, transparent); }
html:not([data-scheme="light"]) #bc-footer { color: color-mix(in srgb, var(--muted) 80%, #000 20%); }
html[data-scheme="light"] #bc-footer { color: color-mix(in srgb, var(--text) 58%, transparent); }
#bc-footer { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#bc-footer .legal { font-size: .78em; opacity: .7; margin-top: 2px; }
#bc-footer .legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
body { grid-template-rows: 1fr auto; } #bc-footer { align-self: end; justify-self: center; margin-top: 16px; }
@media (max-height: 640px) { #bc-footer { position: static; } }

/* 0.21.03: the version label is one unbreakable token ("v0.21.03"), small and muted, never split across lines.
   The wordmark and the label wrap as whole pieces: when the card is too narrow the label sits under the name, left-aligned. */
.brand :is(h1,h2.bc-h1) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; row-gap: 0; min-width: 0; }
.ver { display: inline-block; white-space: nowrap; font-size: .5em; letter-spacing: .02em; font-variant-numeric: tabular-nums; vertical-align: baseline; margin-left: 0; }

/* 0.21.07: password and username rules shown under the fields, and the field with a problem is marked */
.hint { margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--muted); }
.hint.is-ok { color: #8fe3b0; }
input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 2px rgba(255, 93, 93, .35); }
/* 0.23.2 UX-05: "New here?" note under Sign in (private, invite-only server) */
.new-here { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(158,192,255,.08); font-size: 15px; line-height: 1.4; }
.new-here p { margin: 0; color: var(--text); }
.new-here p + p { margin-top: 8px; color: var(--muted); }
.new-here strong { color: var(--text); }

/* version-link (Oct 17): the version label always looks like a link to the patch notes, not only on hover. */
a.ver { color: var(--blue); color: color-mix(in srgb, var(--blue) 70%, var(--text)); opacity: 1; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
  text-underline-offset: .22em; border-radius: 3px; transition: text-decoration-color .15s, color .15s; }
a.ver:hover, a.ver:focus-visible { text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: 2px; color: var(--text); }
a.ver:focus { outline: none; }
a.ver:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.ver { transition: none; } }

/* 0.23.3-beta.12: the organisation's picture + name under the title (only when BC_ORG_NAME / BC_ORG_ICON is set) */
.org-row { display: flex; align-items: center; gap: 10px; margin: -2px 0 14px; padding: 4px 14px 4px 6px; width: fit-content; max-width: 100%;
  border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: var(--text); }
.org-row .org-pic { width: 40px; height: 40px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.org-row .org-name { font-weight: 600; font-size: 17px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
html[data-scheme="light"] .org-row { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.1); }

/* 0.23.3-beta.14 (Oct 18 2:51 PM): the full footer (verse and memorial line) is on the About page only. Every other page
   keeps just the trademark line, in very small print at the bottom where the footer used to be. The pill keeps its
   existing readable background and colours; these rules only shrink the text and padding (!important so they win
   over the older footer size rules above). The trademark line inherits the 10px size instead of shrinking further. */
#bc-footer.bc-mini { padding: 2px 10px !important; margin-top: 0; margin-bottom: 4px; font-size: 10px !important; line-height: 1.3; }
#bc-footer.bc-mini .legal { font-size: inherit; margin: 0; }

/* licensing: small License link in the trademark footer line (every server, links to /license) */
#bc-footer .bc-license-link, .fd-legal .bc-license-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; opacity: .9; margin-left: .35em; }

/* ---- Twigum wordmark + brand header gradients (gate/login) ---- */
:root {
  /* Default: logo-inspired BLUE→TEAL (no violet). A=blue→white via ?brandGrad=a; B=old violet-teal via ?brandGrad=b */
  --brand-grad-logo: linear-gradient(135deg, #1E5BD8 0%, #2489C4 48%, #2EBCB5 100%);
  --brand-grad-a: linear-gradient(90deg, #1a5fb4 0%, #4a90d9 38%, #d6e8f8 78%, #ffffff 100%);
  --brand-grad-b: linear-gradient(90deg, #4632a0 0%, #5a50c8 35%, #3ca0b4 70%, #28b4aa 100%);
  --brand-grad: var(--brand-grad-logo);
}
html[data-brand-grad="a"] { --brand-grad: var(--brand-grad-a); }
html[data-brand-grad="b"] { --brand-grad: var(--brand-grad-b); }

form .brand {
  padding: 12px 14px;
  margin: 0 0 12px;
  border-radius: 16px;
  background: var(--brand-grad);
  box-shadow: 0 2px 12px rgba(0,0,0,.22);
  align-items: center;
}
img.bc-wordmark {
  display: inline-block;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  height: 42px;
  width: auto;
  max-width: min(280px, 70vw);
  vertical-align: middle;
  object-fit: contain;
  /* Approved AFTER treatment (Luke): same crisp dark outline on light & dark */
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.9))
    drop-shadow(0 1px 0 rgba(0,0,0,.55))
    drop-shadow(0 -1px 0 rgba(0,0,0,.35))
    drop-shadow(1px 0 0 rgba(0,0,0,.35))
    drop-shadow(-1px 0 0 rgba(0,0,0,.35))
    drop-shadow(0 2px 3px rgba(0,0,0,.4));
}
/* wordmark filter: one treatment everywhere (dark+light) */

/* ---- Header/brand legibility outlines (Luke: A/B gradients) ---- */
:root {
  --brand-outline:
    0 0 1px rgba(0,0,0,.85),
    0 1px 0 rgba(0,0,0,.75),
    0 -1px 0 rgba(0,0,0,.55),
    1px 0 0 rgba(0,0,0,.55),
    -1px 0 0 rgba(0,0,0,.55),
    1px 1px 0 rgba(0,0,0,.55),
    -1px 1px 0 rgba(0,0,0,.55),
    1px -1px 0 rgba(0,0,0,.45),
    -1px -1px 0 rgba(0,0,0,.45),
    0 2px 4px rgba(0,0,0,.35);
  --brand-icon-outline:
    drop-shadow(0 0 1px rgba(0,0,0,.9))
    drop-shadow(0 1px 1px rgba(0,0,0,.65))
    drop-shadow(0 -1px 0 rgba(0,0,0,.4))
    drop-shadow(1px 0 0 rgba(0,0,0,.4))
    drop-shadow(-1px 0 0 rgba(0,0,0,.4));
}

/* Instance title, version, credits, wordmark text fallbacks in header */
header .org-name,
header .org-title,
header .org-text,
header .org-credit,
header .org-sub,
header .ver,
header a.ver,
header strong,
header .brand-col,
header .brand-col strong,
form .brand h1,
form .brand .ver,
form .brand a.ver,
#login .brand h1,
#signup .brand h1,
#factor .brand h1,
#reset .brand h1 {
  text-shadow: var(--brand-outline) !important;
  -webkit-text-stroke: 0.35px rgba(0,0,0,.35);
  paint-order: stroke fill;
}

/* Keep version link readable on white end of gradient A */
header a.ver,
form .brand a.ver {
  color: #f5fbff;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
html[data-scheme="light"] header a.ver,
html[data-scheme="light"] form .brand a.ver {
  color: #0b1a2e;
}

html[data-scheme="light"] header .org-name,
html[data-scheme="light"] header .org-title,
html[data-scheme="light"] header strong,
html[data-scheme="light"] form .brand h1 {
  color: #0b1a2e;
}

/* Light theme: crisp white outline only (no soft dark blur) so header words stay sharp */
html[data-scheme="light"] header .org-name,
html[data-scheme="light"] header .org-title,
html[data-scheme="light"] header .org-text,
html[data-scheme="light"] header .org-credit,
html[data-scheme="light"] header .org-sub,
html[data-scheme="light"] header .ver,
html[data-scheme="light"] header a.ver,
html[data-scheme="light"] header strong,
html[data-scheme="light"] header .brand-col,
html[data-scheme="light"] header .brand-col strong,
html[data-scheme="light"] form .brand h1,
html[data-scheme="light"] form .brand .ver,
html[data-scheme="light"] form .brand a.ver,
html[data-scheme="light"] #login .brand h1,
html[data-scheme="light"] #signup .brand h1,
html[data-scheme="light"] #factor .brand h1,
html[data-scheme="light"] #reset .brand h1 {
  text-shadow:
    0 1px 0 #fff,
    0 -1px 0 #fff,
    1px 0 0 #fff,
    -1px 0 0 #fff !important;
  -webkit-text-stroke: 1px #fff;
  paint-order: stroke fill;
}


/* Burger / header action buttons + icons: dark halo so they read on white end */
header .header-actions button:not(#menu-open),
header .bc-icon,
header .brand img,
form .brand .bc-icon,
form .brand .bc-icon img {
  filter: var(--brand-icon-outline);
}
header .bc-icon img,
form .brand .bc-icon img {
  /* stack with existing drop-shadow from brand rules */
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.9))
    drop-shadow(0 1px 1px rgba(0,0,0,.55))
    drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
img.bc-wordmark {
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.9))
    drop-shadow(0 1px 0 rgba(0,0,0,.55))
    drop-shadow(0 -1px 0 rgba(0,0,0,.35))
    drop-shadow(1px 0 0 rgba(0,0,0,.35))
    drop-shadow(-1px 0 0 rgba(0,0,0,.35))
    drop-shadow(0 2px 3px rgba(0,0,0,.4)) !important;
}


/* device-approval: matching short code + emoji on both screens */
.sas-code { font-size: 2rem; font-weight: 700; letter-spacing: 0.35em; text-align: center; margin: 16px 0 8px; font-variant-numeric: tabular-nums; }
.sas-emoji { font-size: 2.2rem; text-align: center; letter-spacing: 0.25em; margin: 0 0 16px; }
#waiting-approval .sub { text-align: center; opacity: 0.85; }
#restore-approve { width: 100%; margin-bottom: 8px; }
p.sub.recovery-key-label { margin: 12px 0 4px; }