/* TopBid.Live — the one header. Every page uses this, nobody hand-rolls another. */

/* `hidden` has to actually hide. Plenty of our components set display in a
   class, which silently outranks the attribute and leaves a ghost box behind. */
[hidden]{display:none !important}

.tb-nav{position:relative;z-index:80}
/* At rest the rail is nothing — no tint, no blur. Both of those paint a
   rectangle the width of the page, and over a gradient background that reads as
   a box drawn around the logo, which is exactly what it looked like. The frosted
   panel only earns its keep once content is actually sliding underneath, so it
   arrives with .is-stuck and leaves with it. */
.tb-nav[data-stick="1"]{position:sticky;top:0;background:transparent;
  border-bottom:1px solid transparent;transition:border-color .3s ease, background .3s ease}
.tb-nav[data-stick="1"].is-stuck{border-bottom-color:var(--line);
  background:color-mix(in srgb, var(--bg) 93%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}

.tb-nav-inner{max-width:1120px;margin:0 auto;padding:16px 22px;
  display:flex;align-items:center;gap:18px}
/* Pages that drop the header inside their own narrow reading column already
   have their gutter. Keeping our 22px on top of it only pushes the logo off
   the text grid, so the brand no longer lines up with the heading below it. */
.tb-nav[data-flush="1"] .tb-nav-inner{padding-left:0;padding-right:0}

/* Brand ---------------------------------------------------------------- */
.tb-brand{display:block;line-height:0;flex:0 0 auto;text-decoration:none}
.tb-brand img{display:block;width:auto;height:56px}
.tb-nav[data-size="hero"] .tb-brand img{height:112px}
/* keep these scoped under .tb-brand — a bare .tb-logo-l loses to the
   .tb-brand img rule above and both logos stack on top of each other */
.tb-brand .tb-logo-l{display:none}
[data-theme="light"] .tb-brand .tb-logo-d{display:none}
[data-theme="light"] .tb-brand .tb-logo-l{display:block}

.tb-spacer{flex:1 1 auto}

/* Public actions -------------------------------------------------------- */
.tb-actions{display:flex;align-items:center;gap:8px}
.tb-link{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500;
  padding:10px 14px;border-radius:10px;transition:color .18s, background .18s}
.tb-link:hover{color:var(--text);background:color-mix(in srgb, var(--text) 7%, transparent)}
.tb-cta{color:var(--bg);background:var(--win);text-decoration:none;font-size:.92rem;
  font-weight:700;padding:11px 18px;border-radius:999px;white-space:nowrap;
  transition:background .18s, transform .12s, box-shadow .18s}
.tb-cta:hover{background:var(--win-hot);box-shadow:0 6px 20px color-mix(in srgb, var(--win) 35%, transparent)}
.tb-cta:active{transform:translateY(1px)}

/* Menu button ----------------------------------------------------------- */
.tb-menu-wrap{position:relative;flex:0 0 auto}
/* This has to stay a circle on every screen. width/height alone are only a
   starting size: as a flex item it can still be squeezed by a crowded row, and
   a squeezed box with a 999px radius reads as a stretched pill, not a button.
   flex:0 0 auto refuses the squeeze, the min-/max- pair pins both axes, and
   aspect-ratio is the backstop if anything ever overrides one of them. */
.tb-menu-btn{position:relative;width:46px;height:46px;flex:0 0 auto;aspect-ratio:1/1;
  min-width:46px;max-width:46px;min-height:46px;max-height:46px;
  padding:0;border-radius:999px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--surface);border:1px solid var(--line-strong);box-shadow:none;
  transition:border-color .2s, background .2s, transform .12s}
.tb-menu-btn:hover{border-color:color-mix(in srgb, var(--win) 55%, var(--line-strong))}
.tb-menu-btn:active{transform:scale(.96)}
.tb-menu-btn[aria-expanded="true"]{border-color:var(--win);
  background:color-mix(in srgb, var(--win) 12%, var(--surface))}
.tb-menu-btn i{display:block;width:16px;height:1.7px;border-radius:2px;background:var(--text);
  transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .14s ease}
.tb-menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(5.7px) rotate(45deg)}
.tb-menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.tb-menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.7px) rotate(-45deg)}

/* Menu panel ------------------------------------------------------------ */
/* min-width sets the floor; the cap stops a 24-character handle in the
   "My page" row from growing the panel past the screen and off the left edge */
.tb-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:274px;z-index:90;
  max-width:calc(100vw - 24px);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:16px;
  box-shadow:0 20px 55px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.28);
  padding:8px;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;
  pointer-events:none;transition:opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1)}
