/* Gastronoph partner panel.
 *
 * Hand-written, no build step, no framework. The vocabulary is Apple's, because
 * that is what was asked for — but Apple's real one: a material that refracts
 * what is behind it, grouped inset lists, and system hues rather than a card
 * kit painted in system greys.
 *
 * Two surfaces. The hero is a dark canvas whose light is placed by the
 * integration's own busiest hour, so the glow moves across the day the way
 * service does. Everything below it is a light working surface made of grouped
 * lists — the one structural idea the panel has, and the only one it needs.
 *
 * The vitals capsule straddles the seam between the two on purpose. Glass over
 * a flat colour is just a tint; glass over a boundary is the point.
 *
 * Light only. The panel is a place of work with one irreversible action on it,
 * and a second colour scheme is a second set of contrasts to get wrong.
 */

:root {
  /* Surfaces */
  --void: #06070b;
  --canvas: #f5f5f7;
  --surface: #ffffff;
  --fill: #f2f2f7;

  /* Ink */
  --label: #1d1d1f;
  --label-2: #6e6e73;
  --label-3: #8e8e93;
  --separator: rgba(0, 0, 0, 0.08);

  /* On the dark canvas */
  --on-void: #f7f7fa;
  --on-void-2: rgba(247, 247, 250, 0.66);
  --on-void-3: rgba(247, 247, 250, 0.4);

  /* System hues. Indigo leads; amber is attention; green is healthy. */
  --indigo: #5e5ce6;
  --indigo-ink: #4340c9;
  --amber: #ff9f0a;
  --amber-ink: #8a5206;
  --green: #34c759;
  --green-ink: #1c7430;
  --red: #d70015;
  --blue: #5e5ce6;

  --content: 1180px;
  --bar: 1288px;
  --column: 768px;
  --column-pad: 24px;
  --gutter: 28px;

  --r-card: 16px;
  --r-control: 10px;

  --sans: "Schibsted Grotesk", -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shadow: 0 1px 2px rgba(16, 18, 28, 0.04), 0 8px 24px -12px rgba(16, 18, 28, 0.12);
  --shadow-lift: 0 1px 2px rgba(16, 18, 28, 0.05), 0 18px 44px -20px rgba(16, 18, 28, 0.28);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--label);
  font: 400 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0; }

