/* The app shell: a top bar, the open section's tabs, and a dock of sections at the bottom (app/modules.py menu()).
   Loaded after style.css; everything is scoped to .app.docked so the admin area keeps its own sidebar. */

:root {
  --tone-blue: radial-gradient(120% 120% at 100% 0%, #6d7cff, #3446f2 50%, #1e2bb8);
  --tone-violet: radial-gradient(120% 120% at 0% 0%, #b794ff, #8b5cf6 45%, #4c1d95);
  --tone-cyan: radial-gradient(120% 120% at 100% 100%, #a5f3fc, #22d3ee 40%, #0e7490);
  --tone-sun: radial-gradient(120% 120% at 0% 100%, #ffd28a, #ff8a4c 45%, #e8395f);
  --tone-ink: radial-gradient(120% 120% at 100% 0%, #3a3a4c, #0a0a0f 60%);
  --tone-mint: radial-gradient(120% 120% at 0% 0%, #bbf7d0, #34d399 42%, #047857);
  --tone-brain: radial-gradient(55% 45% at 22% 26%, rgba(255,63,208,.6), transparent 72%), radial-gradient(55% 45% at 78% 78%, rgba(34,211,238,.55), transparent 72%), radial-gradient(130% 120% at 30% 15%, #3b1a7a, #160b33 55%, #05030f);
  --tone-aurora: radial-gradient(120% 120% at 0% 0%, #a5f3fc, #6d7cff 45%, #7c3aed);
  --tone-amber: radial-gradient(120% 120% at 100% 0%, #fde68a, #f59e0b 45%, #b45309);
  --dock-h: 112px;
}

:root .app.docked { display: block; min-height: 100vh; padding-bottom: calc(var(--dock-h) + 24px); }

/* ---- top bar ---- */
.app.docked .gv-top { position: sticky; top: 0; z-index: 200; display: flex; align-items: center; gap: 14px; padding: 12px 28px; border-bottom: 1px solid var(--line); }
/* The glass on a layer behind the bar, not on the bar: a blurred element is the frame for "fixed" children, which trapped
   the language picker's phone sheet inside the bar (see front.css .fp-top). */
.app.docked .gv-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px); pointer-events: none; }
.app.docked .gv-top .brand { color: var(--text); padding: 0; flex: none; }
.app.docked .gv-switch { flex: none; width: 240px; }
.app.docked .gv-switch .switcher { padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); color: var(--text); }
.app.docked .gv-switch .switcher .meta { color: var(--text-3); }
.app.docked .gv-switch .switcher-list { min-width: 260px; }
:root .app.docked button.top-search { flex: 1 1 auto; max-width: 520px; margin: 0 auto; }
/* The search gives up room first, so the buttons and the avatar on the right never run off the screen (at 1024px
   in German and French they did): it shrinks, drops Ctrl K, then shows only the magnifier. */
:root .app.docked .gv-top button.top-search { min-width: 40px; container-type: inline-size; overflow: hidden; }
:root .app.docked .gv-top button.top-search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 250px) { :root .app.docked .gv-top button.top-search kbd { display: none; } }
@container (max-width: 130px) { :root .app.docked .gv-top button.top-search span { display: none; } }
.app.docked .gv-top-right { display: flex; align-items: center; gap: 10px; flex: none; }
.app.docked .gv-top-right .btn.glow { min-height: 40px; }

.gv-user { position: relative; }
.gv-user > summary { list-style: none; cursor: pointer; display: block; border-radius: 50%; }
.gv-user > summary::-webkit-details-marker { display: none; }
.gv-user .avatar { width: 40px; height: 40px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.gv-user-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 250px; padding: 8px; border-radius: 18px; background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); display: grid; gap: 2px; }
:root[data-theme="light"] .gv-user-menu { background: #fff; border-color: var(--line); }
.gv-user-menu .who { padding: 8px 10px 10px; font-weight: 600; font-size: .92rem; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.gv-user-menu .who span { display: block; font-weight: 400; font-size: .78rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.gv-user-menu form { margin: 0; }
.gv-user-menu a, :root .gv-user-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 0; padding: 9px 10px; border-radius: 12px; background: transparent; border: 0; box-shadow: none; color: var(--text); font: 500 .9rem var(--font-body); text-decoration: none; cursor: pointer; text-align: left; }
.gv-user-menu a:hover, :root .gv-user-menu button:hover { background: var(--surface-2); transform: none; filter: none; box-shadow: none; color: var(--text); }
.gv-user-menu svg { color: var(--text-3); }

/* ---- the open section: which module you are in, and its pages ---- */
.gv-section { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; max-width: 1440px; margin: 0 auto; padding: 22px 36px 0; }
.gv-section-id { display: flex; align-items: center; gap: 12px; flex: none; }
.gv-section-id .dock-tile { width: 44px; height: 44px; border-radius: 14px; }
.gv-section-id b { display: block; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.03em; line-height: 1.1; }
.gv-kicker { display: inline-block; font-size: .66rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.gv-tabs { display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.gv-tabs::-webkit-scrollbar { display: none; }
.gv-tabs a { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; font-size: .88rem; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.gv-tabs a svg { color: var(--text-3); }
.gv-tabs a:hover { color: var(--text); background: var(--surface-2); }
.gv-tabs a[aria-current="page"] { background: var(--text); color: var(--bg); }
.gv-tabs a[aria-current="page"] svg { color: inherit; }
:root[data-theme="dark"] .gv-tabs a[aria-current="page"] { background: var(--accent); color: #fff; }

.app.docked .content { margin: 0 auto; }

/* ---- the dock ----
   Layers, lowest to highest (tests/test_layers.py keeps page styles under the dock):
   page content, cards and sticky bars 0-99 · the top bar and the dock 200 · cookie banner and toasts 300 ·
   an open popover or calendar 400 (.pop-lift) · the language picker with its scrim 450 · Show me 9000+.
   The top bar and the dock are above everything on the page; only things the person opened or must answer go over it. */
.gv-dock { position: fixed; z-index: 200; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 6px; max-width: calc(100vw - 24px); padding: 26px 14px 10px; border-radius: 30px; background: rgba(12, 12, 20, .86); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); box-shadow: 0 30px 60px -20px rgba(10, 10, 40, .55), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px rgba(255, 255, 255, .06); color: #fff; overflow-x: auto; scrollbar-width: none; }
.gv-dock::-webkit-scrollbar { display: none; }
.dock-group { position: relative; flex: none; }
.dock-label { position: absolute; top: -19px; left: 4px; font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .38); white-space: nowrap; }
.dock-row { display: flex; gap: 6px; }
.dock-sep { flex: none; width: 1px; height: 46px; margin: 0 6px 22px; background: rgba(255, 255, 255, .14); }
.dock-item { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 64px; color: #fff; text-decoration: none; }
.dock-item:hover { color: #fff; }
.dock-tile { position: relative; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s ease; }
.dock-item:hover .dock-tile { transform: translateY(-4px) scale(1.06); }
.dock-name { font-size: .7rem; color: rgba(255, 255, 255, .62); white-space: nowrap; max-width: 64px; overflow: hidden; text-overflow: ellipsis; }
.dock-item[aria-current="page"] .dock-tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 2px #fff, 0 12px 28px -8px rgba(124, 139, 255, .95); }
.dock-item[aria-current="page"] .dock-name { color: #fff; font-weight: 650; }
.dock-count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: #e8395f; color: #fff; font: 600 .66rem var(--font-mono); box-shadow: 0 0 0 2px #15151f; }
.dock-item.locked .dock-tile { background: rgba(255, 255, 255, .05) !important; color: rgba(255, 255, 255, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.dock-item.locked .dock-name { color: rgba(255, 255, 255, .42); }
.dock-lock { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #2a2b38; color: rgba(255, 255, 255, .75); }
.dock-item.store .dock-tile { background: transparent; border: 1.5px dashed rgba(255, 255, 255, .32); box-shadow: none; color: rgba(255, 255, 255, .8); }
.tone-blue { background: var(--tone-blue) !important; }
.tone-violet { background: var(--tone-violet) !important; }
.tone-cyan { background: var(--tone-cyan) !important; }
.tone-sun { background: var(--tone-sun) !important; }
.tone-mint { background: var(--tone-mint) !important; }
.tone-amber { background: var(--tone-amber) !important; }
.tone-aurora { background: var(--tone-aurora) !important; }
.tone-brain { background: var(--tone-brain) !important; }
.tone-brain:not(.fp-mt) > svg { width: 86% !important; height: 86% !important; overflow: visible; }
.tone-ink { background: var(--tone-ink) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.gv-section-id .tone-plain { background: var(--text); color: var(--bg); }

/* Mac-style dock (Ali 2026-10-11): dark gray frosted glass on the light screen, lighter grey glass on the dark
   screen, a dot under the open section, a name bubble, a hop on click and magnify (mm.js dockMagnify, computers
   with a mouse only): each item gets --mag, 1 to 1.75, eased every frame from how close the pointer is. The tile
   grows up from its bottom edge and the items move apart so nothing overlaps. */
.gv-dock { background: linear-gradient(180deg, rgba(40, 40, 52, .86), rgba(14, 14, 22, .9)); backdrop-filter: blur(30px) saturate(1.8); -webkit-backdrop-filter: blur(30px) saturate(1.8); box-shadow: 0 30px 60px -20px rgba(10, 10, 40, .55), 0 2px 6px rgba(10, 10, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 0 0 1px rgba(0, 0, 0, .35); }
.gv-dock .dock-item { position: relative; }
.gv-dock .dock-tile:not([class*="tone-"]) { background: linear-gradient(180deg, #5d5d69, #383842); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 10px -4px rgba(0, 0, 0, .5); }
.gv-dock .dock-tile[class*="tone-"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 10px -4px rgba(0, 0, 0, .5); }
.gv-dock .dock-item.store .dock-tile { background: transparent; box-shadow: none; }
/* The open section: a small glowing dot under it, like an open app on the Mac. */
.gv-dock .dock-item[aria-current="page"] .dock-tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px -6px rgba(0, 0, 0, .6); }
.gv-dock .dock-item[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .8); }
/* The name bubble above the icon under the pointer. */
.dock-tip { position: absolute; left: 0; top: 0; z-index: 2; padding: 5px 11px; border-radius: 8px; background: rgba(36, 36, 46, .94); color: #fff; font-size: .78rem; font-weight: 550; white-space: nowrap; pointer-events: none; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .12); opacity: 0; transform: translate(-50%, -100%) translateY(4px); transition: opacity .15s ease, transform .15s ease; }
.dock-tip::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 0 0 2px 0; box-shadow: 1px 1px 0 rgba(255, 255, 255, .12); }
.dock-tip.on { opacity: 1; transform: translate(-50%, -100%); }
.gv-dock.magnify { overflow: visible; }
.gv-dock.magnify .dock-item { margin: 0 calc((var(--mag, 1) - 1) * 22px); }
.gv-dock.magnify .dock-item .dock-tile { transform-origin: 50% 100%; transform: translateY(calc((var(--mag, 1) - 1) * -14px)) scale(var(--mag, 1)); transition: box-shadow .18s ease; will-change: transform; }
.gv-dock .dock-label { transition: opacity .2s ease; }
.gv-dock.mag-on .dock-label { opacity: .12; }
.gv-dock .dock-item.bounce .dock-tile { animation: dock-bounce .55s cubic-bezier(.3, .7, .4, 1); }
@keyframes dock-bounce { 0%, 100% { translate: 0 0; } 35% { translate: 0 -18px; } 65% { translate: 0 0; } 82% { translate: 0 -6px; } }

/* Dark screen: the dock is lighter grey frosted glass so it stands out from the dark page. */
:root[data-theme="dark"] .gv-dock { background: linear-gradient(180deg, rgba(104, 108, 138, .64), rgba(76, 80, 106, .66)); box-shadow: 0 30px 70px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 1px rgba(255, 255, 255, .2); }
:root[data-theme="dark"] .gv-dock .dock-label { color: rgba(255, 255, 255, .62); }
:root[data-theme="dark"] .gv-dock .dock-name { color: rgba(255, 255, 255, .86); }
:root[data-theme="dark"] .gv-dock .dock-sep { background: rgba(255, 255, 255, .26); }
:root[data-theme="dark"] .gv-dock .dock-tile:not([class*="tone-"]) { background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .14)); }
:root[data-theme="dark"] .gv-dock .dock-item.store .dock-tile { background: transparent; border-color: rgba(255, 255, 255, .5); }
:root[data-theme="dark"] .gv-dock .dock-item.locked .dock-name { color: rgba(255, 255, 255, .6); }
:root[data-theme="dark"] .gv-dock .dock-count { box-shadow: 0 0 0 2px #4c506a; }
:root[data-theme="dark"] .dock-tip { background: rgba(236, 236, 242, .96); color: #1d1d1f; box-shadow: 0 8px 22px -6px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .dock-tip::after { box-shadow: none; }

/* Phones and tablets: the dock becomes a bar along the bottom edge that scrolls sideways. */
@media (max-width: 1100px) {
  .app.docked .gv-switch { width: 200px; }
  .app.docked .gv-top .brand-logo { max-width: 130px; }
}
/* 861-1240px: the bar's buttons show their icons only and the search box gives way, so the avatar and Ask GV Brain
   stay in view in every language (French and German pushed them off at 1024px) */
@media (min-width: 861px) and (max-width: 1240px) {
  :root .app.docked button.top-search { flex: 1 1 0; min-width: 0; overflow: hidden; }
  .app.docked .gv-top-right .gv-showme .hide-xs, .app.docked .gv-top-right .btn.glow .hide-xs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app.docked .gv-top-right .gv-showme, .app.docked .gv-top-right .btn.glow { padding-left: 10px; padding-right: 10px; min-width: 40px; justify-content: center; }
}
@media (max-width: 860px) {
  :root { --dock-h: 84px; }
  .app.docked .gv-top { padding: 10px 14px; gap: 8px; }
  .app.docked .gv-top .brand { display: none; }
  .app.docked .gv-switch { width: auto; flex: 1 1 auto; min-width: 0; }
  :root .app.docked button.top-search { flex: none; max-width: none; margin: 0; }
  .gv-section { padding: 16px 16px 0; gap: 12px; }
  .gv-section-id .dock-tile { width: 38px; height: 38px; border-radius: 12px; }
  .gv-dock { background: rgba(12, 12, 20, .95); left: 0; right: 0; bottom: 0; transform: none; max-width: none; border-radius: 22px 22px 0 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 2px; justify-content: flex-start; }
  .dock-label { display: none; }
  .dock-sep { height: 36px; margin: 0 4px 18px; }
  .dock-item { width: 58px; gap: 4px; }
  .dock-tile { width: 42px; height: 42px; border-radius: 13px; }
  .dock-item:hover .dock-tile { transform: none; }
  .gv-dock { background: rgba(12, 12, 20, .95); }
  :root[data-theme="dark"] .gv-dock { background: rgba(62, 65, 88, .97); }
  .gv-dock .dock-item[aria-current="page"]::after { bottom: -5px; }
}
@media (max-width: 600px) {
  .gv-section-id b { font-size: 1rem; }
  /* Today also has Show me: every top-bar button stays in view down to 360px (the avatar was pushed off) */
  .app.docked .gv-top { gap: 6px; }
  .app.docked .gv-top-right { gap: 6px; }
  .app.docked .gv-top-right .gv-showme, .app.docked .gv-top-right .btn.glow { padding-left: 10px; padding-right: 10px; min-width: 40px; justify-content: center; }
  .gv-tabs { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .dock-tile, .gv-dock .dock-item { transition: none; } .gv-dock .dock-item.bounce .dock-tile { animation: none; } }

/* How fresh the data is (app/freshness.py), at the end of the module bar */
.fresh { order: 3; margin-left: auto; position: relative; flex: none; }
.fresh summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.fresh summary::-webkit-details-marker { display: none; }
.fresh-dot { --c: var(--good); width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); flex: none; }
.fresh.live > summary .fresh-dot { animation: fresh-pulse 2.4s ease-in-out infinite; }
.fresh.late > summary .fresh-dot, li.late > .fresh-dot, li.waiting > .fresh-dot, .fresh.waiting > summary .fresh-dot, li.pick > .fresh-dot, .fresh.pick > summary .fresh-dot { --c: var(--warn); }
.fresh.error > summary .fresh-dot, li.error > .fresh-dot { --c: var(--bad); }
li.manual > .fresh-dot { --c: var(--text-2); }
.fresh-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(380px, calc(100vw - 32px)); padding: 14px 16px;
  border-radius: 18px; border: 1px solid var(--line); background: var(--surface-solid); box-shadow: 0 18px 50px -20px rgba(0,0,0,.45); }
.fresh-pop p { margin: 0 0 8px; }
.fresh-pop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fresh-pop li { display: flex; gap: 10px; align-items: flex-start; }
.fresh-pop li .fresh-dot { margin-top: 6px; }
.fresh-pop li div { display: flex; flex-direction: column; gap: 2px; font-size: .88rem; }
@keyframes fresh-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 8%, transparent); } }
@media (max-width: 700px) { .fresh { order: 1; margin-left: 0; } .fresh-pop { right: auto; left: 0; } }

/* An open popover (details[data-pop], lifted by mm.js) and every box around it sit above all cards. */
.pop-lift { z-index: 400 !important; }
.pop-lift-pos { position: relative; }

/* ---- language and currency picker (app/i18n.py, _lang_picker.html): a pill in the top bar, a popover on a computer
   and a sheet from the bottom on a phone ---- */
.lc-menu { position: relative; flex: none; }
.lc-pill { list-style: none; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--surface-solid); border: 1px solid var(--line); color: var(--text); font: 600 .88rem var(--font-body); cursor: pointer; white-space: nowrap; box-shadow: 0 6px 18px -12px rgba(20, 30, 80, .35); }
.lc-pill::-webkit-details-marker { display: none; }
.lc-pill .lc-cur { font: 600 .78rem var(--font-mono); color: var(--text-3); padding-left: 9px; border-left: 1px solid var(--line); }
.lc-pill .dn { color: var(--text-3); }
.lc-menu[open] > .lc-pill { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.lc-flag { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: none; display: inline-grid; place-items: center; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9), 0 2px 6px -2px rgba(10, 10, 40, .35); }
.lc-flag svg { width: 100%; height: 100%; display: block; }
.lc-flag.globe { background: var(--tone-ink); color: #fff; }
.lc-flag.globe svg { width: 62%; height: 62%; }
.lc-flag.lg { width: 34px; height: 34px; }
.lc-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: 560px; max-width: calc(100vw - 32px); padding: 18px; border-radius: 26px; background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); color: var(--text); text-align: left; animation: navopen .16s ease; }
.lc-grab { display: none; }
.lc-scrim { display: none; }
:root .lc-pop .lc-x { flex: none; width: 36px; height: 36px; margin: -4px -4px -4px 0; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--text-2); cursor: pointer; }
:root .lc-pop .lc-x:hover { background: var(--line); color: var(--text); }
.lc-found { margin-left: auto; }
.lc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 4px 14px; }
.lc-head b { font: 750 1.2rem var(--font-display); letter-spacing: -.03em; }
.lc-found { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); font-size: .76rem; font-weight: 650; white-space: nowrap; }
.lc-found i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.lc-tabs { display: none; }
.lc-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; }
.lc-col { margin: 0; padding: 12px; border: 0; border-radius: 20px; background: var(--surface-2); min-width: 0; display: grid; gap: 2px; }
.lc-col legend { float: left; width: 100%; margin: 2px 6px 8px; padding: 0; font-size: .66rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.lc-row { position: relative; display: flex; align-items: center; gap: 11px; margin: 0; padding: 9px 10px; border-radius: 14px; font-size: .92rem; font-weight: 600; color: var(--text); cursor: pointer; }
.lc-row input { position: absolute; opacity: 0; pointer-events: none; }
.lc-row small { display: block; font-size: .74rem; font-weight: 500; color: var(--text-3); }
.lc-row:hover { background: var(--surface-solid); }
.lc-row:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.lc-row.on { background: var(--text); color: var(--bg); box-shadow: 0 12px 24px -12px rgba(12, 16, 48, .7); }
.lc-row.on small { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.lc-chk { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--bg); color: var(--text); }
.lc-sym { width: 34px; height: 34px; border-radius: 11px; flex: none; display: grid; place-items: center; color: #fff; font: 600 .88rem var(--font-mono); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.lc-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, #8b5cf6 9%, transparent); font-size: .8rem; color: var(--text-2); line-height: 1.45; }
.lc-note b { color: var(--text); }
.lc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 4px 0; font-size: .8rem; color: var(--text-3); }
:root .lc-pop button, :root .lc-toast button { min-height: 0; overflow: visible; box-shadow: none; filter: none; transform: none; }
:root .lc-pop button::after, :root .lc-toast button::after { display: none; }
:root .lc-pop .lc-link { padding: 0; background: none; border: 0; color: var(--accent); font: 650 .8rem var(--font-body); }
.lc-toast { position: fixed; z-index: 300; top: 84px; right: 24px; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 12px; border-radius: 22px; background: #0c1030; color: #fff; box-shadow: 0 24px 50px -18px rgba(12, 16, 48, .7); font: 500 .9rem var(--font-body); animation: navopen .2s ease; }
.lc-toast[hidden] { display: none; }
:root .lc-toast .k { padding: 8px 14px; border-radius: 999px; background: #fff; color: #0c1030; font-weight: 650; font-size: .85rem; }
:root .lc-toast .c { padding: 8px 12px; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .85); border: 1px solid rgba(255, 255, 255, .22); font-weight: 600; font-size: .85rem; }
.auth { position: relative; }
.auth-lc { position: absolute; top: 18px; right: 18px; z-index: 30; }
@media (max-width: 700px) {
  .lc-pill { height: 40px; padding: 0 9px 0 7px; gap: 6px; }
  .lc-pill .lc-cur, .lc-pill .dn { display: none; }
  .lc-menu[open] .lc-scrim { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(8, 10, 30, .42); backdrop-filter: blur(3px); cursor: pointer; }
  :root .lc-pop .lc-x { width: 42px; height: 42px; }
  .lc-pop { touch-action: pan-y; transition: transform .2s ease; }
  .lc-pop { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; max-height: 86vh; overflow-y: auto; padding: 10px 16px calc(22px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; }
  .lc-grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); margin: 0 auto 12px; box-sizing: content-box; padding: 6px 30px; background-clip: content-box; }
  .lc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 5px; margin-bottom: 12px; border-radius: 999px; background: var(--surface-2); }
  :root .lc-tabs button { padding: 10px; border-radius: 999px; background: transparent; color: var(--text-2); border: 0; font: 600 .9rem var(--font-body); }
  :root .lc-tabs button.on { background: var(--text); color: var(--bg); }
  .lc-cols { grid-template-columns: 1fr; }
  .lc-col { background: transparent; padding: 0; }
  .lc-col legend { display: none; }
  .lc-cols[data-lc-show="lang"] .lc-curs, .lc-cols[data-lc-show="cur"] .lc-langs { display: none; }
  .lc-row { padding: 11px 12px; font-size: 1rem; }
  .lc-foot { flex-direction: column; align-items: flex-start; }
  .lc-toast { top: auto; bottom: calc(var(--dock-h, 0px) + 16px); left: 16px; right: 16px; }
  .auth-lc { top: 12px; right: 12px; }
  .public .lc-toast, .auth .lc-toast { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .lc-pop, .lc-toast { animation: none; } }
/* the Settings card */
.lc-card form { display: grid; gap: 0; }
.lc-card .lc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.lc-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 14px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 650; cursor: pointer; min-width: 0; }
.lc-tile input { position: absolute; opacity: 0; pointer-events: none; }
.lc-tile small { font-size: .74rem; font-weight: 500; color: var(--text-3); margin-top: -8px; }
.lc-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.lc-tile:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.lc-tile.on { background: var(--text); color: var(--bg); border-color: var(--text); box-shadow: 0 16px 30px -16px rgba(12, 16, 48, .8); }
.lc-tile.on small { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.lc-tile .lc-chk { position: absolute; top: 12px; right: 12px; }
.lc-sub { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 22px; }
.lc-sub h3 { margin: 0; font: 700 1.05rem var(--font-display); letter-spacing: -.02em; }
.lc-sub h3::after { display: none; }
.lc-sub span { font-size: .82rem; color: var(--text-3); text-align: right; }
.lc-auto { display: flex; align-items: center; gap: 14px; margin: 6px 0 0; padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--good) 9%, transparent); border: 1px solid color-mix(in srgb, var(--good) 28%, transparent); cursor: pointer; font-weight: 400; }
.lc-auto input { position: absolute; opacity: 0; pointer-events: none; }
.lc-auto .sw { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; background: var(--line-strong); transition: background .2s ease; }
.lc-auto .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: left .2s ease; }
.lc-auto input:checked + .sw { background: var(--good); }
.lc-auto input:checked + .sw::after { left: 21px; }
.lc-auto input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.lc-auto b { display: block; color: var(--text); }
.lc-auto span span { font-size: .84rem; color: var(--text-2); }
.lc-keep { margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1px dashed var(--line-strong); font-size: .86rem; color: var(--text-2); }
.lc-keep b { color: var(--text); }
@media (max-width: 860px) { .lc-card .lc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lc-tile { padding: 12px; } }
/* The top bar's blur would trap the open picker inside it, and the dock would sit on top of the phone sheet. */
.gv-top:has(.lc-menu[open]) { z-index: 450; }
@media (max-width: 700px) { .public .site-nav { gap: 10px; } .public .site-nav .btn.ghost { display: none; } }
/* The cookie banner (base.html, app/site_codes.py): three buttons that look the same, so saying no is as easy as yes. */
.ck { position: fixed; z-index: 300; left: 24px; bottom: 24px; width: min(520px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 18px 18px 16px; border-radius: 24px; background: var(--surface-solid); color: var(--text); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); font: 400 .9rem/1.5 var(--font-body); animation: navopen .2s ease; }
.ck[hidden] { display: none; }
body:has(.app.docked) .ck { bottom: calc(var(--dock-h) + 16px); max-height: calc(100vh - var(--dock-h) - 32px); }
.ck-title { display: block; margin: 0 0 6px; font: 700 1.05rem var(--font-display); letter-spacing: -.02em; }
.ck p { margin: 0; color: var(--text-2); }
.ck p a { color: var(--accent); font-weight: 600; }
.ck-pick { display: grid; gap: 8px; margin-top: 12px; }
.ck-pick[hidden] { display: none; }
.ck-row { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; font-weight: 400; }
.ck-row input { position: absolute; opacity: 0; pointer-events: none; }
.ck-row .sw { flex: none; position: relative; width: 42px; height: 26px; border-radius: 999px; background: var(--line-strong); transition: background .2s ease; }
.ck-row .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: left .2s ease; }
.ck-row input:checked + .sw { background: var(--good); }
.ck-row input:checked + .sw::after { left: 19px; }
.ck-row input:disabled + .sw { opacity: .6; }
.ck-row input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.ck-row b { display: block; color: var(--text); }
.ck-row small { display: block; font-size: .8rem; color: var(--text-2); line-height: 1.4; }
.ck-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
:root .ck .ck-btn { min-height: 44px; margin: 0; padding: 10px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong); box-shadow: none; filter: none; transform: none; font: 650 .86rem var(--font-body); white-space: normal; line-height: 1.2; cursor: pointer; }
:root .ck .ck-btn::after { display: none; }
:root .ck .ck-btn:hover { border-color: var(--text-2); }
:root .ck .ck-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root .ck .ck-btn[hidden] { display: none; }
:root button.ck-link { min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; filter: none; transform: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
:root button.ck-link::after { display: none; }
@media (max-width: 700px) {
  .ck { left: 16px; right: 16px; bottom: 16px; width: auto; max-height: calc(100vh - 32px); padding: 16px 14px 14px; }
  .ck-btns { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .ck { animation: none; } }

/* A module's tile outside the dock (templates/_module_tile.html): same icon and colour as the dock (modules.LOOK). */
.mod-tile { flex: none; width: var(--s, 40px); height: var(--s, 40px); border-radius: calc(var(--s, 40px) * .3125); display: inline-grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -14px rgba(0, 0, 0, .6); }
.mod-tile svg { width: calc(var(--s, 40px) * .46); height: calc(var(--s, 40px) * .46); }

/* Inside the Shopify admin (app/shopify_frame.py): Shopify's left menu replaces our top bar and dock, so the page
   needs no room for the dock; a slim bar keeps the page search, Ask GV Brain, Show me and "Open full GrowViking". */
:root .app.docked.in-shopify { padding-bottom: 24px; }
.app.docked.in-shopify .gv-frame-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.app.docked.in-shopify .gv-frame-bar .sp { flex: 1 1 auto; }
:root .app.docked.in-shopify .gv-frame-bar button.top-search { flex: 0 1 360px; margin: 0; }
ui-nav-menu { display: none; }
.public.in-shopify .public-main { padding-top: 16px; }
@media (max-width: 640px) {
  .app.docked.in-shopify .gv-frame-bar { padding: 8px 12px; }
  :root .app.docked.in-shopify .gv-frame-bar button.top-search { flex: none; }
}