/* bookbask admin console.

   Tokens, buttons, pills, chips and fields all come from css/bookbask.css. This
   file is only what the console adds: the navy sidebar, the two dense screens,
   and the toast. Where the design handoff gave an inline style, it is a class
   here — the prototype inlines because its runtime has no stylesheet, not
   because the value is one-off.

   Deliberately NOT built on client-dashboard/dash.css. That is the Open Hours
   system, which the handoff says this must not resemble. Same structure, a
   different skin. */

/* ---------- frame ---------- */

body {
  margin: 0;
  background: var(--bb-page);
  color: var(--bb-ink);
  font: 400 14.5px/1.55 var(--bb-font);
  -webkit-font-smoothing: antialiased;
}

.adm {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.adm__main {
  flex: 1;
  min-width: 0;
}

/* Buttons inherit neither font nor colour from the page, and this console is
   built almost entirely from them. Without this, every control that does not
   set its own colour renders in UA black and the system font — which reads as
   "nearly right" and is easy to miss against cream. */
.adm button,
.adm input,
.adm select,
.adm textarea {
  font-family: var(--bb-font);
  color: var(--bb-ink);
}

/* The one focus treatment, everywhere. */
.adm :focus-visible {
  outline: 2px solid var(--bb-primary);
  outline-offset: 2px;
}


/* ---------- sidebar ---------- */

.adm-side {
  flex: none;
  width: 252px;
  align-self: stretch;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--bb-primary);
  color: var(--bb-on-navy-ink);
  display: flex;
  flex-direction: column;
  transition: width .16s ease-out;
  overflow: hidden;
}
.adm.is-collapsed .adm-side { width: 72px; }

.adm-side :focus-visible {
  outline: 2px solid var(--bb-on-navy-ink);
  outline-offset: 2px;
}

.adm-side__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 22px;
}
.adm.is-collapsed .adm-side__head {
  justify-content: center;
  padding: 20px 0 22px;
}

.adm-side__mark {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: default;
  display: inline-flex;
  transition: width .16s ease-out, height .16s ease-out;
}
.adm-side__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* The supplied mark is dark-on-light art. Inverting is what the handoff
     specifies rather than maintaining a second white file. */
  filter: brightness(0) invert(1);
}
/* Collapsed, the mark grows and takes over as the expand control. */
.adm.is-collapsed .adm-side__mark {
  width: 34px;
  height: 34px;
  cursor: pointer;
}

.adm-side__words {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.adm-side__word {
  font: 700 19px/1.1 var(--bb-font-logo);
  letter-spacing: 1.4px;
}
.adm-side__sub {
  font: 500 12.5px/1.3 var(--bb-font);
  color: rgba(251, 247, 240, .62);
}

.adm-side__collapse {
  margin-left: auto;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 0;
  background: rgba(251, 247, 240, .10);
  color: rgba(251, 247, 240, .7);
  font: 600 13px/1 var(--bb-font);
  cursor: pointer;
}
.adm-side__collapse:hover { background: rgba(251, 247, 240, .18); }

.adm.is-collapsed .adm-side__words,
.adm.is-collapsed .adm-side__collapse { display: none; }


/* ---------- nav ---------- */

.adm-nav {
  flex: 1;
  overflow-y: auto;
  padding: 4px 12px 20px;
}

/* The deliberate ALL-CAPS exception, and the only one in the product. */
.adm-nav__head {
  margin: 16px 0 7px;
  padding: 0 12px;
  /* Sentence case: the system bans ALL-CAPS labels, and a nav group heading
     is one. The tracking goes with it — it existed to open up the caps. */
  font: 700 10.5px/1.4 var(--bb-font);
  color: rgba(251, 247, 240, .45);
}
/* Collapsed there is no room for a word, so the group becomes the rule it was
   already implying. */
.adm.is-collapsed .adm-nav__head {
  height: 1px;
  margin: 14px 8px;
  padding: 0;
  overflow: hidden;
  background: rgba(251, 247, 240, .18);
  color: transparent;
}

.adm-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--bb-r-pill);
  background: none;
  color: rgba(251, 247, 240, .82);
  font: 500 14px/1.3 var(--bb-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.adm-nav__item:hover { background: rgba(251, 247, 240, .09); }
.adm-nav__item.is-active {
  background: var(--bb-page);
  color: var(--bb-primary);
  font-weight: 700;
}
/* Designed, not built. Readable, clearly not a destination. */
.adm-nav__item.is-soon,
.adm-nav__sub.is-soon { color: rgba(251, 247, 240, .45); }

.adm-nav__abbr { display: none; }
.adm.is-collapsed .adm-nav__item {
  justify-content: center;
  padding: 9px 0;
}
.adm.is-collapsed .adm-nav__label { display: none; }
.adm.is-collapsed .adm-nav__abbr {
  display: inline;
  font: 700 11.5px/1.3 var(--bb-font);
  letter-spacing: .6px;
}

.adm-nav__badge {
  margin-left: auto;
  flex: none;
  min-width: 20px;
  padding: 2px 7px;
  border-radius: var(--bb-r-pill);
  background: rgba(232, 168, 124, .22);
  color: var(--bb-on-navy-urgency);
  font: 700 11.5px/1.5 var(--bb-font);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.adm.is-collapsed .adm-nav__badge { display: none; }

/* Sub-pages: hidden at rest, revealed while their section is hovered, focused
   or active. This is CSS rather than JS deliberately — the previous version
   re-rendered the whole nav on mouseenter, which destroyed the link the cursor
   was travelling toward and left the expanded nav unclickable. Presentation
   belongs in the stylesheet, where it cannot replace a node mid-click.
   :focus-within keeps the sub-pages reachable by keyboard. */
.adm-nav__subs {
  display: none;
  flex-direction: column;
  padding: 2px 0 4px;
}
.adm-nav__group:hover > .adm-nav__subs,
.adm-nav__group:focus-within > .adm-nav__subs,
.adm-nav__subs.is-open {
  display: flex;
}
/* Collapsed there is no room, and the abbreviations carry the nav instead. */
.adm.is-collapsed .adm-nav__subs { display: none !important; }
.adm-nav__sub {
  padding: 7px 12px 7px 26px;
  border: 0;
  background: none;
  color: rgba(251, 247, 240, .6);
  font: 500 13px/1.3 var(--bb-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--bb-r-pill);
}
.adm-nav__sub:hover { color: var(--bb-on-navy-ink); }
.adm-nav__sub.is-active { color: var(--bb-on-navy-ink); font-weight: 700; }


/* ---------- sidebar footer ---------- */

.adm-side__foot {
  flex: none;
  padding: 14px 12px 16px;
  border-top: 1px solid rgba(251, 247, 240, .14);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adm-side__notion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--bb-r-pill);
  color: rgba(251, 247, 240, .72);
  font: 500 13px/1.3 var(--bb-font);
  text-decoration: none;
}
.adm-side__notion:hover { background: rgba(251, 247, 240, .09); }
.adm-side__arrow { font-size: 11px; }

.adm-side__who {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}
.adm-side__avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(251, 247, 240, .16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 11.5px/1 var(--bb-font);
  letter-spacing: .4px;
}
.adm-side__whotext { display: flex; flex-direction: column; min-width: 0; }
.adm-side__name {
  font: 600 13px/1.35 var(--bb-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-side__out {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: rgba(251, 247, 240, .6);
  font: 500 12.5px/1.35 var(--bb-font);
  cursor: pointer;
}
.adm-side__out:hover { color: var(--bb-on-navy-ink); }
.adm.is-collapsed .adm-side__notion span:first-child,
.adm.is-collapsed .adm-side__whotext { display: none; }
.adm.is-collapsed .adm-side__who,
.adm.is-collapsed .adm-side__notion { justify-content: center; padding: 6px 0; }


/* ---------- toast ----------
   One of only two things in the system allowed a shadow. */

.adm-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--bb-r-pill);
  background: var(--bb-primary);
  color: var(--bb-on-navy-ink);
  font: 600 13.5px/1.3 var(--bb-font);
  box-shadow: 0 8px 30px rgba(28, 26, 23, .25);
  max-width: calc(100vw - 40px);
}
.adm-toast[hidden] { display: none; }
.adm-toast__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bb-on-navy-trust);
}


