/* ===========================================================
   Z3FRAME — Ardarine2 page frame for Z3POC-WEB-RADIO
   Loaded LAST (after z3dmr.css + z3ui.css) so the frame wins
   over the console theme. Scope: page background, header,
   navigation, footer. It does NOT restyle the terminal —
   .panel / .radio-screen / .log-item stay exactly as they are.

   Brand images are LOCAL copies in assets/brand/. They cannot be
   hotlinked: the Content-Security-Policy in .htaccess allows
   img-src 'self' data: only, so hamradio.mk would be blocked.

>>> NEW FRAME ART: assets/brand/z3poc1.png (1000x191) + z3poc2/3.png (frame)
>>> plus assets/brand/z3poc4.png (1000x170) — the bottom edge, see section 5 <<<
   The art is split into three parts, and the rows below were MEASURED pixel
   by pixel (canvas, column x=250) in z3poc1.png. Positions are % of the image
   WIDTH, which is also the unit the header background is scaled in:
     0.0% .. 2.6%    chrome gradient band (orange lights at the far corners)
     2.7% .. 3.3%    black gap
     3.4% ..10.1%    chrome inset panel  -> the logo sits in here (6.7cqw box)
    10.2% ..11.1%    cyan line
    11.2% ..13.5%    dark gap
    13.6% ..18.5%    dark bar            -> nav row (4.9cqw) + button texture
    18.6% ..19.0%    bottom edge of the art
   z3poc2.png (1000x91) is the continuation: bar edge, cyan line, panel top.
   z3poc3.png (1000x91) is the flat panel tile, repeated down the content area.

   HOW THE HEADER IS PLACED — and why it uses cqw, not %.
   The art is `background-size:100% auto`, so it scales with the header WIDTH
   while every element inside the header keeps its pixel size (the logo is a
   fixed 410px, a nav chip is ~35px). Percent offsets cannot do both at once:
     - `top`/`bottom` on an absolute box resolve against the parent HEIGHT
     - `margin`/`padding` % resolve against the containing block WIDTH, which
       here is .z3-hdr-inner (narrower than the header because of its own
       padding), not the header the art is painted in
     - `height:%` needs a definite parent height, and .z3-hdr-inner has none
   So the header is made an inline-size CONTAINER (`.z3-hdr{container-type:
   inline-size}`) and every offset is written in `cqw` == 1% of the header
   width == exactly the art's own unit. The logo box and the nav box are then
   given the exact height of the panel (6.7cqw) and of the bar (4.9cqw) with
   `align-items:center`, so both stay centred at ANY window size with no
   media-query compensation. Verified live at 900 / 1025 / 1280 / 1600 / 1920.

   The ?v=1 on every z3poc*.png reference is a cache-buster: replace the art and
   bump that number, or browsers will keep serving the old PNG from their cache.
   (The logo SVGs get ?v=<filemtime> from PHP instead — see app_head/app_foot.)

   Old Ardarine2 art (kept on disk for rollback, no longer referenced):
     Ardarine2_bg.jpg / Ardarine2_headerArt1024.png / Ardarine2_circletech.png
     Ardarine2_logo.png / Ardarine2_belowheaderCtablet.png
   Still used: Ardarine_social_*.png (social icon files).
   =========================================================== */

/* ---------- 1. page background (flat — the frame carries the art now) ----------
   NOTE the capital "A" on the Ardarine2_* files: they are stored exactly as
   they were downloaded from hamradio.mk. The filesystem is case-sensitive, so
   a lowercase "a" silently 404s. The z3poc*.png files are all lowercase. */
