/* brevily website — the design's "public redirect pages" rules
   (`.brv-p*`: the interstitial, the `+` preview, disabled/expired/
   password pages), COPIED VERBATIM from design/demo/console.css,
   lines 1288–1613 of the 2026-09 export. Nothing below this header is
   hand-written: re-copy on the next export.

   Why a separate file: the design keeps these in console.css, but they
   style pages a VISITOR sees, not the console — the website shows the
   same card as its live `+` demo, and the edge will serve it. Loading
   all of console.css here for seventeen rules would drag the console's
   density pass onto the marketing site. The design should move this
   block into a file of its own; until then it is extracted here. */

/* ---------- public redirect pages ---------- */

.brv-p {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  min-height: 100dvh;
  padding: var(--space-6) var(--space-4);
  background: var(--color-canvas);
}

.brv-p__card {
  width: 100%;
  max-width: 26rem;
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.brv-p__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-accent);
}

.brv-p__icon--warn {
  color: var(--color-warning);
}
.brv-p__icon--danger {
  color: var(--color-danger);
}

.brv-p__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

.brv-p__text {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.brv-p__actions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  text-align: start;
}

.brv-p__hint {
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.brv-p__foot {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.brv-p__foot a {
  color: var(--color-text-muted);
}

/* ---------- staff tools (internal) ---------- */

.brv-t .navbar__brand {
  opacity: .9;
}

.brv-t-env {
  margin-left: var(--space-3);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: var(--font-size-2xs);
}

.brv-t-count {
  margin-left: auto;
}

.brv-t-search {
  flex: 1 1 16rem;
  min-width: 0;
}

.brv-t-note {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-muted);
}

.brv-t-note svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

.brv-t-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}

.brv-t-check:last-child {
  border-bottom: 0;
}
.brv-t-check__name {
  color: var(--color-text);
}

.brv-t-decide {
  display: grid;
  gap: var(--space-3);
}

.brv-t-decide__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.brv-t-note-form {
  display: grid;
  gap: var(--space-3);
}

/* A stand-in for the sandbox screenshot: shapes only, never a real brand. */
.brv-t-shot {
  display: grid;
  gap: var(--space-3);
}

.brv-t-shot__frame {
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-t-shot__chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-sunken, var(--color-canvas));
  border-bottom: var(--border-width) solid var(--color-border);
}

.brv-t-shot__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-border-strong);
}

.brv-t-shot__url {
  margin-left: var(--space-2);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-2xs);
  color: var(--color-danger);
}

.brv-t-shot__body {
  display: grid;
  gap: var(--space-3);
  place-items: center;
  padding: var(--space-6) var(--space-5);
}

.brv-t-shot__logo {
  width: 5rem;
  height: 1.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-border-strong);
}

.brv-t-shot__line {
  width: 60%;
  height: .6rem;
  border-radius: 999px;
  background: var(--color-border);
}

.brv-t-shot__line--title {
  width: 45%;
  height: .9rem;
  background: var(--color-border-strong);
}

.brv-t-shot__field {
  width: 70%;
  height: 2rem;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.brv-t-shot__btn {
  width: 70%;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--color-border-strong);
}

@media screen and (max-width: 767px) {
  .brv-t-env {
    display: none;
  }
  .brv-t-check {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .brv-t-check .brv-c-cell-meta {
    grid-column: 2;
  }
}

/* Toolbar comboboxes: keep the tokens, the input and the caret on one line.
   Without this the caret drops to a second row and the filter is twice as
   tall as the controls beside it. */
.brv-c-toolbar .combobox {
  flex: 0 1 auto;
  min-width: 12rem;
  max-width: 15rem;
}

.brv-c-toolbar .combobox__field {
  flex-wrap: nowrap;
  overflow-x: auto;
  min-height: var(--control-height-sm, 2rem);
  padding-block: var(--space-1);
  scrollbar-width: none;
}

.brv-c-toolbar .combobox__field::-webkit-scrollbar {
  display: none;
}

.brv-c-toolbar .combobox__input {
  flex: 1 1 4rem;
  min-width: 4rem;
}

.brv-c-toolbar .combobox__token {
  flex: 0 0 auto;
}
.brv-c-toolbar .combobox__caret {
  flex: 0 0 auto;
}

/* ---------- the link-preview page ---------- */

.brv-p__facts {
  display: grid;
  gap: 0;
  margin: var(--space-5) 0 var(--space-5);
  text-align: left;
  border-top: var(--border-width) solid var(--color-border);
}

.brv-p__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: var(--border-width) solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}

.brv-p__k {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-p__v {
  color: var(--color-text-muted);
}

/* The destination is the whole point of the page, so it is set large, in the
   mono face, and allowed to wrap rather than being truncated. */
.brv-p__dest {
  display: block;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  line-height: 1.5;
  overflow-wrap: anywhere;
  color: var(--color-text);
}

@media screen and (max-width: 767px) {
  .brv-p__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}