/* ==========================================================================
   Bid Budi — glass.

   The owner's call on 2026-09-29, after three rounds of mockups: the glass and
   depth of the Ticketpro support console, in the Electric palette. The
   technique is ported from tpsupport's tp-glass.css; the colours are Bid
   Budi's own and every one of them is a token from tokens.css.

   Loaded after app.css and only restyles what app.css lays out. Take this file
   out of the layout and the product falls back to paper, intact.

   Four rules this file keeps:
     - No backdrop-filter on a card. A filter makes the element the containing
       block for position:fixed descendants. Only bars that content genuinely
       scrolls under are frosted: the header and the tab bars.
     - --bb-brass-bright stays a fill. Text and outlines are --bb-brass.
     - .bb-section still sets padding-block only (see app.css).
     - Motion is decoration: prefers-reduced-motion removes all of it.
   ========================================================================== */

/* --- Ground --------------------------------------------------------------- */

body {
  background: var(--bb-wash), var(--bb-paper);
  background-attachment: fixed;
}

/* --- Header: frosted ------------------------------------------------------ */

.bb-header {
  background: var(--bb-glass-bar);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--bb-glass-line);
  box-shadow: 0 1px 0 rgba(var(--bb-ink-rgb), 0.06), 0 8px 24px rgba(var(--bb-ink-rgb), 0.05);
}

/* The current page is a raised glass pill rather than an underline: on a
   frosted bar a 2px rule disappears into whatever is scrolling under it. */
.bb-nav { gap: var(--bb-space-1); align-items: center; }
.bb-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bb-tap-min);
  padding: 0 var(--bb-space-3);
  border: 1px solid transparent;
  border-radius: var(--bb-radius-md);
  color: var(--bb-ink-body);
  font-weight: 500;
}
.bb-nav a:hover { background: rgba(var(--bb-brass-rgb), 0.07); }
.bb-nav a[aria-current="page"] {
  color: var(--bb-ink);
  font-weight: 600;
  background: var(--bb-glass);
  border-color: var(--bb-glass-line);
  box-shadow: var(--bb-shadow-glass);
}
.bb-nav a[aria-current="page"] svg { color: var(--bb-brass); }

/* The consoles are the role-based actions, so they look like actions: dark
   chrome pills, lit from the top, with an orange ring on the one you are in. */
.bb-nav--console {
  gap: var(--bb-space-2);
  padding-left: var(--bb-space-4);
  border-left: 1px solid rgba(var(--bb-ink-rgb), 0.1);
}
.bb-nav--console a,
.bb-drawer a.bb-drawer__console {
  gap: 7px;
  border-radius: var(--bb-radius-pill);
  padding: 0 var(--bb-space-4);
  color: var(--bb-ink-on-dark);
  font-weight: 600;
  font-size: var(--bb-size-small);
  background: linear-gradient(180deg, var(--bb-chrome-hi), var(--bb-chrome));
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(var(--bb-ink-rgb), 0.22), inset 0 1px 0 rgba(var(--bb-white-rgb), 0.14);
}
.bb-nav--console a:hover {
  color: var(--bb-ink-on-dark);
  background: linear-gradient(180deg, var(--bb-chrome-hi), var(--bb-chrome-hi));
}
.bb-nav--console a[aria-current="page"] {
  color: var(--bb-ink-on-dark);
  background: linear-gradient(180deg, var(--bb-chrome-hi), var(--bb-chrome));
  box-shadow: 0 0 0 2px var(--bb-chrome-accent), 0 6px 14px rgba(var(--bb-brass-rgb), 0.3), inset 0 1px 0 rgba(var(--bb-white-rgb), 0.14);
}

.bb-drawer { background: var(--bb-surface); }
.bb-drawer a.bb-drawer__console {
  display: flex;
  justify-content: center;
  margin: var(--bb-space-2) 0;
  border-bottom: none;
}

/* --- Console bar: the dark raised strip ----------------------------------- */