body.app-body{background-color:#05080c}

/* ---------- 2. the frame itself: panel art from z3poc2 + z3poc3 ---------- */
.z3-frame{flex:1 0 auto;width:100%;display:flex;flex-direction:column;min-height:100vh;
  border-left:1px solid #2a3b44;border-right:1px solid #2a3b44;
  background:
    url("brand/z3poc2.png?v=1") center top/100% auto no-repeat,
    url("brand/z3poc3.png?v=1") center top/100% auto repeat-y,
    rgba(7,11,16,.9);
  box-shadow:0 0 60px rgba(0,0,0,.6)}

/* ---------- 3. header ---------- */
.z3-hdr{position:relative;container-type:inline-size;padding:0 0 .5cqw;
  background:url("brand/z3poc1.png?v=1") center top/100% auto no-repeat}
/* The Ardarine2 side circles are gone — they belonged to the old header art.
   Their ::before/::after hooks stay (used by the phone breakpoint). */
.z3-hdr::before,.z3-hdr::after{content:none}
/* max-width:none on purpose: the box must span the whole header, because the
   art is painted on .z3-hdr at 100% and every cqw inside resolves against it.
   Capping this box at 1480px while the header is wider would push the nav row
   off the dark bar on big screens.
   padding-top:3.4cqw == the top edge of the chrome inset panel. */
.z3-hdr-inner{position:relative;z-index:1;width:100%;max-width:none;margin:0 auto;
  padding:3.4cqw clamp(1rem,3vw,2.8rem) 0}

/* brand: forum logo on wide screens, compact wordmark on phones.
   The logo box is EXACTLY the panel (6.7cqw) and the image is centred in it, so
   the logo stays optically centred however wide the window is. */
.z3-hdr-logo{height:6.7cqw;display:flex;align-items:center;justify-content:center;margin:0}
.z3-hdr-logo img{display:block;margin:0 auto;width:100%;max-width:min(410px,60%);height:auto;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.z3-hdr-wordmark{display:none;align-items:center;justify-content:center;gap:.55rem;
  font-weight:800;letter-spacing:.06em;color:var(--text)}
.z3-hdr-wordmark .logo-text{font-size:1.05rem}

/* hamburger (phones only) */
.z3-hdr-toggle{display:none;position:absolute;right:clamp(1rem,3vw,2.8rem);top:14px;z-index:3;
  flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;padding:0 9px;
  background-color:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:9px;cursor:pointer}
.z3-hdr-toggle span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:.2s}
.z3-hdr-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.z3-hdr-toggle.open span:nth-child(2){opacity:0}
.z3-hdr-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* social icons — they sit on the chrome band (rows 0..26 of z3poc1.png), right
   on the orange lights, absolutely placed so they do NOT push the nav row out
   of the dark bar.
   NOTE: `top` would be a % of the HEADER HEIGHT (absolute offsets use height),
   so the offset lives in padding-top, which is a % of the WIDTH like the rest. */
.z3-social{position:absolute;right:clamp(1rem,3vw,2.8rem);top:0;z-index:2;
  display:flex;align-items:center;justify-content:flex-end;
  gap:10px;flex-wrap:wrap;padding:0.3% 0 0;margin:0}
/* NOTE the direct child selector `> a`. The sign-in buttons live inside
   .z3-social-who, so a plain `.z3-social a` also matched THEM and, with a higher
   specificity than `.btn-primary`, replaced its amber background with a dark
   one — leaving near-black text on a dark chip, i.e. an unreadable button. The
   chip styling is for the four icon links only. */
.z3-social > a{display:flex;align-items:center;justify-content:center;height:30px;padding:0 8px;
  border-radius:8px;border:1px solid var(--line);background-color:rgba(0,0,0,.35);transition:.15s}
.z3-social > a:hover{border-color:var(--amber);background-color:rgba(255,176,58,.12);text-decoration:none}
.z3-social img{display:block;height:30px;width:auto}
.z3-social-who{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.z3-social-who .who-call{font:600 12px var(--mono);color:var(--green)}
.z3-social-who .avatar{width:26px;height:26px;font-size:.7rem}

/* ---------- 4. navigation (was .topbar-nav inside .topbar) ---------- */
.topbar-nav{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;align-items:center;
  margin:3.5cqw 0 0;padding:0;border-bottom:0;height:4.9cqw}
/* 3.5cqw = 13.6% - 10.1%: the gap between the panel and the top of the dark
   bar. The row box is the bar itself (4.9cqw) and align-items:center drops the
   chips into its middle — no height compensation, no media queries. */
.topbar-nav a{color:#9aa9bd;padding:.45rem .78rem;border-radius:9px;font-weight:600;font-size:.86rem}
.topbar-nav a:hover{color:#fff;background-color:rgba(255,255,255,.07);text-decoration:none}
.topbar-nav a.active{color:var(--amber);background-color:rgba(255,176,58,.14)}

/* ---------- 4b. grouped menus (hamradio.mk style) ---------- */
.topbar-nav .topbar-nav-link{display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .78rem;border-radius:9px;font-weight:600;font-size:.86rem;color:#9aa9bd}
.topbar-nav .topbar-nav-link.active{color:var(--amber);background-color:rgba(255,176,58,.14)}
.z3-nav-group{position:relative}
.z3-nav-btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  color:#9aa9bd;padding:.45rem .78rem;border-radius:9px;font-weight:600;font-size:.86rem;
  font-family:var(--sans);background:transparent;border:1px solid transparent;transition:.15s}
.z3-nav-btn:hover{color:#fff;background-color:rgba(255,255,255,.07)}
.z3-nav-caret{opacity:.6;transition:transform .18s}
.z3-nav-group.active>.z3-nav-btn{color:var(--amber)}
.z3-nav-group.open>.z3-nav-btn{color:var(--amber);background-color:rgba(255,176,58,.14);
  border-color:rgba(255,176,58,.3)}
.z3-nav-group.open>.z3-nav-btn .z3-nav-caret{transform:rotate(180deg);opacity:1}
.z3-nav-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:40;min-width:210px;
  display:flex;flex-direction:column;gap:2px;padding:6px;margin:0;
  background:#0c1421f2;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 44px #000a;backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s,transform .16s,visibility .16s}
/* open by JS (click) — the accessible path — or by hover for mouse users */
.z3-nav-group.open>.z3-nav-menu,
.z3-nav-group:hover>.z3-nav-menu,
.z3-nav-group:focus-within>.z3-nav-menu{opacity:1;visibility:visible;transform:none}
.z3-nav-menu a{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;border-radius:8px;
  color:#c2d3e6;font-size:.88rem;font-weight:600;white-space:nowrap}
.z3-nav-menu a .z3i{opacity:.7}
.z3-nav-menu a:hover{color:#fff;background:rgba(255,255,255,.06);text-decoration:none}
.z3-nav-menu a.active{color:var(--amber);background:rgba(255,176,58,.12)}
.z3-nav-menu a.active .z3i{opacity:1}

/* ---------- 5. footer: z3poc4.png closes the bottom of the window ----------
   z3poc4.png is 1000x170 and is the MIRROR of the header art: a dark field on
   top (rows 0..112) and the metal bar with its orange lamps on the BOTTOM
   (rows 113..169). MEASURED with canvas, % of the image WIDTH:
     0.0% ..11.2%    dark field (the footer body sits on this)
    11.3% ..12.6%    top edge of the metal
    12.7% ..16.1%    the metal itself — lamps at 4.4%..7.8% and 92.1%..95.5%,
                     the orange triangle at 48.1%..50.7%
    16.2% ..16.9%    lower lip of the metal
   At `background-size:100% auto` the image is 17% of the footer WIDTH, so the
   metal is (17% - 11.3%) = 5.7% of the width tall. .foot-base reserves 6.2%
   of that (0.5% clearance) so the copyright row never lands ON the metal. */
.site-foot{flex-shrink:0;
  background:url("brand/z3poc4.png?v=1") center bottom/100% auto no-repeat,
    rgba(6,10,11,.72)}
.foot-logo{display:block;margin:0 auto;width:100%;max-width:230px;opacity:.9;
  padding:22px 0 4px;filter:drop-shadow(0 3px 10px rgba(0,0,0,.8))}
/* the class sits on the <a>, so the <img> needs the size cap too — otherwise it
   lays out at its 872px attribute width and overflows the footer. */
.foot-logo img{display:block;width:100%;max-width:230px;height:auto;margin:0 auto}
.foot-grid{max-width:1480px;padding:1.6rem clamp(1rem,3vw,2.8rem)}
/* align the bottom bar with the grid above it (it was 1320px in the old theme) */
.foot-base{max-width:1480px;padding:1rem clamp(1rem,3vw,2.8rem) 6.2%}
.foot-social{display:flex;gap:10px;margin-top:.8rem}
.foot-social a{display:flex;align-items:center;justify-content:center;height:30px;padding:0 8px;
  border-radius:8px;border:1px solid var(--line);background:rgba(0,0,0,.35);transition:.15s}
.foot-social a:hover{border-color:var(--amber);background:rgba(255,176,58,.12);text-decoration:none}
.foot-social img{display:block;height:30px;width:auto}
.foot-made{color:var(--muted)}
.foot-author{color:var(--text)}
.foot-call{color:var(--green);font-weight:600}

/* ---------- 6. buttons carry the same art (the dark bar) ----------
   z3poc1.png is 1000x191 and the dark bar is rows 136..185 (13.6%..18.5%, the
   same bar the nav row sits in). At background-size 1000px the art is 1:1, so
   `center -138px` shows exactly rows 138..138+H of the bar for any button up
   to ~47px tall — two rows of padding below the bar's top edge.
   Every hover/active rule above uses background-COLOR on purpose: a
   `background:` shorthand there would drop background-image again.
   The .active/.hover selectors below are NOT redundant: the legacy theme
   (z3dmr.css) still uses the `background:` shorthand on them, and that
   shorthand wins over a plain `.topbar-nav a` rule by specificity. */
.topbar-nav a,.z3-nav-btn,.z3-social > a,.z3-hdr-toggle,.foot-social a,
.topbar-nav a.active,.topbar-nav a:hover,
.z3-nav-menu a.active,.z3-nav-menu a:hover{
  background-image:url("brand/z3poc1.png?v=1");
  background-size:1000px auto;background-position:center -138px;
  background-repeat:no-repeat;
  border:1px solid rgba(122,142,164,.26)}
.topbar-nav a:hover,.z3-nav-btn:hover{border-color:rgba(255,176,58,.45)}
.z3-social > a:hover,.foot-social a:hover{border-color:var(--amber)}

/* ---------- 7. phones: compact logo, collapsible menu ---------- */
@media(max-width:820px){
  /* the art no longer drives the layout here: the phone header is a normal
     flow, so the container and the cqw boxes have to be switched off */
  .z3-hdr{container-type:normal;padding:14px 0 0}
  .z3-hdr-inner{padding-bottom:0}
  .z3-hdr-logo{height:auto;display:block}
  .z3-hdr-logo img{display:none}
  .z3-hdr-wordmark{display:flex;padding-right:52px}
  .z3-hdr-toggle{display:flex}
  .z3-social{position:static;right:auto;top:auto;margin-top:10px;padding:10px 0;
    justify-content:center;border-top:1px solid rgba(42,59,68,.7)}
  .z3-social-who{margin-left:0;width:100%;justify-content:center}

  .topbar-nav{display:none;flex-direction:column;gap:.2rem;padding-bottom:.6rem;
    height:auto;margin:0;align-items:stretch}
  /* The open menu is a DRAWER, not a block in the page flow: it hangs from the
     bottom of the header down to the bottom of the window and scrolls inside
     itself. It used to sit in the flow with all four sub-lists already expanded,
     which measured 973px of menu inside a 1118px header — on a 360x640 phone
     that is the menu swallowing the whole platform, with nothing but the X to
     get out of it. --z3-menu-top is the header's bottom edge; the header is a
     normal flow box, so app_head.php measures it and hands the value over. */
  .topbar-nav.open{display:flex;position:fixed;left:0;right:0;
    top:var(--z3-menu-top,56px);bottom:0;z-index:60;margin:0;
    padding:.5rem clamp(1rem,3vw,2.8rem)
      calc(64px + env(safe-area-inset-bottom,0px) + .6rem);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    background:#070b10f7;border-top:1px solid var(--line);box-shadow:0 18px 40px #000b}
  /* nothing scrolls behind an open drawer */
  html.z3-menu-open,html.z3-menu-open body{overflow:hidden}
  /* Long-press on the terminal highlighted whole rows and popped Android's
     Copy/Share callout over the log, every single time. Chrome and the
     controls stop being selectable; inputs, textareas and the chat/log text
     the operator means to copy keep their selection. One rule to revert. */
  .topbar,.mobile-tabbar,.op-strip,.op-tx,.ptt,.mtab,.btn,.tab,.chip{
    -webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
  .log-list,.log-body{-webkit-touch-callout:none}
  input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text}
  .topbar-nav a{padding:.7rem .8rem}
  .topbar-nav .topbar-nav-link{padding:.7rem .8rem}
  /* On a phone the dropdowns become plain stacked lists inside the hamburger
     menu — a floating menu on a narrow column is unusable with a thumb. They
     start SHUT and open on a tap: stacked open they were most of the 973px. */
  .z3-nav-group{width:100%}
  .z3-nav-btn{width:100%;justify-content:flex-start;padding:.7rem .8rem}
  /* the caret is back on a phone: the sub-lists shut again, so the arrow is the
     only thing that says there is more under the label */
  .z3-nav-caret{display:block;margin-left:auto}
  .z3-nav-menu{position:static;display:none;min-width:0;
    margin:0 0 .4rem .9rem;padding:2px 0;border:0;border-left:1px solid var(--line);
    border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
  /* :hover and :focus-within both stick after a tap on a touch screen — the
     pointer stays over the button and the focus stays on it — so they would hold
     a sub-list open after the JS closed it. Only the JS-set .open opens it. */
  .z3-nav-group:hover>.z3-nav-menu,.z3-nav-group:focus-within>.z3-nav-menu{display:none}
  .z3-nav-group.open>.z3-nav-menu{display:flex;opacity:1;visibility:visible;transform:none}
  .nav-user{display:flex;align-items:center;gap:.6rem;margin-top:.4rem;padding-top:.8rem;
    border-top:1px solid var(--line);font-family:var(--mono);font-size:.85rem}
  .nav-user .user-call{color:var(--text);font-weight:600}
  .nav-user .btn{margin-left:auto}
}
@media(max-width:760px){
  .foot-logo{max-width:180px}
  .foot-logo img{max-width:180px}
}
/* No min-width:1400px block any more — the cqw layout needs no compensation
   for the fixed-size logo and chips. Verified at 900/1025/1280/1600/1920px:
   logo centred on 6.75% at every width, nav row exactly 13.6%..18.5%. */
/* <=720px the mobile tab bar is fixed over the bottom edge, so the metal bar
   would be invisible there — drop it and give the padding back. */
@media(max-width:720px){
  .site-foot{background-image:none}
  .foot-base{padding-bottom:1rem}
}
@media(max-width:1099px) and (min-width:821px){
  /* the chrome inset also gets short here, so the logo shrinks with it */
  .z3-hdr-logo img{max-width:min(360px,64%)}
  /* and the social chips shrink and move up to the top edge so they end at the
     panel border (3.4%) instead of poking into it */
  .z3-social{padding-top:0}
  .z3-social > a{height:26px}
  .z3-social img{height:26px}
}