/* ---------- screen header ---------- */

.adm-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 30px 34px 20px;
  border-bottom: 1px solid var(--bb-hairline);
}
.adm-head .bb-sub { margin: 4px 0 0; }

/* The search field carries its own geometry glyph — a circle, per the "icons
   are geometry" rule. No icon library anywhere in this console. */
.adm-search { position: relative; display: block; }
.adm-search .bb-input {
  width: 300px;
  max-width: 100%;
  padding-left: 38px;
  background: var(--bb-surface);
}
.adm-search__glyph {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 1.7px solid var(--bb-ink-soft);
  border-radius: 50%;
  pointer-events: none;
}

.adm-body {
  padding: 20px 34px 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 1280px;
}
/* Flex items default to min-width:auto, so any child wrapping the 980px table
   grows to fit it and takes the page with it. The table scrolls inside itself;
   the page must never scroll sideways. This has to sit on the direct children
   — putting it on .adm-table alone misses the wrapper that is the flex item. */
.adm-body > * { min-width: 0; }

.adm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-chip { border: 0; cursor: pointer; }
.adm-chip__n {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  opacity: .8;
}


.adm-body--wide { gap: 24px; padding-top: 24px; }

.adm-cardhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}


/* ---------- overview ---------- */

.adm-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}
.adm-tile {
  text-align: left;
  cursor: pointer;
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  padding: 16px 18px 15px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.adm-tile:hover:not(.adm-tile--static) { border-color: var(--bb-primary); }
/* A tile with nowhere to go is inert, NOT disabled. `disabled` greys the figure
   to 30% and makes a perfectly good number look broken or unavailable. */
.adm-tile--static { cursor: default; }
.adm-tile__n { font: 800 32px/1 var(--bb-font); letter-spacing: -1px; }
.adm-tile__note { font: 500 12.5px/1.45 var(--bb-font); }
.adm-tile__note--soft  { color: var(--bb-ink-soft); }
.adm-tile__note--trust { color: var(--bb-trust-ink); }
.adm-tile__note--rust  { color: var(--bb-urgency); }

.adm-pair {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 20px;
  align-items: start;
}
.adm-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.adm-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 186px;
  margin-top: 22px;
}
.adm-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  height: 100%;
  min-width: 0;
}
.adm-bar__n { font: 600 11.5px/1.4 var(--bb-font); color: var(--bb-ink-soft); }
.adm-bar__fill {
  width: 100%;
  border-radius: 6px 6px 2px 2px;
  background: var(--bb-tint-blue);
}
/* One emphasised bar — today. Fourteen navy bars would emphasise nothing. */
.adm-bar__fill--today { background: var(--bb-primary); }
.adm-bar__day { font-size: 11.5px; }

.adm-chartfoot {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--bb-hairline);
}
.adm-delta { color: var(--bb-trust-ink); font-weight: 600; }

/* The revenue panel. Info-blue rather than surface, so it reads as a note about
   the future instead of a card that failed to load. */
