/* ═════════════════════════════════════════════════════════════════════
   topbar.css · Operator top bar (canonical: docs/relay-topbar.html).
   Structure / spacing / motion match the prototype; colors are the app's
   real chrome (base.css): the bar uses the same translucent-dark + blur as
   the old <nav>, surfaces are --card/--card2, the accent glyph is --accent
   (per-tenant). All tb- namespaced. No color-mix — solid values + rgba
   overlays, the same technique the rest of the shell uses.
   ═════════════════════════════════════════════════════════════════════ */

:root{
  --tb-bar-h:58px;
  --tb-ease:cubic-bezier(.22,.61,.36,1);
  --tb-shadow:0 -10px 40px rgba(0,0,0,.5);
  --tb-bar-bg:rgba(7,9,15,.95);      /* same as the app <nav> */
  --tb-border-hi:#2d3a57;            /* lightened --border for hover */
  --tb-hover:rgba(255,255,255,.04);
  --tb-press:rgba(255,255,255,.08);
}

/* Reset the transparent topbar buttons — the app has no global button reset,
   so without this they pick up the UA's light default background (which made
   the pill grey and the white row titles vanish). Buttons with their own fill
   (.tb-iconbtn / .tb-field-btn / .tb-offer-copy / .tb-ricon) are excluded. */
.tb-pill-copy, .tb-pill-chev, .tb-row, .tb-addrow, .tb-offer-edit{
  background:transparent; border:0; color:inherit; font-family:inherit; cursor:pointer;
}

/* ── top bar ───────────────────────────────────────────────────── */
.tb-topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:10px;
  padding:0 14px;
  padding-top:env(safe-area-inset-top);
  height:calc(var(--tb-bar-h) + env(safe-area-inset-top));
  background:var(--tb-bar-bg);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}

.tb-logo{ display:flex; align-items:center; flex:0 0 auto; min-width:0; }
.tb-logo .nav-logo{ display:inline-flex; align-items:center; min-width:0; }
@media (max-width:360px){ .tb-logo .nav-logo-text{ display:none; } }

.tb-spacer{ flex:1 1 auto; }

/* ── link pill + utilities (grouped right) ─────────────────────── */
.tb-linkwrap{ display:flex; align-items:center; gap:7px; flex:1 1 auto; min-width:0; justify-content:flex-end; }

.tb-pill{
  display:flex; align-items:center; min-width:0;
  height:38px; overflow:hidden;
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:999px;
  transition:border-color .15s;
  max-width:min(64vw,280px);
}
.tb-pill:hover{ border-color:var(--tb-border-hi); }

.tb-pill-copy{
  display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto;
  height:100%; padding:0 6px 0 13px;
  transition:background .12s;
}
.tb-pill-copy:hover{ background:var(--tb-hover); }
.tb-pill-copy:active{ background:var(--tb-press); }
.tb-pill-copy .tb-glyph{ color:var(--accent); display:flex; flex:0 0 auto; }
.tb-pill-copy .tb-glyph svg{ width:15px; height:15px; display:block; }
.tb-pill-copy .tb-txt{
  font-weight:600; font-size:13.5px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; letter-spacing:-.01em;
}
.tb-pill-copy .tb-txt .tb-base{ color:var(--muted2); }

.tb-pill-chev{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  height:100%; padding:0 11px 0 9px;
  color:var(--muted2);
  border-left:1px solid var(--border);
  transition:background .12s, color .15s;
}
.tb-pill-chev:hover{ background:var(--tb-hover); color:var(--text); }
.tb-pill-chev:active{ background:var(--tb-press); }
.tb-pill-chev svg{ width:13px; height:13px; display:block; }

.tb-iconbtn{
  width:38px; height:38px; flex:0 0 auto; border-radius:999px;
  display:grid; place-items:center; color:var(--muted2);
  background:var(--card2); border:1px solid var(--border);
  transition:transform .08s var(--tb-ease), color .15s, border-color .15s, background .12s;
}
.tb-iconbtn:hover{ color:var(--text); border-color:var(--tb-border-hi); background:var(--tb-hover); }
.tb-iconbtn:active{ transform:scale(.93); }
.tb-iconbtn svg{ width:17px; height:17px; }

/* ── scrim + bottom sheets ─────────────────────────────────────── */
/* z: above the bar (100) + content, below the shared toast (300) so copy
   confirmations show over an open sheet. The bar sits behind router overlays
   (200+), so a sheet is only reachable when no overlay is up. */
.tb-scrim{
  position:fixed; inset:0; z-index:250;
  background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none; transition:opacity .26s var(--tb-ease);
}
.tb-scrim.show{ opacity:1; pointer-events:auto; }

.tb-sheet{
  position:fixed; left:50%; bottom:0; z-index:260;
  width:100%; max-width:520px; transform:translateX(-50%) translateY(100%);
  background:var(--card);
  border-top-left-radius:20px; border-top-right-radius:20px;
  border:1px solid var(--border); border-bottom:0;
  box-shadow:var(--tb-shadow);
  transition:transform .34s var(--tb-ease);
  padding-bottom:max(18px, env(safe-area-inset-bottom));
  will-change:transform; touch-action:none;
}
.tb-sheet.show{ transform:translateX(-50%) translateY(0); }
.tb-sheet.dragging{ transition:none; }

.tb-grab{ display:grid; place-items:center; padding:11px 0 5px; cursor:grab; }
.tb-grab:active{ cursor:grabbing; }
.tb-grab span{ width:38px; height:4px; border-radius:99px; background:var(--border); }

.tb-sheet h2{ font-size:1.15rem; font-weight:700; letter-spacing:-.02em; margin:6px 20px 14px; color:var(--text); }
.tb-sheet-sub{ font-size:.78rem; color:var(--muted2); margin:-8px 20px 14px; line-height:1.45; }

