/* Static references (guides, legal, species pages, pre-hydration shells).
   The header itself is styled by /static-chrome.css, generated from the app's
   own src/index.css. This file carries what the app sets inline in JSX, the
   phone tab bar, and page layout that matches .aq-page-content. */

/* ---- Header: the JSX inline styles of the app chrome ---- */
@media(max-width:350px){.fishician-mobile-nav .fishician-mobile-tab{padding-inline:0}}
.fishician-site-header{position:sticky;top:0;z-index:300}
.fishician-site-header .aq-top-shell{backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);padding:12px 16px;display:flex;align-items:center;gap:16px;box-sizing:border-box;color:var(--aq-text);font-family:Arial,sans-serif;font:-webkit-small-control}
.fishician-site-header .aq-brand-lockup{display:flex;align-items:center;gap:10px;min-width:0;background:transparent;border:0;padding:4px 8px 4px 4px;color:inherit;text-align:left;text-decoration:none}
/* The app renders the tagline only on wide screens and its rules hide it there too; the
   phone lockup has no tagline, so the name is the hidden last child (logo mark only). */
.fishician-site-header .aq-desktop-nav-btn{text-decoration:none}
.fishician-site-header .aq-desktop-nav-icon>img,.fishician-site-header .aq-desktop-nav-icon>svg{display:block;width:18px;height:18px;object-fit:contain}
.fishician-header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.fishician-header-actions .aq-hit{box-sizing:border-box}
.fishician-site-auth{display:flex;align-items:center;gap:10px;flex-shrink:0}
.aq-member-top-shell .fishician-site-auth{gap:inherit}
.fishician-sign-in{display:inline-flex;align-items:center;min-height:44px;padding:8px;background:none;border:0;color:var(--aq-sub);font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none}
.fishician-sign-in:hover{color:var(--aq-text)}
.fishician-sign-up{display:inline-flex;align-items:center;min-height:44px;padding:8px 20px;border-radius:6px;background:var(--aq-accent);color:var(--aq-on-accent);font-size:15px;font-weight:700;letter-spacing:.3px;white-space:nowrap;text-decoration:none}
.fishician-header-search{display:grid;width:34px;height:34px;border-radius:10px;border:1px solid color-mix(in srgb, var(--aq-accent) 27%, transparent);background:color-mix(in srgb, var(--aq-accent) 7%, transparent);color:var(--aq-accent);place-items:center;padding:0;flex-shrink:0}
.fishician-header-search svg{display:block}
.fishician-icon-button{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;flex-shrink:0;border-radius:10px;border:1px solid color-mix(in srgb, var(--aq-accent) 27%, transparent);background:color-mix(in srgb, var(--aq-accent) 9%, transparent);color:var(--aq-accent);text-decoration:none}
.fishician-icon-button svg{display:block}
.fishician-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:999px;border:2px solid var(--aq-bg);background:var(--aq-danger);color:var(--aq-on-accent);font-size:10px;font-weight:700;line-height:14px;text-align:center}
.fishician-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;overflow:hidden;border-radius:50%;border:2px solid var(--aq-accent);background:var(--aq-accent-2);color:var(--aq-accent);font-size:17px;font-weight:700;text-decoration:none}
.fishician-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.fishician-site-header a:focus-visible,.fishician-mobile-nav a:focus-visible{outline:3px solid var(--aq-accent);outline-offset:2px;border-radius:var(--aq-radius-sm)}

/* The app's header is position:fixed, so its 100vw width at <=900px never adds
   scroll width. Here it sits in the flow, so size it to the page instead. */
@media(max-width:900px){.aq-chrome-wrap.fishician-site-header{width:100%;max-width:100%}}

/* ---- Phone: the app's mobile branch (<=640px, RESPONSIVE_BREAKPOINTS.mobile).
   Tab values are the app's rendered (computed) values, not its JSX defaults. ---- */