:focus-visible {
  outline: 3px solid rgba(94, 92, 230, 0.45);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

code { font: 400 13px/1.4 var(--mono); color: var(--label-2); }

/* Figures line up only where the cell is nothing but digits. This family gives
   the full stop and the colon a figure's width under `tnum`, so a date set with
   it reads as "14 . 09 . 2026". */
.venue-row__load,
.http { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- top bar -- */

/* Liquid glass: a lens, not a frosted pane. The blur and the saturation lift
   do the refraction; the two inset rims are the lit top edge and the thickness
   of the slab. Content scrolls underneath it, which is why it floats free of
   the page rather than sitting in a header band. */
.topbar {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(calc(100% - 28px), var(--bar));
  height: 54px;
  padding: 0 7px 0 15px;
  border-radius: 27px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.66);
  -webkit-backdrop-filter: blur(26px) saturate(200%);
  backdrop-filter: blur(26px) saturate(200%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 1px 1px rgba(16, 18, 28, 0.05),
    0 14px 38px -14px rgba(16, 18, 28, 0.34);
  transition: background-color 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
}

/* The sheen a real slab returns from a light above it. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%);
  pointer-events: none;
}

/* Over the hero the material takes the canvas's darkness, the way glass does.
   Set by panel.js from the scroll position — the panel's one piece of motion
   that nobody asked for, and the only one that tells you something. */
.topbar--dark {
  background: rgba(16, 18, 27, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 18px 44px -16px rgba(0, 0, 0, 0.6);
  color: var(--on-void);
}
.topbar--dark::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 50%);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.018em;
  white-space: nowrap;
  color: inherit;
}
.topbar__brand:hover { text-decoration: none; }
.topbar__mark { width: 24px; height: 24px; flex: 0 0 auto; }

/* The tenant is chrome, not content: which integration you are looking at
   belongs beside the brand, not in the page. */
.topbar__tenant {
  flex: 0 1 auto;
  overflow: hidden;
  max-width: 168px;
  padding-left: 11px;
  border-left: 1px solid var(--separator);
  color: var(--label-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar--dark .topbar__tenant { border-left-color: rgba(255, 255, 255, 0.16); color: var(--on-void-2); }

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  margin: 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.topbar__nav::-webkit-scrollbar { display: none; }
.topbar__nav a {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  color: var(--label-2);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.006em;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.topbar__nav a:hover { background: rgba(16, 18, 28, 0.05); color: var(--label); text-decoration: none; }
.topbar__nav a[aria-current] {
  background: var(--surface);
  color: var(--label);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 18, 28, 0.12), 0 0 0 0.5px rgba(16, 18, 28, 0.04);
}
.topbar--dark .topbar__nav a { color: var(--on-void-2); }
.topbar--dark .topbar__nav a:hover { background: rgba(255, 255, 255, 0.1); color: var(--on-void); }
.topbar--dark .topbar__nav a[aria-current] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.topbar__end { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.topbar__docs {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--label-2);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
}
.topbar__docs:hover { background: rgba(16, 18, 28, 0.05); color: var(--label); text-decoration: none; }
.topbar--dark .topbar__docs { color: var(--on-void-2); }
.topbar--dark .topbar__docs:hover { background: rgba(255, 255, 255, 0.1); color: var(--on-void); }

/* The account is a face, not a menu: the address is long, the panel has one
   account, and the only thing anyone needs from it is the way out. */
.topbar__account {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 5px 0 12px;
  border-radius: 999px;
  background: rgba(16, 18, 28, 0.05);
}
.topbar--dark .topbar__account { background: rgba(255, 255, 255, 0.12); }
.topbar__account > span {
  overflow: hidden;
  max-width: 124px;
  color: var(--label-2);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar--dark .topbar__account > span { color: var(--on-void-2); }
.topbar__logout {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--label);
  font-size: 12.5px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(16, 18, 28, 0.12);
}
.topbar__logout:hover { text-decoration: none; filter: brightness(0.96); }
.topbar--dark .topbar__logout { background: rgba(255, 255, 255, 0.9); }

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 104px 0 0;
  background: var(--void);
  color: var(--on-void);
}

/* The light. `--peak-x` is where the integration's busiest hour falls in the
   last twenty-four, so the warm centre sits over the peak and drifts across the
   canvas as the service day does. Amber is the peak, indigo the hours around
   it: the field is the chart, told slowly. */
.hero__field {
  position: absolute;
  inset: -30% -8% auto -8%;
  height: 170%;
  z-index: -1;
  background:
    radial-gradient(40% 44% at var(--peak-x, 62%) 56%, rgba(255, 159, 10, 0.58), transparent 64%),
    radial-gradient(56% 60% at calc(var(--peak-x, 62%) - 32%) 68%, rgba(94, 92, 230, 0.7), transparent 66%),
    radial-gradient(46% 52% at calc(var(--peak-x, 62%) + 26%) 76%, rgba(94, 92, 230, 0.42), transparent 66%),
    radial-gradient(72% 46% at 14% 92%, rgba(94, 92, 230, 0.38), transparent 70%);
  filter: blur(26px);
}

/* A fine grain over the gradients. Large smooth gradients band on 8-bit
   displays; noise is what stops it, and it is what a lit surface looks like. */
/* Holds the corner the headline is set in dark, whatever the light is doing. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(104deg, rgba(6, 7, 11, 0.9) 4%, rgba(6, 7, 11, 0.52) 34%, rgba(6, 7, 11, 0) 62%);
  pointer-events: none;
}

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* With no traffic there is no waveform, and without one the canvas would be a
   screen of empty dark under two lines of text. */
.hero--quiet { padding-bottom: 96px; }

.hero__inner {
  position: relative;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }

.hero h1 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(33px, 4.1vw, 50px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.hero__caption {
  margin-top: 14px;
  color: var(--on-void-2);
  font-size: 15px;
  letter-spacing: -0.006em;
}
.hero__caption a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Live, and honest about it: the dot breathes only while the socket is up. */
.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: var(--on-void-2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.6);
  animation: pulse 2.6s ease-out infinite;
}
/* Nothing is arriving, so nothing breathes. */
.live--quiet i { background: var(--on-void-3); box-shadow: none; animation: none; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(48, 209, 88, 0); }
}

/* --------------------------------------------------------------- the wave -- */

.wave { position: relative; margin-top: clamp(16px, 2.4vw, 30px); }
.wave__plot { position: relative; }
.wave__svg { display: block; width: 100%; height: clamp(116px, 13vw, 168px); }
.wave__line { fill: none; stroke: url(#waveStroke); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wave__area { stroke: none; fill: url(#waveFill); }

.wave__peak { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.wave__peak span {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}
.wave__peak--end span { left: auto; right: -4px; transform: none; }
.wave__peak i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffce6b;
  box-shadow: 0 0 0 4px rgba(255, 159, 10, 0.22), 0 0 22px 5px rgba(255, 159, 10, 0.5);
}
.wave__peak span {
  color: rgba(255, 240, 214, 0.9);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: -0.004em;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(6, 7, 11, 0.9);
}

/* ------------------------------------------------------------ the vitals -- */

/* The capsule sits half on the canvas and half on the working surface. That is
   the whole reason it is glass: over one flat colour a blur is only a tint,
   and over the seam it has two things to bend. */
.vitals-dock { position: relative; max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }
.vitals {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 20px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.46);
  -webkit-backdrop-filter: blur(34px) saturate(220%) brightness(1.06);
  backdrop-filter: blur(34px) saturate(220%) brightness(1.06);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(16, 18, 28, 0.06),
    0 28px 64px -28px rgba(16, 18, 28, 0.55);
}
.vitals::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.vital {
  position: relative;
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 88px;
  padding: 18px 22px;
  color: var(--label);
}
.vital + .vital { box-shadow: inset 1px 0 0 rgba(16, 18, 28, 0.08); }
.vital strong { font-size: 26px; font-weight: 600; letter-spacing: -0.028em; line-height: 1.1; }
.vital span { color: #55555c; font-size: 12.5px; letter-spacing: -0.004em; }
a.vital:hover { text-decoration: none; }
a.vital:hover strong { color: var(--indigo-ink); }
.vital--good strong { color: var(--green-ink); }
.vital--warn strong { color: var(--amber-ink); }

/* ---------------------------------------------------------------- shell -- */

.shell { min-height: 100vh; }

.work {
  max-width: var(--content);
  margin: 0 auto;
  padding: 84px var(--gutter) 104px;
}

/* A page that runs its own canvas edge to edge: the bar floats over it, so the
   page owns the space under the bar rather than being pushed clear of it. It
   nests its own `.work` for the parts that do want a column. */
.bleed { padding-bottom: 104px; }

.main { max-width: var(--column); margin: 0 auto; padding: 104px var(--column-pad) 96px; }

.main--bare {
  position: relative;
  max-width: none;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  overflow: hidden;
  background: var(--void);
}
.main--bare::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -2;
  background:
    radial-gradient(38% 42% at 68% 62%, rgba(255, 159, 10, 0.46), transparent 64%),
    radial-gradient(56% 58% at 30% 40%, rgba(94, 92, 230, 0.68), transparent 66%),
    radial-gradient(64% 46% at 14% 92%, rgba(94, 92, 230, 0.4), transparent 70%);
  filter: blur(26px);
}
.main--bare::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* The form stays light on the dark canvas: a one-field sign-in is not the place
   to ask anyone to read pale text over moving colour. */
.main--bare .card {
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  backdrop-filter: blur(32px) saturate(200%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 32px 76px -28px rgba(0, 0, 0, 0.7);
}

.stack { display: grid; gap: 24px; }
.stack--wide { gap: 28px; }

.page-head { display: grid; gap: 8px; }
.page-head h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -0.028em; }
.page-head .muted { max-width: 62ch; }
.page-head--actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.page-head--actions > div { display: grid; gap: 6px; }

.breadcrumbs { display: flex; gap: 8px; color: var(--label-3); font-size: 13px; }

h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.018em; }

.muted { color: var(--label-2); }
.small { font-size: 13px; }

/* -------------------------------------------------------- grouped lists -- */

/* The panel's one structural idea: a titled group of rows on a single white
   surface, separated by hairlines rather than by more boxes. Everything that is
   a list of things is one of these. */
.group { display: grid; gap: 9px; align-content: start; }

.group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 4px; }
.group__title { padding: 0 4px; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.group__head .group__title { padding: 0; }
.group__note { padding: 0 4px; font-size: 13px; color: var(--label-2); }
.group__link { font-size: 13px; white-space: nowrap; }

.group__rows {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.row { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 11px 18px; }
.row + .row { box-shadow: inset 0 1px 0 var(--separator); }
a.row { color: var(--label); }
a.row:hover { background: rgba(94, 92, 230, 0.04); text-decoration: none; }

.row__text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.row__title { font-size: 15px; letter-spacing: -0.008em; }
.row__sub { font-size: 13px; color: var(--label-2); }
.row__aside { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.row__chevron { flex: 0 0 auto; color: var(--label-3); font-size: 17px; }

/* --------------------------------------------------------------- switch -- */

.switch {
  appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 999px;
  background: #e9e9ea;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease;
}
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(20px); }

/* ------------------------------------------------------------ segmented -- */

/* Two environments is not a dropdown. */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--fill); border-radius: 10px; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: block;
  padding: 5px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--label);
  transition: background-color 0.15s ease;
}
.seg input:checked + span { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.seg input:focus-visible + span { outline: 3px solid rgba(94, 92, 230, 0.45); }

/* ---------------------------------------------------------------- input -- */

/* Inside a row: the label names it, the field fills the rest, and the box is
   the row itself. A bordered input inside a bordered row is two boxes for one
   thing. */
.row input[type="text"],
.row input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--label);
  font: inherit;
  text-align: right;
}
.row input::placeholder { color: var(--label-3); }
.row input:focus { outline: none; }
.row:focus-within { background: rgba(94, 92, 230, 0.04); }
.row__label { flex: 0 0 auto; font-size: 15px; }