.bb-console {
  background: var(--bb-chrome-gradient);
  border-bottom: none;
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(var(--bb-white-rgb), 0.08), 0 10px 24px rgba(var(--bb-ink-rgb), 0.18);
}
.bb-console__crumb a { color: var(--bb-chrome-muted); }
.bb-console__crumb a:hover { color: var(--bb-ink-on-dark); }
.bb-console__crumb [aria-current="page"] { color: var(--bb-ink-on-dark); }
.bb-console__crumb li + li::before { border-color: var(--bb-chrome-muted); }

.bb-console__tabs {
  gap: var(--bb-space-1);
  padding-bottom: var(--bb-space-2);
}
.bb-console__tabs a {
  position: relative;
  padding: 0 var(--bb-space-4);
  border-bottom: none;
  border-radius: var(--bb-radius-md);
  color: var(--bb-chrome-text);
  font-weight: 500;
}
.bb-console__tabs a:hover { color: var(--bb-ink-on-dark); background: rgba(var(--bb-white-rgb), 0.07); }
.bb-console__tabs a[aria-current="page"] {
  color: var(--bb-ink-on-dark);
  font-weight: 600;
  background: linear-gradient(90deg, rgba(var(--bb-white-rgb), 0.17), rgba(var(--bb-white-rgb), 0.05));
  box-shadow: inset 0 1px 0 rgba(var(--bb-white-rgb), 0.18), 0 8px 18px rgba(var(--bb-ink-rgb), 0.35);
}
.bb-console__tabs a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--bb-space-3);
  right: var(--bb-space-3);
  bottom: 4px;
  height: 3px;
  border-radius: 3px;
  background: var(--bb-chrome-accent);
  box-shadow: 0 0 12px var(--bb-chrome-accent);
}

/* The second row sits on the same dark strip, so app.css's --bb-ink-muted and
   sunk-surface hover (both meant for a light bar) left it unreadable. Same
   chrome inks as the row above; the current item keeps its pill rather than
   the underline so the two levels still read apart. */
.bb-console__subtabs {
  padding-bottom: var(--bb-space-3);
  border-top-color: rgba(var(--bb-white-rgb), 0.12);
}
.bb-console__subtabs a { color: var(--bb-chrome-text); }
.bb-console__subtabs a:hover { color: var(--bb-ink-on-dark); background: rgba(var(--bb-white-rgb), 0.07); }
.bb-console__subtabs a:focus-visible { outline-color: var(--bb-chrome-accent); }
.bb-console__subtabs a[aria-current="page"] {
  color: var(--bb-ink-on-dark);
  background: rgba(var(--bb-white-rgb), 0.16);
  box-shadow: inset 0 1px 0 rgba(var(--bb-white-rgb), 0.18);
}

/* --- Glass sheets --------------------------------------------------------- */

.bb-card,
.bb-tile,
.bb-note,
.bb-integrity,
.bb-flash__item {
  background: var(--bb-glass);
  border-color: var(--bb-glass-line);
  box-shadow: var(--bb-shadow-glass);
}
/* Outbid on arrival keeps its red: glass would turn it back into the quiet
   strip a buyer read straight past. */
.bb-flash__item--outbid {
  background: var(--bb-alert-soft);
  border-color: var(--bb-alert-line);
  border-left-color: var(--bb-alert);
}
.bb-card { border-radius: var(--bb-radius-lg); }
.bb-tile { border-radius: 0 0 var(--bb-radius-lg) var(--bb-radius-lg); }
/* The note's meaning is its left bar. On glass a border reads thinner, so
   the bar is drawn as an inset shadow as well. */
.bb-note { border-left-width: 4px; }
/* The glass rule above sets border-color on all four sides, which repainted
   every note's bar the same pale glass. Each meaning gets its colour back. */
.bb-note,
.bb-note--brass  { border-left-color: var(--bb-brass); }
.bb-note--verify { border-left-color: var(--bb-verify); }
.bb-note--quiet  { border-left-color: var(--bb-ink-faint); }
.bb-note--alert  { border-left-color: var(--bb-alert); }

