/* static/css/nav.css — button-only navigation (port of design-language/redesign.html .glass .dock .live
   .nav .nbar .tabs .ind .panes .track .pane). Camera: round glass gear, "Type the code" pill, the dock.
   Session / Catalogue: one full-screen #nav sliding up 380 ms (out 260 ms), tab indicator 300 ms,
   panes slide sideways together 320 ms. Only transform / opacity animate. */

/* ── camera chrome: glass buttons (blur only on these small buttons, never on a full screen) ── */
.k-glass{height:40px;min-width:40px;padding:0 12px;border:0;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font:600 14px var(--body);color:#fff;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:transform var(--k-press) var(--ease-out),opacity 200ms ease,background-color 160ms ease}
.k-glass svg{display:block;flex:none}
.k-glass.k-icon{width:40px;padding:0}
.stage-top .k-glass{flex:none}
.manual .k-glass{padding:0 16px}

/* the dock replaces the old bottom handle: the stage no longer reserves handle height */
.stage{padding-bottom:0}
.k-dock{display:flex;gap:10px;padding:6px 16px calc(var(--sab) + 26px);transition:opacity 200ms ease,transform 260ms var(--ease-out)}
.k-dock .k-glass{flex:1 1 0;min-width:0;height:54px;font-size:15.5px;gap:9px}
.k-dock .k-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.k-dock .k-cnt{margin-left:2px}
.k-dock .k-glass:not(.hot) .k-cnt{background:rgba(255,255,255,.2);color:#fff}
/* small phones (360): keep "Catalogue" + a 4-digit count whole instead of ellipsing the label */
@media (max-width:374px){ .k-dock{gap:8px;padding-left:12px;padding-right:12px} .k-dock .k-glass{flex:1 1 auto;padding:0 10px;gap:7px;font-size:15px} }
/* while the scan result card is up the camera buttons fade away under it */
body.carded .k-dock,body.carded .manual{opacity:0;transform:translateY(12px);pointer-events:none}

/* legacy over-camera cards (replaced by #card in Task 6): the old white handle used to hide their empty,
   parked edge at the bottom of the screen; with a transparent dock they must not paint until filled */
#confirm:empty,#reveal:empty,#nf:empty,#mentry:empty,#card:empty{display:none}

/* live dot: red always, pings while something is building (paused with the rest of the stage when covered) */
.k-live{width:9px;height:9px;border-radius:50%;background:var(--red);position:relative;flex:none}
.k-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--red);opacity:0}
.k-live.on::after{animation:k-ping 1.6s var(--ease-out) infinite}
@keyframes k-ping{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.5);opacity:0}}

/* count pill (dock + tabs) */
.k-cnt{flex:none;font:700 11px/1.35 var(--body);padding:1px 6px;border-radius:99px;background:var(--red);color:var(--on-red);font-variant-numeric:tabular-nums}

/* ── full-screen Session / Catalogue ── */
.k-nav{position:absolute;inset:0;z-index:11;background:var(--canvas);display:flex;flex-direction:column;transform:translateY(100%);
  visibility:hidden;will-change:transform;contain:layout paint;
  transition:transform 380ms var(--ease-sheet),visibility 0s linear 380ms}
.k-nav.show{transform:translateY(0);visibility:visible;transition:transform 380ms var(--ease-sheet),visibility 0s}
.k-nav.out{transition:transform 260ms var(--ease-sheet),visibility 0s linear 260ms}
.k-nav:not(.show){pointer-events:none}

.k-nbar{flex:none;display:flex;align-items:center;gap:10px;padding:calc(var(--sat) + 12px) 16px 0;min-width:0}
.k-back{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--surface);box-shadow:var(--sh-sm);display:grid;place-items:center;color:var(--ink);
  -webkit-tap-highlight-color:transparent}
.k-back svg{display:block;transform:rotate(-90deg)}

.k-tabs{position:relative;flex:1;min-width:0;display:flex;padding:4px;border-radius:14px;background:var(--surface-soft)}
.k-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:var(--surface);box-shadow:var(--sh-sm);
  transition:transform 300ms var(--ease-inout)}
.k-ind::after{content:"";position:absolute;left:50%;bottom:4px;width:18px;height:3px;margin-left:-9px;border-radius:3px;background:var(--red)}
.k-tabs[data-tab=cat] .k-ind{transform:translateX(100%)}
.k-tab{flex:1 1 0;min-width:0;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 6px;
  border:0;background:none;font:600 14px var(--body);color:var(--mute);-webkit-tap-highlight-color:transparent;
  transition:color 200ms ease,transform var(--k-press) var(--ease-out)}
.k-tab .k-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.k-tab.on{color:var(--ink)}
.k-tab:not(.on) .k-cnt{background:var(--hairline-strong);color:var(--body-c)}

.k-panes{flex:1;min-height:0;overflow:hidden;position:relative}
.k-track{display:flex;width:200%;height:100%;transition:transform 320ms var(--ease-inout)}
.k-track[data-tab=cat]{transform:translateX(-50%)}
.k-pane{flex:none;width:50%;height:100%;overflow-y:auto;padding:0 16px calc(var(--sab) + 40px);scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.k-pane::-webkit-scrollbar{display:none}

@media (prefers-reduced-motion:reduce){
  .k-nav,.k-nav.show,.k-nav.out{transform:none;opacity:0;transition:opacity 200ms ease,visibility 0s linear 200ms}
  .k-nav.show{opacity:1;transition:opacity 200ms ease,visibility 0s}
  .k-track,.k-ind{transition:none}
  .k-live.on::after{animation:none}
  body.carded .k-dock,body.carded .manual{transform:none}
}