@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-var-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/roboto-mono-var-latin.woff2") format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg-canvas);
  color: var(--fg-default);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: var(--text-label);
}

.bar {
  display: flex;
  align-items: center;
  gap: var(--space-inline-md);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border-block-end: var(--border-width-thin) solid var(--border-default);
}

.bar__left {
  display: flex;
  align-items: center;
  gap: var(--space-inline-md);
  min-width: 0;
  flex: 1 1 auto;
}

.bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-inline-sm);
  flex: none;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.logo__img {
  display: block;
  block-size: 1.5rem;
  inline-size: auto;
}

.address {
  display: flex;
  align-items: center;
  gap: var(--space-inline-sm);
  min-width: 0;  padding: var(--space-1) var(--space-3);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-canvas);
}

.address__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--status-live);
}

.address__host {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-label);
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  margin: 0;
  color: var(--fg-muted);
}

.status__value {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--fg-default);
}

.bar[data-expiry="soon"] .address__dot { background: var(--status-expiring); }
.bar[data-expiry="soon"] .status__value { color: var(--status-expiring); }

.status__icon--expired { display: none; }
.bar[data-state="expired"] .status__icon--live { display: none; }
.bar[data-state="expired"] .status__icon--expired { display: inline; }
.bar[data-state="expired"] .address__dot { background: var(--status-expired); }
.bar[data-state="expired"] .status__value { color: var(--fg-muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex: none;
  block-size: 2.5rem;
  padding-inline: var(--space-4);
  border: var(--border-width-thin) solid transparent;
  border-radius: var(--radius-button);
  background: none;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    filter 120ms ease;
}

.btn--ghost { color: var(--fg-muted); }

.btn--secondary {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--fg-default);
}

.btn--primary {
  background: var(--bg-brand-solid);
  color: var(--fg-onbrand);
}

@media (hover: hover) {
  .btn--ghost:hover {
    background: var(--bg-raised);
    color: var(--fg-default);
  }

  .btn--secondary:hover { background: var(--bg-raised); }
  .btn--primary:hover { background: var(--bg-brand-hover); }
}

.btn:active { filter: brightness(0.9); }

.icon {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bar[data-state="dead"] .address,
.bar[data-state="dead"] .status,
.bar[data-state="dead"] .bar__actions { display: none; }

.bar:not([data-state="expired"]) [data-slot="publish"] { display: none; }

.bar[data-state="expired"] [data-action="share"] { display: none; }

.bar[data-state="expired"] [data-slot="manage"] {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--fg-default);
}

@media (hover: hover) {
  .bar[data-state="expired"] [data-slot="manage"]:hover { background: var(--bg-raised); }
}

.menu {
  display: none;
  inline-size: 300px;
  padding: var(--space-2);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: 14px;
  background: var(--bg-surface);
  box-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.2);
  color: var(--fg-default);
}

.menu:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  padding: var(--space-2) 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}

.menu__item:hover,
.menu__item:focus-visible { background: var(--bg-raised); }

.menu__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.menu__title {
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
}

.menu__sub {
  font-size: var(--text-caption);
  color: var(--fg-muted);
}

.qr-pop {
  display: none;  inline-size: max-content;
  padding: var(--space-4);
  border: var(--border-width-thin) solid var(--border-default);
  border-radius: var(--radius-surface);
  background: var(--bg-surface);
  box-shadow: 0 8px 24px -4px rgb(0 0 0 / 0.2);
  color: var(--fg-default);
  text-align: center;
}

.qr-pop:popover-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.qr {
  inline-size: 9.375rem;
  block-size: 9.375rem;
  flex: none;
  padding: var(--space-2);
  border-radius: var(--radius-control);
  background: var(--bg-qr);
}

.qr svg {
  inline-size: 100%;
  block-size: 100%;
  shape-rendering: crispEdges;
}

.qr__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
}

.qr__body {
  margin: 0;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-caption);
  color: var(--fg-subtle);
}

@supports (anchor-name: --a) {
  [data-action="share"] { anchor-name: --share; }

  .menu {
    position-anchor: --share;
    position-area: block-end span-inline-end;
    margin: var(--space-1) 0 0;
    position-try-fallbacks: flip-block, flip-inline;
  }
}

.menu::backdrop,
.qr-pop::backdrop { background: rgb(0 0 0 / 0.28); }

@supports (anchor-name: --a) {
  .menu::backdrop { background: none; }
}

.frame {
  border: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-surface);
}

.bar[data-state="dead"] ~ .frame { display: none; }

.dead {
  display: grid;
  place-content: center;
  padding: var(--space-7);
  background: var(--bg-canvas);
}

.dead__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 35rem;
  text-align: center;
}

.dead__title {
  margin: 0;
  font-size: var(--text-title);
  font-weight: var(--font-weight-bold);
}

.dead__body,
.dead__panel p {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--fg-muted);
}

.dead__link {
  color: var(--fg-brand);
  text-decoration: none;
}

.dead__link:hover { text-decoration: underline; }

.toast {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--bg-inverse);
  color: var(--fg-inverse);
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}

.toast[data-visible] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

@media (max-width: 40rem) {
  .bar {
    flex-direction: column;
    align-items: stretch;
    row-gap: var(--space-2);
  }

  .bar__left { gap: var(--space-inline-sm); }
  .logo { display: none; }
  .address { flex: 1 1 auto; }

  [data-icon-only-narrow] .btn__label { display: none; }

  [data-action="share"] { flex: 1 1 auto; }
}