/* DESKTOP SHELL (6 Oct). Everything wider than a phone and taller than a phone on its side.

   WHY ITS OWN FILE: the same reason as phone-shell.css. app.css carries a landscape-desktop
   layout and a portrait-tablet layout, and a window 800 px wide gets the second one, where
   eight nav pills wrapped over the Get-the-app card and the bottom buttons wrapped into a
   three-row block. The coordinator's review of the proof shots (6 Oct) called it "broken".
   One rule set here out-ranks both by selector weight, so the old rules stay and nothing
   has to be reconciled.

   THE SHAPE: one slim glass bar at the top. Wordmark left; Menu, Feed, Board, Back, then
   search, camera, I am and the speaker, right. Everything else (Sign in, Go see it,
   Contribute, Accessibility, Larger controls) is in Menu. One bar at the bottom. The right
   side is positioned from the right edge in a chain (each right = the previous + its width),
   so there is no fixed x that a narrower window can break. */

@media (min-width:601px) and (min-height:521px) {
  :root {
    --d-t: 12px; --d-h: 44px; --d-edge: 20px;
    --d-sw: clamp(130px, 17vw, 300px);          /* the search field */
    --d-r-spk: calc(var(--d-edge) + 4px);
    --d-r-iam: calc(var(--d-r-spk) + 40px);
    --d-r-cam: calc(var(--d-r-iam) + 58px);
    --d-r-search: calc(var(--d-r-cam) + 42px);
    --d-r-nav: calc(var(--d-r-search) + var(--d-sw) + 14px);
    --d-glass: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 48%, rgba(0,0,0,.16) 100%), rgba(12,16,15,.68);
    --d-edgeln: .5px solid rgba(255,255,255,.24);
    --d-lift: inset 0 .5px 0 rgba(255,255,255,.36), inset 0 -.5px 0 rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.34);
    --d-mag: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.5 15.5L21 21'/></svg>");
    --d-spk-on: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z' fill='black'/><path d='M15.5 9a4 4 0 0 1 0 6M18 6.5a7.5 7.5 0 0 1 0 11'/></svg>");
    --d-spk-off: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9.5h3.5L12 5.5v13l-4.5-4H4z' fill='black'/><path d='M16 9.5l5 5M21 9.5l-5 5'/></svg>");
  }

  /* ---- the bar */
  html body:not(.brief-open) #pbar { display:block; position:fixed; z-index:39; pointer-events:none;
    left:var(--d-edge); right:var(--d-edge); top:var(--d-t); height:var(--d-h); border-radius:22px;
    background:var(--d-glass); border:var(--d-edgeln); box-shadow:var(--d-lift); box-sizing:border-box;
    -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5); }

  /* ---- wordmark */
  html body:not(.brief-open) #hud { position:fixed; z-index:41; top:var(--d-t); left:calc(var(--d-edge) + 18px); height:var(--d-h);
    width:auto; display:flex; align-items:center; background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  html body:not(.brief-open) #hud #title { margin:0; padding:0; border:0; transform:none; font-size:16px; line-height:1; letter-spacing:.06em; gap:.5em; }
  html body:not(.brief-open) #hud #title #mark { width:22px; height:22px; margin:0; transform:none; }
  html body:not(.brief-open) #hud #title::after, html body:not(.brief-open) #hud::after { display:none; }
  html body:not(.brief-open) #hud #count, html body:not(.brief-open) #hud #countLabel,
  html body:not(.brief-open) #hud #bearing, html body:not(.brief-open) #hud #tally {
    position:absolute !important; width:1px; height:1px; margin:0 !important; overflow:hidden; opacity:0 !important; pointer-events:none !important; }

  /* ---- nav: Menu, Feed, Board, Back */
  html body:not(.brief-open):not(.nav-open) #nav { position:fixed; z-index:41; top:var(--d-t) !important; height:var(--d-h); left:auto; right:var(--d-r-nav) !important;
    width:auto; display:flex; flex-direction:row; align-items:stretch; gap:0; padding:0 !important; border:0 !important; background:none !important;
    box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; transform:none; }
  html body:not(.brief-open):not(.nav-open) #nav > :not(#navMenu):not(#navFeed):not(#navBoard):not(#navBack) { display:none !important; }
  html body:not(.brief-open) #nav #navMenu  { order:0; } html body:not(.brief-open) #nav #navFeed { order:1; }
  html body:not(.brief-open) #nav #navBoard { order:2; } html body:not(.brief-open) #nav #navBack { order:3; }
  html body:not(.brief-open):not(.nav-open) #nav #navMenu, html body:not(.brief-open):not(.nav-open) #nav #navFeed,
  html body:not(.brief-open):not(.nav-open) #nav #navBoard, html body:not(.brief-open):not(.nav-open) #nav #navBack {
    position:relative; display:flex !important; align-items:center; justify-content:center; height:var(--d-h) !important; min-height:0 !important; min-width:0 !important;
    margin:0; padding:0 clamp(9px,1.2vw,16px) !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important; text-decoration:none; text-transform:uppercase; white-space:nowrap;
    font:500 11px/1 var(--ui) !important; letter-spacing:.1em !important; color:#f3efe4 !important; }
  html body:not(.brief-open) #nav #navFeed::before, html body:not(.brief-open) #nav #navBoard::before, html body:not(.brief-open) #nav #navBack::before {
    content:''; position:absolute; left:0; top:14px; bottom:14px; width:.5px; background:rgba(255,255,255,.2); }
  @media (hover:hover) { html body:not(.brief-open):not(.nav-open) #nav #navMenu:hover, html body:not(.brief-open):not(.nav-open) #nav #navFeed:hover,
    html body:not(.brief-open):not(.nav-open) #nav #navBoard:hover, html body:not(.brief-open):not(.nav-open) #nav #navBack:hover { color:var(--gold,#e9c46a) !important; } }
  /* Menu open: one glass sheet, every link as a row */
  html body.nav-open:not(.brief-open) #nav { position:fixed; z-index:70; top:var(--d-t) !important; right:var(--d-r-nav) !important; left:auto !important; width:228px !important; height:auto;
    display:flex; flex-direction:column; align-items:stretch; padding:5px !important; gap:2px !important; border:var(--d-edgeln) !important; border-radius:18px !important;
    background:rgba(7,9,10,.95) !important; box-shadow:0 12px 40px rgba(0,0,0,.5) !important; }
  html body.nav-open:not(.brief-open) #nav > * { display:flex !important; position:relative; align-items:center; justify-content:flex-start; height:44px !important; min-height:0 !important; margin:0;
    padding:0 16px !important; border:0 !important; border-radius:12px !important; background:transparent !important; box-shadow:none !important; text-decoration:none; text-transform:uppercase;
    font:500 11px/1 var(--ui) !important; letter-spacing:.1em !important; color:#f3efe4 !important; white-space:nowrap; }
  html body.nav-open:not(.brief-open) #nav > *::before { display:none; }
  html body.nav-open:not(.brief-open) #nav #navMenu { order:0; color:var(--gold,#e9c46a) !important; } html body.nav-open:not(.brief-open) #nav #navFeed { order:1; }
  html body.nav-open:not(.brief-open) #nav #navBoard { order:2; } html body.nav-open:not(.brief-open) #nav #navAccount { order:3; }
  html body.nav-open:not(.brief-open) #nav #navRotation { order:4; } html body.nav-open:not(.brief-open) #nav #navGive { order:5; }
  html body.nav-open:not(.brief-open) #nav #navAccess { order:6; } html body.nav-open:not(.brief-open) #nav #navLarge { order:7; }
  html body.nav-open:not(.brief-open) #nav #navBack { order:8; }
  @media (hover:hover) { html body.nav-open:not(.brief-open) #nav > *:hover { background:rgba(233,196,106,.14) !important; } }

  /* ---- search */
  html body:not(.brief-open) #search { position:fixed !important; z-index:41; top:calc(var(--d-t) + 5px) !important; right:var(--d-r-search) !important; left:auto !important; bottom:auto !important;
    width:var(--d-sw) !important; height:34px !important; }
  html body:not(.brief-open) #searchInput { height:34px !important; min-height:0 !important; width:100%; box-sizing:border-box; padding:0 12px 0 34px !important;
    font-size:13px !important; line-height:34px; letter-spacing:.02em; color:#eafff2 !important; background:rgba(255,255,255,.07) !important;
    border:.5px solid rgba(255,255,255,.2) !important; border-radius:17px !important; box-shadow:none !important; text-overflow:ellipsis; -webkit-appearance:none; appearance:none; }
  html body:not(.brief-open) #searchInput:focus { color:#fff8e6 !important; outline:none; border-color:rgba(233,196,106,.7) !important; }
  html body:not(.brief-open) #searchInput::placeholder { color:rgba(255,233,181,.7); }
  html body:not(.brief-open) #search::after { content:''; position:absolute; left:12px; top:50%; width:15px; height:15px; margin-top:-7.5px; pointer-events:none;
    background:rgba(255,233,181,.8); -webkit-mask:var(--d-mag) center/contain no-repeat; mask:var(--d-mag) center/contain no-repeat; }
  html body:not(.brief-open) #searchMsg { position:absolute; top:40px; right:0; left:auto; margin:0; padding:4px 10px; border-radius:10px; background:rgba(8,11,10,.92);
    font-size:10px; letter-spacing:.1em; white-space:nowrap; }
  html body:not(.brief-open) #searchMsg:empty { display:none; }

  /* ---- camera, I am, speaker: a tight row */
  html body:not(.brief-open) #quickCam { position:fixed !important; z-index:41; top:calc(var(--d-t) + 4px) !important; right:var(--d-r-cam) !important; left:auto !important; bottom:auto !important;
    width:36px !important; height:36px !important; min-height:0 !important; padding:0 !important; border-radius:50% !important; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg, rgba(255,230,194,.34), rgba(255,230,194,.08) 55%, rgba(0,0,0,.2)), rgba(24,20,14,.72) !important;
    border:1px solid rgba(233,196,106,.75) !important; color:#ffe6c2 !important; box-shadow:inset 0 .5px 0 rgba(255,255,255,.4), 0 2px 8px rgba(0,0,0,.4) !important; }
  html body:not(.brief-open) #quickCam svg { width:20px !important; height:20px !important; }
  html body:not(.brief-open) #quickCam::before { content:''; position:absolute; inset:-4px; }
  html body:not(.brief-open) #locate { position:fixed !important; z-index:41; top:calc(var(--d-t) + 4px) !important; right:var(--d-r-iam) !important; left:auto !important; bottom:auto !important;
    width:54px !important; height:36px !important; min-height:0 !important; padding:0 !important; margin:0; display:flex !important; align-items:center; justify-content:center;
    background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    font:500 11px/1 var(--ui) !important; letter-spacing:.1em !important; text-transform:uppercase; color:#f3efe4 !important; }
  html body:not(.brief-open) #humBtn { position:fixed !important; z-index:41; top:calc(var(--d-t) + 4px) !important; right:var(--d-r-spk) !important; left:auto !important; bottom:auto !important;
    width:36px; height:36px; min-height:0; padding:0 !important; margin:0; font-size:0 !important; line-height:0; color:transparent !important; background:none !important; border:0 !important;
    box-shadow:none !important; border-radius:0 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; overflow:visible; }
  html body:not(.brief-open) #humBtn::before { content:''; position:absolute; inset:-4px; }
  html body:not(.brief-open) #humBtn::after { content:''; position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; background:#93a39c; transition:background .15s ease;
    -webkit-mask:var(--d-spk-off) center/contain no-repeat; mask:var(--d-spk-off) center/contain no-repeat; }
  html body:not(.brief-open) #humBtn[aria-pressed="true"]::after { background:var(--gold,#e9c46a); -webkit-mask-image:var(--d-spk-on); mask-image:var(--d-spk-on); }

  /* ---- the counter, under the bar at the left */
  html body:not(.brief-open) #shareCount { display:flex; position:fixed; z-index:6; left:var(--d-edge); right:auto; top:calc(var(--d-t) + var(--d-h) + 8px); width:auto; height:24px;
    align-items:center; gap:5px; box-sizing:border-box; padding:0 12px; border-radius:12px; pointer-events:none; background:rgba(10,13,12,.55); border:.5px solid rgba(255,255,255,.16);
    font:500 11px/1 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.8); white-space:nowrap; }
  html body:not(.brief-open) #shareCount .sh { position:relative; pointer-events:auto; background:none !important; border:0 !important; box-shadow:none !important; margin:0; padding:0 !important;
    height:auto !important; min-height:0 !important; width:auto; font:inherit; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,230,194,.92); cursor:pointer; }
  html body:not(.brief-open) #shareCount .sh b { color:#fff; font-weight:600; }
  /* the key, folded, under the counter */
  html body:not(.brief-open) #key { position:fixed; z-index:30; left:var(--d-edge); top:calc(var(--d-t) + var(--d-h) + 40px) !important; bottom:auto !important; transform:none;
    width:max-content; max-width:260px; padding:0; border-radius:10px; background:rgba(10,13,12,.5); border:.5px solid rgba(255,255,255,.16);
    max-height:calc(100dvh - 260px); overflow:hidden; -webkit-backdrop-filter:blur(12px) saturate(1.3); backdrop-filter:blur(12px) saturate(1.3); }
  html body:not(.brief-open) #key:not(.collapsed) { background:rgba(10,13,12,.78); overflow-y:auto; width:260px; }
  html body:not(.brief-open) #key b { display:flex; align-items:center; height:28px; margin:0; padding:0 12px; font:500 11px/28px var(--ui); letter-spacing:.14em; cursor:pointer; }
  html body:not(.brief-open) #key b::after { content:'+'; margin-left:8px; letter-spacing:0; }
  html body:not(.brief-open) #key:not(.collapsed) b::after { content:'\2013'; }
  html body:not(.brief-open) #key.collapsed #keyRows { display:none; }
  html body:not(.brief-open) #key #keyRows { padding:2px 12px 10px; }

  /* ---- recent contributions: bottom right, clear of the bar and the filmstrip */
  html body:not(.brief-open) #recent { position:fixed; z-index:6; top:auto !important; right:var(--d-edge); bottom:calc(var(--pnl-h, 70px) + 22px); width:300px; max-height:30vh; overflow:hidden; }

  /* ---- the bottom bar: one row, one slab, centred */
  html body:not(.brief-open) #panel#panel { position:fixed; z-index:9; left:50% !important; right:auto !important; transform:translateX(-50%); width:min(860px, calc(100vw - 2 * var(--d-edge))) !important;
    min-width:0 !important; max-width:none !important; bottom:calc(var(--pick-h, 0px) + 14px) !important; height:42px; padding:0 !important; gap:0 !important;
    display:flex; flex-wrap:nowrap !important; align-items:stretch; justify-content:stretch !important; overflow:hidden; box-sizing:border-box; border-radius:21px;
    background:var(--d-glass); border:var(--d-edgeln); box-shadow:var(--d-lift); -webkit-backdrop-filter:blur(16px) saturate(1.5); backdrop-filter:blur(16px) saturate(1.5); }
  html body:not(.brief-open) #panel#panel button { position:relative; flex:1 1 auto; min-width:0; height:100%; min-height:0 !important; margin:0; padding:0 clamp(6px,1.1vw,16px) !important;
    background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; font:500 clamp(9px,.8vw,11px)/1 var(--ui) !important; letter-spacing:.1em !important;
    text-transform:uppercase; white-space:nowrap; color:#f3efe4 !important; overflow:hidden; text-overflow:ellipsis; }
  html body:not(.brief-open) #panel#panel button + button::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:.5px; background:rgba(255,255,255,.2); }
  html body:not(.brief-open) #panel#panel button.claim { color:var(--warm,#ffe6c2) !important; }
  html body:not(.brief-open) #panel#panel button.on { color:var(--gold,#e9c46a) !important; }
  @media (hover:hover) { html body:not(.brief-open) #panel#panel button:hover { background:rgba(233,196,106,.14) !important; } }
  html body:not(.brief-open) #hint { left:50%; transform:translateX(-50%); bottom:calc(var(--pnl-h, 0px) + 68px); text-align:center; }

  /* ---- Get the app: web only, one small pill under the bar at the right, dismissible */
  html body:not(.brief-open) .ga-float { top:calc(var(--d-t) + var(--d-h) + 10px) !important; right:var(--d-edge) !important; bottom:auto !important; left:auto !important;
    padding:4px 4px 4px 14px; gap:8px; border-radius:22px; }
  html body:not(.brief-open) .ga-float .ga-mark { display:none; }
  html body:not(.brief-open) .ga-float .ga-t { font-size:14px; white-space:nowrap; }
  html body:not(.brief-open) .ga-float .ga-txt .ga-s { display:none; }
  html body:not(.brief-open) .ga-float .ga-b { width:36px; min-width:36px; min-height:36px; padding:0; justify-content:center; border-radius:18px; }
  html body:not(.brief-open) .ga-float .ga-l { display:none; }
}
@media (min-width:601px) and (min-height:521px) and (max-width:820px) {
  :root { --d-sw: clamp(96px, 15vw, 150px); }
  html body:not(.brief-open) #hud #title { font-size:0; }
  html body:not(.brief-open) #hud #title #mark { width:26px; height:26px; }
}
@media (min-width:601px) and (max-height:700px) { html body:not(.brief-open) #recent { display:none !important; } }
/* 6 Oct: PHONE. a11y.css:219 grows every #nav button's tap area by 17 px above (::after, inset
   -17px -7px). The bar's buttons start at y 23, so BACK's grown area reached y 6 and sat on top
   of the camera / I am / speaker row on the island line (QA: "#quickCam, #humBtn, #locate
   covered by #navBack"). BACK sits at the right end of the bar, beside that row, so it gets no
   upward growth; its box is already 44 px tall and level with MENU, FEED and BOARD. */
@media (max-width:600px) {
  html body:not(.brief-open):not(.nav-open) #nav #navBack::after { inset: 0 -7px -17px -7px; }
  /* BACK is the only bar button whose label starts with an arrow glyph (&larr;), which iOS draws
     from a fallback font with a taller line box; at line-height 44 px that pushed the word ~12 px
     below MENU / FEED / BOARD (round4/meet-sim-402.png). A tight line box lets the flex
     centring do the work. */
  html body:not(.brief-open):not(.nav-open) #nav #navBack { line-height:1 !important; padding:0 !important; align-items:center !important; }
}