.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 500; color: var(--label-2); }
.field input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-control);
  color: var(--label);
  font: inherit;
}
.field input:focus-visible { border-color: var(--indigo); outline-offset: 0; }

.input--code { font: 500 22px/1 var(--mono); letter-spacing: 0.32em; text-align: center; }

/* --------------------------------------------------------------- button -- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 18px;
  background: var(--indigo);
  border: 0;
  border-radius: 980px;
  color: #fff;
  font: 500 15px/1 var(--sans);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.button:hover { filter: brightness(1.08); text-decoration: none; }
.button:disabled { opacity: 0.4; cursor: not-allowed; }

.button--plain {
  height: 34px;
  padding: 0 15px;
  background: var(--surface);
  color: var(--label);
  font-size: 13.5px;
  box-shadow: 0 1px 2px rgba(16, 18, 28, 0.1), 0 0 0 0.5px rgba(16, 18, 28, 0.05);
}
.button--plain:hover { filter: none; background: #fbfbfd; }

.button--danger { background: none; color: var(--red); height: 32px; padding: 0 10px; font-size: 13px; box-shadow: none; }
.button--danger:hover { filter: none; background: rgba(215, 0, 21, 0.08); }

.button--link { height: auto; padding: 0; background: none; color: var(--indigo); font-size: 14px; box-shadow: none; }
.button--link:hover { filter: none; text-decoration: underline; }

.actions { display: flex; align-items: center; gap: 14px; }
.actions--end { justify-content: flex-end; }

/* ---------------------------------------------------------------- badge -- */

