/* gw-ui.css: the shared building blocks (round 14, lane F). Loaded on every page, after the page's own styles:
     <link rel="stylesheet" href="/css/gw-ui.css">   (in <head>, after tokens.css / components.css / nav.css)
   Pairs with /gw-ui.js. API + class list: lanes/F/API.md. Motion uses transform/opacity only; calm + reduced motion stop it. */

/* ---------- Buttons: one family. .gw-btn is the gold primary; .ghost and .danger are the quiet and the risky. ---------- */
.gw-btn, .gw-btn--primary {
  position:relative; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  min-height:40px; padding:.5rem 1.25rem; border-radius:10px; cursor:pointer; text-decoration:none; white-space:nowrap;
  font-family:inherit; font-size:.92rem; font-weight:700; line-height:1.15; letter-spacing:.01em;
  /* r15 stopgap (Jack: the bright gold slab was blinding): a dark lantern-glass primary, gold edge and gold lettering.
     The proper button system comes with the design system. */
  color:#ffe2a3; background:linear-gradient(180deg,#3d2b16,#2a1c0d); border:1px solid #c8913f;
  box-shadow:0 2px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,222,150,.16);
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
  transition:transform var(--gw-dur-settle,240ms) var(--gw-ease-spring,cubic-bezier(.34,1.56,.64,1)), opacity var(--gw-dur-hover,140ms) ease;
}
/* glow bloom: a pre-drawn halo that only fades in (opacity), never a re-painted shadow */
.gw-btn::before { content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; opacity:0;
  box-shadow:0 4px 16px rgba(227,164,78,.3), 0 0 0 1px rgba(240,197,90,.85); transition:opacity var(--gw-dur-hover,140ms) var(--gw-ease-out,ease-out); }