.adm-soon {
  background: var(--bb-tint-blue);
}
.adm-soon__body { color: var(--bb-primary); opacity: .75; }
.adm-soon__note {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(18, 58, 99, .18);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.adm-soon__note .bb-meta { color: var(--bb-primary); }

.adm-barrow { display: flex; flex-direction: column; gap: 7px; }
.adm-barrow__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.adm-barrow__label { font: 600 13.5px/1.4 var(--bb-font); }
.adm-bartrack {
  height: 6px;
  border-radius: var(--bb-r-pill);
  background: var(--bb-hairline);
  overflow: hidden;
  display: block;
}
.adm-bartrack__fill { display: block; height: 100%; border-radius: var(--bb-r-pill); }

.adm-paypair { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.adm-paybox {
  flex: 1 1 140px;
  border: 1px solid var(--bb-hairline);
  border-radius: 12px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adm-paybox__n { font: 800 26px/1 var(--bb-font); letter-spacing: -.8px; }
.adm-paybox__label { font: 600 13.5px/1.4 var(--bb-font); }
.adm-paygrowth {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bb-hairline);
}

.adm-att { display: flex; align-items: center; gap: 14px; }
.adm-att__disc {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 15px/1 var(--bb-font);
}
.adm-att__disc--rust { background: var(--bb-tint-rust); color: var(--bb-urgency); }
.adm-att__disc--blue { background: var(--bb-tint-blue); color: var(--bb-primary); }
.adm-att__text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-att__title { font: 600 14px/1.4 var(--bb-font); }

@media (max-width: 1100px) {
  .adm-pair, .adm-half { grid-template-columns: 1fr; }
}


/* ---------- applications table ----------
   A grid rather than a <table>: each cell stacks two lines (name over
   reference, owner over phone) and grid keeps those columns aligned without
   nesting a layout table inside every cell. */

.adm-table {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  overflow-x: auto;
  /* Flex items default to min-width:auto, which lets the 980px row below push
     this box — and the whole page — wider than the viewport. The table has to
     scroll inside itself; the page must never scroll sideways. */
  min-width: 0;
}
.adm-row {
  min-width: 980px;
  display: grid;
  grid-template-columns: 2.1fr 1.3fr 1.2fr 1fr 1.1fr 108px;
  gap: 16px;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--bb-hairline);
}
.adm-row:last-child { border-bottom: 0; }
.adm-row--head {
  padding: 12px 20px;
  background: var(--bb-page);
  align-items: end;
}
.adm-row--head .bb-meta { font-weight: 600; }
.adm-row__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-row__end { align-items: flex-end; }

/* The business name is the row's own link. A whole-row click target would make
   the phone-copy button unreachable. */
.adm-name {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: 700 14.5px/1.35 var(--bb-font);
  color: var(--bb-ink);
}
.adm-name:hover { color: var(--bb-primary); }
.adm-lao { font-family: var(--bb-font-lao); }
.adm-ref { font-size: 12px; }

.adm-cat { font: 600 13px/1.4 var(--bb-font); color: var(--bb-ink); }
/* A category the database cannot accept yet. `venues.category` is still a CHECK
   constraint over six values, so this application cannot be approved at all
   until that migration lands — rust because it is a blocker, not a note. */
.adm-cat--unknown { color: var(--bb-urgency); }

.adm-owner { font: 500 13.5px/1.4 var(--bb-font); }
.adm-copy {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

.adm-stage {
  display: inline-flex;
  align-items: center;
  border-radius: var(--bb-r-pill);
  padding: 4px 11px;
  font: 600 12px/1.4 var(--bb-font);
  white-space: nowrap;
}

.adm-track {
  display: block;
  height: 5px;
  width: 74px;
  border-radius: var(--bb-r-pill);
  background: var(--bb-hairline);
  overflow: hidden;
}
.adm-track__fill { display: block; height: 100%; border-radius: var(--bb-r-pill); }

.adm-age { font: 500 13px/1.4 var(--bb-font); color: var(--bb-ink-soft); }
/* Past the review promise. Bold and rust, because this is the number the screen
   exists to surface. */
.adm-age--over { font-weight: 700; color: var(--bb-urgency); }


/* ---------- venues ---------- */

.adm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.adm-filters .adm-chips { flex: 1; }
.adm-search--sm .bb-input { width: 240px; padding-left: 14px; }

.adm-row--venue { grid-template-columns: 2.2fr 1.1fr 1.4fr 1.5fr 0.9fr 88px; min-width: 1000px; }

.adm-owner--none { color: var(--bb-urgency); font-weight: 600; }
.adm-warn { color: var(--bb-urgency); }

.adm-switchcell { display: flex; align-items: center; gap: 9px; }
.adm-switch {
  width: 42px;
  height: 24px;
  flex: none;
  border: 0;
  border-radius: var(--bb-r-pill);
  background: var(--bb-hairline);
  padding: 2px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  transition: background-color .15s ease-out;
}
.adm-switch.is-on { background: var(--bb-trust); justify-content: flex-end; }
.adm-switch__knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bb-page);
  display: block;
}
.adm-switch__label { font: 600 13px/1.4 var(--bb-font); color: var(--bb-ink-soft); }
.adm-switch__label.is-on { color: var(--bb-trust-ink); font-weight: 700; }

.adm-btn--danger { background: var(--bb-urgency); color: var(--bb-page); }


/* ---------- dialog ----------
   Used only where an action is hard to walk back. */

.adm-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(28, 26, 23, .38);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.adm-scrim[hidden] { display: none; }
.adm-dialog {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-feature);
  padding: 24px 26px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 8px 30px rgba(28, 26, 23, .25);
}
.adm-dialog .bb-sub { margin: 8px 0 0; }
.adm-dialog__acts {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  flex-wrap: wrap;
}


/* ---------- empty / error ---------- */