.bb-card__head { border-bottom-color: rgba(var(--bb-ink-rgb), 0.07); }
.bb-table td { border-bottom-color: rgba(var(--bb-ink-rgb), 0.06); }
.bb-table tbody tr:hover td { background: rgba(var(--bb-brass-rgb), 0.035); }
.bb-empty { background: var(--bb-glass-2); border-color: var(--bb-line-strong); }

/* The four console counts become tiles of their own. */
.bb-integrity--tiles {
  background: none;
  border: none;
  box-shadow: none;
  gap: var(--bb-space-3);
}
@media (min-width: 900px) { .bb-integrity--tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bb-integrity--tiles .bb-integrity__cell {
  border: 1px solid var(--bb-glass-line);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-glass);
  box-shadow: var(--bb-shadow-glass);
}
.bb-integrity--tiles .bb-integrity__cell--live { box-shadow: inset 0 3px 0 var(--bb-brass-bright), var(--bb-shadow-glass); }
.bb-integrity--tiles .bb-integrity__value { font-size: var(--bb-size-display); }

/* --- Buttons: the primary is bevelled ------------------------------------- */

.bb-btn--primary,
.bb-btn--primary:hover {
  background: var(--bb-primary-bevel);
  border-color: var(--bb-brass);
  box-shadow: 0 8px 18px rgba(var(--bb-brass-rgb), 0.28), inset 0 1px 0 rgba(var(--bb-white-rgb), 0.3);
}
.bb-btn--primary:hover:not(:disabled) {
  color: var(--bb-ink-on-dark);
  box-shadow: 0 12px 24px rgba(var(--bb-brass-rgb), 0.36), inset 0 1px 0 rgba(var(--bb-white-rgb), 0.3);
}
.bb-btn--secondary, .bb-btn--secondary:hover,
.bb-btn--tertiary,  .bb-btn--tertiary:hover,
.bb-btn--danger,    .bb-btn--danger:hover {
  background: var(--bb-glass);
  border-color: var(--bb-line-strong);
  box-shadow: var(--bb-shadow-glass);
}

/* --- Tiles: lift, and tilt under the pointer ------------------------------ */

.bb-tile:hover, .bb-tile:has(.bb-tile__link:focus-visible) {
  border-color: var(--bb-glass-line);
  box-shadow: var(--bb-shadow-pop);
}
.bb-tile__watch-btn { background: rgba(var(--bb-ink-rgb), 0.72); }

[data-bb-tilt] { position: relative; will-change: transform; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s; }
[data-bb-tilt].is-tilting {
  transition: transform 0.06s linear, box-shadow 0.2s;
  box-shadow: 0 30px 50px rgba(var(--bb-ink-rgb), 0.18), inset 0 1px 0 rgba(var(--bb-white-rgb), 0.5);
}
/* The sheen that follows the pointer. app.js writes --bb-mx and --bb-my. */
[data-bb-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(420px circle at var(--bb-mx, 50%) var(--bb-my, 0%), rgba(var(--bb-white-rgb), 0.5), transparent 45%);
  mix-blend-mode: soft-light;
}
[data-bb-tilt].is-tilting::after { opacity: 1; }

/* --- In-page tabs ---------------------------------------------------------
   One bar, prominent on purpose: the owner's complaint was that the old tabs
   were easy to miss. Without app.js the bar is a row of jump links over the
   panels, which stay stacked; with it, one panel shows at a time and the
   hash remembers which. */

.bb-tabset { display: flex; flex-direction: column; gap: var(--bb-space-5); }
.bb-tabset__bar {
  position: sticky;
  top: 66px;
  z-index: 20;
  display: flex;
  gap: var(--bb-space-1);
  padding: 5px;
  max-width: 100%;
  width: max-content;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--bb-radius-lg);
  background: var(--bb-glass-bar);
  border: 1px solid var(--bb-glass-line);
  box-shadow: var(--bb-shadow-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}