.badge {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--label-2);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.badge--live { background: rgba(138, 82, 6, 0.11); color: var(--amber-ink); }
.badge--active { background: rgba(28, 116, 48, 0.12); color: var(--green-ink); }
.badge--draft { background: rgba(138, 82, 6, 0.11); color: var(--amber-ink); }
.badge--revoked { background: rgba(0, 0, 0, 0.06); color: var(--label-3); }
.badge--open, .badge--approved, .badge--test { background: rgba(28, 116, 48, 0.12); color: var(--green-ink); }
.badge--closed, .badge--merged, .badge--disabled { background: rgba(0, 0, 0, 0.055); color: var(--label-2); }
.badge--pending { background: rgba(138, 82, 6, 0.11); color: var(--amber-ink); }
.badge--rejected { background: rgba(215, 0, 21, 0.1); color: var(--red); }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips code { padding: 2px 7px; border-radius: 6px; background: var(--fill); font-size: 11.5px; color: var(--label-2); }

/* ------------------------------------------------------- the one moment -- */

/* A key exists in full for one screen and then never again. It gets the size
   that says so, and a copy button so nobody has to select it by hand. */
.reveal {
  display: grid;
  gap: 16px;
  padding: 24px;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: 0 0 0 1px rgba(94, 92, 230, 0.25), 0 8px 30px rgba(94, 92, 230, 0.12);
}
.reveal h2 { font-size: 19px; }
.reveal__warn { font-size: 14px; color: var(--amber-ink); max-width: 58ch; }
.reveal__value { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--fill); border-radius: var(--r-control); }
.reveal__value code { flex: 1 1 auto; font-size: 14px; color: var(--label); word-break: break-all; user-select: all; }