.adm-empty {
  border: 1px dashed var(--bb-hairline);
  border-radius: var(--bb-r-card);
  padding: 44px 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.adm-empty .bb-sub { max-width: 52ch; margin: 0; }
.adm-empty--error { border-style: solid; border-color: var(--bb-tint-rust); background: var(--bb-tint-rust); }
.adm-empty--error .bb-card-title { color: var(--bb-urgency); }


/* ---------- review screen ---------- */

.adm-head--review {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 26px 34px 20px;
}
.adm-back {
  align-self: flex-start;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.adm-head__split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.adm-titleline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.adm-metaline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 7px;
}
.adm-danger {
  border: 0;
  background: none;
  padding: 10px 4px;
  cursor: pointer;
  font: 600 13.5px/1.2 var(--bb-font);
  color: var(--bb-urgency);
}

.adm-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  padding: 24px 34px 64px;
  max-width: 1400px;
}
.adm-col {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.adm-rail {
  flex: 0 1 380px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 20px;
}

.adm-card {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  padding: 20px 22px;
}
.adm-card--flush { padding: 0; overflow: hidden; }
.adm-card--feature { border-radius: var(--bb-r-feature); }
.adm-card .bb-sub { margin: 4px 0 0; }

/* What they told us */
.adm-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 22px;
  margin-top: 18px;
}
.adm-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-fact__v { font: 600 14px/1.4 var(--bb-font); word-break: break-word; }
.adm-fact__v--lao { font-family: var(--bb-font-lao); }
.adm-fact__blank { font-style: italic; }
.adm-fact__copy {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: 600 14px/1.4 var(--bb-font);
  color: var(--bb-primary);
}

/* Documents */
.adm-docs__head {
  padding: 20px 22px 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.adm-docs__sum { font: 600 12.5px/1.4 var(--bb-font); color: var(--bb-ink-soft); }
.adm-docs__sum--done { color: var(--bb-trust-ink); }

.adm-doc {
  border-top: 1px solid var(--bb-hairline);
  padding: 16px 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.adm-doc__thumb {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--bb-r-field);
  border: 1px solid var(--bb-hairline);
  background: var(--bb-tint-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/1.3 var(--bb-font);
  color: var(--bb-primary);
  text-align: center;
}
/* Nothing was uploaded. A hatch reads as "no content" where an empty box reads
   as "image failed to load". */
.adm-doc__thumb--none {
  background: repeating-linear-gradient(45deg, var(--bb-page) 0 6px, var(--bb-surface) 6px 12px);
  color: var(--bb-ink-soft);
}
.adm-doc__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.adm-doc__line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-doc__label { font: 700 14.5px/1.35 var(--bb-font); }
.adm-doc__req { font-size: 11.5px; }
.adm-doc__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--bb-r-pill);
  padding: 4px 11px;
  font: 600 12px/1.4 var(--bb-font);
  border: 1px solid transparent;
}
.adm-doc__state--none {
  background: var(--bb-page);
  color: var(--bb-ink-soft);
  border-color: var(--bb-hairline);
}
.adm-doc__state--verified { background: var(--bb-tint-jade); color: var(--bb-trust-ink); }
.adm-doc__state--rejected { background: var(--bb-tint-rust); color: var(--bb-urgency); }
.adm-doc__state--missing  { background: var(--bb-tint-rust); color: var(--bb-urgency); }

.adm-doc__why {
  background: var(--bb-tint-rust);
  border-radius: var(--bb-r-field);
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.adm-doc__reason { font: 600 12.5px/1.5 var(--bb-font); color: var(--bb-urgency); }
.adm-doc__re { color: var(--bb-urgency); font-weight: 600; }

.adm-doc__acts { display: flex; gap: 8px; align-items: center; flex: none; flex-wrap: wrap; }
.adm-linkbtn {
  border: 0;
  background: none;
  padding: 7px 4px;
  cursor: pointer;
  font: 600 13px/1.2 var(--bb-font);
  color: var(--bb-urgency);
}
.adm-undo {
  border: 0;
  background: none;
  padding: 7px 4px;
  cursor: pointer;
}

/* History */
.adm-hist { margin-top: 12px; }
.adm-hist__row {
  display: grid;
  grid-template-columns: 118px 44px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 11px 0;
}
.adm-hist__who { font-weight: 600; color: var(--bb-ink); }
.adm-hist__what { font: 400 13.5px/1.55 var(--bb-font); }

/* Stage track */
.adm-stages { display: flex; flex-direction: column; margin: 18px 0 4px; }
.adm-stagerow { display: flex; align-items: flex-start; gap: 11px; }
.adm-stagerow__gut {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 13px;
  flex: none;
}
.adm-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex: none;
  background: var(--bb-surface);
  border: 2px solid var(--bb-hairline);
}
.adm-dot--done { background: var(--bb-trust); border-color: var(--bb-trust); }
.adm-dot--cur {
  background: var(--bb-primary);
  border-color: var(--bb-primary);
  box-shadow: 0 0 0 4px rgba(18, 58, 99, .12);
}
.adm-stem {
  width: 2px;
  flex: 1;
  min-height: 18px;
  background: var(--bb-hairline);
}
.adm-stem--done { background: var(--bb-trust); }
.adm-stagename {
  font: 500 12.5px/1.4 var(--bb-font);
  padding-bottom: 14px;
  color: var(--bb-ink-soft);
}
.adm-stagename--done { color: var(--bb-ink); }
.adm-stagename--cur { font-weight: 700; color: var(--bb-primary); }

.adm-acts { display: flex; gap: 9px; margin-top: 12px; }
.adm-acts .bb-btn--primary { flex: 1; }