.fishician-mobile-nav{display:none}
@media(max-width:640px){
  .fishician-site-header .aq-top-shell{padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));gap:10px;border-bottom:1px solid var(--aq-border)}
  .fishician-site-header .aq-brand-lockup{padding:0}
  .fishician-site-header .aq-desktop-nav{display:none}
  .fishician-sign-up{display:none}
  .fishician-sign-in{font-size:13px;padding:6px 4px}
  .fishician-icon-button{width:44px;height:44px;border-radius:14px}
  .fishician-avatar{width:34px;height:34px;font-size:15px}
  .fishician-mobile-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:200;display:flex;width:100%;max-width:1400px;box-sizing:border-box;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,color-mix(in srgb, var(--aq-bg) 92%, transparent),color-mix(in srgb, var(--aq-bg) 99%, transparent));backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%);border-top:1px solid var(--aq-border);box-shadow:0 -2px 10px color-mix(in srgb, var(--aq-shadow-ink) 7%, transparent);font-family:Arial,sans-serif;font:-webkit-small-control}
  .fishician-mobile-tab{flex:1 1 0;min-width:0;min-height:56px;padding:6px 4px;box-sizing:border-box;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--aq-sub);font-size:11px;font-weight:600;text-decoration:none;transition:color .18s ease,background .18s ease}
  .fishician-mobile-tab.is-active{color:var(--aq-accent);font-weight:700}
  .fishician-mobile-tab-icon{display:flex;align-items:center;justify-content:center;width:46px;height:30px;border-radius:14px;color:var(--aq-sub);transition:background .24s ease,transform .24s ease}
  .fishician-mobile-tab.is-active .fishician-mobile-tab-icon{color:var(--aq-accent);transform:translateY(-1px) scale(1.04)}
  .fishician-mobile-tab-icon>img,.fishician-mobile-tab-icon>svg{display:block;width:21px;height:21px;object-fit:contain}
  .fishician-mobile-tab-label{font-size:12px;line-height:1.05;white-space:nowrap}
}

.fishician-skip-link{position:fixed;top:var(--aq-space-2);left:var(--aq-space-2);z-index:500;transform:translateY(-160%);display:inline-flex;align-items:center;min-height:var(--aq-tap-min);padding:var(--aq-space-2) var(--aq-space-4);background:var(--aq-accent);color:var(--aq-on-accent);font:var(--aq-w-bold) var(--aq-type-sm)/1.4 var(--aq-font-ui);border-radius:var(--aq-radius-sm)}
.fishician-skip-link:focus-visible{outline:3px solid var(--aq-text);outline-offset:3px}
.fishician-skip-link:focus{transform:translateY(0)}
#fishician-main{scroll-margin-top:96px}

/* ---- Rollback: aq_signal_reef_nav=0 restores each document's own brand ---- */
.fishician-legacy-brand{display:none}
html.fishician-static-legacy .fishician-site-header,html.fishician-static-legacy .fishician-mobile-nav{display:none}
html.fishician-static-legacy .fishician-legacy-brand{display:block}

/* ---- Pre-hydration shells: chrome sits inside React's #root ---- */
html:not(.fishician-static-legacy) #root .aq-prerender:has(.fishician-site-header){max-width:none;padding-top:0}
#root .aq-prerender>.fishician-site-header{margin-bottom:var(--aq-space-6)}

