/* The client site's frame (design/37 §4; the mark also sits in the full screen's .site-bar): the page's colours, fonts and header, shared by the guest site
   (guest/public/index.html, copied to /assets/site.css by guest/scripts/build-viewer.mjs) and the gateway's
   preview_site page. The neutral look is below; a firm's look sets the same variables (siteFrame.ts applySite). */
:root { --bg:#f6f7f4; --card:#fff; --fg:#1d2721; --muted:#5d6b62; --line:#d9ded7; --accent:#2f6b47; --warn:#8a4b12;
  --header:var(--card); --header-ink:var(--fg);
  --font-body:system-ui, -apple-system, "Segoe UI", sans-serif; --font-head:Georgia, serif; }
@media (prefers-color-scheme: dark) { :root { --bg:#131915; --card:#1b231f; --fg:#e4ebe6; --muted:#9aaaa0; --line:#2c3732; --accent:#7cc39a; --warn:#e2a86c; color-scheme: dark; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.55 var(--font-body); }
/* One row (the user, 2026-10-20): the firm's mark on the left, the client's name centred, the person on the right.
   Each has its own column, so the name stays centred whether or not there is a mark. */
header.site { display:grid; grid-template-columns:minmax(min-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr); align-items:center; gap:8px 20px; padding:10px 20px; border-bottom:1px solid var(--line); background:var(--header); color:var(--header-ink); }
header.site .brand { grid-column:1; justify-self:start; }
header.site .client { grid-column:2; justify-self:center; }
header.site .person { grid-column:3; justify-self:end; }
.site-bar .brand, header.site .brand { display:flex; align-items:center; gap:10px; min-width:0; }
.site-bar .brand[hidden], header.site .brand[hidden] { display:none; }
.site-bar .brand .logo, header.site .brand .logo { display:flex; align-items:center; flex:none; border-radius:6px; }
.site-bar .brand .logo.plate, header.site .brand .logo.plate { background:#fff; padding:3px 6px; }
.site-bar .brand img, header.site .brand img { display:block; max-height:36px; max-width:160px; width:auto; height:auto; }
.site-bar .brand .firm, header.site .brand .firm { font:var(--head-weight, 600) 1rem/1.3 var(--font-head); overflow-wrap:break-word; min-width:0; }
header.site .client { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; min-width:0; }
header.site .client h1 { font:var(--head-weight, 600) 1.45rem/1.2 var(--font-head); margin:0; overflow-wrap:anywhere; text-align:center; }
header.site .client select { font:inherit; font-size:.9rem; padding:4px 8px; border-radius:6px; border:1px solid currentColor; background:transparent; color:inherit; }
header.site .client select option { color:var(--fg); background:var(--card); }
header.site .person { display:flex; align-items:center; gap:12px; font-size:.92rem; min-width:0; }
button { font:500 1rem var(--font-body); padding:10px 18px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:var(--bg); cursor:pointer; }
button.quiet { background:transparent; color:var(--accent); padding:6px 12px; font-size:.92rem; }
/* The header's buttons (Sign out, Close): the look's own fill and text when it has them, else outlined in the header's text colour. */
header.site button.quiet, .site-bar button.quiet { background:var(--site-button, transparent); color:var(--site-button-ink, inherit); border-color:var(--site-button, currentColor); }
button:focus-visible, select:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
header.site button:focus-visible, header.site select:focus-visible, .site-bar button:focus-visible { outline-color:var(--header-ink); }
/* A phone: the mark and the person share the first row, the client's name takes the second (with no mark, no gap above it).
   The same rules under .sp-phone, for the preview's Phone width switch, which a media query can't see (PR review). */
@media (max-width: 640px) {
  header.site { grid-template-columns:minmax(0, 1fr) auto; }
  header.site .brand { grid-column:1; grid-row:1; }
  header.site .person { grid-column:2; grid-row:1; }
  header.site .client { grid-column:1 / -1; grid-row:2; justify-self:start; justify-content:flex-start; }
  header.site .client h1 { text-align:left; font-size:1.3rem; }
  header.site .person #who { display:none; }
  .site-bar .brand img, header.site .brand img { max-height:30px; max-width:96px; }
  header.site:has(> .brand[hidden]) { row-gap:0; }
}
.sp-phone header.site { grid-template-columns:minmax(0, 1fr) auto; }
.sp-phone header.site .brand { grid-column:1; grid-row:1; }
.sp-phone header.site .person { grid-column:2; grid-row:1; }
.sp-phone header.site .client { grid-column:1 / -1; grid-row:2; justify-self:start; justify-content:flex-start; }
.sp-phone header.site .client h1 { text-align:left; font-size:1.3rem; }
.sp-phone header.site .person #who { display:none; }
.sp-phone .site-bar .brand img, .sp-phone header.site .brand img { max-height:30px; max-width:96px; }
.sp-phone header.site:has(> .brand[hidden]) { row-gap:0; }