/* Approve to live */
.adm-approve { transition: background-color .15s ease-out; }
.adm-approve--ready { background: var(--bb-tint-jade); }
.adm-approve .bb-list__item {
  padding: 9px 0;
  font: 400 13.5px/1.5 var(--bb-font);
}
.adm-slug {
  display: flex;
  align-items: center;
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-field);
  background: var(--bb-page);
  padding: 0 12px;
}
.adm-slug__pre { flex: none; }
.adm-slug__in {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  padding: 11px 4px;
  font: 600 14px/1.4 var(--bb-font);
  color: var(--bb-ink);
}
.adm-approve__go { width: 100%; margin-top: 14px; }

.adm-done { background: var(--bb-tint-jade); border-radius: var(--bb-r-feature); }
.adm-done .bb-sub { color: var(--bb-trust-ink); opacity: .85; }


/* ---------- venue detail ---------- */

.adm-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 18px;
  margin-top: 18px;
}
.adm-field { display: block; min-width: 0; }

.adm-sectionlabel {
  display: block;
  margin: 22px 0 8px;
  font: 600 12.5px/1.45 var(--bb-font);
  color: var(--bb-ink);
}
.adm-sectionlabel:first-of-type { margin-top: 18px; }

.adm-hero {
  border-radius: var(--bb-r-card);
  aspect-ratio: 21 / 9;
  border: 1px solid var(--bb-hairline);
  overflow: hidden;
  display: block;
  position: relative;
}
.adm-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.adm-acts--tight { margin-top: 10px; }

.adm-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.adm-tile-photo {
  border: 1px solid var(--bb-hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bb-page);
}
.adm-tile-photo__frame {
  display: block;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.adm-tile-photo__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-tile-photo__n { position: absolute; top: 8px; left: 8px; }
.adm-tile-photo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
}
.adm-tile-photo__move { display: flex; gap: 4px; }
.adm-tile-photo__acts { display: flex; gap: 8px; }

.adm-sq {
  width: 24px;
  height: 24px;
  border: 1px solid var(--bb-hairline);
  border-radius: 7px;
  background: var(--bb-surface);
  cursor: pointer;
  font: 600 12px/1 var(--bb-font);
}
.adm-sq[disabled] { opacity: .4; cursor: not-allowed; }

.adm-minilink {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: 600 12px/1.3 var(--bb-font);
  color: var(--bb-primary);
}
.adm-minilink--rust { color: var(--bb-urgency); }

.adm-uptile {
  border: 1px solid var(--bb-hairline);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  background: var(--bb-page);
}
.adm-uptile__name { font: 600 12.5px/1.4 var(--bb-font); }
.adm-uptile--bad { border-color: var(--bb-urgency); background: var(--bb-tint-rust); gap: 7px; }
.adm-uptile__err { font: 600 12.5px/1.4 var(--bb-font); color: var(--bb-urgency); }

.adm-roomrow { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: baseline; }
.adm-roomrow__l { display: flex; flex-direction: column; gap: 3px; }
.adm-roomrow__name { font: 600 14px/1.4 var(--bb-font); }
.adm-roomrow__s { color: var(--bb-ink); }

.adm-ownerrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bb-hairline);
}
.adm-initials { font: 700 13px/1 var(--bb-font); width: 38px; height: 38px; }
.adm-ownerrow__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-ownerrow__name { font: 600 14px/1.4 var(--bb-font); }

.adm-warnpanel {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bb-tint-rust);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adm-warnpanel__h { font: 600 12.5px/1.5 var(--bb-font); color: var(--bb-urgency); }

/* Unsaved-changes bar. Fixed to the content area, clear of the sidebar. */
.adm-savebar {
  position: fixed;
  left: 276px;
  right: 24px;
  bottom: 22px;
  z-index: 40;
  background: var(--bb-primary);
  color: var(--bb-page);
  border-radius: var(--bb-r-feature);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 8px 30px rgba(28, 26, 23, .25);
}
.adm-savebar[hidden] { display: none; }
.adm.is-collapsed .adm-savebar { left: 96px; }
.adm-savebar__msg { font: 600 14px/1.4 var(--bb-font); }
.adm-savebar__acts { display: flex; gap: 10px; }
.adm-savebar__ghost {
  background: none;
  border: 1px solid rgba(251, 247, 240, .35);
  color: var(--bb-page);
  border-radius: var(--bb-r-pill);
  padding: 9px 18px;
  cursor: pointer;
  font: 600 13.5px/1.2 var(--bb-font);
}
.adm-savebar__go {
  background: var(--bb-page);
  border: 0;
  color: var(--bb-primary);
  border-radius: var(--bb-r-pill);
  padding: 9px 20px;
  cursor: pointer;
  font: 700 13.5px/1.2 var(--bb-font);
}

@media (max-width: 900px) {
  .adm-savebar { left: 16px; right: 16px; }
  .adm.is-collapsed .adm-savebar { left: 16px; }
  .adm-roomrow { grid-template-columns: 1fr; gap: 6px; }
}


/* ---------- design hub ---------- */

.adm-surfaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.adm-surface {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.adm-surface__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-surface .bb-sub { margin: 0; }
.adm-facts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.adm-factchip {
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-chip);
  padding: 3px 9px;
  font: 500 12px/1.5 var(--bb-font);
  color: var(--bb-ink-soft);
}
.adm-pending { font: 700 13px/1.4 var(--bb-font); }


/* ---------- categories ---------- */