[data-theme="light"] .tb-menu{box-shadow:0 20px 45px rgba(16,24,32,.14), 0 2px 8px rgba(16,24,32,.08)}
.tb-menu.open{opacity:1;transform:none;pointer-events:auto}
.tb-mi{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:11px;
  color:var(--text);text-decoration:none;font-size:.93rem;font-weight:500;
  background:none;border:0;width:100%;text-align:left;cursor:pointer;white-space:nowrap;
  transition:background .15s ease}
.tb-mi:hover{background:color-mix(in srgb, var(--win) 13%, transparent)}
.tb-mi svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--muted);fill:none;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tb-mi:hover svg{stroke:var(--win-soft)}
/* the handle is the one piece of user text in here, so it is the piece that
   truncates when the panel runs out of room */
.tb-mi .tb-ext{margin-left:auto;font-size:.78rem;color:var(--muted);font-weight:600;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
/* a menu row can carry a state instead of a handle: done, or still to do */
.tb-mi .tb-ext.warn{color:#f2686c}
.tb-mi .tb-ext.ok{color:var(--win-soft)}
/* Something inside the menu needs attention, said on the closed button so it is
   seen without opening anything. Set by the page that owns the state. */
.tb-menu-btn.tb-alert::after{content:"";position:absolute;top:7px;right:7px;
  width:9px;height:9px;border-radius:50%;background:#f2686c;
  box-shadow:0 0 0 2px var(--surface)}
.tb-mi.danger:hover{background:color-mix(in srgb, #e5484d 14%, transparent)}
.tb-mi.danger:hover svg{stroke:#f2686c}
.tb-sep{height:1px;background:var(--line);margin:7px 5px}

/* Appearance switch inside the menu ------------------------------------- */
.tb-appear{display:flex;align-items:center;gap:10px;padding:8px 12px 9px}
.tb-appear span{font-size:.8rem;color:var(--muted);font-weight:600;letter-spacing:.02em}
.tb-seg{margin-left:auto;display:flex;gap:2px;padding:3px;border-radius:999px;
  background:color-mix(in srgb, var(--text) 8%, transparent)}
.tb-seg button{border:0;cursor:pointer;padding:5px 12px;border-radius:999px;font-size:.78rem;
  font-weight:700;color:var(--muted);background:none;box-shadow:none;min-height:0;
  transition:color .16s ease, background .16s ease}
.tb-seg button[aria-pressed="true"]{color:var(--bg);background:var(--win-soft)}

@media (max-width:900px){
  .tb-nav-inner{padding:14px 16px;gap:12px}
  .tb-nav[data-size="hero"] .tb-brand img{height:78px}
  .tb-nav[data-size="hero"] .tb-nav-inner{flex-direction:column;gap:14px}
  .tb-nav[data-size="hero"] .tb-spacer{display:none}
  .tb-brand img{height:46px}
  /* thumbs, not cursors: every row in the menu is a full 44px target */
  .tb-link,.tb-cta{display:inline-flex;align-items:center;min-height:44px}
  .tb-link{padding:9px 10px}
  .tb-mi{min-height:44px}
  .tb-seg button{min-height:44px;padding:5px 16px}
}

/* Phones held upright: the wordmark is the brand, so it reads at a glance —
   big and centred, with the actions in their own row underneath. Landscape is
   excluded on purpose (min-height): there the scarce axis is vertical and the
   compact row above is the right header. */
@media (max-width:900px) and (min-height:521px){
  .tb-nav-inner{flex-direction:column;gap:12px}
  .tb-brand img{height:72px}
  .tb-spacer{display:none}
  .tb-actions{flex-wrap:wrap;justify-content:center;gap:6px}
  /* Stacked, this rail is 150px+ tall. Pinning that to the top of a 640px
     phone screen would hold a quarter of it open over the auction, so here it
     scrolls away with the page instead — and once it is not pinned, the frosted
     panel has nothing to sit over. On the bid page, where the header is only as
     wide as its contents, that panel reads as a plate behind the logo. */
  .tb-nav[data-stick="1"],.tb-nav[data-stick="1"].is-stuck{position:static;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
  /* the button is centred now, so the panel hangs off the viewport rather than
     off the button, which would push it past the left edge */
  .tb-menu{left:50%;right:auto;width:min(320px,calc(100vw - 32px));
    transform:translate(-50%,-8px) scale(.97);transform-origin:top center}
  .tb-menu.open{transform:translate(-50%,0)}
}