/* Inner Dive app shell. Every screen carries its own tab bar and styles; nothing is added on top of them here.
   Colors and fonts come from each screen's own tokens (--bg, --surface, --ink, ...). */

/* ---------- the sign-in gate (gate.js) ----------
   On the Account page, a line saying why the person was sent there; in the bar of pages, a small lock on the
   screens that need an account, while nobody is signed in. */
.gatenote {
  margin: 14px 0 0;
  max-width: 46ch;
  padding: 12px 14px;
  border: 1px solid var(--accent, #9DB4FF);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #9DB4FF) 10%, transparent);
  color: var(--ink, #E7EBF8);
  font-size: 0.95rem;
  line-height: 1.5;
}
.gatenote[hidden] { display: none; }
html[data-gate="out"] .navlinks a:is([data-page="generator"], [data-page="protocols"], [data-page="search"]) { position: relative; }
html[data-gate="out"] .navlinks a:is([data-page="generator"], [data-page="protocols"], [data-page="search"])::after {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(50% + 9px);
  width: 11px;
  height: 11px;
  background: currentColor;
  opacity: 0.8;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html[data-gate="out"] .navlinks a:is([data-page="generator"], [data-page="protocols"], [data-page="search"])::after {
    position: static;
    display: inline-block;
    margin-left: 6px;
    vertical-align: -1px;
  }
}

/* ---------- the Neuroacoustics tab ----------
   Opened with a personal code. Its short name and a lock in the bar along the bottom; the full name and a
   small lock in the bar across the top. Seven names side by side on phones: slightly smaller letters. */
.navlinks .nav-long, .navlinks svg.nav-lock { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .navlinks .nav-long { display: inline; }
  .navlinks .nav-short { display: none; }
  .navlinks a svg.nav-lock { display: block; width: 13px; height: 13px; margin-left: -2px; opacity: 0.8; }
}
@media (max-width: 1023px), (hover: none), (pointer: coarse) { .navlinks a { font-size: 0.64rem; } }
@media (max-width: 480px) { .navlinks { padding-inline: 2px; column-gap: 3px; } .navlinks a { font-size: 0.6rem; letter-spacing: -0.015em; } }

/* 16 Oct 2026 · top bar dropdowns (computer only). Our own take on a mega-menu:
   the deep Sonik blue, a thin light line on top, a coloured dot per item. */
.nd { display: contents; }
.nd-btn, .nd-panel { display: none; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .nd { display: inline-flex; align-items: center; position: relative; }
  .nd > a { padding-right: 6px !important; }
  .nd-btn { display: inline-grid; place-items: center; width: 22px; height: 28px; margin-left: -4px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; opacity: 0.7; cursor: pointer; }
  .nd-btn:hover, .nd.on .nd-btn { opacity: 1; }
  .nd-btn:focus-visible { outline: 2px solid #8FD0FF; outline-offset: 1px; }
  .nd-caret { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
  .nd.on .nd-caret { transform: rotate(180deg); }
  .nd-panel:not([hidden]) { display: block; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 60; min-width: 300px; padding: 14px; border: 1px solid #1D4A82; border-radius: 18px;
    background: linear-gradient(180deg, #0B2A57 0%, #071C40 100%); box-shadow: 0 18px 50px rgba(2, 8, 24, 0.6), inset 0 1px 0 rgba(143, 208, 255, 0.18); animation: ndIn 0.18s ease-out; }
  .nd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }   /* keeps the hover alive between link and panel */
  .nd-panel::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #8FD0FF, transparent); opacity: 0.6; }
  .nd-panel.wide { min-width: 860px; }
  .nd-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px 14px; }
  .nd-h { margin: 4px 10px 6px; font: 600 0.66rem/1 var(--font-mono, monospace); letter-spacing: 0.16em; text-transform: uppercase; color: #6F94C2; }
  .nd-it { display: flex !important; flex-direction: row !important; justify-content: flex-start !important; width: 100%; box-sizing: border-box; min-height: 0 !important; align-items: flex-start !important; gap: 12px; padding: 10px 12px !important; border-radius: 12px; color: #E6EAF2 !important; text-decoration: none; text-align: left; white-space: normal !important; background: transparent !important; }
  .nd-it i { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--k); box-shadow: 0 0 8px var(--k); }
  .nd-it span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1; text-align: left; }
  .nd-it::after, .nd-it::before { content: none !important; }
  .nd-it strong { font-weight: 500; font-size: 0.95rem; line-height: 1.25; }
  .nd-it small { font: 0.7rem/1.3 var(--font-mono, monospace); color: #8FB9E6; letter-spacing: 0.02em; }
  .nd-it:hover, .nd-it:focus-visible { background: rgba(77, 168, 255, 0.10) !important; outline: none; }
  .nd-it:hover strong, .nd-it:focus-visible strong { color: #fff; }
  @keyframes ndIn { from { opacity: 0; transform: translate(-50%, -4px); } to { opacity: 1; transform: translate(-50%, 0); } }
  @media (prefers-reduced-motion: reduce) { .nd-panel:not([hidden]) { animation: none; } }
}

/* 16 Oct 2026 · Home waits for its new design: the logo alone, centred (buttons, name and install stay in the code) */
.app.home .bigbtns, .app.home #get, .app.home > header h1 { display: none !important; }
.app.home > header { min-height: 58vh; display: flex; align-items: center; justify-content: center; }
/* Science of Frequency: a blank page for now */
.app.science > header { min-height: 40vh; }

/* 16 Oct 2026 · the Account icon beside the flag, in every page's bar */
.topbar .tools { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.acctbtn { position: relative; display: grid; place-items: center; width: 40px; height: 36px; border: 1px solid var(--line, #1D3A66); border-radius: 10px; color: var(--muted, #9FB3D1); text-decoration: none; }
.acctbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acctbtn:hover, .acctbtn[aria-current="page"] { color: var(--ink, #E6EAF2); border-color: var(--accent, #4DA8FF); }
.acctbtn:focus-visible { outline: 2px solid var(--accent, #4DA8FF); outline-offset: 2px; }
.acctbtn[data-in="true"]::after { content: ""; position: absolute; top: 4px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--ok, #5FD3C0); box-shadow: 0 0 0 2px var(--bg, #0A1024); }
/* the search bar on Home: wide and thin */
.homesearch { position: relative; display: flex; align-items: center; width: 100%; max-width: 640px; height: 46px; margin: 0 auto; padding: 0 6px 0 46px; border: 1px solid var(--line, #1D3A66); border-radius: 999px; background: color-mix(in srgb, var(--surface, #111A33) 85%, transparent); box-sizing: border-box; }
.homesearch:focus-within { border-color: var(--accent, #4DA8FF); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4DA8FF) 20%, transparent); }
.homesearch > svg { position: absolute; left: 16px; width: 20px; height: 20px; fill: none; stroke: var(--muted, #9FB3D1); stroke-width: 1.8; stroke-linecap: round; }
.homesearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink, #E6EAF2); font: inherit; font-size: 0.98rem; outline: none; }
.homesearch input::placeholder { color: var(--muted, #9FB3D1); opacity: 0.8; }
.homesearch input::-webkit-search-cancel-button { display: none; }
.homesearch button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--accent, #4DA8FF); color: #04112A; cursor: pointer; }
.homesearch button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.app.home > header { min-height: 46vh; }