.adm-note {
  background: var(--bb-tint-blue);
  border-radius: var(--bb-r-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adm-note__h { font: 700 13px/1.45 var(--bb-font); color: var(--bb-primary); }
.adm-note .bb-meta { color: var(--bb-primary); }

.adm-catlist {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  overflow: hidden;
}
.adm-catwrap + .adm-catwrap { border-top: 1px solid var(--bb-hairline); }
.adm-catrow {
  display: grid;
  grid-template-columns: 60px 68px minmax(0, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
}
.adm-catrow__move { display: flex; gap: 4px; }
.adm-catthumb {
  width: 68px;
  height: 52px;
  border-radius: var(--bb-r-thumb);
  overflow: hidden;
  border: 1px solid var(--bb-hairline);
  display: block;
}
.adm-catthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-catnames { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-catnames__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.adm-catnames__en { font: 700 14.5px/1.35 var(--bb-font); }
.adm-catnames__scripts { display: flex; gap: 4px; flex-wrap: wrap; }
.adm-thai { font-family: var(--bb-font-thai); }
.adm-catcount { white-space: nowrap; }
.adm-catedit {
  padding: 4px 18px 20px 92px;
  border-top: 1px dashed var(--bb-hairline);
}
.adm-catedit .adm-fields { margin-top: 14px; }

/* ---------- local tips ----------
   Same list chrome as categories (adm-catlist / adm-catwrap); only the row
   itself differs — tips have no thumbnail or ordering buttons, they carry a
   two-line body preview instead. */

.adm-tiprow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
}
.adm-tipnames { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-tipbody {
  font: 400 13.5px/1.5 var(--bb-font);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.adm-tipclamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
/* The category edit panel indents past columns this row does not have. */
.adm-catedit--flush { padding-left: 18px; }
.adm-tipadd {
  border: 1px dashed var(--bb-hairline);
  border-radius: var(--bb-r-card);
  padding-top: 6px;
  margin-bottom: 18px;
}
.adm-fields--tips { grid-template-columns: 1fr; max-width: 720px; }
.adm-tiparea { min-height: 60px; resize: vertical; line-height: 1.5; }


/* ---------- landing editor ---------- */

.adm-cols--landing { max-width: 1520px; padding-top: 22px; }
/* Narrower bases than the review screen uses. The whole point of this screen is
   writing with the page beside you, and the generic 520 + 380 pair wraps the
   preview underneath at 1134px — a perfectly ordinary laptop, where it is
   needed most. 400 + 300 + gap fits inside a 13-inch content column. */
.adm-cols--landing .adm-col { flex: 1 1 400px; }
.adm-rail--preview { flex: 0 1 360px; min-width: 300px; }

.adm-writing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.adm-writing__l { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.adm-section {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  overflow: hidden;
}
.adm-section__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.adm-section__text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-section__name { font: 700 15px/1.35 var(--bb-font); }
.adm-chev {
  flex: none;
  font: 600 18px/1 var(--bb-font);
  color: var(--bb-ink-soft);
  transition: transform .15s ease-out;
}
.adm-section.is-open .adm-chev { transform: rotate(90deg); }

/* The block that repeats ~85 times. Everything about it is restraint. */
.adm-lfield {
  border-top: 1px solid var(--bb-hairline);
  padding: 14px 18px;
}
.adm-lfield__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.adm-lfield__label { font: 700 12.5px/1.4 var(--bb-font); }
.adm-lfield__tabs { display: flex; gap: 5px; }
.adm-lfield__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
}

.adm-ltab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-pill);
  background: var(--bb-page);
  padding: 4px 10px;
  font: 600 12px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
  cursor: pointer;
}
.adm-ltab.is-on {
  background: var(--bb-primary);
  border-color: var(--bb-primary);
  color: var(--bb-page);
}
.adm-ldot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--bb-ink-soft);
}
.adm-ldot.is-empty  { background: var(--bb-urgency); }
.adm-ldot.is-edited { background: var(--bb-trust); }
.adm-ldot.is-same   { background: var(--bb-hairline); }

.adm-lmeter { white-space: nowrap; }
.adm-lmeter.is-over { color: var(--bb-urgency); font-weight: 700; }

/* Preview */
.adm-preview {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-feature);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.adm-preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.adm-preview__langs { display: flex; gap: 5px; }

.adm-phone {
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  overflow: hidden;
  background: var(--bb-page);
}
.adm-phero { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.adm-phero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-phero__text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 16px 18px;
  background: linear-gradient(to top, rgba(28, 26, 23, .78), rgba(28, 26, 23, 0));
  color: var(--bb-page);
}
.adm-phero__h { font: 800 20px/1.2 inherit; letter-spacing: -.4px; margin: 0 0 5px; }
.adm-phero__sub { font: 400 12.5px/1.5 inherit; margin: 0; opacity: .9; }
.adm-ppill {
  margin: -14px 14px 0;
  position: relative;
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-pill);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  font: 500 12.5px/1.4 inherit;
  color: var(--bb-ink-soft);
  box-shadow: 0 4px 16px rgba(28, 26, 23, .08);
}
.adm-ppill__glyph {
  width: 12px;
  height: 12px;
  border: 1.6px solid var(--bb-ink-soft);
  border-radius: 50%;
  flex: none;
}
.adm-pbody { padding: 20px 14px 18px; }
.adm-pcats__h { font: 700 15px/1.3 inherit; margin: 0 0 3px; }
.adm-pcats__sub { font: 400 12.5px/1.5 inherit; color: var(--bb-ink-soft); margin: 0 0 12px; }
.adm-ptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adm-ptile {
  border-radius: var(--bb-r-thumb);
  overflow: hidden;
  border: 1px solid var(--bb-hairline);
  background: var(--bb-surface);
}
.adm-ptile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.adm-ptile__l { display: block; padding: 8px 10px; font: 600 12px/1.35 inherit; }