/* ---- Page layout: same width, gutters and cards as the app's .aq-page-content ---- */
html:not(.fishician-static-legacy) body.fishician-static-document{background:var(--aq-bg);color:var(--aq-text);font-family:var(--aq-font-ui);font-size:15px;line-height:1.6;overflow-wrap:break-word}
html:not(.fishician-static-legacy) .fishician-static-document>.wrap{width:auto;max-width:1440px;margin:0 auto;padding:16px 16px 56px;box-sizing:border-box}
html:not(.fishician-static-legacy) .fishician-static-document :where(h1){font-size:30px;font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:0 0 8px}
html:not(.fishician-static-legacy) .fishician-static-document :where(h2){font-size:20px;line-height:1.3;letter-spacing:-.01em}
html:not(.fishician-static-legacy) .fishician-static-document :where(main,footer) a{color:var(--aq-accent);text-underline-offset:.2em}
html:not(.fishician-static-legacy) .fishician-static-document :where(main,footer) :where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--aq-accent);outline-offset:3px;border-radius:var(--aq-radius-sm)}
html:not(.fishician-static-legacy) .fishician-static-document .footer-links a{min-width:var(--aq-tap-min)}
/* Breadcrumb: the app's .aq-breadcrumb */
html:not(.fishician-static-legacy) .fishician-static-document .crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 16px;color:var(--aq-text);font-size:14px;font-weight:600}
html:not(.fishician-static-legacy) .fishician-static-document .crumbs a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;color:var(--aq-sub);font-weight:700;text-decoration:none}
html:not(.fishician-static-legacy) .fishician-static-document .crumbs a:hover{color:var(--aq-text)}
html:not(.fishician-static-legacy) .fishician-static-document .crumbs a:focus-visible{outline:3px solid var(--aq-accent);outline-offset:3px;border-radius:var(--aq-radius-sm)}
html:not(.fishician-static-legacy) .fishician-static-document .crumbs>span[aria-hidden]{display:inline-flex;width:16px;justify-content:center;color:var(--aq-sub);font-size:18px;line-height:1}
/* Title card: the app's .aq-section-hero */
html:not(.fishician-static-legacy) .fishician-static-document .hero{border:1px solid var(--aq-border);background:linear-gradient(120deg,var(--aq-accent-soft),var(--aq-card) 70%);border-radius:10px;padding:20px 24px;box-shadow:none}
html:not(.fishician-static-legacy) .fishician-static-document .card{border:1px solid var(--aq-border);background:var(--aq-card);border-radius:10px;box-shadow:none}
html:not(.fishician-static-legacy) .fishician-static-document .lede{color:var(--aq-sub);font-size:14px;line-height:1.5;max-width:760px;margin:0}
html:not(.fishician-static-legacy) .fishician-static-document .eyebrow{margin:0 0 6px;color:var(--aq-accent);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
html:not(.fishician-static-legacy) .fishician-static-document .guide-hero-image{height:220px;margin:var(--aq-space-4) 0 0;border-color:var(--aq-border);border-radius:var(--aq-radius-sm)}
html:not(.fishician-static-legacy) .fishician-static-document .species-portrait{min-height:0;margin:var(--aq-space-4) 0 var(--aq-space-1);border-color:var(--aq-border);border-radius:var(--aq-radius-sm);background:var(--aq-bg)}
html:not(.fishician-static-legacy) .fishician-static-document .species-portrait img{width:100%;height:220px;object-fit:contain;padding:var(--aq-space-3)}
html:not(.fishician-static-legacy) .fishician-static-document .fact{border-color:var(--aq-border);border-radius:var(--aq-radius-sm);background:var(--aq-card-2)}
html:not(.fishician-static-legacy) .fishician-static-document .fact b{color:var(--aq-accent)}
html:not(.fishician-static-legacy) .fishician-static-document .section{margin-top:var(--aq-space-6)}
html:not(.fishician-static-legacy) .fishician-static-document .cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--aq-space-2);min-height:var(--aq-tap-min);padding:var(--aq-space-3) var(--aq-space-4);border-radius:var(--aq-radius-sm);background:var(--aq-accent);color:var(--aq-on-accent);font-size:var(--aq-type-sm);font-weight:var(--aq-w-bold);line-height:1.4;text-align:center;text-decoration:none}
@media(max-width:1180px){
  html:not(.fishician-static-legacy) .fishician-static-document>.wrap{padding-left:clamp(10px,1.5vw,16px);padding-right:clamp(10px,1.5vw,16px)}
}
@media(max-width:640px){
  html:not(.fishician-static-legacy) .fishician-static-document>.wrap{padding:12px 20px calc(112px + env(safe-area-inset-bottom,0px))}
  html:not(.fishician-static-legacy) #root .aq-prerender:has(.fishician-site-header){padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  html:not(.fishician-static-legacy) .fishician-static-document :where(h1){font-size:24px;letter-spacing:-.02em}
  html:not(.fishician-static-legacy) .fishician-static-document :where(h2){font-size:18px}
  html:not(.fishician-static-legacy) .fishician-static-document .hero{background:linear-gradient(120deg,var(--aq-accent-soft),var(--aq-card) 70%);border-color:var(--aq-border);padding:24px 18px;border-radius:20px}
  html:not(.fishician-static-legacy) .fishician-static-document .guide-hero-image{height:160px;margin-top:var(--aq-space-3)}
  html:not(.fishician-static-legacy) .fishician-static-document .species-portrait img{height:160px;padding:var(--aq-space-2)}
  #fishician-main{scroll-margin-top:84px;scroll-margin-bottom:90px}
}
/* Tablet (641-900px): the app switches to its bottom tab bar here (RESPONSIVE_BREAKPOINTS.compact), so the static header drops its top nav at the same width. */
@media(min-width:641px) and (max-width:900px){
  .fishician-site-header .aq-desktop-nav{display:none}
  .fishician-mobile-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:200;display:flex;width:100%;max-width:1400px;box-sizing:border-box;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,color-mix(in srgb, var(--aq-bg) 92%, transparent),color-mix(in srgb, var(--aq-bg) 99%, transparent));backdrop-filter:blur(22px) saturate(155%);-webkit-backdrop-filter:blur(22px) saturate(155%);border-top:1px solid var(--aq-border);box-shadow:0 -2px 10px color-mix(in srgb, var(--aq-shadow-ink) 7%, transparent);font-family:Arial,sans-serif;font:-webkit-small-control}
  .fishician-mobile-tab{flex:1 1 0;min-width:0;min-height:56px;padding:6px 4px;box-sizing:border-box;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--aq-sub);font-size:11px;font-weight:600;text-decoration:none;transition:color .18s ease,background .18s ease}
  .fishician-mobile-tab.is-active{color:var(--aq-accent);font-weight:700}
  .fishician-mobile-tab-icon{display:flex;align-items:center;justify-content:center;width:46px;height:30px;border-radius:14px;color:var(--aq-sub);transition:background .24s ease,transform .24s ease}
  .fishician-mobile-tab.is-active .fishician-mobile-tab-icon{color:var(--aq-accent);transform:translateY(-1px) scale(1.04)}
  .fishician-mobile-tab-icon>img,.fishician-mobile-tab-icon>svg{display:block;width:21px;height:21px;object-fit:contain}
  .fishician-mobile-tab-label{max-width:100%;overflow:hidden;font-size:12px;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}
  html:not(.fishician-static-legacy) .fishician-static-document>.wrap{padding:12px 20px calc(112px + env(safe-area-inset-bottom,0px))}
  html:not(.fishician-static-legacy) #root .aq-prerender:has(.fishician-site-header){padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
}
.fishician-member-pending .fishician-site-auth{visibility:hidden}
/* Same thin scrollbar as the app, so the centred header does not move by the scrollbar width when crossing between app and static pages. */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--aq-surface)}
::-webkit-scrollbar-thumb{background:var(--aq-card-2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--aq-accent-soft)}

