/* Jonno's Office: "golden hour gallery". Plum and charcoal glass, brass hairlines, amber/coral light, cream type,
   Fraunces for the display face, DM Sans for everything else. Replaces the earlier teal reskin entirely. */
:root {
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bhq-round: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --plum: #2B1A2C; --plum-2: #3A2238; --plum-3: #4E2D4A;
  --brass: #C9A15B; --amber: #F2A541; --coral: #E8694A; --cream: #F4E9DA;

  --bg-0: #4E2D4A; --bg-1: #2E1B30; --bg-2: #150D18;
  --btn-bg: #F2A541; --btn-fg: #2A1828;
  --done: #F2A541; --ink-done: #F6C27A;
  --radius-lg: 20px; --radius-md: 14px;
}

/* the cards: plum glass with a brass hairline and a warm inner light */
.bhq-surface {
  --base: #2A1B2B; --glow: #E8694A; --hi: #F6EBDD; --mid: #DCC3AE; --dim: #A88F9E; --g1: .22; --g2: .1;
  background: linear-gradient(180deg, rgba(255, 214, 160, .07), transparent 42%, rgba(0, 0, 0, .18)), var(--base);
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 170, .16), inset 0 0 0 1px rgba(201, 161, 91, .26),
    0 10px 30px rgba(8, 3, 10, .45), 0 1px 2px rgba(8, 3, 10, .5);
}
.bhq-surface[data-s="done"] { --base: #5A3A16; --glow: #F2A541; --hi: #FFF0D6; --mid: #F6D49A; --dim: #E2B676; }
:where(#topbar, #floors, #panel, #feed, .bhq-dock, .bhq-sheet) [data-s="done"] { --s: #F2A541; }
:where(#topbar, #floors, #panel, #feed, .bhq-zoom, .bhq-dock, .bhq-sheet) :focus-visible { outline-color: #F2A541; }

/* type: the display face on titles and big numbers */
.bhq-h2, .bhq-tbig b, .bhq-stat b, .bhq-usage-pct { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.bhq-h2 { font-style: italic; font-size: 21px; }
.bhq-tbig b { font-size: 36px; font-variation-settings: "SOFT" 50, "WONK" 1; }
.bhq-label { letter-spacing: .04em; text-transform: uppercase; font-size: 10.5px; font-weight: 700; color: var(--dim); }
.bhq-label b { color: var(--amber); }

/* brand pill: the arch-and-sun mark + an italic wordmark */
.bhq-brand { border-radius: 999px; }
.bhq-mark { border-radius: 9px; box-shadow: 0 0 0 1px rgba(201, 161, 91, .5), 0 2px 8px rgba(232, 105, 74, .35); }
.bhq-word {
  font: italic 600 17px/1 var(--display);
  letter-spacing: -.005em;
  color: var(--cream);
  background: linear-gradient(92deg, #FFE3B0, #F2A541 55%, #E8694A);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* the floor list: the active floor glows amber */
.bhq-floor[aria-current="true"] .bhq-fnum { background: linear-gradient(160deg, #FFCB74, #E8894A); color: #2A1828; box-shadow: 0 2px 10px rgba(242, 165, 65, .45); }
.bhq-floor[aria-current="true"] { background: rgba(242, 165, 65, .12); box-shadow: inset 0 0 0 1px rgba(242, 165, 65, .35); }
.bhq-fnum { font-family: var(--display); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }

.bhq-shr-btn--main { background: linear-gradient(160deg, #FFCB74, #E8894A); color: #2A1828; }
.bhq-shr-btn--main:hover { background: linear-gradient(160deg, #FFD98F, #EE9A5E); }

/* the usage slider glows amber */
.bhq-slider { --gl: #F2A541; }

/* loader: a plum card with a brass track */
#scene .hq-loading, .hq-loading {
  color: var(--cream); gap: 14px; padding: 22px 30px 20px; border-radius: 20px;
  background: #2A1B2B; border: 1px solid rgba(201, 161, 91, .4);
  box-shadow: 0 18px 50px rgba(8, 3, 10, .55);
  font-family: var(--font);
}
.hq-loading-label { font: italic 600 18px/1.3 var(--display); letter-spacing: 0; color: var(--cream); }
.hq-loading-track { width: 140px; height: 3px; border-radius: 999px; background: rgba(244, 233, 218, .15); }
.hq-loading-track > i { background: linear-gradient(90deg, #F2A541, #E8694A); opacity: 1; }
:root[data-daylight="night"] .hq-loading { color: var(--cream); }

/* in-scene name tags: plum pills with a brass edge, cream text; the selected one glows amber */
.hq-scene { background-color: #2E1B30; }
.hqt { font-family: var(--font); }
.hqt-pill, :root[data-daylight] .hqt-pill { background: rgba(42, 27, 43, .86); border: 1px solid rgba(201, 161, 91, .45); color: var(--cream); box-shadow: 0 6px 18px rgba(8, 3, 10, .45); font-weight: 700; }
.hqt-stem, :root[data-daylight] .hqt-stem { background: rgba(242, 165, 65, .55); }
.hqt[data-mode="sel"] .hqt-pill, :root[data-daylight] .hqt[data-mode="sel"] .hqt-pill { background: linear-gradient(160deg, #FFCB74, #E8894A); color: #2A1828; border-color: transparent; box-shadow: 0 8px 24px rgba(232, 105, 74, .45); }

body { background: radial-gradient(70% 70% at 42% 38%, var(--bg-0) 0%, var(--bg-1) 55%, var(--bg-2) 100%); }
.wp-status { border-radius: 999px; }

@media (prefers-reduced-transparency: reduce) { .hq-loading { background: #2A1B2B; } }

/* the backdrop is a dusk now, not a white studio: every token takes its night value */
:root[data-sky="studio"] { --theme: 1; }
:root {
  --glass: color-mix(in srgb, rgba(42, 27, 43, .7) var(--n), rgba(255, 255, 255, .64));
  --glass-strong: color-mix(in srgb, rgba(42, 27, 43, .84) var(--n), rgba(255, 255, 255, .78));
  --glass-edge: color-mix(in srgb, rgba(201, 161, 91, .22) var(--n), rgba(255, 255, 255, .75));
}

/* the chat call-to-action in brass and amber */
.bhq-cta:not(:disabled), .bhq-wbtn {
  background: linear-gradient(135deg, #F2B45A, #E9875B) !important;
  color: #2A1828 !important;
  font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(233, 135, 91, .28), inset 0 1px 0 rgba(255, 240, 210, .6) !important;
}
.bhq-cta:not(:disabled):hover, .bhq-wbtn:hover { filter: brightness(1.06); }

/* phone bottom sheet in plum glass with a brass hairline */
.bhq-phone .bhq-sheet {
  background: linear-gradient(180deg, rgba(74, 44, 66, .94), rgba(42, 24, 40, .96)) !important;
  box-shadow: 0 -10px 40px rgba(10, 4, 12, .35), inset 0 1px 0 rgba(212, 170, 110, .45) !important;
}
@media (prefers-reduced-transparency: reduce) { .bhq-phone .bhq-sheet { background: #2E1B2C !important; } }