.bb-tabset__bar::-webkit-scrollbar { display: none; }
.bb-tabset__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
  min-height: var(--bb-tap-min);
  padding: 0 var(--bb-space-4);
  border-radius: var(--bb-radius-md);
  color: var(--bb-ink-muted);
  font-weight: 600;
  font-size: var(--bb-size-body);
  white-space: nowrap;
  flex-shrink: 0;
}
.bb-tabset__tab:hover { color: var(--bb-ink); background: rgba(var(--bb-white-rgb), 0.7); text-decoration: none; }
.bb-tabset__tab[aria-selected="true"] {
  color: var(--bb-ink);
  background: var(--bb-surface);
  box-shadow: 0 6px 14px rgba(var(--bb-ink-rgb), 0.1), inset 0 -3px 0 var(--bb-brass);
}
.bb-tabset__tab[aria-selected="true"] svg { color: var(--bb-brass); }
.bb-tabset__tab:focus-visible { outline: 2px solid var(--bb-brass); outline-offset: 2px; }
.bb-tabset__count {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-size-meta);
  font-weight: 500;
  padding: 1px 7px;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-surface-sunk);
  color: var(--bb-ink-muted);
}
.bb-tabset__tab[aria-selected="true"] .bb-tabset__count { background: var(--bb-brass-soft); color: var(--bb-brass-deep); }

/* What is left before Submit, on the tab that fixes it (the listing editor).
   A dot for outstanding, a tick for done; the words are in a .bb-vh beside it. */
.bb-tabset__state {
  display: inline-grid;
  place-items: center;
  flex: none;
  font-size: var(--bb-size-meta);
  line-height: 1;
}
.bb-tabset__state--todo {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bb-alert);
  box-shadow: 0 0 0 3px var(--bb-alert-soft);
}
.bb-tabset__state--done { color: var(--bb-verify-text); font-weight: 700; }

/* The Preview tab's tile is drawn at the width it has in the Auctions grid,
   not stretched across the panel, or it would preview a tile nobody sees. */
.bb-preview-tile { max-width: 340px; }

/* The Page preview tab's frame. app.js sets its height to the page inside it;
   this is the height before that, and without app.js. */
.bb-preview-frame {
  display: block;
  width: 100%;
  height: 900px;
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius-md);
  background: var(--bb-surface-sunk);
}

/* The auction and FAQ tab strip (.bb-tabs) is a row of real URLs rather
   than panels, but it is the same control to the eye, so it wears the same
   bar: one tab system across the site. */
.bb-tabs {
  top: 66px;
  gap: var(--bb-space-1);
  padding: 5px;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--bb-glass-line);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-glass-bar);
  box-shadow: var(--bb-shadow-glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
}
.bb-tabs a {
  gap: var(--bb-space-2);
  padding: 0 var(--bb-space-4);
  border-bottom: 0;
  border-radius: var(--bb-radius-md);
  font-weight: 600;
  flex-shrink: 0;
}
.bb-tabs a:hover { background: rgba(var(--bb-white-rgb), 0.7); }
.bb-tabs a[aria-current="page"] {
  background: var(--bb-surface);
  box-shadow: 0 6px 14px rgba(var(--bb-ink-rgb), 0.1), inset 0 -3px 0 var(--bb-brass);
}
.bb-tabs a:focus-visible { outline: 2px solid var(--bb-brass); outline-offset: 2px; }
.bb-tabs__count { border: 0; border-radius: var(--bb-radius-pill); padding: 1px 7px; color: var(--bb-ink-muted); }
.bb-tabs a[aria-current="page"] .bb-tabs__count { background: var(--bb-brass-soft); color: var(--bb-brass-deep); }

.bb-tabset__panel { display: flex; flex-direction: column; gap: var(--bb-space-5); scroll-margin-top: 130px; }
.bb-tabset__panel[hidden] { display: none; }
.bb-tabset__panel:focus { outline: none; }
/* Only when the reader switches tabs, never on load, and movement only: a
   fade would put every colour on the panel below AA for a quarter of a second,
   which is exactly when an automated contrast check looks at it. */