/* Deep Reef v2 (2026-10-17): the same floating glass tab bar as the app. */
@media(max-width:900px){
  html .fishician-mobile-nav{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));width:auto;max-width:640px;margin:0 auto;transform:none;padding:6px;gap:2px;border:1px solid color-mix(in srgb,var(--aq-ink) 11%,transparent);border-radius:28px;background:color-mix(in srgb,#FFFFFF 86%,transparent);box-shadow:0 18px 36px -18px rgba(11,37,48,.45),0 2px 6px rgba(11,37,48,.08);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
  html[data-theme="dark"] .fishician-mobile-nav{background:rgba(9,30,39,.74);box-shadow:0 20px 44px -16px rgba(0,0,0,.7)}
  html .fishician-mobile-tab{border-radius:22px}
  html .fishician-mobile-tab.is-active{color:var(--aq-text)}
  html .fishician-mobile-tab-icon{width:44px;border-radius:999px}
  html .fishician-mobile-tab.is-active .fishician-mobile-tab-icon{transform:none;background:color-mix(in srgb,var(--aq-accent) 16%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--aq-accent) 28%,transparent) inset,0 6px 18px -8px color-mix(in srgb,var(--aq-accent) 80%,transparent)}
}
@media(prefers-reduced-transparency:reduce){html .fishician-mobile-nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--aq-card)}}