/* ---------------------------------------------------------------- tiles -- */

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 480px; }
.tile { display: grid; gap: 3px; padding: 18px 20px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); }
.tile__value { font-size: 28px; font-weight: 600; letter-spacing: -0.026em; }
.tile__label { font-size: 13px; color: var(--label-2); }

.snippet { margin: 0; padding: 16px; background: var(--void); border-radius: var(--r-control); overflow-x: auto; }
.snippet code { color: #f5f5f7; font-size: 13px; line-height: 1.7; }

/* ---------------------------------------------------------------- cards -- */

.card { display: grid; gap: 16px; padding: 24px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); }
.card--narrow { width: 100%; max-width: 400px; gap: 18px; padding: 28px; }
.card--narrow .stack { gap: 16px; }
.card--narrow .button { width: 100%; }
.card--narrow h1 { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -0.026em; }
.card__mark { width: 44px; height: 44px; margin-bottom: -4px; }

/* ---------------------------------------------------------------- flash -- */

/* A notification, not a banner. It used to sit above the page title and push
   it down, so arriving at a screen moved the screen. */
.flash-group {
  position: fixed;
  top: 82px;
  right: max(var(--gutter), calc((100% - var(--content)) / 2 + var(--gutter)));
  z-index: 30;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100vw - 48px));
}
.flash-group:empty { display: none; }