/* link readout */
.tb-readout{
  margin:0 16px 6px; display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1px solid var(--border); border-radius:12px;
  padding:8px 8px 8px 14px;
}
.tb-readout .tb-glyph{ color:var(--accent); flex:0 0 auto; display:flex; }
.tb-readout .tb-glyph svg{ width:16px; height:16px; }
.tb-readout .tb-url{ flex:1 1 auto; min-width:0; font-weight:600; font-size:.95rem; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.tb-readout .tb-url .tb-base{ color:var(--muted2); }

.tb-field-btn{
  width:36px; height:36px; flex:0 0 auto; border-radius:9px;
  display:grid; place-items:center; color:var(--muted2);
  background:var(--card2); border:1px solid var(--border);
  transition:transform .08s var(--tb-ease), color .15s, border-color .15s;
}
.tb-field-btn:hover{ color:var(--text); border-color:var(--tb-border-hi); }
.tb-field-btn:active{ transform:scale(.92); }
.tb-field-btn svg{ width:15px; height:15px; }

/* instant-book toggle (Relay Link sheet) — adds /book to the copied link */
.tb-instant{
  margin:8px 16px 4px; display:flex; align-items:center; gap:12px;
  background:var(--card2); border:1px solid var(--border); border-radius:12px;
  padding:11px 14px;
}
.tb-instant-ic{ color:var(--accent); display:flex; flex:0 0 auto; }
.tb-instant-ic svg{ width:18px; height:18px; }
.tb-instant-text{ flex:1; min-width:0; }
.tb-instant-title{ display:block; font-weight:600; font-size:.92rem; color:var(--text); }
.tb-instant-sub{ display:block; font-size:.72rem; color:var(--muted2); margin-top:1px; }

/* rows */
.tb-rows{ padding:8px 8px 6px; }
.tb-row{
  width:100%; display:flex; align-items:center; gap:14px;
  padding:13px 12px; border-radius:12px; text-align:left;
  transition:background .12s;
}
.tb-row:hover{ background:var(--card2); }
.tb-row:active{ background:var(--tb-press); }
.tb-row .tb-ricon{ width:34px; height:34px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center; background:var(--card2); border:1px solid var(--border); color:var(--text); }
.tb-row .tb-ricon svg{ width:17px; height:17px; }
.tb-row .tb-rtext{ flex:1; min-width:0; }
.tb-row .tb-rtitle{ font-weight:600; font-size:.92rem; color:var(--text); }
.tb-row .tb-rsub{ font-size:.78rem; color:var(--muted2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-row .tb-rchev{ color:var(--muted); flex:0 0 auto; display:flex; }
.tb-row .tb-rchev svg{ width:16px; height:16px; }

.tb-divider{ height:1px; background:var(--border); margin:6px 20px; }

.tb-row.tb-danger .tb-ricon{ color:var(--red); border-color:rgba(248,113,113,.28); background:rgba(248,113,113,.09); }
.tb-row.tb-danger .tb-rtitle{ color:var(--red); }

/* offers */
.tb-offer{ display:flex; align-items:center; gap:4px; margin:0 8px; border-radius:12px; transition:background .12s; }
.tb-offer:hover{ background:var(--card2); }
.tb-offer-edit{ display:flex; align-items:center; gap:12px; flex:1 1 auto; min-width:0; text-align:left; padding:13px 4px 13px 12px; border-radius:12px; }
.tb-offer-edit .tb-dot{ width:8px; height:8px; border-radius:99px; flex:0 0 auto; background:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.tb-offer-edit .tb-dot.off{ background:var(--muted); box-shadow:none; }
.tb-offer-edit .tb-oinfo{ flex:1; min-width:0; }
.tb-offer-edit .tb-otitle{ font-weight:600; font-size:.92rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tb-offer-edit .tb-ometa{ font-size:.78rem; color:var(--muted2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:7px; }
.tb-offer-edit .tb-ometa code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--text); background:var(--card2); border:1px solid var(--border); padding:1px 6px; border-radius:6px; font-size:.66rem; letter-spacing:.02em; }
.tb-offer-copy{ width:36px; height:36px; flex:0 0 auto; margin-right:8px; border-radius:9px; display:grid; place-items:center; color:var(--muted2); background:var(--card2); border:1px solid var(--border); transition:transform .08s var(--tb-ease), color .15s, border-color .15s; }
.tb-offer-copy:hover{ color:var(--text); border-color:var(--tb-border-hi); }
.tb-offer-copy:active{ transform:scale(.92); }
.tb-offer-copy svg{ width:15px; height:15px; }

.tb-offers-empty{ margin:0 20px 10px; font-size:.82rem; color:var(--muted2); line-height:1.5; }

.tb-addrow{ display:flex; align-items:center; gap:12px; width:calc(100% - 16px); margin:6px 8px 0; padding:13px 12px; border-radius:12px; text-align:left; color:var(--muted2); transition:background .12s, color .15s; }
.tb-addrow:hover{ background:var(--card2); color:var(--text); }
.tb-addrow .tb-plus{ width:34px; height:34px; flex:0 0 auto; border-radius:10px; display:grid; place-items:center; border:1px dashed var(--tb-border-hi); }
.tb-addrow .tb-plus svg{ width:16px; height:16px; }
.tb-addrow .tb-atext{ font-weight:600; font-size:.92rem; }

@media (prefers-reduced-motion:reduce){
  .tb-scrim, .tb-sheet, .tb-iconbtn, .tb-field-btn, .tb-offer-copy, .tb-pill{ transition-duration:.01ms !important; }
}