/*
 * Purpose: the administration header in one place: the brand, the three area menus (Build, Write,
 * Site) with their dropdown panels, the account buttons, and the group bar under the header. Earlier
 * releases spread these rules over admin.css and appearance.css, where later rules silently overrode
 * earlier ones (0.33's dropdowns were clipped by an old phone rule's overflow:auto).
 * Communication: loaded last by admin/screens/layout.shell, after admin.css and appearance.css; the
 * markup comes from admin/navigation/menu.py; admin/assets/admin.js opens panels and places them.
 * Settings: --header-z keeps the header above the editor's canvas and side panels but below dialogs
 * (text toolbar 1500, gallery 1700, conflict banner 2100).
 * Edge cases: panels are position:fixed and placed by admin.js from the button's position, so no
 * container's overflow can clip them; on phones they span the screen width under the header.
 * Known limitations: tests/test_architecture.py requires .adminbar, .adminnav, .areapanel, and .subnav
 * rules to live only here.
 * Examples: <header class="adminbar"> <nav class="adminnav"> <div class="navarea"> <a class="areabtn">
 */
:root{--header-z:1400}
.adminbar{position:sticky;top:0;z-index:var(--header-z);display:flex;align-items:center;flex-wrap:wrap;gap:12px;row-gap:8px;
  min-height:56px;padding:8px 20px;box-sizing:border-box;background:var(--ui-panel,#131313);border-bottom:1px solid var(--ui-border,#242424);box-shadow:0 2px 12px #0002}
.adminbar .brand{margin-right:auto}
.adminnav{display:flex;align-items:center;gap:4px;order:5;flex:1 1 100%;min-width:0}
.navarea{position:relative}
.adminnav .areabtn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:0;border-radius:var(--ui-radius,8px);background:transparent;
  color:var(--ui-muted,#999);text-decoration:none;font-size:14px;white-space:nowrap;box-shadow:none}
.adminnav .areabtn:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7}
.adminnav .areabtn:hover,.adminnav .areabtn[aria-expanded=true]{background:var(--ui-input,#262626);color:var(--ui-text,#fff)}
.navarea.current .areabtn{color:var(--ui-text,#fff);box-shadow:inset 0 -2px 0 var(--ui-accent,#7aa7ff)}
.adminnav .areabtn:focus-visible{outline:2px solid var(--ui-accent,#7aa7ff);outline-offset:2px}
.navcount{font-style:normal;font-size:11px;margin-left:4px;padding:1px 6px;border-radius:999px;background:var(--ui-accent,#7aa7ff);color:var(--ui-on-accent,#0b1220)}
.areapanel{position:fixed;left:0;top:0;z-index:calc(var(--header-z) + 1);display:grid;grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);gap:4px 18px;
  padding:16px 18px;background:var(--ui-panel,#15181e);border:1px solid var(--ui-border,#2e333d);border-radius:calc(var(--ui-radius,8px) + 4px);
  box-shadow:0 18px 50px #000a;max-width:calc(100vw - 16px);box-sizing:border-box}
.areapanel[hidden]{display:none}
.areapanel h3{margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ui-muted,#999);font-weight:600}
.areapanel section{display:flex;flex-direction:column;gap:1px}
.areapanel a{display:flex;justify-content:space-between;gap:10px;color:var(--ui-text,#eee);text-decoration:none;padding:7px 10px;margin:0 -10px;border-radius:6px;font-size:14px;white-space:nowrap}
.areapanel a:hover,.areapanel a:focus-visible{background:var(--ui-input,#262626);outline:none}
.areapanel a.active{color:var(--ui-accent,#7aa7ff);font-weight:600}
.subnav{position:sticky;top:var(--header-height,56px);z-index:calc(var(--header-z) - 1);display:flex;align-items:center;gap:2px;padding:0 22px;
  background:var(--ui-bg,#101010);border-bottom:1px solid var(--ui-border,#222);overflow-x:auto;max-width:100%;box-sizing:border-box}
.subnav a{color:var(--ui-muted,#888);text-decoration:none;padding:10px 12px;font-size:13px;border-bottom:2px solid transparent;white-space:nowrap;border-radius:0}
.subnav a:hover{color:var(--ui-text,#ddd)}.subnav a.active{color:var(--ui-text,#fff);border-bottom-color:var(--ui-accent,#7aa7ff)}
.subnav-where{color:var(--ui-muted,#888);font-size:12px;margin-right:10px;white-space:nowrap}
@media(max-width:760px){.adminbar{padding:8px 10px;gap:8px}.adminnav .areabtn{padding:8px 10px}
  .areapanel{grid-auto-flow:row;grid-auto-columns:auto;max-height:calc(100vh - 90px);overflow:auto}}