.gw-btn:hover { transform:translateY(-2px); }
.gw-btn:hover::before, .gw-btn:focus-visible::before { opacity:1; }
.gw-btn:active { transform:translateY(1px) scale(.97); transition-duration:var(--gw-dur-press,80ms); transition-timing-function:ease-out;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.35); }
.gw-btn:not(.ghost):not(.danger):not(.gw-btn--ghost):not(.gw-btn--danger):hover { background:linear-gradient(180deg,#4a3419,#33230f); color:#fff0c8; }   /* r15 */
.gw-btn:active::before { opacity:0; }
.gw-btn:focus-visible { outline:2px solid #ffd98a; outline-offset:3px; }
.gw-btn.ghost, .gw-btn--ghost { color:#e2d6bd; background:rgba(255,255,255,.03); border-color:rgba(227,164,78,.34); box-shadow:none; }
.gw-btn.ghost::before, .gw-btn--ghost::before { box-shadow:0 4px 16px rgba(227,164,78,.22), 0 0 0 1px rgba(227,164,78,.6); }
.gw-btn.ghost:active, .gw-btn--ghost:active { box-shadow:inset 0 3px 7px rgba(0,0,0,.45); }
.gw-btn.danger, .gw-btn--danger { color:#f6c2bb; background:rgba(181,69,63,.2); border-color:#b5453f; box-shadow:none; }
.gw-btn.danger::before, .gw-btn--danger::before { box-shadow:0 4px 18px rgba(209,104,90,.35), 0 0 0 1px rgba(233,128,121,.7); }
.gw-btn.danger:active, .gw-btn--danger:active { box-shadow:inset 0 3px 7px rgba(0,0,0,.45); }
.gw-btn.sm { padding:.4rem .9rem; font-size:.84rem; }
.gw-btn.block { display:flex; width:100%; }
.gw-btn:disabled, .gw-btn[aria-disabled="true"] { opacity:.5; cursor:default; transform:none; }
.gw-btn:disabled::before, .gw-btn[aria-disabled="true"]::before { opacity:0; }
.gw-btnrow { display:flex; align-items:center; justify-content:flex-end; gap:.6rem; flex-wrap:wrap; }
.gw-btnrow.center { justify-content:center; }

/* ---------- Availability glow: a soft pulsing rim on anything actionable right now. Uses ::after (opacity only). ---------- */
:where(.gw-avail, .gw-btn.is-avail) { position:relative; }
.gw-avail::after, .gw-btn.is-avail::after { content:''; position:absolute; inset:-3px; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px rgba(var(--gw-glow,227,164,78),.6), 0 0 16px 3px rgba(var(--gw-glow,227,164,78),.5);
  opacity:.2; animation:gw-availpulse 2.2s ease-in-out infinite; }
@keyframes gw-availpulse { 0%,100% { opacity:.2; } 50% { opacity:1; } }

/* ---------- Wisp face: Georgia titles + Georgia italic accent sublines, for wisp / pixel pop-ups. ---------- */
.gw-wface, .gw-wface :is(button, input, select, textarea, label, .gw-btn) { font-family:Georgia,'Times New Roman',serif; font-variant-numeric:lining-nums tabular-nums; }
.gw-wface :is(h1,h2,h3,h4,.gw-title) { font-family:Georgia,'Times New Roman',serif; font-weight:700; color:#f2d9a0; letter-spacing:.01em; }
.gw-wface .gw-sub, .gw-sub.gw-wface { font-family:Georgia,'Times New Roman',serif; font-style:italic; color:rgb(var(--gw-wface-accent,214,190,150)); }

/* ---------- Plate: soft dark feathered backing for text over art (>= 4.5:1 for #f3ede0 and #cdbfa8 on any art). ---------- */
.gw-plate { position:relative; color:#f3ede0; background:rgba(10,8,14,.8); border-radius:12px;
  box-shadow:0 0 14px 8px rgba(10,8,14,.8); padding:.35rem .6rem; }
.gw-plate.soft { background:rgba(10,8,14,.78); box-shadow:0 0 22px 14px rgba(10,8,14,.78); }

/* ---------- Count-up / reward pop ---------- */
.gw-popping { display:inline-block; animation:gw-pop var(--gw-dur-reward,460ms) var(--gw-ease-spring,cubic-bezier(.34,1.56,.64,1)); }
.gw-spend { display:inline-block; animation:gw-spend 420ms ease-out; }
@keyframes gw-pop { 0%{transform:scale(1)} 35%{transform:scale(1.24)} 100%{transform:scale(1)} }
@keyframes gw-spend { 0%{transform:scale(1);opacity:1} 30%{transform:scale(.86);opacity:.55} 100%{transform:scale(1);opacity:1} }
.gw-fly-mote { position:fixed; left:0; top:0; width:16px; height:16px; margin:-8px 0 0 -8px; pointer-events:none; z-index:2147483000;
  image-rendering:pixelated; filter:drop-shadow(0 0 6px rgba(227,164,78,.85)); will-change:transform,opacity; }

/* ---------- Toasts: one at a time, top centre, clear of the Bones pill and the thumb. ---------- */
.gw-toasts { position:fixed; left:50%; top:12px; transform:translateX(-50%); z-index:2147482000; width:min(420px, calc(100vw - 24px));
  pointer-events:none; display:flex; flex-direction:column; align-items:center; }
.gw-toast { pointer-events:auto; box-sizing:border-box; width:100%; display:flex; align-items:center; gap:.7rem; padding:.65rem .8rem;
  min-height:48px; border-radius:12px; background:linear-gradient(180deg,#1d1626,#15111c); border:1px solid rgba(227,164,78,.45);
  box-shadow:0 14px 40px rgba(0,0,0,.6); color:#efe4cc; font-size:.88rem; line-height:1.35; text-align:left; cursor:default;
  opacity:0; transform:translateY(-10px) scale(.98); transition:opacity 180ms ease-out, transform 260ms var(--gw-ease-spring,cubic-bezier(.34,1.56,.64,1)); }
.gw-toast.on { opacity:1; transform:none; }
.gw-toast.out { opacity:0; transform:translateY(-6px); transition-duration:160ms; }
.gw-toast[data-href], .gw-toast.clickable { cursor:pointer; }
.gw-toast .gwt-ic { flex:0 0 auto; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem;
  border-radius:9px; background:rgba(var(--gwt-tint,227,164,78),.16); }
.gw-toast .gwt-ic img { width:20px; height:20px; image-rendering:pixelated; }
.gw-toast .gwt-txt { flex:1; min-width:0; }
.gw-toast .gwt-t { display:block; font-family:Georgia,serif; font-weight:700; color:#f2d9a0; font-size:.86rem; }
.gw-toast .gwt-b { display:block; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.gw-toast.reward { border-color:rgba(255,214,120,.75); box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 22px rgba(227,164,78,.3); }
.gw-toast.warn { border-color:rgba(209,104,90,.7); }
.gw-toast.gw-wface .gwt-b { font-family:Georgia,serif; }

/* ---------- Chrome modal (notification settings, bug report). gwModal() works on any markup; these are just the look. ---------- */
.gw-modal-bg { position:fixed; inset:0; z-index:2147480000; display:flex; align-items:center; justify-content:center; padding:1rem;
  background:rgba(6,4,10,.72); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); animation:gw-fadein 160ms ease-out both; }
.gw-modal { position:relative; box-sizing:border-box; width:min(420px,100%); max-height:calc(100dvh - 2rem); overflow:auto;
  background:linear-gradient(180deg,#191320,#140f1b); border:1px solid rgba(227,164,78,.38); border-radius:16px; padding:1.15rem 1.2rem 1.1rem;
  box-shadow:0 26px 70px rgba(0,0,0,.65); color:#efe6d4; font-size:.9rem; line-height:1.45; animation:gw-modalin 260ms var(--gw-ease-spring,cubic-bezier(.34,1.56,.64,1)) both; }
.gw-modal:focus { outline:none; }
.gw-modal h3 { margin:0 0 .25rem; font-size:1.12rem; color:#f2d9a0; font-family:Georgia,serif; font-weight:700; }
.gw-modal .gw-modal-sub { margin:0 0 .8rem; color:#c9bda6; font-size:.86rem; }
.gw-modal .gw-x { position:absolute; top:.35rem; right:.35rem; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:10px; color:#9a92a6; font-size:1.4rem; line-height:1; cursor:pointer; }
.gw-modal .gw-x:hover { color:#f3ede0; background:rgba(255,255,255,.06); }
.gw-modal .gw-x:focus-visible { outline:2px solid #ffd98a; outline-offset:1px; }
@keyframes gw-fadein { from { opacity:0; } to { opacity:1; } }
@keyframes gw-modalin { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }

/* switches (a checkbox that looks like a lantern toggle) */
.gw-switchrow { display:flex; align-items:center; gap:.75rem; min-height:44px; padding:.3rem .2rem; cursor:pointer; border-radius:9px; }
.gw-switchrow:hover { background:rgba(255,255,255,.03); }
.gw-switchrow > span { flex:1; }
.gw-switchrow.off { opacity:.4; pointer-events:none; }
.gw-switchrow.master { border:1px solid #3c3050; background:#181320; padding:.4rem .65rem; margin:0 0 .4rem; color:#f2d9a0; font-weight:700; }
.gw-switch { appearance:none; -webkit-appearance:none; flex:0 0 auto; position:relative; width:40px; height:22px; margin:0; border-radius:999px; cursor:pointer;
  background:#2a2433; border:1px solid #4a3f5c; transition:background 140ms ease, border-color 140ms ease; }
.gw-switch::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#8d859b;
  transition:transform 200ms var(--gw-ease-spring,cubic-bezier(.34,1.56,.64,1)), background 140ms ease; }
.gw-switch:checked { background:rgba(227,164,78,.35); border-color:#e3a44e; }
.gw-switch:checked::after { transform:translateX(18px); background:#ffd98a; }
.gw-switch:focus-visible { outline:2px solid #ffd98a; outline-offset:2px; }
.gw-saved { font-size:.8rem; color:#7fd6a0; opacity:0; transition:opacity 160ms ease; }
.gw-saved.on { opacity:1; }

/* ---------- Tooltip: one system (tooltip.js). Pages' older inline .uitip rules sit above this file and lose to it. ---------- */
.uitip { position:fixed; z-index:2147481000; max-width:236px; background:#1b1622; color:#ece3d2; border:1px solid #3c3050; border-radius:9px;
  padding:.45rem .62rem; font-size:.76rem; line-height:1.42; box-shadow:0 10px 28px rgba(0,0,0,.55); pointer-events:none; opacity:0;
  transform:translateY(3px); transition:opacity .12s ease, transform .12s ease; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; text-align:left; }
.uitip.on { opacity:1; transform:none; }
.uitip::after { content:''; position:absolute; left:var(--ax,50%); bottom:-5px; width:9px; height:9px; background:#1b1622; border-right:1px solid #3c3050;
  border-bottom:1px solid #3c3050; transform:translateX(-50%) rotate(45deg); }
.uitip.below::after { bottom:auto; top:-5px; border:none; border-left:1px solid #3c3050; border-top:1px solid #3c3050; }
.uitip b { color:#fff; font-weight:600; }
.uitip.wface { font-family:Georgia,'Times New Roman',serif; font-size:.82rem; font-variant-numeric:lining-nums; }
.uitip.pinned { border-color:rgba(227,164,78,.55); }
.uitip.pinned::after { border-color:rgba(227,164,78,.55); }

/* ---------- The shared header (nav.js adds .gw-head). Same width and alignment on every page, one row, compact on phones. ---------- */
header.gw-head { --gw-head-w:min(1320px, calc(100vw - 32px)); box-sizing:border-box; display:flex; align-items:center; flex-wrap:nowrap; gap:1rem;
  width:var(--gw-head-w); margin-left:calc((100% - var(--gw-head-w)) / 2); margin-right:calc((100% - var(--gw-head-w)) / 2);
  justify-content:flex-start; min-height:48px; position:relative; z-index:50; font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-style:normal; }
header.gw-head .brand { flex:0 0 auto; display:flex; align-items:center; gap:.5rem; font-family:Georgia,'Times New Roman',serif; font-size:1.38rem; font-weight:700;
  letter-spacing:.4px; text-decoration:none; white-space:nowrap; color:var(--gw-accent,#e3a44e); background:linear-gradient(180deg,#f7e7bd 0%,#e6ac54 52%,#bd7a2b 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
header.gw-head .brand img { height:32px; width:auto; -webkit-text-fill-color:initial; }
header.gw-head .topnav { display:flex; align-items:center; flex-wrap:nowrap; gap:.95rem; flex:0 0 auto; margin:0; font-size:.92rem; }
header.gw-head .topnav > a, header.gw-head .topnav .navdrop { flex:0 0 auto; }
header.gw-head .topnav a { color:var(--gw-muted,#9a917f); text-decoration:none; white-space:nowrap; padding:.15rem 0; border-bottom:2px solid transparent; font-size:.92rem; }
header.gw-head .topnav a:hover { color:var(--gw-text,#ece6da); }
header.gw-head .topnav a.navactive { color:var(--gw-accent,#e3a44e); border-bottom-color:var(--gw-accent,#e3a44e); }
header.gw-head .topnav a.navspecial { color:#c8a2ff; }
header.gw-head .topnav a.navspecial.navactive { color:#d7c0ff; border-bottom-color:#b388ff; }
header.gw-head .headright { display:flex; align-items:center; gap:.35rem; margin-left:auto; flex:0 0 auto; }
header.gw-head .auth { display:flex; align-items:center; gap:.45rem; flex-wrap:nowrap; white-space:nowrap; font-size:.88rem; color:var(--gw-muted,#9a917f); margin-left:.35rem; }
header.gw-head .auth a { color:var(--gw-accent,#e3a44e); text-decoration:none; }
header.gw-head .auth a:hover { text-decoration:underline; }
header.gw-head .auth .navuser { color:var(--gw-text,#ece6da); max-width:14ch; overflow:hidden; text-overflow:ellipsis; }
header.gw-head .gw-hctl { display:flex; align-items:center; gap:.1rem; }
.gw-hbtn { position:relative; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; margin:0;
  border:0; border-radius:10px; background:none; color:#9a95a3; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:color 140ms ease, transform 200ms var(--gw-ease-spring,cubic-bezier(.34,1.56,.64,1)); }
.gw-hbtn::before { content:''; position:absolute; inset:2px; border-radius:9px; background:rgba(227,164,78,.12); opacity:0; transition:opacity 140ms ease; }
.gw-hbtn:hover { color:#e3a44e; transform:translateY(-1px); }
.gw-hbtn:hover::before, .gw-hbtn[aria-expanded="true"]::before { opacity:1; }
.gw-hbtn:active { transform:translateY(1px) scale(.94); transition-duration:80ms; }
.gw-hbtn:focus-visible { outline:2px solid #ffd98a; outline-offset:-2px; }
.gw-hbtn svg { position:relative; width:20px; height:20px; }
.gw-hbtn[aria-pressed="true"] { color:#e3a44e; }
.gw-hbtn.gw-mute[aria-pressed="true"] { color:#6f6a79; }
/* motes counter */
header.gw-head #topmotes:empty { display:none; }
header.gw-head .topmotes { display:inline-flex; align-items:center; gap:.32rem; min-height:32px; box-sizing:border-box; font-size:.88rem; color:#cdbf9a;
  font-variant-numeric:tabular-nums; padding:3px 10px; margin-right:.25rem; border-radius:9px; background:rgba(227,164,78,.08); border:1px solid rgba(227,164,78,.2); cursor:help; }
header.gw-head .topmotes #wmotes-val { color:var(--gw-accent,#e3a44e); font-weight:700; display:inline-block; min-width:1ch; }
header.gw-head .topmotes .moteicon { width:16px; height:16px; image-rendering:pixelated; }
/* the bell button sits in the same 40px grid */
header.gw-head #bellmount { display:inline-flex; }
header.gw-head .gn-bell { width:40px; height:40px; box-sizing:border-box; justify-content:center; border-radius:10px; }
/* compact: one row (brand, motes, bell, menu). The nav becomes a panel under the header. */
.gw-menubtn { display:none; }
.gw-navx { display:none; }
header.gw-head.gw-compact { gap:.5rem; }
header.gw-head.gw-compact .brand { font-size:1.2rem; gap:.4rem; }
header.gw-head.gw-compact .brand img { height:26px; }
header.gw-head.gw-compact .gw-hctl, header.gw-head.gw-compact .auth { display:none; }
header.gw-head.gw-compact .gw-menubtn { display:inline-flex; }
header.gw-head.gw-compact .topnav { display:none; }
header.gw-head.gw-compact.gw-menu-open .topnav { display:flex; flex-direction:column; align-items:stretch; gap:0; position:fixed; z-index:2147479000;
  top:var(--gw-head-b,64px); left:8px; right:8px; max-height:calc(100dvh - var(--gw-head-b,64px) - 12px); overflow:auto; padding:.4rem;
  background:linear-gradient(180deg,#1a1421,#141019); border:1px solid rgba(227,164,78,.35); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.65);
  animation:gw-menuin 200ms var(--gw-ease-out,ease-out) both; }
header.gw-head.gw-compact.gw-menu-open .topnav > a { display:flex; align-items:center; min-height:44px; padding:0 .8rem; border-radius:10px; border-bottom:0; font-size:1rem; color:#d9cfbd; }
header.gw-head.gw-compact.gw-menu-open .topnav > a:hover, header.gw-head.gw-compact.gw-menu-open .topnav > a:focus-visible { background:rgba(227,164,78,.12); color:#fff; }
header.gw-head.gw-compact.gw-menu-open .topnav > a.navactive { color:#e3a44e; background:rgba(227,164,78,.08); box-shadow:inset 3px 0 0 #e3a44e; }
header.gw-head.gw-compact.gw-menu-open .gw-navx { display:block; border-top:1px solid rgba(255,255,255,.08); margin-top:.35rem; padding-top:.35rem; }
.gw-navx .gw-navx-row { display:flex; gap:.4rem; flex-wrap:wrap; padding:.2rem .2rem .3rem; }
.gw-navx .gw-navx-btn { flex:1 1 30%; min-width:96px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; padding:0 .6rem;
  border-radius:10px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:#cfc5b4; font:inherit; font-size:.86rem; cursor:pointer; }
.gw-navx .gw-navx-btn svg { flex:0 0 auto; width:18px; height:18px; }
.gw-navx .gw-navx-btn span { white-space:nowrap; }
.gw-navx .gw-navx-btn[aria-pressed="true"] { border-color:rgba(227,164,78,.55); color:#f2d9a0; }
.gw-navx .gw-navx-btn:active { transform:scale(.97); }
.gw-navx .gw-navx-auth { display:flex; align-items:center; justify-content:space-between; gap:.6rem; min-height:44px; padding:0 .8rem; color:#9a917f; font-size:.9rem; }
.gw-navx .gw-navx-auth a { color:#e3a44e; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
@keyframes gw-menuin { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

/* ---------- Calm mode (header toggle, saved as gw_calm_v2 since r15) + reduced motion ---------- */
html.gw-calm *, html.gw-calm *::before, html.gw-calm *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
@media (prefers-reduced-motion: reduce) {
  .gw-btn, .gw-hbtn, .gw-toast { transition:none; }
  .gw-btn:hover, .gw-btn:active, .gw-hbtn:hover, .gw-hbtn:active { transform:none; }
  .gw-avail::after, .gw-btn.is-avail::after { animation:none; opacity:.7; }
}
html.gw-calm :is(.gw-btn, .gw-hbtn):is(:hover, :active) { transform:none; }
html.gw-calm :is(.gw-avail, .gw-btn.is-avail)::after { animation:none; opacity:.7; }
.gw-modal > h3:first-of-type { padding-right:2.4rem; }
/* account: one 40px button, a small menu under it */
header.gw-head .auth { position:relative; margin-left:0; }
.gw-acct .gw-acct-i { position:relative; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  font-family:Georgia,serif; font-weight:700; font-size:.92rem; color:#231708; background:linear-gradient(180deg,#f7e7bd,#e6ac54 60%,#bd7a2b); box-shadow:0 0 0 1px rgba(0,0,0,.4); }
.gw-acct .navonline { position:absolute; right:5px; bottom:6px; width:8px; height:8px; margin:0; box-shadow:0 0 0 2px #0f0d13, 0 0 6px 1px rgba(70,210,122,.7); }
.gw-acctmenu { position:absolute; right:0; top:calc(100% + 6px); z-index:70; min-width:170px; padding:.35rem; background:#16131d; border:1px solid rgba(227,164,78,.3);
  border-radius:12px; box-shadow:0 14px 40px rgba(0,0,0,.55); display:flex; flex-direction:column; text-align:left; animation:gw-menuin 160ms ease-out both; }
.gw-acctmenu[hidden] { display:none; }
.gw-acctmenu .gw-acct-name { padding:.45rem .65rem .3rem; color:#ece6da; font-size:.88rem; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
header.gw-head .gw-acctmenu a { display:flex; align-items:center; min-height:40px; padding:0 .65rem; border-radius:8px; color:#e3a44e; text-decoration:none; font-size:.9rem; }
header.gw-head .gw-acctmenu a:hover, header.gw-head .gw-acctmenu a:focus-visible { background:rgba(227,164,78,.12); text-decoration:none; }

/* r14 integration: the compact header never overflows a phone. The brand shrinks (and drops its words when tight) so the
   motes, bell and menu always fit; nothing here depends on a trial wide layout. */
header.gw-head.gw-compact { min-width:0; }
header.gw-head.gw-compact .brand { flex:0 1 auto; min-width:0; overflow:hidden; }
header.gw-head.gw-compact .brand img { flex:0 0 auto; max-width:120px; object-fit:contain; }
header.gw-head.gw-compact .headright { flex:0 0 auto; min-width:0; }
header.gw-head.gw-compact .topmotes { padding:3px 8px; margin-right:0; }
header.gw-head.gw-tight .brand-t { display:none; }
/* r14 fix F01: one row that fits a member's nav at 1280 (5-digit motes) and the owner's (Admin, Sandbox) at 1366. */
header.gw-head { gap:.8rem; }
header.gw-head .brand { font-size:1.26rem; }
header.gw-head .topnav { gap:.62rem; }
header.gw-head .topnav a { font-size:.87rem; letter-spacing:0; }
header.gw-head .topnav a.navspecial::before { display:none; }
header.gw-head .headright { gap:.15rem; }
header.gw-head .gw-hctl { gap:0; }
header.gw-head .topmotes { padding:3px 8px; margin-right:.15rem; }
/* Compact on a laptop/tablet (700px and up): the header keeps its full width, brand left, controls right; only the links
   move into the menu, which drops down under the menu button. */
@media (min-width:700px) {
  header.gw-head.gw-compact .gw-hctl, header.gw-head.gw-compact .auth { display:flex; }
  header.gw-head.gw-compact.gw-menu-open .gw-navx { display:none; }
  header.gw-head.gw-compact.gw-menu-open .topnav { left:auto; right:max(8px, calc((100vw - var(--gw-head-w)) / 2)); width:260px; }
}
@media (max-width:699.98px) {
  header.gw-head.gw-compact { max-width:100%; }
  header.gw-head .topnav { display:none; }
  header.gw-head .gw-hctl, header.gw-head .auth { display:none; }
  header.gw-head .gw-menubtn { display:inline-flex; }
  header.gw-head.gw-menu-open .topnav { display:flex; }
}

/* r14 fix F01: the same geometry before nav.js runs (a long page paints its raw header first), so the header never
   starts 688px wide and then jumps to full width. */
header:has(> #topnav):not(.gw-head) { box-sizing:border-box; display:flex; align-items:center; flex-wrap:nowrap; gap:.8rem; min-height:48px;
  width:min(1320px, calc(100vw - 32px)); margin-left:calc((100% - min(1320px, calc(100vw - 32px))) / 2); margin-right:calc((100% - min(1320px, calc(100vw - 32px))) / 2); }
header:has(> #topnav):not(.gw-head) .brand { font-size:1.26rem; flex:0 0 auto; }
header:has(> #topnav):not(.gw-head) .headright { margin-left:auto; }
@media (max-width:699.98px) { header:has(> #topnav):not(.gw-head) { max-width:100%; } header:has(> #topnav):not(.gw-head) .brand { font-size:1.2rem; } }