.adm-pwarn {
  background: var(--bb-tint-rust);
  border-radius: var(--bb-r-field);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.adm-pwarn__h { font: 700 12.5px/1.45 var(--bb-font); color: var(--bb-urgency); }


/* ---------- reviews / shared states ---------- */

/* The moderation list. Rows ride the adm-att shape the coming-soon specimen
   already promised (disc, text, action), stretched for real content: the
   disc tops-aligns against multi-line bodies, and the reply is indented off
   a hairline the way the venue page nests it. */
.adm-att--top { align-items: flex-start; }
.adm-att--top .adm-att__disc { margin-top: 2px; }
.adm-rvtitle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-rvhead { font: 600 12.5px/1.4 var(--bb-font); }
.adm-rvbody { font: 400 13px/1.55 var(--bb-font); color: var(--bb-ink); }
.adm-rvmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-rvreason { font: 600 11.5px/1.5 var(--bb-font); color: var(--bb-urgency); }
.adm-rvreply {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  padding-left: 14px;
  border-left: 2px solid var(--bb-hairline);
}
.adm-rvact { display: flex; gap: 8px; flex: none; }
.adm-rvselect { width: auto; min-width: 150px; }
.adm-rvselect--rating { min-width: 110px; }

/* Tags: one line, wrapping. Venue-sourced ones ride the bb-pill mark inline
   with everything else rather than a separate row -- see tagsLine() in
   reviews.js. */
.adm-rvtags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* Per-photo moderation. Small enough that several sit on one row without
   crowding out the text above them; each tile carries its own status pill
   and the one action that status allows. */
.adm-rvphotos { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.adm-rvphoto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.adm-rvphoto__frame {
  display: block;
  width: 84px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--bb-hairline);
  background: var(--bb-page);
}
.adm-rvphoto__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The card-tag panel, above the list once the venue filter picks one venue. */
.adm-rvcardtag { margin-bottom: 16px; }
.adm-rvcardtag .adm-field { max-width: 360px; }

.adm-specimens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.adm-specimen {
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adm-specimen__tag {
  font: 700 10.5px/1.4 var(--bb-font);
  color: var(--bb-ink-soft);
}
.adm-skel { display: flex; flex-direction: column; gap: 9px; }
.adm-skel span {
  height: 10px;
  border-radius: var(--bb-r-pill);
  background: var(--bb-hairline);
  display: block;
}


/* ---------- sign in ----------
   Body-level, because this screen has no console frame around it. */

.adm-authbody {
  background: var(--bb-page);
  color: var(--bb-ink);
  font: 400 14.5px/1.55 var(--bb-font);
  margin: 0;
}
.adm-authbrand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--bb-ink);
  margin-bottom: 22px;
}
.adm-authbrand img { width: 26px; height: 26px; object-fit: contain; }
.adm-authbrand__word {
  display: block;
  font: 700 19px/1.1 var(--bb-font-logo);
  letter-spacing: 1.4px;
  color: var(--bb-primary);
}
.adm-authbrand__sub {
  display: block;
  font: 500 12.5px/1.3 var(--bb-font);
  color: var(--bb-ink-soft);
}


/* ---------- auth gate ----------
   A UI gate, not the security boundary — RLS is. See admin-auth.js. */

/* Hidden from the first paint, so a signed-out visitor never sees a flash of
   the console underneath before the overlay lands. Removed once released.
   visibility, not display: the layout is already correct behind the overlay, so
   releasing costs no reflow. */
html[data-adm-locked] .adm { visibility: hidden; }

.adm-gate {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bb-page);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
}
.adm-gate[hidden] { display: none; }

.adm-gate__card {
  width: 100%;
  max-width: 420px;
  background: var(--bb-surface);
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-feature);
  padding: 28px 30px 26px;
  display: flex;
  flex-direction: column;
}
.adm-gate__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.adm-gate__brand img { width: 26px; height: 26px; object-fit: contain; }
.adm-gate__word {
  display: block;
  font: 700 19px/1.1 var(--bb-font-logo);
  letter-spacing: 1.4px;
  color: var(--bb-primary);
}
.adm-gate__sub {
  display: block;
  font: 500 12.5px/1.3 var(--bb-font);
  color: var(--bb-ink-soft);
}
.adm-gate__h {
  font: 800 22px/1.25 var(--bb-font);
  letter-spacing: -.5px;
  margin: 0 0 8px;
}
.adm-gate__p {
  font: 400 14px/1.6 var(--bb-font);
  color: var(--bb-ink-soft);
  margin: 0 0 18px;
}
.adm-gate__field { display: block; margin-bottom: 14px; }
.adm-gate__err { margin: 0 0 12px; }
.adm-gate__go { width: 100%; margin-top: 4px; text-decoration: none; }
.adm-gate__reset {
  align-self: center;
  margin-top: 14px;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}


/* ---------- demo notice ----------
   Says out loud that nothing here is real, because the screens are otherwise
   indistinguishable from a live console and these are decisions about people. */

.adm-demo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 34px;
  background: var(--bb-tint-blue);
  border-bottom: 1px solid var(--bb-hairline);
  font: 600 12.5px/1.5 var(--bb-font);
  color: var(--bb-primary);
}


/* ---------- narrow ----------
   Reviewing an ID scan on a phone is not a real workflow, so this only has to
   stay usable, not stay elegant. The sidebar becomes a top bar and the two
   review columns stack. */