.flash {
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(22px) saturate(190%);
  backdrop-filter: blur(22px) saturate(190%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 12px 34px -10px rgba(16, 18, 28, 0.4);
  font-size: 14px;
}
.flash--info { border-left: 3px solid var(--indigo); }
.flash--error { border-left: 3px solid var(--red); color: var(--red); }

.stack > .flash, form > .flash { position: static; width: auto; border-left: 3px solid var(--red); }

.empty { padding: 30px 18px; text-align: center; color: var(--label-2); font-size: 14px; }

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

.overview { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: var(--gutter); align-items: start; }
.overview__side { display: grid; gap: 26px; align-content: start; }

/* A venue row carries a number you compare across rows, so the number gets a
   length as well as a value. Nothing else in the panel does this: it is the one
   list where "which of these is busiest" is the question. */
.venue-row { display: flex; align-items: center; gap: 16px; min-height: 62px; padding: 12px 18px; color: var(--label); }
.venue-row + .venue-row { box-shadow: inset 0 1px 0 var(--separator); }
.venue-row:hover { background: rgba(94, 92, 230, 0.035); text-decoration: none; }
.venue-row__name { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.venue-row__name strong { overflow: hidden; font-size: 14.5px; font-weight: 600; letter-spacing: -0.012em; text-overflow: ellipsis; white-space: nowrap; }
.venue-row__name span { color: var(--label-2); font-size: 12.5px; }
.venue-row__load { flex: 0 0 128px; display: grid; gap: 5px; justify-items: end; }
.venue-row__load b { font-size: 14px; font-weight: 600; }
.venue-row__load b small { margin-left: 5px; color: var(--label-3); font-size: 11.5px; font-weight: 400; }
.venue-row__bar { width: 100%; height: 4px; border-radius: 999px; background: rgba(16, 18, 28, 0.07); overflow: hidden; }
.venue-row__bar i { display: block; height: 100%; border-radius: 999px; background: var(--indigo); }
.venue-row__bar--idle i { background: rgba(16, 18, 28, 0.16); }
.venue-row__flag { flex: 0 0 auto; }

.compact-list { display: grid; }
.compact-row { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 12px 18px; }
.compact-row + .compact-row { box-shadow: inset 0 1px 0 var(--separator); }
.compact-row small { color: var(--label-2); font-size: 12.5px; }

.compact-row { color: var(--label); font-size: 13px; }
.compact-row:hover { background: rgba(94, 92, 230, 0.035); text-decoration: none; }
.compact-row > span:first-child { display: grid; gap: 2px; overflow: hidden; flex: 1; min-width: 0; }
.compact-row__route { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.compact-row__route code { margin-right: 7px; color: var(--indigo-ink); font-weight: 500; }

/* ------------------------------------------------------- other surfaces -- */

/* The remaining panel pages still speak in metrics and cards. They keep their
   shapes; they inherit the new ink, radii and hue. */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 12px; }
.metrics--compact { grid-template-columns: repeat(4, minmax(130px, 220px)); }
.metric {
  display: grid;
  gap: 3px;
  align-content: center;
  min-height: 94px;
  padding: 18px 20px;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  color: var(--label);
}
a.metric:hover { text-decoration: none; box-shadow: var(--shadow-lift); }
.metric strong { font-size: 26px; font-weight: 600; letter-spacing: -0.028em; }
.metric span { color: var(--label-2); font-size: 12.5px; }

.panel-card { min-width: 0; padding: 22px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); }
.panel-card--span { grid-column: 1 / -1; }
.panel-card--flush { padding: 0; overflow: hidden; }
.panel-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.panel-card__head--padded { padding: 22px 22px 0; }
.panel-card__head h2 { font-size: 15px; }
.panel-card__head p { margin-top: 3px; color: var(--label-2); font-size: 13px; }
.panel-card__head > a { font-size: 13px; white-space: nowrap; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.filters {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 9px;
  padding: 13px;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.filters label { display: grid; flex: 1 1 180px; gap: 5px; }
.filters label > span { padding-left: 2px; color: var(--label-2); font-size: 12px; font-weight: 500; }
.filters input, .filters select {
  width: 100%;
  height: 38px;
  padding: 0 11px;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: 9px;
  color: var(--label);
  font: 13px var(--sans);
}
.filters--dense label { flex-basis: 120px; }
.filters--dense label:last-of-type { flex-basis: 180px; }
.filters .button { height: 38px; }

.table-wrap { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
/* Sentence case. A column heading is a word, not an announcement. */
.data-table th {
  padding: 11px 14px;
  background: #fbfbfd;
  border-bottom: 1px solid var(--separator);
  color: var(--label-2);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.data-table td { max-width: 270px; padding: 13px 14px; border-bottom: 1px solid var(--separator); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover:not(:has(.empty)) { background: rgba(94, 92, 230, 0.03); }
.data-table td > strong, .data-table td > a > strong { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.data-table td > small, .data-table td > a + small { display: block; margin-top: 2px; color: var(--label-2); font-size: 12px; }
.data-table code { font-size: 11.5px; }
.data-table--traffic td:nth-child(2) { min-width: 230px; }
.method { display: inline-block; min-width: 42px; margin-right: 7px; color: var(--indigo-ink); font-weight: 600; }
.route { font-size: 12px; }
.truncate { display: block; overflow: hidden; max-width: 130px; text-overflow: ellipsis; white-space: nowrap; }
.pagination { display: flex; justify-content: center; padding: 15px; border-top: 1px solid var(--separator); }

.http { display: inline-flex; min-width: 40px; justify-content: center; padding: 3px 8px; border-radius: 7px; font: 500 11.5px var(--mono); }
.http--ok { background: rgba(52, 199, 89, 0.13); color: var(--green-ink); }
.http--warning { background: rgba(255, 159, 10, 0.14); color: var(--amber-ink); }
.http--error { background: rgba(215, 0, 21, 0.1); color: var(--red); }

.detail-list { display: grid; margin: 0; }
.detail-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--separator); }
.detail-list > div:first-child { border-top: 0; }
.detail-list dt { color: var(--label-2); font-size: 13px; }
.detail-list dd { margin: 0; font-size: 13px; text-align: right; }
.announcement-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.announcement-grid article { padding: 13px; background: var(--fill); border-radius: 10px; }
.announcement-grid strong { font-size: 13px; }
.announcement-grid p { margin-top: 3px; color: var(--label-2); font-size: 12px; }

/* Self-service business editor. */
.business-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: end; }
.business-form__wide { grid-column: 1 / -1; }
.business-form .field input, .business-form .field textarea, .business-form .field select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--separator); border-radius: 8px; background: var(--surface); color: var(--label); font: inherit; }
.business-form .field textarea { min-height: 72px; resize: vertical; }
.business-form .field :is(input, textarea, select):focus-visible { border-color: var(--indigo); outline-offset: 0; }
.business-inline-form { display: flex; align-items: end; gap: 10px; flex: 1 1 320px; }
.business-inline-form .field { flex: 1 1 auto; }
.business-inline-form .field input { width: 100%; }
.business-publish { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.business-publish p { max-width: 65ch; }
.business-publish .button { flex: 0 0 auto; }
.business-category { display: grid; gap: 18px; }
.business-category__head { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.business-section { display: grid; gap: 14px; padding: 18px; border-radius: 10px; background: var(--fill); }
.business-product { display: grid; gap: 8px; padding: 16px; border-radius: 10px; background: var(--surface); }
.business-product h3 { margin: 0; font-size: 14px; }
.business-product > .button--danger { justify-self: end; }
.business-product--new { border: 1px dashed var(--separator); }
.business-add-section { max-width: 580px; }

/* ------------------------------------------------------------- narrower -- */

@media (max-width: 1080px) {
  .topbar { padding-left: 12px; }
  .topbar__tenant { display: none; }
  .topbar__nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .topbar__nav::-webkit-scrollbar { display: none; }
  .topbar__docs { display: none; }
  .topbar__account > span { display: none; }
  .topbar__account { padding: 0 4px; background: none; }
  .overview { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  :root { --gutter: 18px; }
  .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vital:nth-child(3) { box-shadow: inset 0 1px 0 rgba(16, 18, 28, 0.08); }
  .vital:nth-child(4) { box-shadow: inset 1px 0 0 rgba(16, 18, 28, 0.08), inset 0 1px 0 rgba(16, 18, 28, 0.08); }
  .work { padding-top: 116px; }
  .metrics, .metrics--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .panel-card--span { grid-column: auto; }
}

@media (max-width: 620px) {
  .business-form { grid-template-columns: minmax(0, 1fr); }
  .business-form__wide { grid-column: auto; }
  .business-publish { align-items: stretch; flex-direction: column; }
  .business-inline-form { flex-wrap: wrap; }
  .topbar { padding-left: 9px; }
  .topbar__brand span { display: none; }
  .hero { padding-top: 96px; }
  .hero__top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .live { order: -1; }
  .hero h1 { font-size: 31px; }
  .wave__peak span { display: none; }
  .main { padding: 96px 16px 64px; }
  .work { padding: 106px 16px 72px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .row { flex-wrap: wrap; }
  .row input[type="text"], .row input[type="email"] { text-align: left; }
  .vital { min-height: 74px; padding: 14px 16px; }
  .vital strong { font-size: 21px; }
  .venue-row__load { flex-basis: 92px; }
  .page-head--actions { align-items: flex-end; }
  .page-head h1 { font-size: 25px; }
  .filters { align-items: stretch; }
  .filters label, .filters--dense label, .filters--dense label:last-of-type { flex: 1 1 calc(50% - 9px); }
  .filters .button { width: 100%; }
  .breadcrumbs { overflow: hidden; white-space: nowrap; }

  /* Floating it over the bar covered the links. There is no spare corner on a
     narrow screen, so it takes its place in the flow. */
  .flash-group { position: static; width: auto; margin-bottom: 20px; }
}