.bb-tabset__panel.is-entering { animation: bb-rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes bb-rise { from { transform: translateY(6px); } to { transform: none; } }

.bb-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-5); align-items: start; }
@media (min-width: 1024px) { .bb-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Compact search ------------------------------------------------------- */

.bb-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bb-space-2);
  padding: var(--bb-space-2);
  border-radius: var(--bb-radius-lg);
  background: var(--bb-glass);
  border: 1px solid var(--bb-glass-line);
  box-shadow: var(--bb-shadow-glass);
}
.bb-search__q { position: relative; flex: 1 1 220px; min-width: 0; }
.bb-search__q svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--bb-ink-faint); pointer-events: none; }
.bb-search__q .bb-input { padding-left: 38px; }
.bb-search__toggle { display: none; }
.bb-search__filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bb-space-2); }
.bb-search__filters .bb-select { width: auto; }
.bb-search__go { flex: none; }

/* With app.js on a phone, the filters fold behind one button. Without it
   they simply wrap, which is still shorter than the card they replaced. */
@media (max-width: 759px) {
  .bb-search[data-bb-search-ready] .bb-search__toggle { display: inline-flex; }
  .bb-search[data-bb-search-ready] .bb-search__filters { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .bb-search[data-bb-search-ready][data-open="true"] .bb-search__filters { display: flex; }
  .bb-search__filters .bb-select { width: 100%; }
}

/* Live / Closed / Everything, as one segmented control of real radios. */
.bb-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0;
  border: 0;
  border-radius: var(--bb-radius-md);
  background: var(--bb-surface-sunk);
}
.bb-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.bb-seg label { position: relative; }
.bb-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bb-seg span {
  display: inline-flex;
  align-items: center;
  min-height: var(--bb-tap-min);
  padding: 0 var(--bb-space-3);
  border-radius: var(--bb-radius-sm);
  color: var(--bb-ink-muted);
  font-weight: 600;
  font-size: var(--bb-size-small);
  white-space: nowrap;
}
.bb-seg input:checked + span { background: var(--bb-surface); color: var(--bb-ink); box-shadow: 0 3px 8px rgba(var(--bb-ink-rgb), 0.1); }
.bb-seg input:focus-visible + span { outline: 2px solid var(--bb-brass); outline-offset: 1px; }

.bb-chips--filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bb-space-2); }
.bb-chipx {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
  min-height: var(--bb-tap-min);
  padding: 0 var(--bb-space-2) 0 var(--bb-space-3);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-glass);
  border: 1px solid var(--bb-glass-line);
  box-shadow: var(--bb-shadow-glass);
  color: var(--bb-ink);
  font-size: var(--bb-size-small);
  font-weight: 500;
}
.bb-chipx:hover { color: var(--bb-ink); text-decoration: none; border-color: var(--bb-brass-line); }
.bb-chipx__x {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bb-surface-sunk);
  color: var(--bb-ink-muted);
}
.bb-chips__clear { font-size: var(--bb-size-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: var(--bb-tap-min); }

/* --- Footer: the chrome --------------------------------------------------- */

.bb-footer {
  background: var(--bb-chrome-gradient);
  box-shadow: inset 0 1px 0 rgba(var(--bb-white-rgb), 0.08);
}
@media (min-width: 1024px) { .bb-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.bb-footer .bb-label { color: var(--bb-chrome-muted); }
.bb-footer a { text-decoration: underline; text-decoration-color: rgba(var(--bb-white-rgb), 0.3); text-underline-offset: 3px; }
.bb-footer a:hover { color: var(--bb-ink-on-dark); text-decoration-color: currentColor; }

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-bb-tilt], [data-bb-tilt].is-tilting { transform: none !important; transition: none !important; }
  [data-bb-tilt]::after { display: none; }
  .bb-tabset__panel.is-entering { animation: none; }
}

@media print {
  body { background: none; }
  .bb-tabset__bar { display: none; }
  .bb-tabset__panel[hidden] { display: flex; }
}