@media (max-width: 900px) {
  .adm { flex-direction: column; }
  /* Stacked, .adm__main is a cross-axis item and `stretch` resolves against its
     min-content — which the 980px table row drives, so the column grew to 1018
     inside a 375px viewport and the whole page scrolled sideways. An explicit
     width pins it to the viewport and pushes the overflow back into the table,
     where it belongs. min-width:0 does not help here: in a column container the
     automatic minimum size governs the main axis (height), not the width. */
  .adm__main { width: 100%; }
  .adm-side {
    width: 100%;
    height: auto;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
  }
  .adm.is-collapsed .adm-side { width: 100%; }
  .adm-side__head { padding: 12px 16px; }
  .adm-side__collapse { display: none; }
  .adm-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    overflow-x: auto;
  }
  .adm-nav__head { display: none; }
  .adm-nav__subs { display: none; }
  .adm-nav__item { width: auto; white-space: nowrap; }
  /* The collapsed preference is remembered per browser, but it describes a
     narrow *column*. In the top bar there is room for words, and "OV AP VE DS
     ST" is unreadable, so the desktop collapse is overridden here rather than
     cleared — going back to a wide screen should restore what was chosen. */
  .adm.is-collapsed .adm-nav__label { display: inline; }
  .adm.is-collapsed .adm-nav__abbr { display: none; }
  .adm.is-collapsed .adm-nav__item { padding: 9px 12px; }
  .adm.is-collapsed .adm-nav__badge { display: inline-block; }
  .adm.is-collapsed .adm-side__head { padding: 12px 16px; }
  .adm.is-collapsed .adm-side__mark { width: 22px; height: 22px; }
  .adm.is-collapsed .adm-side__words { display: flex; }
  .adm-side__foot {
    border-top: 0;
    padding: 8px 12px;
    flex-direction: row;
    align-items: center;
    margin-left: auto;
  }
  .adm-side__notion { display: none; }
  .adm-head, .adm-head--review { padding: 22px 18px 16px; }
  .adm-body { padding: 16px 18px 44px; }
  .adm-cols { padding: 18px 18px 48px; }
  .adm-rail { position: static; }
  .adm-demo { padding: 10px 18px; }
}

/* ---------- Hero carousel ----------
   A slide is a photograph first: the row leads with the real image at the
   aspect the hero crops to, so the person choosing it sees what a traveler
   will see rather than a filename. */

.adm-slide {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 18px;
}
.adm-slide__art {
  width: 132px;
  height: 62px;
  border-radius: var(--bb-r-thumb);
  overflow: hidden;
  background: var(--bb-tint-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.adm-slide__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-slide__art.is-gone img { display: none; }
.adm-slide__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-slide__cap {
  font: var(--bb-w-medium) 13.5px/1.5 var(--bb-font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adm-slide__move { display: inline-flex; gap: 2px; }
.adm-slide__arrow { padding: 2px 6px; font-size: 14px; }
.adm-slide__arrow[disabled] { opacity: .35; cursor: default; }

/* The file input is hidden and its <label> is the button, so the control looks
   like every other primary action in the console. */
.adm-slideadd { cursor: pointer; }

@media (max-width: 700px) {
  .adm-slide {
    grid-template-columns: 92px minmax(0, 1fr) auto;
    row-gap: 10px;
  }
  .adm-slide__art { width: 92px; height: 52px; }
}

/* The pixel size of a slide, on the slide. Rust when it is smaller than the
   hero band renders, because that one is going to look soft in public. */
.adm-slide__dim {
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 5px;
  border-radius: var(--bb-r-thumb);
  background: rgba(28, 26, 23, 0.62);
  color: #fff;
  font: var(--bb-w-medium) 9.5px/1.5 var(--bb-font);
  font-variant-numeric: tabular-nums;
}
.adm-slide__dim.is-small { background: var(--bb-urgency); }
.adm-slide__art { position: relative; }

.adm-almanac {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--bb-hairline);
}
.adm-almanac .bb-h2 { margin: 0 0 6px; }
.adm-almanac .adm-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 16px 0;
}

/* ---------- Evening & weather ---------- */
.evening-admin { display: grid; gap: 24px; max-width: 980px; }
.evening-admin__panel {
  padding: 22px;
  border: 1px solid var(--bb-hairline);
  border-radius: var(--bb-r-card);
  background: var(--bb-surface);
}
.evening-admin__panel .adm-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 6px;
  font: var(--bb-w-semibold) 17px/1.3 var(--bb-font);
}
.evening-admin__add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 18px 0; }
.evening-admin__list { border-top: 1px solid var(--bb-hairline); }
.evening-admin__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--bb-hairline); }
.evening-admin__row b, .evening-admin__row span { display: block; }
.evening-admin__moves { display: flex; gap: 12px; align-items: center; }
.evening-admin__weather { display: grid; grid-template-columns: 110px repeat(4, minmax(0, 1fr)); align-items: center; gap: 0; margin: 18px 0 22px; border: 1px solid var(--bb-hairline); border-radius: var(--bb-r-field); }
.evening-admin__weather > strong { padding: 18px; color: var(--bb-primary); font-size: 30px; }
.evening-admin__weather > span { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-left: 1px solid var(--bb-hairline); }
.evening-admin__weather small { color: var(--bb-ink-soft); }
.evening-admin__images { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.evening-admin__image { position: relative; min-height: 220px; overflow: hidden; border-radius: var(--bb-r-card); background: linear-gradient(0deg, rgba(26,87,147,.9), rgba(28,26,23,.08)), url('../assets/photos/almanac/almanac-vientiane-day.jpg') center/cover; }
.evening-admin__image:nth-child(2) { background-image: linear-gradient(0deg, rgba(26,87,147,.9), rgba(28,26,23,.08)), url('../assets/photos/almanac/almanac-vientiane-night.jpg'); }
.evening-admin__image > label { position: absolute; left: 14px; bottom: 14px; background: var(--bb-surface); }
@media (max-width: 760px) {
  .evening-admin__weather { grid-template-columns: 1fr 1fr; }
  .evening-admin__weather > strong { grid-column: 1 / -1; }
  .evening-admin__weather > span { border-top: 1px solid var(--bb-hairline); }
  .evening-admin__images { grid-template-columns: 1fr; }
}