/* Inter ships with Sable, so text takes the same room on every device, not
   only where Inter happens to be installed. The first file holds what nearly
   every page shows. The second holds the rest of Inter's characters and loads
   only on a page that shows one. docs/ui.md says how both are built. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/15c47863fd920b73/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+03BC, U+2000-206F, U+20AC,
    U+2122, U+2190-2193, U+21B5, U+2212, U+2318, U+2713, U+FEFF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/7735622896d9b1cc/inter-extra.woff2") format("woff2");
  unicode-range: U+0100-0130, U+0132-0151, U+0154-02BA, U+02BD-02C5,
    U+02C7-02D9, U+02DB, U+02DD-0303, U+0305-0307, U+0309-0328, U+032A-03BB,
    U+03BD-052F, U+0E3F, U+1D43-1FFE, U+2070-20AB, U+20AD-2121, U+2123-2188,
    U+2194-21B4, U+21BA-2211, U+221A-2265, U+2303-2305, U+2325-24EA,
    U+25A0-26A0, U+2717-27FA, U+2B06-2B1C, U+2C7C-2C7F, U+2DFF-2E18, U+A69F,
    U+A7FF, U+A92E, U+FE20-FE2D, U+1F12F-1F16B, U+1F850-1F852;
}

:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  --radius: 0.625rem;
  /* One palette keeps metric cards, chart lines, legends, and hover markers aligned. */
  --metric-total: #3b82f6;
  --metric-no-error: #22c55e;
  --metric-server-failure: #fb3d9c;
  --metric-nx-domain: #94a3b8;
  --metric-refused: #06b6d4;
  --metric-authoritative: #38bdf8;
  --metric-recursive: #a855f7;
  --metric-cached: #facc15;
  --metric-blocked: #f97316;
  --metric-dropped: #ef4444;
  --metric-clients: #6366f1;
  --metric-cache-rate: #14b8a6;
  /* Status colors: success, warning, danger, and info states share these, and
     the -strong shades carry text on a light tint. */
  --success: #22c55e;
  --success-strong: #16a34a;
  --warning: #f59e0b;
  --warning-strong: #d97706;
  --danger: #ef4444;
  --info: #3b82f6;
  /* Spacing scale: 4px steps, named for the step count like Tailwind. */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --status-card-title-size: 1.25rem;
  --status-card-title-icon-size: 1rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --shell-background: oklch(0.968 0.006 80);
}

.dark {
  color-scheme: dark;
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --shell-background: oklch(0.115 0.008 285);
}

* { box-sizing: border-box; border-color: var(--border); }
[hidden] { display: none !important; }
/* The gutter is held open whether or not the page scrolls: without it a tab
   whose panel outgrows the viewport takes the scrollbar's width out of the
   layout, and every switch between two such tabs nudges the page sideways. */
html { min-width: 320px; background: var(--shell-background); scroll-behavior: smooth; scrollbar-gutter: stable; }
/* A modal dialog does not stop the page behind it from scrolling, so a wheel
   or trackpad flick slides the background out from under the dialog. The
   gutter reserved above means freezing the document costs no sideways nudge.
   iOS Safari ignores overflow on the root for touch, so app.js also refuses
   touch scrolls that would reach the page, and the modal keeps its
   overscroll to itself. Only the modal: a clipped box inside it, such as a
   drawer's rounded list or a truncated label, is a scroll container too, and
   Safari lets one that contains its overscroll swallow a wheel or finger that
   should scroll the drawer around it. Nested scrollers hand their overscroll
   on to the scroller around them, as they do outside a modal. */
html:has(dialog[open]) { overflow: hidden; }
/* iOS Safari still scrolls a frozen root under a finger, a focus or a fling,
   and when it does the modal and its backdrop, fixed to a viewport the
   browser no longer moves, slide off the screen with the page. app.js pins
   the body where the page was while a dialog is open, so the document has
   nothing left to scroll. */
html.modal-scroll-lock body { position: fixed; inset-inline: 0; top: var(--modal-scroll-top, 0); }
dialog[open] { overscroll-behavior: contain; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--background); color: var(--foreground); font-size: 14px; }
body:has(.app-shell) { background: var(--shell-background); }
a { color: inherit; text-decoration: none; }
button, input, select { color: inherit; font: inherit; }
/* Native selects that have not opted into Sable's custom menu still need
   readable options on macOS's light system popup. */
select option, select optgroup { background-color: #fff; color: #171717; }
button { cursor: pointer; }

/* Keyboard users reach the two persistent application landmarks before the
   sidebar's controls. The links stay out of sight until they receive focus. */
.skip-links { position: fixed; top: .5rem; left: .5rem; z-index: 200; display: flex; gap: var(--space-2); pointer-events: none; }
.skip-links a { position: absolute; width: max-content; max-width: calc(100vw - 1rem); border: 2px solid var(--ring); border-radius: .4rem; background: var(--background); padding: .6rem .8rem; color: var(--foreground); font-weight: 700; box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .22); opacity: 0; pointer-events: auto; transform: translateY(-150%); }
.skip-links a:focus { position: relative; opacity: 1; transform: translateY(0); }

/* Interactive elements share one unmistakable keyboard focus treatment. More
   specific component rules may adjust the offset without removing the ring. */
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
:where(.main, .nav, section[tabindex="-1"]):focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }
/* A tap on the phone menu button parks focus on the drawer itself, which is
   a container, not a control, so it never draws a ring. */
.sidebar:focus { outline: none; }

.app-shell { display: flex; min-height: 100vh; width: 100%; gap: var(--space-3); background: var(--shell-background); padding: var(--space-3); }
.sidebar {
  position: sticky;
  top: .75rem;
  z-index: 30;
  display: flex;
  width: 15rem;
  /* Keep bottom controls above expanding mobile browser chrome. */
  height: 100vh;
  height: 100dvh;
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  flex: 0 0 15rem;
  flex-direction: column;
  border-right: 0;
  background: transparent;
  color: var(--sidebar-foreground);
  transition: width 180ms ease, flex-basis 180ms ease;
}
.sidebar-header { padding: var(--space-2) 0.375rem var(--space-1); }
.sidebar-header { position: relative; }
.sidebar-header > div, .sidebar-header { min-width: 0; }
.brand { display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--space-2); border-radius: 999px; padding: var(--space-2) 2.75rem var(--space-2) var(--space-2); }
.brand:hover { background: var(--sidebar-accent); }
.brand-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
}
.brand-mark img { width: 100%; height: 100%; }
:root:not(.dark) :is(.brand-mark, .auth-logo) img { background: radial-gradient(circle closest-side, #000 80%, transparent 81%); }
.brand-copy, .user-copy { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.brand-copy strong, .user-copy strong { overflow: hidden; font-size: 0.875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small, .user-copy small { overflow: hidden; color: var(--muted-foreground); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
/* The toggle's insets match the header's padding, so auto margins centre it
   on the brand row whatever the brand's height. */
.sidebar-collapse { position: absolute; top: var(--space-2); right: 0.5rem; bottom: var(--space-1); display: grid; width: 2rem; height: 2rem; margin-block: auto; place-items: center; border: 0; border-radius: 50%; background: transparent; }
.sidebar-collapse:hover, .user-menu:hover { background: var(--sidebar-accent); }
.sidebar-nav-wrap { position: relative; min-height: 0; flex: 1; }
/* The list scrolls when the window is too short for it. Scrollbars stay out
   of sight until someone scrolls, so a fade and a chevron say that more of
   the list waits below, at every size. Scroll padding the height of a fade
   keeps the current page, or a focused item, clear of the fades. */
.nav { min-height: 0; height: 100%; flex: none; overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 2.75rem; padding: 0 var(--space-2) var(--space-2); }
/* The same fades mark any box with data-scroll-fade, such as release notes. */
[data-scroll-fade-bottom="true"] { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 2.75rem), transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 2.75rem), transparent 100%); }
[data-scroll-fade-top="true"] { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 2.75rem, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 2.75rem, #000 100%); }
[data-scroll-fade-top="true"][data-scroll-fade-bottom="true"] { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 2.75rem, #000 calc(100% - 2.75rem), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 2.75rem, #000 calc(100% - 2.75rem), transparent 100%); }
.sidebar-nav-hint { position: absolute; right: .75rem; bottom: .15rem; left: .75rem; display: grid; height: 2.25rem; place-items: end center; padding-bottom: var(--space-1); color: var(--muted-foreground); opacity: 0; pointer-events: none; transition: opacity 140ms ease; }
.sidebar-nav-hint[data-visible="true"] { opacity: 1; }
/* A box marked data-scroll-fade gets the same chevron from a frame around it,
   so the chevron stays put while the box scrolls. It sits in the gap just
   under the box rather than over the last line it is fading. */
.scroll-fade-frame { position: relative; min-width: 0; }
.scroll-fade-hint { position: absolute; top: calc(100% + .05rem); right: 0; left: 0; display: grid; place-items: center; color: var(--muted-foreground); opacity: 0; pointer-events: none; transition: opacity 140ms ease; }
.scroll-fade-hint[data-visible="true"] { opacity: 1; }
/* Phone dialogs sit their buttons close under the box, so the chevron gets a
   little more room there. */
@media (max-width: 767px) {
  .scroll-fade-frame { margin-bottom: var(--space-2); }
}
.scroll-fade-hint .nav-icon { width: 1rem; height: 1rem; }
.sidebar-nav-hint .nav-icon { width: 1rem; height: 1rem; transform: rotate(180deg); }
/* Section labels sit close to the items they name, with more room above to
   set their group apart. Tight spacing keeps the whole list in view on a
   laptop-height window instead of scrolling. */
.nav-group { padding: var(--space-1) 0; }
.nav-label { height: 2rem; padding: var(--space-3) var(--space-2) var(--space-1); color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500; }
.nav-item { display: flex; width: 100%; height: 2.25rem; align-items: center; gap: var(--space-2); overflow: hidden; border: 1px solid transparent; border-radius: 999px; padding: 0 var(--space-3); color: var(--sidebar-foreground); font-size: 0.875rem; font-weight: 500; white-space: nowrap; }
.nav-item + .nav-item { margin-top: var(--space-1); }
.nav-item:hover, .nav-item.active { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.nav-item:hover { border-color: var(--border); }
.nav-item.active { border-color: var(--sidebar-border); }
:root:not(.dark) .nav-item.active { background: var(--sidebar-border); }
.nav-item.disabled { cursor: default; opacity: 0.48; }
.nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.sidebar-bottom { position: relative; display: grid; gap: var(--space-1); margin-top: auto; padding: var(--space-2); }
.command-palette-trigger { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; width: 100%; min-width: 0; height: 2.5rem; align-items: center; gap: var(--space-2); border: 0; border-radius: 999px; background: transparent; padding: 0 var(--space-3); color: var(--muted-foreground); font-size: .78rem; font-weight: 500; text-align: left; }
.command-palette-trigger:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.command-palette-trigger .nav-icon { width: 1rem; height: 1rem; }
.command-palette-trigger kbd { border: 1px solid var(--sidebar-border); border-radius: .3rem; background: color-mix(in oklch, var(--sidebar-accent) 55%, transparent); padding: .12rem .35rem; color: inherit; font: 600 .62rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.sidebar-account { position: relative; min-width: 0; }
.user-menu { display: flex; width: 100%; min-width: 0; align-items: center; gap: var(--space-2); border: 0; border-radius: 999px; background: transparent; padding: var(--space-2); color: inherit; text-align: left; }
.user-menu:hover { background: var(--sidebar-accent); }
.avatar { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: 50%; background: var(--accent); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.avatar-image { object-fit: cover; background: var(--surface-2, var(--accent)); }
.user-action { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted-foreground); }
.user-action .nav-icon { width: 0.9rem; height: 0.9rem; }
.account-popover { position: absolute; z-index: 60; bottom: calc(100% + .5rem); left: 0; display: grid; width: 15rem; overflow: hidden; border: 1px solid var(--border); border-radius: .625rem; background: var(--popover); color: var(--popover-foreground); padding: .375rem; box-shadow: 0 16px 40px rgb(0 0 0 / .24); }
.account-popover[hidden] { display: none; }
@media (min-width: 768px) {
  .account-popover { left: 50%; transform: translateX(-50%); }
  .sidebar-collapsed .account-popover { left: 0; transform: none; }
}
.account-popover-header { display: flex; min-width: 0; align-items: center; gap: .625rem; padding: var(--space-2); }
.account-popover-header > span:last-child { display: grid; min-width: 0; line-height: 1.25; }
.account-popover-header strong, .account-popover-header small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-popover-header strong { font-size: .8125rem; }
.account-popover-header small { color: var(--muted-foreground); font-size: .6875rem; }
.account-menu-item { display: flex; width: 100%; height: 2.25rem; align-items: center; gap: .625rem; border: 0; border-radius: .375rem; background: transparent; padding: 0 .625rem; color: inherit; font-size: .8125rem; text-align: left; }
.account-menu-item:hover { background: var(--accent); }
.account-menu-item .nav-icon, .account-theme-label .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.account-menu-separator { height: 1px; margin: .375rem -.375rem; background: var(--border); }
.account-theme { display: grid; gap: .4rem; padding: .375rem var(--space-2) var(--space-2); }
.account-theme-label { display: flex; align-items: center; gap: .625rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 500; }
.account-theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem; border-radius: 999px; background: var(--muted); padding: .2rem; }
.account-theme-options button { height: 1.75rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); font-size: .6875rem; font-weight: 600; }
.account-theme-options button:hover { color: var(--foreground); }
.account-theme-options button.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
.account-sign-out { color: var(--destructive); }
.sidebar-scrim { display: none; }
.sidebar-rail { position: absolute; top: 0; right: -.75rem; z-index: 40; width: .5rem; height: 100%; border: 0; background: transparent; cursor: w-resize; }
.sidebar-rail::after { position: absolute; top: 0; bottom: 0; left: .2rem; width: 1px; background: transparent; content: ""; transition: background 120ms ease; }
.sidebar-rail:hover::after, .sidebar-rail:focus-visible::after { background: var(--sidebar-border); }

.sidebar-collapsed .sidebar { width: 3.5rem; flex-basis: 3.5rem; }
.sidebar-collapsed .app-shell { gap: var(--space-2); }
.sidebar-collapsed .brand {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  justify-content: center;
  padding: 0;
  margin-inline: auto;
  border-radius: 50%;
}
.sidebar-collapsed .brand-copy,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-item > span,
.sidebar-collapsed .user-copy,
.sidebar-collapsed .user-action,
.sidebar-collapsed .sidebar-collapse { display: none; }
.sidebar-collapsed .command-palette-trigger { display: grid; grid-template-columns: 1fr; width: 2.5rem; margin-inline: auto; justify-items: center; padding: 0; }
.sidebar-collapsed .command-palette-trigger-label, .sidebar-collapsed .command-palette-trigger kbd { display: none; }
.sidebar-collapsed .sidebar-rail { cursor: e-resize; }
.sidebar-collapsed .nav-item { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-header { padding-inline: var(--space-1); }
.sidebar-collapsed .brand-mark, .sidebar-collapsed .avatar { width: 2rem; height: 2rem; }
@media (min-width: 768px) {
  .sidebar-collapsed .sidebar-bottom { padding-inline: var(--space-1); }
  .sidebar-collapsed .user-menu { width: 2.5rem; height: 2.5rem; justify-content: center; margin-inline: auto; border-radius: 50%; padding: var(--space-1); }
  .sidebar-collapsed .nav-item { height: 2.5rem; }
  .sidebar-collapsed .nav-item.active { border-color: transparent; background: var(--sidebar-accent); }
  /* The collapsed rail hides the section labels, so a wider gap is all that
     sets the groups apart. */
  .sidebar-collapsed .nav-group { padding: var(--space-2) 0; }
}
.sidebar-tooltip { position: fixed; z-index: 80; max-width: 14rem; border: 1px solid var(--border); border-radius: .375rem; background: var(--popover); padding: .3rem .55rem; color: var(--popover-foreground); font-size: .75rem; font-weight: 500; line-height: 1.4; white-space: nowrap; pointer-events: none; box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .22); }
.sidebar-tooltip::after { position: absolute; top: 50%; left: -.25rem; width: .375rem; height: .375rem; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--popover); content: ""; transform: translateY(-50%) rotate(45deg); }

.command-palette { position: fixed; inset: 0; width: min(calc(100vw - 2rem), 42rem); max-width: 42rem; max-height: min(78dvh, 42rem); margin: max(8dvh, 3.5rem) auto auto; overflow: hidden; border: 1px solid var(--border); border-radius: .85rem; background: var(--popover); color: var(--popover-foreground); padding: 0; box-shadow: 0 1.5rem 5rem rgb(0 0 0 / .34); }
.command-palette[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: command-palette-in 90ms cubic-bezier(.2, 0, 0, 1); }
.command-palette::backdrop { background: rgb(0 0 0 / .58); backdrop-filter: blur(2px); animation: backdrop-in 90ms ease-out; }
.command-palette-search { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto 2rem; min-height: 3.75rem; align-items: center; gap: var(--space-2); border-bottom: 1px solid var(--border); padding: .6rem var(--space-3) .6rem var(--space-4); }
.command-palette-search > .nav-icon { width: 1.15rem; height: 1.15rem; color: var(--muted-foreground); }
.command-palette-search input { width: 100%; height: 2.5rem; border: 0; outline: 0; background: transparent; padding: 0; color: inherit; font-size: 1rem; box-shadow: none; }
.command-palette-search input:focus { border: 0; box-shadow: none; }
.command-palette-search input::-webkit-search-cancel-button { display: none; }
.command-palette-search > kbd { border: 1px solid var(--border); border-radius: .35rem; background: var(--muted); padding: .2rem .4rem; color: var(--muted-foreground); font: 600 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.command-palette-search > button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: .4rem; background: transparent; color: var(--muted-foreground); }
.command-palette-search > button:hover { background: var(--accent); color: var(--foreground); }
.command-palette-search > button .nav-icon { width: 1rem; height: 1rem; }
.command-palette-search-scope { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; min-height: 8rem; align-content: center; align-items: center; gap: var(--space-3); padding: var(--space-5); }
.command-palette-search-scope > button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--border); border-radius: .45rem; background: var(--background); color: var(--muted-foreground); }
.command-palette-search-scope > button:hover { background: var(--accent); color: var(--foreground); }
.command-palette-search-scope > button .nav-icon { width: 1rem; height: 1rem; }
.command-palette-search-scope > span { display: grid; gap: .2rem; }
.command-palette-search-scope strong { font-size: .85rem; }
.command-palette-search-scope small { color: var(--muted-foreground); font-size: .72rem; }
.command-palette-search-modes { display: flex; max-width: 100%; align-items: center; gap: .15rem; overflow-x: auto; border-radius: 999px; background: var(--muted); padding: .2rem; }
.command-palette-search-modes button { height: 1.8rem; border: 0; border-radius: 999px; background: transparent; padding: 0 .65rem; color: var(--muted-foreground); font-size: .7rem; font-weight: 600; white-space: nowrap; }
.command-palette-search-modes button:hover { color: var(--foreground); }
.command-palette-search-modes button[aria-checked="true"] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .14); }
.command-palette-search-modes button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.command-palette-results { min-height: 8rem; overflow-y: auto; overscroll-behavior: contain; padding: .45rem; }
.command-palette-group { display: grid; gap: .12rem; }
.command-palette-group + .command-palette-group { margin-top: .4rem; border-top: 1px solid var(--border); padding-top: .4rem; }
.command-palette-group h3 { margin: 0; padding: .45rem .65rem .3rem; color: var(--muted-foreground); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.command-palette [data-command-item] { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; width: 100%; min-height: 3.25rem; align-items: center; gap: .65rem; border: 0; border-radius: .55rem; background: transparent; padding: .45rem .65rem; color: inherit; text-align: left; }
.command-palette [data-command-item]:hover, .command-palette [data-command-item].active { background: var(--accent); color: var(--accent-foreground); }
.command-palette-option-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid color-mix(in oklch, var(--border) 78%, transparent); border-radius: .45rem; background: color-mix(in oklch, var(--background) 72%, transparent); color: var(--muted-foreground); }
.command-palette-option-icon .nav-icon { width: 1rem; height: 1rem; }
.command-palette-option-copy { display: grid; min-width: 0; gap: .1rem; }
.command-palette-option-copy strong { overflow: hidden; font-size: .82rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.command-palette-option-copy small { overflow: hidden; color: var(--muted-foreground); font-size: .7rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.command-palette-option-kind { border: 1px solid var(--border); border-radius: 999px; padding: .16rem .42rem; color: var(--muted-foreground); font-size: .62rem; font-weight: 600; }
.command-palette-empty { display: grid; min-height: 10rem; place-items: center; padding: var(--space-8); color: var(--muted-foreground); font-size: .82rem; }
.command-palette-footer { display: flex; min-height: 2.5rem; align-items: center; justify-content: flex-end; gap: var(--space-4); border-top: 1px solid var(--border); padding: .45rem .8rem; color: var(--muted-foreground); font-size: .65rem; }
.command-palette-footer span { display: flex; align-items: center; gap: var(--space-1); }
.command-palette-footer kbd { min-width: 1.2rem; border: 1px solid var(--border); border-radius: .25rem; background: var(--muted); padding: .1rem var(--space-1); color: var(--foreground); font: 600 .62rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-align: center; }
@keyframes command-palette-in { from { opacity: 0; transform: translateY(-.25rem) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }

.main { min-width: 0; flex: 1; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: var(--card); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.mobile-header { display: none; }
/* Home Screen apps get no refresh gesture from iOS, so the console draws its
   own: a chip that slides out from under the header with the finger and spins
   once the pull is far enough to reload. It sits just below the header's layer
   so it stays hidden until it clears it. */
.pull-refresh { position: fixed; top: 0; left: 50%; z-index: 14; display: none; width: 2.5rem; height: 2.5rem; place-items: center; margin-left: -1.25rem; border: 1px solid var(--border); border-radius: 999px; background: var(--popover); color: var(--muted-foreground); box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .24); pointer-events: none; }
.pull-refresh.is-active { display: grid; }
.pull-refresh.is-settling { transition: transform 180ms ease, opacity 180ms ease; }
.pull-refresh.is-ready, .pull-refresh.is-refreshing { color: var(--foreground); }
.pull-refresh .nav-icon { width: 1.25rem; height: 1.25rem; }
.pull-refresh.is-refreshing .nav-icon { animation: blocking-refresh-spin .8s linear infinite; }
.content { width: 100%; padding: var(--space-6); }
.dashboard-page { display: grid; gap: var(--space-4); }
.dashboard-update-indicator { position: fixed; top: 1rem; left: 50%; z-index: 90; display: flex; height: 2.25rem; align-items: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: 999px; background: var(--popover); padding: 0 .85rem; color: var(--popover-foreground); font-size: .75rem; font-weight: 600; white-space: nowrap; box-shadow: 0 .75rem 2rem rgb(0 0 0 / .2); pointer-events: none; transform: translate(-50%, -.5rem); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; }
.dashboard-update-indicator.htmx-request { transform: translate(-50%, 0); }
.dashboard-update-indicator .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; animation: dashboard-update-spin .8s linear infinite; }
@keyframes dashboard-update-spin { to { transform: rotate(360deg); } }
.stats-overview { display: grid; gap: .625rem; }
.stats-overview-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.stats-overview-heading { display: flex; align-items: center; gap: var(--space-2); }
.stats-overview-header h2 { margin: 0; font-size: .875rem; font-weight: 600; }
.stats-range-label { border: 1px solid var(--border); border-radius: 999px; background: var(--card); padding: .2rem .625rem; color: var(--muted-foreground); font-size: .6875rem; font-weight: 500; }
.stats-scope-toggle { display: flex; align-items: center; gap: .125rem; border-radius: 999px; background: var(--muted); padding: var(--space-1); }
.stats-scope-toggle button { height: 1.75rem; border: 0; border-radius: 999px; padding: 0 var(--space-3); background: transparent; color: var(--muted-foreground); font-size: .75rem; }
.stats-scope-toggle button.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .16); }
.stats-scope-toggle button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.stats-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
/* Layered soft shadows keep white text readable on the bright shared palette. */
.stat-card { position: relative; display: flex; min-width: 0; min-height: 6rem; overflow: hidden; flex-direction: column; border-radius: var(--radius); padding: var(--space-3) var(--space-4); color: white; text-align: left;
  --stat-text-shadow: color-mix(in oklch, var(--stat-color, var(--metric-total)) 40%, #000);
  text-shadow: 0 1px 2px var(--stat-text-shadow), 0 0 1px var(--stat-text-shadow); }
.stat-card-link { cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
.stat-card-link::before { position: absolute; right: .85rem; bottom: .6rem; color: currentColor; content: "→"; font-size: 1rem; font-weight: 700; opacity: 0; pointer-events: none; transform: translateX(-.3rem); transition: opacity 160ms ease, transform 160ms ease; }
.stat-card-link > div { padding-right: var(--space-5); }
.stat-card-link:hover, .stat-card-link:focus-visible { box-shadow: inset 0 0 0 2px currentColor, 0 0 0 1px rgb(0 0 0 / .18), 0 .6rem 1.25rem rgb(0 0 0 / .2); transform: translateY(-2px); }
.stat-card-link:hover::before, .stat-card-link:focus-visible::before { opacity: 1; transform: translateX(0); }
.stat-card-link:active { box-shadow: inset 0 0 0 1px currentColor; transform: translateY(0); }
.stat-card-link:focus-visible { outline-color: var(--foreground); outline-offset: 2px; }
.dashboard-page:has(.dashboard-update-indicator.htmx-request) .stat-card::after { position: absolute; inset: auto 0 0; height: .2rem; background: linear-gradient(105deg, transparent 25%, rgb(255 255 255 / .22) 48%, transparent 70%); content: ""; pointer-events: none; transform: translateX(-120%); animation: dashboard-update-sweep 1.15s ease-in-out infinite; }
@keyframes dashboard-update-sweep { to { transform: translateX(120%); } }
.stat-card [data-stat-number], [data-stat-key] { font-variant-numeric: tabular-nums; }
.stat-card [data-stat-number].is-morphing { animation: dashboard-number-morph .52s cubic-bezier(.2, .75, .25, 1); }
.time-morph-digit { display: inline-grid; width: 1ch; vertical-align: baseline; }
.time-morph-digit > span { grid-area: 1 / 1; }
@keyframes dashboard-number-morph {
  0% { transform: translateY(.18rem); }
  100% { transform: translateY(0); }
}
.stat-card strong { overflow: hidden; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.stat-card > span { height: 1rem; margin-top: 0.125rem; font-size: 0.6875rem; }
.stat-card > div { margin-top: 0.375rem; font-size: 0.75rem; font-weight: 600; }
.stat-card.blue { --stat-color: var(--metric-total); background: var(--stat-color); }
.stat-card.green { --stat-color: var(--metric-no-error); background: var(--stat-color); }
.stat-card.red { --stat-color: var(--metric-server-failure); background: var(--stat-color); }
.stat-card.slate { --stat-color: var(--metric-nx-domain); background: var(--stat-color); }
.stat-card.orange { --stat-color: var(--metric-blocked); background: var(--stat-color); }
.stat-card.cyan { --stat-color: var(--metric-cache-rate); background: var(--stat-color); }
.stat-card.emerald { --stat-color: var(--metric-recursive); background: var(--stat-color); }
.stat-card.yellow { --stat-color: var(--metric-cached); background: var(--stat-color); }
.stat-card.rose { --stat-color: var(--metric-dropped); background: var(--stat-color); }
.stat-card.pink { --stat-color: var(--metric-server-failure); background: var(--stat-color); }
.stat-card.purple { --stat-color: var(--metric-clients); background: var(--stat-color); }
.stat-card.sky { --stat-color: var(--metric-authoritative); background: var(--stat-color); }
.stat-card.teal { --stat-color: var(--metric-refused); background: var(--stat-color); }
.stat-card.amber { --stat-color: var(--metric-cached); background: var(--stat-color); }

.card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: var(--card-foreground); }
.card-header { display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6); }
.card h2 { margin: 0; font-size: 1rem; font-weight: 600; }
/* EmptyState: the per-place class after .empty-state sets size and spacing. */
.empty-state { display: grid; place-items: center; align-content: center; color: var(--muted-foreground); text-align: center; }
.empty-state > h3 { margin: 0; color: var(--foreground); }
.empty-state > p { margin: 0; }
.empty-state-icon { display: grid; place-items: center; }
.chart-card { position: relative; min-height: 30rem; }
.chart-header { padding-bottom: var(--space-3); }
.range-tabs { display: flex; align-items: center; gap: 0.125rem; border-radius: 999px; background: var(--muted); padding: var(--space-1); }
.range-tabs button { height: 1.75rem; border: 0; border-radius: 999px; padding: 0 var(--space-3); background: transparent; color: var(--muted-foreground); font-size: 0.75rem; }
.range-tabs button.active, .range-tabs button.picker-open { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.16); }
.range-tabs button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.range-select { display: none; }
.range-select select, .range-select .styled-select { width: 7rem; }
.range-custom-mobile { display: none; height: 2rem; border: 1px solid var(--border); border-radius: 999px; background: var(--background); padding: 0 .65rem; color: var(--foreground); font-size: .75rem; }
.chart-wrap { position: relative; height: 22rem; padding: 0 var(--space-6) var(--space-4); }
.chart-wrap::after { position: absolute; inset: .25rem 0 1rem; background: linear-gradient(105deg, transparent 28%, color-mix(in oklch, var(--primary) 14%, transparent) 50%, transparent 72%); content: ""; opacity: 0; pointer-events: none; transform: translateX(-120%); }
.dashboard-page:has(.dashboard-update-indicator.htmx-request) .chart-wrap::after { opacity: 1; animation: dashboard-update-sweep 1.15s ease-in-out infinite; }
.dashboard-page:has(.dashboard-update-indicator.htmx-request) .chart-plot { opacity: .65; transition: opacity 160ms ease; }
.chart-plot { position: relative; height: 100%; }
.chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-lines line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-series { fill: none; stroke-width: 2.25; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 .65px #1f2937); }
.chart-series.total { stroke: var(--metric-total); }
.chart-series.success { stroke: var(--metric-no-error); }
.chart-series.blocked { stroke: var(--metric-blocked); }
.chart-series.cache { stroke: var(--metric-cached); }
.chart-series.server-failure { stroke: var(--metric-server-failure); }
.chart-series.nx-domain { stroke: var(--metric-nx-domain); }
.chart-series.refused { stroke: var(--metric-refused); }
.chart-series.recursive { stroke: var(--metric-recursive); stroke-width: 1.35; stroke-dasharray: 6 5; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-foreground); font-size: 0.875rem; pointer-events: none; }
.chart-axis { position: absolute; right: 1.5rem; bottom: 0; left: 1.5rem; display: flex; justify-content: space-between; color: var(--muted-foreground); font-size: 0.6875rem; pointer-events: none; }
/* Y labels live in HTML, not the SVG: the plot stretches with
   preserveAspectRatio="none", which would warp any text drawn inside it.
   Percentages map the 1200x320 viewBox onto the plot box exactly. */
.chart-y-labels { position: absolute; inset: 0; pointer-events: none; }
.chart-y-labels span { position: absolute; right: 96.1667%; transform: translateY(-50%); color: var(--muted-foreground); font-size: 0.6875rem; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.chart-y-labels span:nth-child(1) { top: 7.5%; }
.chart-y-labels span:nth-child(2) { top: 28.75%; }
.chart-y-labels span:nth-child(3) { top: 50%; }
.chart-y-labels span:nth-child(4) { top: 71.25%; }
.chart-y-labels span:nth-child(5) { top: 92.5%; }
.chart-hover { position: absolute; inset: 0; pointer-events: none; }
.chart-crosshair { position: absolute; top: 7.5%; height: 85%; width: 1px; background: var(--muted-foreground); opacity: .35; }
.chart-marker { position: absolute; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; border: 2px solid var(--card); border-radius: 50%; box-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.chart-tooltip { position: absolute; z-index: 8; min-width: 10rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--popover); padding: var(--space-2) .625rem; color: var(--popover-foreground); font-size: .75rem; pointer-events: none; box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .22); }
.chart-tooltip-time { margin-bottom: .35rem; color: var(--muted-foreground); font-size: .6875rem; font-weight: 500; }
.chart-tooltip-row { display: flex; align-items: center; gap: .4rem; line-height: 1.6; }
.chart-tooltip-row i { width: .5rem; height: .5rem; flex: none; border-radius: 50%; }
.chart-tooltip-row b { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.chart-live { display: flex; margin-left: auto; align-items: center; gap: .4rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 500; }
.chart-live > span { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 .22rem rgb(16 185 129 / .12); }
/* The ring only pulses while queries are still arriving, so a still dot means
   an idle resolver rather than a stalled panel. */
.chart-live.active > span { animation: chart-live-pulse 2s ease-out infinite; }
@keyframes chart-live-pulse {
  0% { box-shadow: 0 0 0 .1rem rgb(16 185 129 / .32); }
  70% { box-shadow: 0 0 0 .5rem rgb(16 185 129 / 0); }
  100% { box-shadow: 0 0 0 .1rem rgb(16 185 129 / 0); }
}
.chart-card:has(.range-popover:not([hidden])) .chart-live { color: color-mix(in oklch, var(--muted-foreground) 55%, transparent); }
.chart-card:has(.range-popover:not([hidden])) .chart-live > span { animation: none; background: var(--muted-foreground); box-shadow: none; opacity: .4; }
.chart-card:has(.range-popover:not([hidden])) { overflow: visible; }
.range-popover { position: absolute; z-index: 12; width: min(18rem, calc(100vw - 2rem)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); padding: var(--space-3); color: var(--foreground); box-shadow: 0 12px 30px rgb(0 0 0 / .22); }
.chart-range-popover { top: 3.85rem; right: 1.5rem; }
.range-picker-body { display: grid; gap: var(--space-3); }
.calendar-caption { display: grid; grid-template-columns: 2rem 1fr 2rem; align-items: center; gap: .375rem; }
.calendar-caption > button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: .375rem; background: transparent; padding: 0; }
.calendar-caption > button:hover:not(:disabled) { background: var(--accent); }
.calendar-caption > button:disabled { cursor: default; opacity: .35; }
.calendar-caption .nav-icon { width: 1rem; height: 1rem; }
.calendar-dropdowns { display: flex; align-items: center; justify-content: center; gap: .375rem; }
.calendar-dropdowns label:first-child { width: 4.4rem; }
.calendar-dropdowns label:last-child { width: 5.25rem; }
.calendar-dropdowns select { height: 2rem; padding: 0 var(--space-2); background-color: var(--background); font-size: .8rem; font-weight: 600; }
.calendar-dropdowns .styled-select-trigger { height: 2rem; gap: .4rem; padding: 0 var(--space-2); font-size: .8rem; font-weight: 600; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays span { display: grid; height: 2rem; place-items: center; color: var(--muted-foreground); font-size: .7rem; font-weight: 400; }
.calendar-day { position: relative; display: grid; height: 2rem; place-items: center; }
.calendar-day.in-range { background: var(--accent); }
.calendar-day.range-start { border-radius: .375rem 0 0 .375rem; }
.calendar-day.range-end { border-radius: 0 .375rem .375rem 0; }
.calendar-day.range-start.range-end { border-radius: .375rem; }
.calendar-day button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: .375rem; background: transparent; padding: 0; font-size: .75rem; font-variant-numeric: tabular-nums; }
.calendar-day button:hover:not(:disabled) { position: relative; z-index: 1; background: var(--accent); }
.calendar-day.range-start button, .calendar-day.range-end button { position: relative; z-index: 1; background: var(--primary); color: var(--primary-foreground); }
.calendar-day.today:not(.range-start, .range-end) button { background: var(--accent); color: var(--accent-foreground); }
.calendar-day.outside-month button { color: var(--muted-foreground); }
.calendar-day button:disabled { cursor: default; opacity: .35; }
.range-times { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.range-times label { display: grid; gap: .375rem; color: var(--muted-foreground); font-size: .7rem; font-weight: 500; }
.range-times input { height: 2rem; padding: 0 .55rem; font-size: .75rem; font-variant-numeric: tabular-nums; }
.time-field::-webkit-calendar-picker-indicator { display: none; }
.range-error { margin: -.2rem 0 0; color: var(--destructive); font-size: .7rem; line-height: 1.35; }
.range-apply { width: 100%; height: 2rem; min-height: 2rem; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); padding: var(--space-3) var(--space-6) var(--space-5); color: var(--muted-foreground); font-size: 0.75rem; }
.chart-legend span::before { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.35rem; border-radius: 50%; content: ""; }
.chart-legend .blue::before { background: var(--metric-total); }
.chart-legend .green::before { background: var(--metric-no-error); }
.chart-legend .orange::before { background: var(--metric-blocked); }
.chart-legend .purple::before { background: var(--metric-clients); }
.chart-legend .pink::before { background: var(--metric-server-failure); }
.chart-legend .gray::before { background: var(--metric-nx-domain); }
.chart-legend .teal::before { background: var(--metric-refused); }
.chart-legend .lime::before { background: var(--metric-recursive); }
.chart-legend .yellow::before { background: var(--metric-cached); }

.isotope-dashboard { gap: var(--space-4); }
.dashboard-insights { display: grid; gap: var(--space-4); }
.dashboard-insights-skeleton { display: grid; gap: var(--space-4); }
.dashboard-rankings, .dashboard-distributions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.ranking-card, .distribution-card { display: flex; min-width: 0; flex-direction: column; }
.ranking-card > header, .distribution-card > header { display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-3); }
.ranking-card h2, .distribution-card h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.ranking-heading { display: grid; min-width: 0; gap: .15rem; }
/* Insights' Findings and Devices cards share the ranking cards' header band. */
.ranking-card > header, :is(.insight-findings, .insight-entity-card) > .isotope-data-header { background: color-mix(in oklch, var(--muted) 45%, transparent); }
/* A ranking header is a band, so its title and View all button center in it. */
.ranking-card > header { padding-block: var(--space-4); }
.ranking-heading p, .isotope-data-header > .ranking-heading > p { margin: 0; color: var(--muted-foreground); font-size: .75rem; }
/* View all is an ordinary button with a disclosure chevron, like a finding's
   Details button. */
.ranking-view-all { flex: 0 0 auto; gap: var(--space-1); white-space: nowrap; }
.ranking-view-all .nav-icon { width: .875rem; height: .875rem; }
.ranking-list { display: flex; min-height: 17.5rem; flex: 1; flex-direction: column; }
.ranking-row { display: flex; height: 3.5rem; align-items: center; gap: var(--space-4); border-top: 1px solid var(--border); padding: .625rem var(--space-6); }
.ranking-row:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.ranking-row > div { display: grid; min-width: 0; flex: 1; gap: .1rem; }
.ranking-row strong { overflow: hidden; font: 500 .875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.ranking-row small { overflow: hidden; color: var(--muted-foreground); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.ranking-row > span { color: var(--muted-foreground); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A row that opens a drawer is a button that looks like the linked rows. */
button.ranking-row { width: 100%; border-width: 1px 0 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ranking-card-skeleton { pointer-events: none; }
.insights-skeleton-block { position: relative; display: block; overflow: hidden; border-radius: .25rem; background: var(--muted); }
.insights-skeleton-block::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--foreground) 16%, transparent), transparent); content: ""; translate: -100% 0; animation: dashboard-skeleton-shimmer 1.35s ease-in-out infinite; }
.ranking-skeleton-action { width: 3.25rem; height: .625rem; }
.ranking-skeleton-copy { gap: .4rem !important; }
.ranking-skeleton-primary { width: 72%; height: .75rem; }
.ranking-skeleton-secondary { width: 46%; height: .5rem; }
.ranking-skeleton-count { width: 2rem; height: .75rem; }
.ranking-skeleton-row:nth-child(2) .ranking-skeleton-primary { width: 58%; }
.ranking-skeleton-row:nth-child(3) .ranking-skeleton-primary { width: 82%; }
.ranking-skeleton-row:nth-child(4) .ranking-skeleton-primary { width: 65%; }
.ranking-skeleton-row:nth-child(5) .ranking-skeleton-primary { width: 76%; }
@keyframes dashboard-skeleton-shimmer { to { translate: 100% 0; } }
.dashboard-empty { min-height: 17.5rem; flex: 1; font-size: .8rem; }
.dashboard-empty.compact { min-height: 5rem; }
.distribution-card { min-height: 20rem; container-type: inline-size; }
.distribution-content { position: relative; display: flex; flex: 1; align-items: center; gap: var(--space-5); padding: var(--space-2) var(--space-6) var(--space-6); }
.donut-wrap { position: relative; display: grid; width: 11rem; max-width: 100%; aspect-ratio: 1; flex: 0 1 11rem; place-items: center; }
.donut-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut-track, .donut-segment { fill: none; stroke-width: 18; }
.donut-track { stroke: var(--muted); }
.donut-segment { transition: stroke-width 150ms ease, opacity 150ms ease; }
.distribution-content.is-donut-active .donut-segment { opacity: .3; }
.distribution-content.is-donut-active .donut-segment.is-active { stroke-width: 22; opacity: 1; }
.donut-tooltip { max-width: calc(100% - 3rem); }
.donut-tooltip .chart-tooltip-share { margin-top: .35rem; color: var(--muted-foreground); font-size: .6875rem; font-weight: 500; }
.donut-wrap > span { position: absolute; color: var(--muted-foreground); font-size: .75rem; }
.donut-color-0 { stroke: #5b9bd5; background: #5b9bd5; }
.donut-color-1 { stroke: #70ad47; background: #70ad47; }
.donut-color-2 { stroke: #ffc000; background: #ffc000; }
.donut-color-3 { stroke: #ff9f40; background: #ff9f40; }
.donut-color-4 { stroke: #ff6384; background: #ff6384; }
.donut-color-5 { stroke: #9966ff; background: #9966ff; }
.donut-color-6 { stroke: #4bc0c0; background: #4bc0c0; }
.distribution-legend { display: grid; min-width: 0; flex: 1; gap: .45rem; }
.distribution-legend > div:not(.dashboard-empty) { display: flex; min-width: 0; align-items: center; gap: var(--space-2); font-size: .8rem; }
.distribution-legend i { width: .7rem; height: .7rem; flex: 0 0 .7rem; border-radius: .2rem; }
.distribution-legend span { overflow: hidden; flex: 1; text-overflow: ellipsis; white-space: nowrap; }
.distribution-legend strong { color: var(--muted-foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
.distribution-legend > div[data-donut-legend] { transition: opacity 150ms ease; }
.distribution-content.is-donut-active .distribution-legend > div[data-donut-legend] { opacity: .5; }
.distribution-content.is-donut-active .distribution-legend > div[data-donut-legend].is-active { opacity: 1; }
.distribution-legend > div[data-donut-legend].is-active strong { color: var(--foreground); }
.distribution-card-skeleton { pointer-events: none; }
.distribution-skeleton-donut { width: 100%; height: 100%; border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 0 52%, #000 54%); mask: radial-gradient(circle, transparent 0 52%, #000 54%); }
.distribution-skeleton-legend { gap: var(--space-3); }
.distribution-skeleton-label { height: .625rem; }
.distribution-skeleton-value { width: 1.75rem; height: .625rem; }
.distribution-skeleton-row:nth-child(2) .distribution-skeleton-label { max-width: 78%; }
.distribution-skeleton-row:nth-child(3) .distribution-skeleton-label { max-width: 88%; }
.distribution-skeleton-row:nth-child(4) .distribution-skeleton-label { max-width: 65%; }
.distribution-skeleton-row:nth-child(5) .distribution-skeleton-label { max-width: 74%; }
@container (max-width: 22rem) {
  .distribution-content { align-items: center; flex-direction: column; gap: var(--space-4); }
  .donut-wrap { flex: none; }
  .distribution-legend { width: 100%; flex: none; }
}

.blocking-page { width: 100%; }
.blocking-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(17rem, .8fr); align-items: start; gap: var(--space-4); }
.blocking-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); border-bottom: 1px solid var(--border); padding: var(--space-3); }
.blocking-tabs button { display: flex; height: 2.25rem; align-items: center; justify-content: center; gap: var(--space-2); border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); font-size: .8rem; font-weight: 500; }
.blocking-tabs button:hover { background: var(--muted); color: var(--foreground); }
.blocking-tabs button.active { background: var(--muted); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border); }
.blocking-tabs .nav-icon { width: 1rem; height: 1rem; }
.blocking-panel { padding: var(--space-5); }
.blocking-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.blocking-panel > header h2 { margin: 0; font-size: 1.05rem; }
.blocking-panel > header p { margin: var(--space-1) 0 0; color: var(--muted-foreground); font-size: .78rem; }
.blocking-panel > header .button { flex: 0 0 auto; }
.blocking-panel .button .nav-icon { width: 1rem; height: 1rem; }
.blocking-source-list, .blocked-domain-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.blocking-source-row { display: grid; min-height: 4.75rem; grid-template-columns: 2.25rem minmax(0, 1fr); grid-auto-columns: auto; grid-auto-flow: column; align-items: center; gap: var(--space-3); border-top: 1px solid var(--border); padding: var(--space-3) var(--space-4); }
.blocking-source-row:first-child { border-top: 0; }
.blocking-source-row:hover, .blocked-domain-row:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.blocking-source-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .5rem; background: var(--muted); color: var(--muted-foreground); }
.blocking-source-icon .nav-icon { width: 1.1rem; height: 1.1rem; }
.blocking-source-row > div { display: grid; min-width: 0; gap: .15rem; }
.blocking-source-row strong { font-size: .875rem; }
.row-chevron { display: grid; place-items: center; margin-left: calc(var(--space-2) * -1); color: var(--muted-foreground); }
.row-chevron .nav-icon { width: 1rem; height: 1rem; }
/* A row's name opens its details panel, and so does the rest of the row. */
.blocking-source-row[data-row-opener], .cluster-node-row[data-row-opener] { cursor: pointer; }
.blocking-source-name, .cluster-node-name { justify-self: start; max-width: 100%; overflow: hidden; border: 0; background: none; padding: 0; color: var(--foreground); cursor: pointer; font: inherit; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.blocking-source-name { font-size: .875rem; }
.cluster-node-name { font-size: .82rem; }
.blocking-source-name:hover, .cluster-node-name:hover { text-decoration: underline; }
.blocking-source-name:focus-visible, .cluster-node-name:focus-visible { border-radius: .2rem; outline: 2px solid var(--ring); outline-offset: 2px; }
.blocking-source-row code { overflow: hidden; color: var(--muted-foreground); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.blocking-source-row small { color: var(--muted-foreground); font-size: .7rem; text-transform: capitalize; }
.blocking-source-row small.blocklist-health-warning { display: flex; align-items: center; gap: .3rem; color: var(--destructive); text-transform: none; }
.blocking-source-row small.blocklist-health-warning svg { width: .85rem; height: .85rem; flex: 0 0 auto; }
.source-status { border-radius: 999px; background: rgb(34 197 94 / .13); padding: .2rem var(--space-2); color: var(--success); font-size: .68rem; font-weight: 600; }
.icon-button.danger { color: var(--muted-foreground); }
.icon-button.danger:hover { background: rgb(239 68 68 / .12); color: var(--danger); }
.domain-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.domain-list-toolbar .button { display: inline-flex; width: auto; height: 2.25rem; min-height: 2.25rem; box-sizing: border-box; align-items: center; justify-content: center; gap: .45rem; padding-block: 0; line-height: 1; }
.domain-list-toolbar .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.domain-import-form { display: inline-flex; height: 2.25rem; min-height: 2.25rem; align-items: stretch; }
.domain-import-form > .button { height: 100%; min-height: 100%; }
.domain-import-form label { cursor: pointer; }
.domain-import-form.htmx-request label { cursor: wait; opacity: .65; pointer-events: none; }
.button.disabled { cursor: not-allowed; opacity: .48; pointer-events: none; }
.blocking-search { position: relative; display: block; margin-bottom: var(--space-4); }
.blocked-domain-row { display: grid; min-height: 3.65rem; grid-template-columns: 1.5rem minmax(0, 1fr) auto 2rem; align-items: center; gap: var(--space-3); border-top: 1px solid var(--border); padding: .55rem var(--space-4); }
.blocked-domain-row:first-child { border-top: 0; }
.blocked-domain-row > span { color: var(--danger); }
.blocked-domain-row > span .nav-icon { width: 1rem; height: 1rem; }
.blocked-domain-row strong { overflow: hidden; font: 500 .82rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.blocked-domain-row .domain-policy-badge { border-radius: 999px; padding: .2rem .6rem; color: white; font-size: .68rem; font-weight: 600; line-height: 1.25; }
.blocked-domain-row .domain-policy-badge.blocked { background: var(--destructive); }
.blocked-domain-row .domain-policy-badge.allowed { background: var(--primary); color: var(--primary-foreground); }
.blocked-domain-row .icon-button { opacity: 1; }
.domain-list-empty { min-height: 17rem; }
.domain-list-empty p { max-width: none; font-size: .875rem; }
.domain-list-count { margin: var(--space-4) 0 0; color: var(--muted-foreground); font-size: .78rem; }
.domain-list-count [data-domain-shown] { margin-left: .2rem; }
.blocking-empty { min-height: 17rem; gap: .4rem; padding: var(--space-8); }
.blocking-empty > .nav-icon { width: 1.75rem; height: 1.75rem; margin-bottom: .35rem; }
.blocking-empty h3 { font-size: .9rem; }
.blocking-empty p { max-width: 27rem; font-size: .75rem; line-height: 1.5; }
.blocking-filter-empty { padding: var(--space-8); font-size: .8rem; }
.switch input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; opacity: 0; pointer-events: none; }
.switch span { position: relative; display: block; width: 2.5rem; height: 1.4rem; border-radius: 999px; background: var(--muted); box-shadow: inset 0 0 0 1px var(--border); transition: background 150ms; }
.switch span::after { position: absolute; top: .2rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--background); box-shadow: 0 1px 3px rgb(0 0 0 / .28); content: ""; transition: transform 150ms; }
.switch input:checked + span { background: var(--success); }
.switch input:checked + span::after { transform: translateX(1.1rem); }
.blocking-aside { display: grid; gap: var(--space-4); }
.blocking-guidance { padding: var(--space-5); }
.blocking-guidance h2 { margin: 0 0 var(--space-4); font-size: 1rem; }
.blocking-guidance > div { display: flex; gap: var(--space-3); margin-top: .9rem; }
.blocking-guidance i { width: .5rem; height: .5rem; margin-top: .3rem; flex: 0 0 .5rem; border-radius: 50%; }
.blocking-guidance i.red { background: var(--danger); }
.blocking-guidance i.green { background: var(--success); }
.blocking-guidance p { display: grid; gap: .2rem; margin: 0; }
.blocking-guidance strong { font-size: .8rem; }
.blocking-guidance span { color: var(--muted-foreground); font-size: .75rem; line-height: 1.45; }
.blocking-dialog-form { display: grid; gap: .85rem; }
.blocking-dialog-form label { display: grid; gap: .35rem; font-size: .8rem; font-weight: 500; }
.blocking-dialog-form .dialog-footer { margin-top: var(--space-1); }
.isotope-blocking-layout { grid-template-columns: minmax(0, 2.1fr) minmax(16rem, .85fr); gap: var(--space-6); }
.blocking-main-column { display: grid; min-width: 0; align-content: start; gap: var(--space-6); }
.blocking-status-card { position: relative; z-index: 2; overflow: visible; padding: var(--space-6); }
.blocking-status-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.blocking-status-card > header h2 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: var(--status-card-title-size); }
.blocking-status-card > header h2 .nav-icon { width: var(--status-card-title-icon-size); height: var(--status-card-title-icon-size); color: #10b981; }
.blocking-status-card > header p { margin: .35rem 0 0; color: var(--muted-foreground); font-size: .8rem; }
.blocking-status-card > header .button { display: inline-flex; align-items: center; gap: var(--space-2); }
.blocking-status-card > header .nav-icon { width: 1rem; height: 1rem; }
.blocking-status-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); }
.blocking-status-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-8); }
@media (min-width: 701px) {
	.blocking-status-stats .operational-metric-value { width: 100%; justify-content: flex-end; }
}
.blocking-quick-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin: var(--space-6) -1.5rem -1.5rem; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); background: color-mix(in oklch, var(--muted) 45%, transparent); padding: var(--space-4) var(--space-6); }
.blocking-quick-actions > .button, .pause-menu > summary { display: inline-flex; align-items: center; gap: .45rem; }
.blocking-quick-actions .nav-icon { width: 1rem; height: 1rem; }
.blocking-quick-actions > small { display: grid; gap: .15rem; margin-left: auto; color: var(--muted-foreground); font-size: .7rem; text-align: right; }
.blocking-quick-actions > small span { font-size: .68rem; font-weight: 600; }
.blocking-quick-actions > small strong { color: var(--foreground); font-size: .75rem; font-weight: 600; }
/* A Menu is a details element; its summary is the trigger. */
[data-menu] > summary { list-style: none; cursor: pointer; }
[data-menu] > summary::-webkit-details-marker { display: none; }
.pause-menu { position: relative; }
.pause-menu > div { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 50; display: grid; width: calc(100% - .5rem); min-width: 9rem; overflow: hidden; border: 1px solid var(--border); border-radius: .5rem; background: var(--popover, var(--card)); color: var(--popover-foreground, var(--foreground)); padding: .3rem; box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .48), 0 .2rem .5rem rgb(0 0 0 / .28); }
.pause-menu > div button { min-height: 2rem; border: 0; border-radius: .35rem; background: transparent; padding: 0 .65rem; color: inherit; font-size: .76rem; text-align: left; white-space: nowrap; }
.pause-menu > div button:hover { background: var(--muted); }
.blocking-workspace { position: relative; z-index: 1; min-width: 0; }
.blocking-workspace > .blocking-tabs { grid-template-columns: repeat(4, 1fr); border: 0; border-radius: 999px; background: var(--muted); padding: var(--space-1); }
.blocking-workspace > .blocking-tabs button.active { background: var(--card); }
.blocking-workspace > .blocking-panel { padding: var(--space-6) 0 0; }
.blocking-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.blocking-list-toolbar .button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.blocking-list-toolbar .nav-icon { width: 1rem; height: 1rem; }
.blocking-list-toolbar form label { display: flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 500; }
.blocking-list-toolbar input { width: 4.25rem; }
.isotope-source-list { border-radius: .7rem; }
.isotope-source-row { grid-template-columns: 1.5rem minmax(0, 1fr) 2rem 2rem; min-height: 4.5rem; background: var(--card); }
.isotope-source-row .blocking-source-icon { width: 1.5rem; height: 1.5rem; background: transparent; }
.isotope-source-row .blocking-source-icon .nav-icon { width: 1rem; height: 1rem; }
.isotope-source-row code { color: var(--foreground); font-size: .79rem; }
.isotope-source-row small { text-transform: none; }
.blocked-domain-row.allowed > span { color: var(--success); }
.isotope-blocking-aside { gap: var(--space-6); }
.isotope-blocking-aside .blocking-guidance { padding: var(--space-6); }
.popular-lists .green { background: transparent; box-shadow: inset 0 0 0 2px var(--success); }
.isotope-settings-form { display: grid; gap: var(--space-6); }
.isotope-settings-form:not(:has(> .settings-tab-panel:not([hidden]))) { display: none; }
.blocking-radio-list { display: grid; gap: .8rem; margin-top: 1.3rem; }
.blocking-radio-list label { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }
.blocking-radio-list input { width: 1rem; height: 1rem; margin-top: .15rem; accent-color: var(--foreground); }
.blocking-radio-list span { display: grid; gap: .15rem; }
.blocking-radio-list strong { font-size: .8rem; font-weight: 500; }
.blocking-radio-list small, .blocking-textarea small, .blocking-number small { color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; }
.blocking-textarea, .blocking-number { display: grid; gap: .4rem; margin-top: var(--space-5); font-size: .78rem; font-weight: 500; }
textarea { width: 100%; resize: vertical; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); outline: 0; background: transparent; padding: .65rem var(--space-3); color: var(--foreground); font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.blocking-number input { width: 8rem; }
.isotope-settings-form > footer { display: flex; justify-content: flex-end; }
.catalog-dialog { width: min(44rem, calc(100vw - 2rem)); max-width: 44rem; }
.catalog-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .2rem; border-radius: 999px; background: var(--muted); padding: var(--space-1); }
.catalog-tabs button { height: 2.2rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); font-size: .78rem; font-weight: 500; }
.catalog-tabs button.active { background: var(--card); color: var(--foreground); box-shadow: inset 0 0 0 1px var(--border); }
.catalog-scroll { max-height: min(32rem, 62vh); margin-top: var(--space-4); overflow-y: auto; }
.catalog-scroll [data-catalog-panel] { display: grid; gap: .65rem; }
.catalog-scroll [data-catalog-panel][hidden] { display: none; }
.catalog-row { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem 5.5rem; align-items: center; gap: .55rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--card); padding: var(--space-3) var(--space-4); }
.catalog-row > div { display: grid; min-width: 0; gap: .15rem; }
.catalog-row strong { overflow-wrap: anywhere; font-size: .83rem; }
.catalog-row p { overflow: hidden; margin: 0; color: var(--muted-foreground); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.catalog-row .button { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .3rem; padding-inline: var(--space-2); }
.catalog-row .button.catalog-added { color: var(--muted-foreground); cursor: default; opacity: 1; }
.catalog-row .nav-icon { width: .9rem; height: .9rem; }
.catalog-custom { display: grid; gap: var(--space-4) !important; }
.catalog-custom form label { display: grid; gap: .45rem; font-size: .8rem; font-weight: 500; }
.catalog-custom form label > div { display: grid; grid-template-columns: 1fr auto; gap: .6rem; }
.catalog-custom > div { border-radius: .6rem; background: var(--muted); padding: .9rem var(--space-4); color: var(--muted-foreground); font-size: .72rem; }
.catalog-custom ul { margin: .45rem 0 0; padding-left: 1.1rem; line-height: 1.55; }
.block-list-add-button { position: relative; }
.block-list-add-idle, .block-list-add-pending { align-items: center; gap: .3rem; white-space: nowrap; }
.block-list-add-idle { display: inline-flex; }
.block-list-add-pending { position: absolute; inset: 0; display: none; justify-content: center; }
[data-block-list-add].htmx-request .block-list-add-idle { visibility: hidden; }
[data-block-list-add].htmx-request .block-list-add-pending { display: inline-flex; }
[data-block-list-add].htmx-request .icon-loader-circle { animation: blocking-refresh-spin .8s linear infinite; }
.block-list-add-button:disabled { cursor: wait; }
.dashboard-footer { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-1) var(--space-1) 0; color: var(--muted-foreground); font-size: .7rem; }
.dashboard-footer-status { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .35rem; color: var(--foreground); }
.dashboard-footer-details { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem var(--space-4); }
.dashboard-footer-detail-line { display: flex; align-items: center; gap: var(--space-4); }
.dashboard-footer-details span, .dashboard-footer-version { display: inline-flex; align-items: center; }
.dashboard-footer i { width: .45rem; height: .45rem; border-radius: 50%; background: #10b981; }
.query-log-empty { min-height: 13rem; font-size: 0.875rem; }
.table-scroll { overflow-x: auto; }
.query-log-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.query-log-table th { height: 2.5rem; padding: 0 var(--space-4); color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 500; text-align: left; text-transform: uppercase; letter-spacing: 0.04em; }
.query-log-table td { height: 3.5rem; padding: 0 var(--space-4); border-top: 1px solid var(--border); color: var(--muted-foreground); white-space: nowrap; }
.query-log-table tr:hover td { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.query-log-table .query-name { max-width: 18rem; overflow: hidden; color: var(--foreground); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; }
.source-pill, .pill { display: inline-flex; min-height: 1.4rem; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 0 0.45rem; color: var(--muted-foreground); font-size: 0.6875rem; }
.pill.success { color: var(--success-strong); }
.action-message { color: var(--success-strong); font-size: 0.75rem; }
.action-message.failed { color: var(--destructive); }
.auth-form label { display: grid; gap: var(--space-2); font-size: 0.875rem; font-weight: 500; }
input, select { width: 100%; height: 2.25rem; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); outline: 0; background: transparent; padding: 0 var(--space-3); font-size: 0.875rem; }
input:focus, select:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
/* Safari on iPhone zooms the page into any field with text under 16px and
   leaves it zoomed after. Touch screens get 16px fields so it never starts;
   the override has to beat every smaller size set on a field elsewhere. */
@media (hover: none) and (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}
.button, .auth-form button { display: inline-flex; height: 2.25rem; align-items: center; justify-content: center; border: 1px solid var(--primary); border-radius: 999px; background: var(--primary); padding: 0 var(--space-4); color: var(--primary-foreground); font-size: 0.875rem; font-weight: 500; line-height: 1; }
.button:hover, .auth-form button:hover { opacity: 0.9; }
.button.outline { border-color: var(--border); background: var(--background); color: var(--foreground); }
.button.outline:hover { background: var(--accent); color: var(--accent-foreground); opacity: 1; }
pre { max-height: 24rem; margin: 0; overflow: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted); padding: var(--space-4); font: 0.75rem/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.query-error { display: grid; gap: 0.35rem; color: var(--destructive); }
.query-error span { font-size: 0.8125rem; }
.token-created { display: grid; gap: var(--space-2); }
.token-created strong { color: var(--success-strong); }
.token-created code { overflow-wrap: anywhere; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted); padding: var(--space-3); font-size: 0.75rem; }
.token-created span { color: var(--muted-foreground); font-size: 0.75rem; }

.page-stack { display: grid; gap: var(--space-6); }
.page-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.page-main { display: grid; grid-column: span 2; align-content: start; gap: var(--space-6); min-width: 0; }
.page-aside { display: grid; align-content: start; gap: var(--space-6); min-width: 0; }
.query-composer { overflow: visible; background: color-mix(in oklch, var(--muted) 45%, transparent); padding: var(--space-6); }
.query-composer form { display: grid; gap: var(--space-3); }
.query-primary-row { display: flex; gap: var(--space-3); }
.query-primary-row .search-field { position: relative; min-width: 12rem; flex: 1; }
.search-field { position: relative; min-width: 0; }
.search-field > .nav-icon { pointer-events: none; position: absolute; top: 50%; left: 0.75rem; z-index: 1; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--muted-foreground); }
.search-field input { padding-right: 2.25rem; padding-left: 2.25rem; }
/* A search the server runs swaps its icon for a spinner while it's out. */
.search-field > .search-pending { display: none; pointer-events: none; position: absolute; top: 50%; left: 0.75rem; z-index: 1; width: 1rem; height: 1rem; transform: translateY(-50%); color: var(--muted-foreground); }
.search-pending .nav-icon { width: 1rem; height: 1rem; animation: blocking-refresh-spin .8s linear infinite; }
form.htmx-request > .search-field > .nav-icon { visibility: hidden; }
form.htmx-request > .search-field > .search-pending { display: block; }
/* One clear control, ours: the browser's own search cancel button would sit on
   top of it wherever the engine draws one. */
.search-field input::-webkit-search-cancel-button { display: none; }
.search-clear { position: absolute; top: 50%; right: .5rem; display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 0; border-radius: 999px; background: transparent; padding: 0; color: var(--muted-foreground); translate: 0 -50%; }
.search-clear:hover { background: var(--accent); color: var(--foreground); }
.search-clear .nav-icon { width: .8rem; height: .8rem; }
.search-clear[hidden] { display: none; }
.record-type-select { width: 7rem; flex: 0 0 7rem; }
.resolve-button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); }
.resolve-button .nav-icon { width: 1rem; height: 1rem; }
.query-options-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.resolver-combobox { position: relative; width: 11rem; }
.resolver-trigger {
  display: flex;
  width: 100%;
  height: 2.25rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  padding: 0 var(--space-3);
  font-size: .875rem;
  font-weight: 400;
}
.resolver-trigger:focus-visible, .resolver-trigger[aria-expanded="true"] { border-color: var(--ring); outline: 0; box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.resolver-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resolver-trigger > .styled-select-chevron { flex: 0 0 .55rem; overflow: visible; }
.resolver-trigger[aria-expanded="true"] .styled-select-chevron { transform: translateY(.15rem) rotate(225deg); }
.resolver-popover {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 50;
  width: max(100%, 18rem);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--card);
  color: var(--card-foreground);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.08);
  transform-origin: top left;
  animation: resolver-popover-in 120ms ease-out;
}
@keyframes resolver-popover-in { from { opacity: 0; transform: scale(0.97) translateY(-0.25rem); } to { opacity: 1; transform: scale(1) translateY(0); } }
.resolver-command-list { max-height: 18.75rem; overflow-x: hidden; overflow-y: auto; scroll-padding-block: 0.25rem; }
.resolver-empty { padding: var(--space-6); font-size: 0.875rem; text-align: center; }
.resolver-group { overflow: hidden; padding: var(--space-1); }
.resolver-group-heading { padding: 0.375rem var(--space-2); color: var(--muted-foreground); font-size: 0.75rem; font-weight: 500; }
.resolver-option { display: flex; width: 100%; min-height: 2rem; align-items: center; gap: var(--space-2); border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; padding: 0.375rem var(--space-2); font-size: 0.875rem; text-align: left; }
.resolver-option:hover, .resolver-option:focus-visible { background: var(--accent); color: var(--accent-foreground); outline: 0; }
.resolver-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resolver-option-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; line-height: 1.2; }
.resolver-option-copy small { overflow: hidden; color: var(--muted-foreground); font-size: 0.75rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.resolver-check { display: block; width: 1rem; height: 1rem; flex: 0 0 1rem; opacity: 0; }
.resolver-check .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.resolver-option[aria-selected="true"] .resolver-check { opacity: 1; }
.resolver-custom-edit { padding-left: var(--space-8); }
.resolver-separator { height: 1px; margin: 0 -0.25rem; background: var(--border); }
.styled-select { position: relative; width: 100%; min-width: 0; }
.styled-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.styled-select-trigger {
  display: flex;
  width: 100%;
  height: 2.25rem;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  padding: 0 var(--space-3);
  color: var(--foreground);
  font-size: .875rem;
  font-weight: 400;
  text-align: left;
}
.styled-select-trigger:focus-visible, .styled-select[data-open="true"] .styled-select-trigger { border-color: var(--ring); outline: 0; box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.styled-select-trigger[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 22%, transparent); }
.styled-select-trigger:disabled { cursor: not-allowed; opacity: .55; }
.styled-select-trigger.placeholder { color: var(--muted-foreground); }
.styled-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.styled-select-chevron { width: .55rem; height: .55rem; flex: 0 0 .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .65; transform: translateY(-.15rem) rotate(45deg); transition: transform 120ms ease; }
.styled-select[data-open="true"] .styled-select-chevron { transform: translateY(.15rem) rotate(225deg); }
.styled-select-popover {
  position: fixed;
  inset: auto;
  z-index: 100;
  display: grid;
  box-sizing: border-box;
  margin: 0;
  max-height: min(18rem, 45vh);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--popover);
  padding: .3rem;
  color: var(--popover-foreground);
  box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .38), 0 .2rem .6rem rgb(0 0 0 / .22);
  transform-origin: top left;
  animation: resolver-popover-in 120ms ease-out;
}
.styled-select[data-side="top"] .styled-select-popover { transform-origin: bottom left; }
.styled-select-option { display: flex; width: 100%; min-height: 2.35rem; align-items: center; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; padding: .45rem .65rem; color: inherit; font-size: .875rem; font-weight: 400; text-align: left; }
.styled-select-option.placeholder { color: var(--muted-foreground); }
.styled-select-option:hover, .styled-select-option:focus-visible { background: var(--accent); color: var(--accent-foreground); outline: 0; }
.styled-select-option[aria-selected="true"] { background: color-mix(in oklch, var(--accent) 72%, transparent); }
.styled-select-option:disabled { cursor: not-allowed; opacity: .45; }
/* A select whose choices have icons shows each one before its label. */
.styled-select-icon { display: inline-grid; flex: none; margin-right: .55rem; color: var(--muted-foreground); }
.styled-select-icon .nav-icon { width: 1rem; height: 1rem; }
.styled-select-trigger > .styled-select-icon { margin-right: -.2rem; }
.styled-select-trigger > .styled-select-icon + .styled-select-value { flex: 1; }
.styled-time { position: relative; width: 100%; min-width: 0; }
.styled-time-native { display: none; }
.styled-time-trigger { display: flex; box-sizing: border-box; width: 100%; height: 2.25rem; min-width: 0; align-items: center; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .05); }
.styled-time-trigger:focus-within, .styled-time[data-open="true"] .styled-time-trigger { border-color: var(--ring); outline: 0; box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.styled-time[data-invalid="true"] .styled-time-trigger { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 22%, transparent); }
.styled-time[data-disabled="true"] .styled-time-trigger { cursor: not-allowed; opacity: .55; }
.styled-time-entry { min-width: 0; height: 100%; flex: 1 1 auto; border: 0; border-radius: inherit; background: transparent; padding: 0 0 0 var(--space-3); color: inherit; font-size: .875rem; font-variant-numeric: tabular-nums; box-shadow: none; }
.styled-time-entry:focus { border: 0; box-shadow: none; }
.styled-time-entry::placeholder { color: var(--muted-foreground); opacity: 1; }
.styled-time-toggle { display: grid; width: 2.5rem; height: 100%; flex: 0 0 2.5rem; place-items: center; border: 0; border-radius: 0 calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0; background: transparent; color: inherit; }
.styled-time-toggle:hover { background: var(--accent); color: var(--accent-foreground); }
.styled-time-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: -3px; }
.styled-time-toggle:disabled { cursor: not-allowed; }
.styled-time-clock { position: relative; width: 1rem; height: 1rem; flex: 0 0 1rem; border: 1.6px solid currentColor; border-radius: 50%; opacity: .72; }
.styled-time-clock::before { position: absolute; top: .18rem; left: calc(50% - .05rem); width: .1rem; height: .32rem; border-radius: 999px; background: currentColor; content: ""; }
.styled-time-clock::after { position: absolute; top: calc(50% - .05rem); left: calc(50% - .05rem); width: .28rem; height: .1rem; border-radius: 999px; background: currentColor; content: ""; transform-origin: left center; transform: rotate(28deg); }
.styled-time-popover { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 90; width: min(18rem, calc(100vw - 2rem)); overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--popover); padding: .45rem; color: var(--popover-foreground); box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .38), 0 .2rem .6rem rgb(0 0 0 / .22); transform-origin: top left; animation: resolver-popover-in 120ms ease-out; }
.styled-time[data-side="top"] .styled-time-popover { top: auto; bottom: calc(100% + .35rem); transform-origin: bottom left; }
.styled-time-columns { display: grid; grid-auto-columns: minmax(4.5rem, 1fr); grid-auto-flow: column; gap: var(--space-1); }
.styled-time-column { display: grid; min-width: 0; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-1); }
.styled-time-column-label { padding: var(--space-1) .4rem; color: var(--muted-foreground); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.styled-time-list { height: 11rem; overflow-x: hidden; overflow-y: auto; border-radius: calc(var(--radius) - 4px); scroll-padding-block: .2rem; scrollbar-width: thin; }
.styled-time-list button { display: grid; width: 100%; min-height: 2rem; place-items: center; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; padding: .35rem .4rem; color: inherit; font-size: .85rem; font-variant-numeric: tabular-nums; }
.styled-time-list button:hover, .styled-time-list button:focus-visible { background: var(--accent); color: var(--accent-foreground); outline: 0; }
.styled-time-list button[aria-selected="true"] { background: var(--primary); color: var(--primary-foreground); font-weight: 650; }
.styled-time-done { width: 100%; height: 2rem; margin-top: .45rem; }
.range-times .styled-time-trigger { height: 2rem; }
.range-times .styled-time-entry { padding-left: .55rem; font-size: .75rem; }
.range-times .styled-time-toggle { width: 2rem; flex-basis: 2rem; }
.range-times label:last-child .styled-time-popover { right: 0; left: auto; }
.custom-server-dialog {
  position: fixed;
  /* Centered with auto margins rather than a transform: browsers anchor native
     select and datalist popups to the untransformed box, so a translated dialog
     drops its dropdowns somewhere else on screen entirely. */
  inset: 0;
  width: min(calc(100% - 2rem), 28rem);
  height: fit-content;
  margin: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  padding: var(--space-6);
  box-shadow: 0 20px 50px rgb(0 0 0 / 0.24);
}
.custom-server-dialog[open] { display: grid; gap: var(--space-4); animation: dialog-in 90ms cubic-bezier(.2, 0, 0, 1); }
dialog[open]::backdrop {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.custom-server-dialog::backdrop { background: rgb(0 0 0 / 0.5); animation: backdrop-in 90ms ease-out; }
@keyframes dialog-in { from { opacity: 0; scale: .98; } to { opacity: 1; scale: 1; } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.dialog-header { display: grid; gap: var(--space-2); text-align: left; }
.dialog-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1; }
.dialog-header p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.45; }
.dialog-close { position: absolute; top: 1rem; right: 1rem; display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: 50%; background: transparent; opacity: 0.7; }
.dialog-close:hover { background: var(--accent); opacity: 1; }
.dialog-close .nav-icon { width: 1rem; height: 1rem; }
.custom-server-fields { display: grid; gap: var(--space-4); padding-block: var(--space-2); }
.custom-server-fields label { display: grid; gap: 0.375rem; font-size: 0.875rem; font-weight: 500; }
.custom-server-fields label small { color: var(--muted-foreground); font-size: inherit; font-weight: 400; }
.custom-server-preview { display: grid; gap: 0.2rem; border-radius: calc(var(--radius) - 2px); background: var(--muted); padding: var(--space-2) var(--space-3); }
.custom-server-preview span { color: color-mix(in oklch, var(--muted-foreground) 60%, transparent); font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; }
.custom-server-preview code { overflow-wrap: anywhere; font-size: 0.875rem; }
.dialog-footer { display: flex; justify-content: flex-end; gap: var(--space-2); }
.dialog-footer .button:disabled { cursor: default; opacity: 0.5; }
.confirmation-dialog { width: min(calc(100% - 2rem), 26rem); }
.confirmation-dialog .dialog-header p { max-width: 34rem; }
/* An icon sits in its own column, beside the title and the text under it. */
.confirmation-dialog .dialog-header:has(.confirmation-icon) { grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: start; }
.confirmation-icon { display: grid; width: 2.5rem; height: 2.5rem; grid-row: span 2; place-items: center; border-radius: .6rem; }
.confirmation-icon .nav-icon { width: 1.25rem; height: 1.25rem; }
.confirmation-icon.warning { background: color-mix(in oklch, var(--warning) 14%, transparent); color: var(--warning-strong); }
.dark .confirmation-icon.warning { color: var(--warning); }
/* The dialog already pads its edges, so the body lines up with the title
   instead of padding again. A body inside a form keeps its gap to the footer. */
.confirmation-dialog .isotope-dialog-body { overflow: visible; padding: 0; }
.confirmation-dialog > form { display: grid; gap: var(--space-4); }
/* The rankings dialog borrows the shared dialog chrome but lays its own rows
   out edge to edge, so it has to land after the base rules to keep them. */
.top-stats-dialog { width: min(54rem, calc(100vw - 2rem)); max-width: 54rem; max-height: 85vh; padding: 0; overflow: hidden; }
.top-stats-dialog[open] { display: flex; flex-direction: column; gap: 0; }
.top-stats-header { position: relative; display: flex; min-height: 3.5rem; align-items: center; border-bottom: 1px solid var(--border); padding: .85rem var(--space-12) .85rem var(--space-5); }
.top-stats-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.top-stats-range { margin-left: .625rem; color: var(--muted-foreground); font-size: .8125rem; }
.top-stats-toolbar { display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--border); padding: .65rem var(--space-5); }
.top-stats-search { position: relative; min-width: 10rem; flex: 1; }
.top-stats-limit select, .top-stats-limit .styled-select { width: 6.875rem; }
.top-stats-list { min-height: 8rem; max-height: calc(85vh - 9rem); overflow-y: auto; }
.top-stats-row { display: flex; min-height: 2.75rem; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--border); padding: .4rem var(--space-5); transition: background-color .15s ease; }
.top-stats-row:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
button.top-stats-row { width: 100%; border-width: 0 0 1px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.top-stats-rank { width: 2rem; flex: 0 0 2rem; color: var(--muted-foreground); font-size: .75rem; text-align: right; font-variant-numeric: tabular-nums; }
.top-stats-row > div { display: grid; min-width: 0; flex: 1; gap: .1rem; }
.top-stats-row strong { overflow: hidden; font: 500 .875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.top-stats-row small { overflow: hidden; color: var(--muted-foreground); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.top-stats-hits { flex: 0 0 auto; color: var(--muted-foreground); font-size: .875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.top-stats-empty { padding: var(--space-12) var(--space-5); font-size: .875rem; }
.top-stats-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 45%, transparent); padding: .55rem var(--space-5); color: var(--muted-foreground); font-size: .75rem; font-variant-numeric: tabular-nums; }
.query-options-row .transport-picker { width: 6rem; }
.query-options-row .edns-subnet { width: 9rem; }
.checkbox-field { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 0.875rem; white-space: nowrap; }
.checkbox-field input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--primary); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.guidance-header { padding: var(--space-6) var(--space-6) var(--space-3); }
.guidance-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.guidance-header p { margin: var(--space-1) 0 0; color: var(--muted-foreground); font-size: 0.75rem; }
.quick-query-list { display: grid; gap: var(--space-2); padding: 0 var(--space-6) var(--space-6); }
.quick-query { display: flex; width: 100%; height: 2.25rem; align-items: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--background); padding: 0 var(--space-3); font-size: 0.875rem; text-align: left; }
.quick-query:hover { background: var(--accent); }
.quick-query > .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.quick-query > span { flex: 1; }
.quick-query code { border-radius: 0.375rem; background: var(--secondary); padding: 0.15rem 0.45rem; color: var(--secondary-foreground); font-size: 0.75rem; }
.guidance-list { display: grid; gap: var(--space-3); padding: 0 var(--space-6) var(--space-6); }
.guidance-item { display: flex; gap: var(--space-3); }
.guidance-item > i { width: 0.5rem; height: 0.5rem; margin-top: 0.35rem; flex: 0 0 0.5rem; border-radius: 50%; }
.guidance-item > i.green { background: var(--success); }
.guidance-item > i.blue { background: var(--info); }
.guidance-item > i.purple { background: #a855f7; }
.guidance-item strong { display: block; font-size: 0.875rem; font-weight: 500; }
.guidance-item p { margin: 0.15rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.45; }
.tip-box { border: 1px solid #bfdbfe; border-radius: var(--radius); background: #eff6ff; padding: var(--space-4); color: #1e3a8a; font-size: 0.875rem; line-height: 1.5; }
.tip-box code { font-size: 0.75rem; }
.dark .tip-box { border-color: #1e40af; background: rgb(23 37 84 / 0.2); color: #dbeafe; }

.cache-page { width: 100%; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.page-heading h1 { margin: 0; font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; }
.page-heading p { margin: var(--space-2) 0 0; color: var(--muted-foreground); font-size: 1rem; }
.cache-layout { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(18rem, 1fr); gap: var(--space-6); align-items: start; }
.cache-status-card { border-width: 1px; }
.cache-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-3); }
.cache-title { min-width: 0; }
.cache-title h2 { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: var(--status-card-title-size); }
.cache-title h2 .nav-icon { width: var(--status-card-title-icon-size); height: var(--status-card-title-icon-size); flex: 0 0 var(--status-card-title-icon-size); color: var(--warning); }
.cache-title p { margin: .35rem 0 0; color: var(--muted-foreground); font-size: .8rem; }
.cache-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); }
.icon-button { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; overflow: visible; border: 1px solid var(--border); border-radius: 50%; background: var(--background); }
.icon-button:hover { background: var(--accent); }
.icon-button .nav-icon { width: 1rem; height: 1rem; overflow: visible; }
.cache-card-body { display: grid; gap: var(--space-6); padding: var(--space-3) var(--space-6) var(--space-6); }
.operational-metric-grid { display: grid; gap: .85rem; }
.cache-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.operational-metric { display: flex; min-width: 0; min-height: 4.5rem; align-items: center; border: 1px solid; border-radius: var(--radius); padding: .8rem var(--space-4); }
.operational-metric-row { display: flex; width: 100%; min-width: 0; min-height: 2.15rem; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-4); row-gap: .55rem; }
.operational-metric-label { display: flex; min-width: 0; flex: 1 1 9rem; align-items: center; gap: .65rem; }
.operational-metric-icon { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 2.15rem; place-items: center; border-radius: .55rem; background: color-mix(in oklch, currentColor 13%, transparent); }
.operational-metric-icon .nav-icon { width: 1.1rem; height: 1.1rem; }
.operational-metric-label strong { min-width: 0; font-size: .82rem; line-height: 1.25; }
.operational-metric-value { display: flex; max-width: 100%; flex: 0 0 auto; align-items: center; gap: .4rem; margin-left: auto; }
.operational-metric-value > b { display: block; overflow: hidden; font-size: 1.3rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.operational-metric-info { position: relative; display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; place-items: center; border: 0; border-radius: 999px; background: transparent; padding: 0; color: currentColor; cursor: help; opacity: .65; }
.operational-metric-info > .nav-icon { width: .8rem; height: .8rem; }
.operational-metric-info:hover, .operational-metric-info:focus { background: color-mix(in oklch, currentColor 12%, transparent); opacity: 1; outline: none; }
.operational-metric-info:focus-visible { box-shadow: 0 0 0 2px color-mix(in oklch, currentColor 35%, transparent); }
.operational-metric-tooltip { position: absolute; z-index: 30; top: calc(100% + .5rem); right: -.45rem; width: max-content; max-width: min(15rem, calc(100vw - 2rem)); visibility: hidden; border: 1px solid var(--border); border-radius: .4rem; background: var(--popover); padding: .4rem .55rem; color: var(--popover-foreground); font-size: .72rem; font-weight: 500; line-height: 1.4; opacity: 0; pointer-events: none; box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .22); transform: translateY(-.2rem); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms; }
.operational-metric-tooltip::before { position: absolute; right: .85rem; bottom: 100%; width: .4rem; height: .4rem; border-top: 1px solid var(--border); border-left: 1px solid var(--border); background: var(--popover); content: ""; transform: translate(50%, 50%) rotate(45deg); }
.operational-metric-info:hover .operational-metric-tooltip, .operational-metric-info:focus .operational-metric-tooltip { visibility: visible; opacity: 1; transform: translateY(0); }
.operational-metric.blue { border-color: #2563eb; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1e3a8a; }
.operational-metric.amber { border-color: var(--warning-strong); background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #78350f; }
.operational-metric.red { border-color: #dc2626; background: linear-gradient(135deg, #fef2f2, #fee2e2); color: #7f1d1d; }
.operational-metric.purple { border-color: #9333ea; background: linear-gradient(135deg, #faf5ff, #f3e8ff); color: #581c87; }
.operational-metric.green { border-color: var(--success-strong); background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #14532d; }
.operational-metric.cyan { border-color: #0891b2; background: linear-gradient(135deg, #ecfeff, #cffafe); color: #164e63; }
.dark .operational-metric.blue { background: linear-gradient(135deg, rgb(23 37 84 / .7), rgb(30 58 138 / .35)); color: #dbeafe; }
.dark .operational-metric.amber { background: linear-gradient(135deg, rgb(69 26 3 / .75), rgb(120 53 15 / .35)); color: #fef3c7; }
.dark .operational-metric.red { background: linear-gradient(135deg, rgb(127 29 29 / .48), rgb(69 10 10 / .6)); color: #fecaca; }
.dark .operational-metric.purple { background: linear-gradient(135deg, rgb(88 28 135 / .58), rgb(59 7 100 / .48)); color: #f3e8ff; }
.dark .operational-metric.green { background: linear-gradient(135deg, rgb(20 83 45 / .58), rgb(5 46 22 / .48)); color: #dcfce7; }
.dark .operational-metric.cyan { background: linear-gradient(135deg, rgb(22 78 99 / .58), rgb(8 51 68 / .48)); color: #cffafe; }
.cache-explainer { border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--muted) 45%, transparent); padding: var(--space-5); }
.cache-explainer > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; font-size: 1rem; font-weight: 600; list-style: none; }
.cache-explainer > summary::-webkit-details-marker { display: none; }
.cache-explainer > summary::after { width: .55rem; height: .55rem; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; opacity: .65; transform: rotate(45deg) translateY(-.15rem); transition: transform 150ms ease; }
.cache-explainer[open] > summary::after { transform: rotate(225deg) translate(-.15rem, -.05rem); }
.cache-explainer > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: .25rem; }
.cache-explainer > summary .nav-icon { width: 1.1rem; height: 1.1rem; }
.cache-explainer p { margin: var(--space-3) 0 0; color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.6; }
.cache-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-inline: -1.5rem; border-top: 1px solid var(--border); padding: var(--space-4) var(--space-6) 0; }
.cache-actions h3 { margin: 0; font-size: 1rem; }
.cache-actions p { min-height: 2.5rem; margin: 0.45rem 0 var(--space-3); color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.45; }
.cache-action-button { display: flex; width: 100%; align-items: center; justify-content: center; gap: var(--space-2); }
.cache-action-button .nav-icon { width: 1rem; height: 1rem; }
.button.destructive { border-color: var(--destructive); background: var(--destructive); color: white; }
.button.outline.destructive { background: transparent; color: var(--destructive); }
.button.outline.destructive:hover { background: color-mix(in oklch, var(--destructive) 10%, transparent); }
.cache-aside { display: grid; gap: var(--space-6); }
.cache-guidance { padding: var(--space-6); }
.cache-guidance h2 { margin: 0; font-size: 1.125rem; line-height: 1.35; }
.cache-guidance ul { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.cache-guidance li { position: relative; padding-left: var(--space-5); }
.cache-guidance li::before { position: absolute; top: .45rem; left: 0; width: .45rem; height: .45rem; border-radius: 50%; background: var(--foreground); content: ""; }
.cache-guidance strong { font-size: .9rem; }
.cache-guidance p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: .9rem; line-height: 1.45; }
.cache-warning { border: 1px solid var(--warning-strong); border-radius: var(--radius); background: #fffbeb; padding: var(--space-5); color: #78350f; font-size: .9rem; line-height: 1.55; }
.dark .cache-warning { background: rgb(69 26 3 / .28); color: #fef3c7; }
.cache-browser-dialog { width: min(calc(100% - 2rem), 56rem); max-height: min(85vh, 48rem); overflow: hidden; padding: 0; }
.cache-browser-dialog[open] { grid-template-rows: auto minmax(0, 1fr); gap: 0; }
.cache-browser-dialog > .dialog-header { padding: var(--space-6) 3.5rem 0 var(--space-6); }
.cache-browser-body { min-height: 0; overflow-y: auto; padding: var(--space-6); }
.cache-browser-search { position: relative; display: block; }
.cache-domain-list { margin-top: var(--space-4); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.cache-domain-list-header { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; padding: 0 var(--space-4); background: color-mix(in oklch, var(--muted) 50%, transparent); }
.cache-domain-list-header > span, .cache-domain-row > span { border-radius: 999px; background: var(--muted); padding: .2rem .65rem; font-size: .75rem; }
.cache-domain-entry { border-top: 1px solid var(--border); }
.cache-domain-entry::details-content { overflow: hidden; }
.cache-domain-row { display: flex; min-height: 4.5rem; align-items: center; gap: .85rem; padding: var(--space-3) var(--space-4); list-style: none; cursor: pointer; }
.cache-domain-row::-webkit-details-marker { display: none; }
.cache-domain-row:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.cache-domain-row > .nav-icon { width: 1.1rem; height: 1.1rem; color: var(--muted-foreground); }
.cache-domain-row > div { display: grid; min-width: 0; flex: 1; gap: var(--space-1); }
.cache-domain-row strong { overflow: hidden; font: 600 .9rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.cache-domain-row small { color: var(--muted-foreground); font-size: .75rem; }
.cache-domain-entry[open] > .cache-domain-row { background: color-mix(in oklch, var(--muted) 55%, transparent); }
.cache-domain-detail { display: grid; gap: var(--space-3); border-top: 1px solid var(--border); background: color-mix(in oklch, var(--background) 90%, var(--muted)); padding: var(--space-4); }
.cache-response-block { overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.cache-response-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: color-mix(in oklch, var(--muted) 55%, transparent); padding: var(--space-2) var(--space-3); }
.cache-response-heading code { font-size: .75rem; font-weight: 600; }
.cache-response-heading span, .cache-response-block > p { color: var(--muted-foreground); font-size: .7rem; }
.cache-response-block > p { margin: 0; padding: var(--space-3); }
.cache-record-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto 1.75rem; align-items: center; gap: var(--space-2); border-top: 1px solid var(--border); padding: .65rem var(--space-3); }
.cache-record-row > span, .cache-record-row > small { color: var(--muted-foreground); font-size: .68rem; }
.cache-record-row > code { min-width: 0; overflow-wrap: anywhere; font-size: .72rem; line-height: 1.45; }
.cache-record-row > button { display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; color: var(--muted-foreground); }
.cache-record-row > button:hover { background: var(--accent); color: var(--foreground); }
.cache-record-row > button .nav-icon { width: .85rem; height: .85rem; }
.cache-domain-empty { padding: var(--space-12) var(--space-5); border-top: 1px solid var(--border); }
.cache-flush-notes { color: var(--muted-foreground); font-size: .875rem; }
.cache-flush-notes p { margin: 0 0 var(--space-2); }
.cache-flush-notes ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); line-height: 1.65; }
.cache-flush-notes strong { color: var(--foreground); font-weight: 500; }

.dns-query-empty { display: grid; min-height: 14rem; place-items: center; align-content: center; padding: var(--space-12) var(--space-6); text-align: center; }
.dns-query-empty > .nav-icon, .no-records > .nav-icon { width: 3rem; height: 3rem; margin-bottom: var(--space-4); color: color-mix(in oklch, var(--muted-foreground) 30%, transparent); }
.dns-query-empty h2 { margin: 0; font-size: 1.125rem; }
.dns-query-empty p { max-width: 28rem; margin: var(--space-2) auto 0; color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.5; }
.query-failure { padding: var(--space-6); }
.dns-result-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-3); }
.dns-result-header h2 { margin: 0.375rem 0 0; font: 600 1rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; overflow-wrap: anywhere; }
.result-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--muted-foreground); font-size: 0.75rem; }
.rcode-icon { display: inline-grid; width: 1.5rem; height: 1.5rem; place-items: center; }
.rcode-icon .nav-icon { width: 1.5rem; height: 1.5rem; }
.rcode-icon.success { color: var(--success-strong); }
.rcode-icon.warning { color: var(--warning-strong); }
.rcode-icon.error { color: var(--destructive); }
.rcode { display: inline-flex; min-height: 1.5rem; align-items: center; border-radius: 999px; padding: 0 0.55rem; font-size: 0.6875rem; font-weight: 600; }
.rcode.success { background: #dcfce7; color: #166534; }
.rcode.warning { background: #fef3c7; color: #92400e; }
.rcode.error { background: #fee2e2; color: #991b1b; }
.dark .rcode.success { background: #14532d; color: #bbf7d0; }
.dark .rcode.warning { background: #78350f; color: #fde68a; }
.dark .rcode.error { background: #7f1d1d; color: #fecaca; }
.copy-response { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); }
.copy-response .nav-icon { width: 1rem; height: 1rem; }
.copy-icon-success { display: none; }
.is-copied .copy-icon-default { display: none; }
.is-copied .copy-icon-success { display: inline-flex; }
.result-content { display: grid; gap: var(--space-6); padding: var(--space-3) var(--space-6) var(--space-6); }
.result-metadata { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.metadata-card { min-height: 5rem; border: 1px solid; border-radius: var(--radius); padding: var(--space-4); }
.metadata-label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); font-size: 0.75rem; font-weight: 500; }
.metadata-label .nav-icon { width: 1rem; height: 1rem; }
.metadata-card > strong { font: 700 1.125rem/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; overflow-wrap: anywhere; }
.metadata-card.blue { border-color: #bfdbfe; background: linear-gradient(135deg, #eff6ff, #dbeafe); color: #1e3a8a; }
.metadata-card.purple { border-color: #e9d5ff; background: linear-gradient(135deg, #faf5ff, #f3e8ff); color: #581c87; }
.metadata-card.green { border-color: #bbf7d0; background: linear-gradient(135deg, #f0fdf4, #dcfce7); color: #14532d; }
.metadata-card.amber { border-color: #fde68a; background: linear-gradient(135deg, #fffbeb, #fef3c7); color: #78350f; }
.dark .metadata-card.blue { border-color: #1e40af; background: linear-gradient(135deg, rgb(23 37 84 / .5), rgb(30 58 138 / .3)); color: #dbeafe; }
.dark .metadata-card.purple { border-color: #6b21a8; background: linear-gradient(135deg, rgb(59 7 100 / .5), rgb(88 28 135 / .3)); color: #f3e8ff; }
.dark .metadata-card.green { border-color: #166534; background: linear-gradient(135deg, rgb(5 46 22 / .5), rgb(20 83 45 / .3)); color: #dcfce7; }
.dark .metadata-card.amber { border-color: #92400e; background: linear-gradient(135deg, rgb(69 26 3 / .5), rgb(120 53 15 / .3)); color: #fef3c7; }
.flag-list { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.flag-list code { border: 1px solid currentColor; border-radius: 0.3rem; padding: 0.1rem 0.35rem; font-size: 0.6875rem; }
.flag-list small { color: var(--muted-foreground); }
.record-section > h3 { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: 1rem; font-weight: 600; }
.record-section > h3 > .nav-icon { width: 1rem; height: 1rem; }
.record-section > h3 > span { border-radius: 999px; background: var(--secondary); padding: 0.1rem 0.45rem; font: 500 0.75rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.record-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.record-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: 0.875rem var(--space-4); }
.record-row + .record-row { border-top: 1px solid var(--border); }
.record-row:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.record-type { display: inline-grid; width: 3.5rem; height: 1.5rem; flex: 0 0 3.5rem; place-items: center; border: 1px solid var(--border); border-radius: 999px; font-size: 0.6875rem; }
.record-value { display: grid; min-width: 0; flex: 1; gap: 0.35rem; }
.copyable-text { display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: var(--space-1); }
.copyable-text > span { min-width: 0; overflow-wrap: anywhere; }
.copyable-text.record-name > span { font: 500 0.875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.copyable-text.record-data > span { color: var(--muted-foreground); font: 0.875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.copyable-text button { display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; place-items: center; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; color: var(--muted-foreground); }
.copyable-text button:hover { background: var(--muted); color: var(--foreground); }
.copyable-text button .nav-icon { width: 0.8rem; height: 0.8rem; }
.record-ttl { display: grid; min-width: 5rem; flex: 0 0 5rem; justify-items: end; gap: 0.15rem; }
.record-ttl span { color: color-mix(in oklch, var(--muted-foreground) 60%, transparent); font-size: 0.625rem; letter-spacing: 0.05em; }
.record-ttl strong { font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.no-records { padding: var(--space-8); }
.no-records p { margin: 0.35rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
.raw-response { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.raw-response summary { cursor: pointer; color: var(--muted-foreground); font-size: 0.8125rem; }
.raw-response pre { margin-top: var(--space-3); }
.htmx-request .resolve-button, .quick-query.htmx-request, .range-tabs .htmx-request, .range-select.htmx-request { opacity: 0.65; pointer-events: none; }

.notification-stack,
.toast-region {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  width: min(24rem, calc(100% - 2rem));
  pointer-events: none;
}
.toast-region { display: grid; gap: .65rem; }
.notification-stack {
  --notification-gap: .65rem;
  --notification-collapsed-card-height: 5.125rem;
  display: grid;
  max-height: calc(100vh - 2rem);
  align-content: end;
  gap: var(--notification-gap);
  isolation: isolate;
  pointer-events: auto;
}
.notification-stack:empty { display: none; }
.notification-stack > .toast-region { position: relative; right: auto; bottom: auto; z-index: 2; width: 100%; }
.toast {
  --toast-accent: var(--success-strong);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--popover);
  padding: var(--space-4);
  color: var(--popover-foreground);
  box-shadow: 0 12px 32px rgb(0 0 0 / .22), 0 2px 8px rgb(0 0 0 / .14);
  pointer-events: auto;
  animation: toast-in 180ms cubic-bezier(.2, .8, .2, 1);
}
.toast-error { --toast-accent: var(--destructive); }
.notification-summary { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: var(--space-4); padding-right: 2.75rem; }
.notification-badge { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .875rem; background: color-mix(in oklch, currentColor 13%, transparent); color: var(--toast-accent); }
.notification-badge > .nav-icon { width: 1.75rem; height: 1.75rem; }
.notification-copy { min-width: 0; }
.notification-copy > strong { display: block; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.notification-copy > p { margin: .4rem 0 0; color: var(--muted-foreground); font-size: .75rem; line-height: 1.5; overflow-wrap: anywhere; }
.notification-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; margin-top: var(--space-3); padding-right: 2.75rem; }
.notification-actions > form { margin: 0; }
.notification-actions .button { display: inline-flex; align-items: center; gap: .35rem; }
.notification-actions .button .nav-icon { width: .85rem; height: .85rem; flex: 0 0 .85rem; }
.toast-dismiss { position: absolute; top: .5rem; right: .5rem; display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 0; border-radius: 50%; background: transparent; padding: 0; color: var(--muted-foreground); }
.toast-dismiss:hover { background: var(--accent); color: var(--accent-foreground); }
.toast-dismiss:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.toast-dismiss .nav-icon { width: .9rem; height: .9rem; }
.toast.is-leaving { animation: toast-out 160ms ease forwards; }

.toast-update { gap: var(--space-3); }
.toast-update > .notification-summary { min-height: 5.5rem; padding-right: 0; }
.toast-update .notification-copy > strong { padding-right: var(--space-4); }
.toast-update .notification-badge { color: var(--warning-strong); }
.dark .toast-update .notification-badge { color: #f1ad47; }
.toast-update-installed .notification-badge { color: var(--success-strong); }
.dark .toast-update-installed .notification-badge { color: var(--success); }
.toast-update-failed .notification-badge { color: var(--destructive); }
.toast-update-installed .notification-badge .icon-refresh { display: none; }
.toast-update.is-restarting .notification-badge .icon-power { display: none; }
.toast-update.is-restarting .notification-badge .icon-refresh { display: block; }
.toast-update-busy .notification-badge .nav-icon, .toast-update.is-restarting .notification-badge .icon-refresh, .update-install-progress .icon-refresh { animation: about-update-spin 1.4s linear infinite; }
.toast-update-busy, .toast-update.is-restarting { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .search-pending .nav-icon { animation: none; }
  .toast-update-busy .notification-badge .nav-icon, .toast-update.is-restarting .notification-badge .icon-refresh, .update-install-progress .icon-refresh { animation: none; }
}
.toast-update > .notification-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; }
.toast-update > .notification-actions:empty { display: none; }
.toast-update > .notification-actions > :only-child { grid-column: 1 / -1; }
.toast-update .notification-actions .button { width: 100%; min-height: 2.25rem; justify-content: center; }
/* A split button runs one of a few actions: the part on the left runs the
   one chosen last, and the chevron opens a menu of all of them. */
.split-button { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; min-width: 0; }
.split-button > [data-split-action], .split-button > [data-split-action] form { display: flex; min-width: 0; margin: 0; }
.split-button > [data-split-action] form { flex: 1; }
.split-button > [data-split-action] .button { width: 100%; border-top-right-radius: 0; border-bottom-right-radius: 0; white-space: nowrap; }
.toast-update .split-button > [data-split-action] .button { padding-inline: var(--space-2); }
.split-button .split-button-trigger { justify-content: center; border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0; }
.split-button .split-button-trigger:not(.outline) { border-left-color: color-mix(in srgb, var(--primary-foreground) 22%, var(--primary)); }
.split-button .split-button-trigger.outline { margin-left: -1px; }
/* With one action left there is nothing to pick, so it fills the button. */
.split-button.single { grid-template-columns: minmax(0, 1fr); }
.split-button.single > .split-button-trigger { display: none; }
.split-button.single > [data-split-action] .button { border-radius: 999px; }
.split-menu { position: fixed; inset: auto; margin: 0; width: 18rem; max-width: calc(100vw - 1rem); overflow: auto; border: 1px solid var(--border); border-radius: .625rem; background: var(--popover); color: var(--popover-foreground); padding: .375rem; box-shadow: 0 12px 32px rgb(0 0 0 / .22); }
.split-menu form { margin: 0; }
.split-menu-option { display: flex; align-items: center; gap: var(--space-3); width: 100%; border: 0; border-radius: .375rem; background: transparent; padding: .65rem var(--space-2); color: inherit; text-align: left; }
.split-menu-option:hover, .split-menu-option:focus-visible { background: var(--accent); color: var(--accent-foreground); }
.split-menu-option > .nav-icon { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--muted-foreground); }
.split-menu-option > span { display: grid; gap: .2rem; }
.split-menu-option > .icon-check { margin-left: auto; color: inherit; }
.split-menu-option[aria-checked="false"] > .icon-check { visibility: hidden; }
.split-menu-option strong { font-size: .8125rem; font-weight: 500; }
.split-menu-option small { color: var(--muted-foreground); font-size: .6875rem; line-height: 1.4; }

@media (hover: hover) and (min-width: 640px) {
  .notification-stack {
    display: block;
    height: var(--notification-collapsed-height, 0);
    max-height: none;
    transition: height 340ms cubic-bezier(.22, 1, .36, 1);
  }
  .notification-stack > .toast-region {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--notification-collapsed-card-height);
    transform: translate3d(0, var(--notification-collapsed-offset, 0), 0) scale(var(--notification-collapsed-scale, 1));
    transform-origin: bottom center;
    transition: height 340ms cubic-bezier(.22, 1, .36, 1), transform 340ms cubic-bezier(.22, 1, .36, 1);
    transition-delay: calc(var(--notification-depth, 0) * 10ms);
    will-change: height, transform;
  }
  .notification-stack > .toast-region > .toast {
    height: 100%;
    min-height: 0;
  }
  .notification-stack > .toast-region > .toast > :is(.notification-dismiss, .notification-summary, .notification-actions) {
    transition: opacity 160ms ease;
  }
  .notification-stack:not(:hover):not(:focus-within) > .toast-region:not(:last-child) {
    pointer-events: none;
  }
  .notification-stack:not(:hover):not(:focus-within) > .toast-region:not(:last-child) > .toast > :is(.notification-dismiss, .notification-summary, .notification-actions) {
    opacity: 0;
  }
  .notification-stack:hover,
  .notification-stack:focus-within { height: var(--notification-expanded-height, var(--notification-collapsed-height, 0)); }
  .notification-stack:hover > .toast-region,
  .notification-stack:focus-within > .toast-region {
    height: var(--notification-expanded-card-height, var(--notification-collapsed-card-height));
    transform: translate3d(0, var(--notification-expanded-offset, 0), 0) scale(1);
    transition-delay: calc(var(--notification-depth, 0) * 18ms);
  }
}

@media (hover: hover) and (min-width: 640px) {
  /* Keep the frontmost notification readable; older cards are the compact
     layers that sit behind it in the stack. */
  .notification-stack > .toast-region:last-child {
    height: var(--notification-expanded-card-height, var(--notification-collapsed-card-height));
  }
}

@keyframes toast-in { from { opacity: 0; transform: translate3d(0, .75rem, 0) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translate3d(.75rem, 0, 0) scale(.98); } }

.blocking-update-button { min-width: 10.75rem; }
.blocking-update-button.htmx-request,
.blocking-update-button.is-updating { cursor: wait; opacity: 0.72; pointer-events: none; }
.blocking-update-button.htmx-request .icon-refresh,
.blocking-update-button.is-updating .icon-refresh { animation: blocking-refresh-spin 0.8s linear infinite; }
.blocking-update-button.htmx-request .update-label { font-size: 0; }
.blocking-update-button.htmx-request .update-label::after { content: "Updating\2026"; font-size: 0.875rem; }

@keyframes blocking-refresh-spin { to { transform: rotate(360deg); } }

.zones-page { width: 100%; }
.isotope-zone-stack { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.isotope-zone-heading { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: var(--space-4); }
.isotope-zone-heading h1 { margin: 0; font-size: 1.875rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.isotope-zone-heading p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: .875rem; }
.zone-heading-actions { display: flex; align-items: center; gap: var(--space-2); }
.zone-import-trigger .nav-icon { width: 1rem; height: 1rem; }
.zone-import-menu > div { left: auto; right: 0; width: 17rem; max-width: calc(100vw - 2rem); }
.zone-import-menu > div button { display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-items: start; gap: .65rem; padding: .7rem .65rem; white-space: normal; }
.zone-import-menu > div button > .nav-icon { width: 1rem; height: 1rem; margin-top: .1rem; color: var(--muted-foreground); }
.zone-import-menu > div button > span { display: grid; gap: var(--space-1); }
.zone-import-menu strong { font-size: .8rem; font-weight: 500; }
.zone-import-menu small { color: var(--muted-foreground); font-size: .7rem; line-height: 1.4; }
.zone-primary-action { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; white-space: nowrap; }
.zone-primary-action .nav-icon { width: 1rem; height: 1rem; }
.zone-filter-bar { display: flex; align-items: center; gap: var(--space-3); }
.zone-search { position: relative; display: block; min-width: 0; flex: 1; }
.zone-filter-selects { display: flex; align-items: center; gap: var(--space-2); }
.zone-filter-selects label, .zone-record-type-filter { width: 8.75rem; }
.isotope-zone-list, .isotope-record-list { overflow: visible; }
.isotope-zone-row { position: relative; display: flex; min-height: 3.55rem; align-items: center; gap: var(--space-2); border-top: 1px solid var(--border); padding: 0 var(--space-3) 0 var(--space-4); transition: background 120ms; }
.isotope-zone-row:first-of-type { border-top: 0; }
.isotope-zone-row:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.isotope-zone-row-link { display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--space-4); align-self: stretch; }
.isotope-zone-name { min-width: 0; flex: 1; }
.isotope-zone-name strong { display: block; overflow: hidden; font: 500 .875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.zone-desktop-badges, .zone-mobile-badges { display: flex; align-items: center; gap: var(--space-2); }
.zone-mobile-badges { display: none; margin-top: .3rem; }
.zone-type-badge, .zone-status-badge, .zone-dnssec-badge { display: inline-flex; min-height: 1.35rem; flex: 0 0 auto; align-items: center; border-radius: 999px; padding: .12rem var(--space-2); font-size: .67rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.zone-type-badge.primary { background: #dbeafe; color: #1e40af; }
.zone-type-badge.secondary { background: #dcfce7; color: #166534; }
.zone-type-badge.stub { background: #e5e7eb; color: #374151; }
.zone-type-badge.forwarder { background: #ffedd5; color: #9a3412; }
.zone-type-badge.alias { background: #ede9fe; color: #5b21b6; }
.zone-type-badge.catalog { background: #cffafe; color: #155e75; }
.zone-status-badge.active { background: #dcfce7; color: #166534; }
.zone-status-badge.disabled { background: var(--muted); color: var(--muted-foreground); }
.zone-dnssec-badge.unsigned { background: #e5e7eb; color: #374151; }
.zone-dnssec-badge.signed { background: #fef3c7; color: #92400e; }
.dark .zone-type-badge.primary { background: #1e3a8a; color: #bfdbfe; }
.dark .zone-type-badge.secondary { background: #14532d; color: #bbf7d0; }
.dark .zone-type-badge.stub { background: #374151; color: #e5e7eb; }
.dark .zone-type-badge.forwarder { background: #7c2d12; color: #fed7aa; }
.dark .zone-type-badge.alias { background: #4c1d95; color: #ddd6fe; }
.dark .zone-type-badge.catalog { background: #164e63; color: #a5f3fc; }
.dark .zone-status-badge.active { background: #14532d; color: #bbf7d0; }
.dark .zone-dnssec-badge.unsigned { background: #374151; color: #e5e7eb; }
.dark .zone-dnssec-badge.signed { background: #78350f; color: #fde68a; }
.isotope-zone-row.disabled .isotope-zone-row-link { opacity: .62; }
.zone-row-chevron { display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--muted-foreground); }
.zone-row-chevron .nav-icon { width: 1rem; height: 1rem; }
.zone-action-menu { position: relative; z-index: 4; }
.zone-action-menu[open] { z-index: 30; }
.zone-more-button { opacity: 0; border-color: transparent; background: transparent; transition: opacity 120ms; }
.isotope-zone-row:hover .zone-more-button, .zone-action-menu[open] .zone-more-button, .zone-more-button:focus-visible { opacity: 1; }
.zone-menu-content { position: absolute; top: calc(100% + .3rem); right: 0; z-index: 20; display: grid; width: 14rem; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) - 1px); background: var(--popover); padding: .3rem; color: var(--popover-foreground); box-shadow: 0 12px 28px rgb(0 0 0 / .22); }
.zone-menu-content a, .zone-menu-content button { display: flex; width: 100%; height: 2rem; align-items: center; gap: .55rem; border: 0; border-radius: .35rem; background: transparent; padding: 0 .55rem; text-align: left; font-size: .78rem; }
.zone-menu-content a:hover, .zone-menu-content button:hover { background: var(--accent); }
.zone-menu-content button:disabled { color: var(--muted-foreground); cursor: not-allowed; opacity: .55; }
.zone-menu-content button:disabled:hover { background: transparent; }
.zone-menu-content form { margin: 0; }
.zone-menu-content .nav-icon { width: .95rem; height: .95rem; }
.zone-menu-content hr { width: 100%; margin: .3rem 0; border: 0; border-top: 1px solid var(--border); }
.zone-menu-content .danger { color: var(--destructive); }
.isotope-zone-empty { min-height: 9rem; padding: var(--space-8); font-size: .875rem; }

.zone-records-heading { display: flex; align-items: flex-start; gap: var(--space-2); }
.zone-back-button { margin-top: var(--space-1); border-color: transparent; background: transparent; }
.zone-records-title { min-width: 0; flex: 1; }
.zone-records-title h1 { overflow: hidden; margin: 0; font: 700 1.5rem/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.zone-records-title > div { display: flex; align-items: center; gap: .4rem; margin-top: .3rem; }
.zone-records-title p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: .75rem; }
.zone-alias-source::before { content: "\00b7"; margin: 0 .35rem; }
.zone-alias-source a { color: inherit; text-decoration: none; }
.zone-alias-source a:hover code { text-decoration: underline; }
.zone-records-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); }
.detail-menu .zone-menu-content { top: calc(100% + .25rem); }
.zone-record-filter-bar .zone-search { flex: 1; }
.isotope-record-row { display: grid; min-height: 3.6rem; grid-template-columns: 3.5rem minmax(0, 3fr) minmax(0, 2fr) 4rem 4.5rem 1.75rem; align-items: center; gap: var(--space-4); border-top: 1px solid var(--border); padding: .65rem var(--space-4); transition: background 120ms; }
.isotope-record-row:has(> .record-open-button) { cursor: pointer; }
.isotope-record-row:first-of-type { border-top: 0; }
.isotope-record-row:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.isotope-record-row.disabled { opacity: .55; }
.record-type-badge { display: inline-flex; width: 3.25rem; min-height: 1.5rem; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 999px; padding: .1rem .35rem; font: 600 .66rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.zone-copyable { display: flex; min-width: 0; align-items: center; gap: .3rem; }
.zone-copyable code { overflow: hidden; min-width: 0; font: .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.record-value-copy code { color: var(--muted-foreground); }
.zone-copyable button { display: grid; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; place-items: center; border: 0; border-radius: .3rem; background: transparent; color: var(--muted-foreground); opacity: 0; transition: opacity 120ms, background 120ms; }
.isotope-record-row:hover .zone-copyable button, .zone-copyable button:focus-visible { opacity: 1; }
.zone-copyable button:hover { background: var(--accent); color: var(--foreground); }
.zone-copyable .nav-icon { width: .85rem; height: .85rem; }
.zone-copyable .copy-icon-success { display: none; }
.zone-copyable button.is-copied .copy-icon-default { display: none; }
.zone-copyable button.is-copied .copy-icon-success { display: inline-grid; color: var(--success); }
/* Inline copy buttons center their icon: the browser's button padding and the
   text-height icon wrappers otherwise push it right and up in its hover box. */
.zone-copyable button, .copyable-text button { padding: 0; }
.zone-copyable button > span, .copyable-text button > span { align-items: center; justify-content: center; line-height: 0; }
.zone-copyable button:not(.is-copied) > .copy-icon-default, .copyable-text button:not(.is-copied) > .copy-icon-default,
.zone-copyable button.is-copied > .copy-icon-success, .copyable-text button.is-copied > .copy-icon-success { display: flex; }
/* The base icon's flex size would override these icons' widths inside it. */
.zone-copyable button .nav-icon { flex-basis: .85rem; }
.copyable-text button .nav-icon { flex-basis: .8rem; }
.record-ttl { min-width: 0; padding-right: .3rem; color: var(--muted-foreground); font-size: .72rem; text-align: right; font-variant-numeric: tabular-nums; }
.record-open-button { display: grid; width: 1.5rem; min-width: 1.5rem; height: 1.5rem; justify-self: end; place-items: center; border: 0; border-radius: .3rem; background: transparent; color: var(--muted-foreground); }
.record-open-button:hover { background: var(--accent); color: var(--foreground); }
.zone-history-dialog { width: min(52rem, calc(100vw - 2rem)); max-width: 52rem; max-height: 85dvh; overflow: hidden; padding: 0; }
.zone-history-dialog[open] { display: flex; flex-direction: column; gap: 0; }
.zone-history-dialog > .dialog-header { border-bottom: 1px solid var(--border); padding: var(--space-6) 3.5rem var(--space-4) var(--space-6); }
.zone-history-dialog > .dialog-header code { color: var(--foreground); font-size: .8rem; overflow-wrap: anywhere; }
.zone-history-list { min-height: 8rem; overflow-y: auto; }
.zone-history-empty { padding: var(--space-12) var(--space-5); font-size: .875rem; }
.zone-history-entry { border-bottom: 1px solid var(--border); }
.zone-history-entry:last-child { border-bottom: 0; }
.zone-history-entry > summary { display: grid; min-height: 4.25rem; grid-template-columns: .65rem minmax(0, 1fr) 1rem; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); cursor: pointer; list-style: none; }
.zone-history-entry > summary::-webkit-details-marker { display: none; }
.zone-history-entry > summary:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.zone-history-entry > summary > div { display: grid; min-width: 0; gap: var(--space-1); }
.zone-history-entry > summary > div > span { display: flex; align-items: center; gap: .45rem; }
.zone-history-entry > summary strong { font-size: .82rem; }
.zone-history-entry > summary small { color: var(--muted-foreground); font-size: .7rem; }
.zone-history-entry > summary > .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); transition: rotate 140ms; }
.zone-history-entry[open] > summary > .nav-icon { rotate: 180deg; }
.zone-history-marker { width: .55rem; height: .55rem; border-radius: 999px; background: var(--info); box-shadow: 0 0 0 3px rgb(59 130 246 / .12); }
.zone-history-marker.created { background: var(--success); box-shadow: 0 0 0 3px rgb(34 197 94 / .12); }
.zone-history-marker.deleted { background: var(--danger); box-shadow: 0 0 0 3px rgb(239 68 68 / .12); }
.zone-history-kind { border-radius: 999px; background: rgb(59 130 246 / .1); padding: .12rem .42rem; color: var(--info); font-size: .63rem; font-weight: 600; }
.zone-history-kind.created { background: rgb(34 197 94 / .1); color: var(--success); }
.zone-history-kind.deleted { background: rgb(239 68 68 / .1); color: var(--danger); }
.zone-history-diff { display: grid; gap: .85rem; border-top: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 25%, transparent); padding: var(--space-4) var(--space-5) var(--space-4) 2.65rem; }
.zone-history-diff-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: var(--space-3); }
.zone-history-loading, .zone-history-summary, .zone-history-notice { margin: 0; color: var(--muted-foreground); font-size: .78rem; }
.zone-history-summary { min-width: 0; flex: 1; color: var(--foreground); font-weight: 500; }
.zone-history-notice { border-left: 2px solid var(--border); padding-left: .65rem; line-height: 1.45; }
.zone-history-notice.error { border-color: var(--destructive); color: var(--destructive); }
.zone-history-changes { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.zone-history-changes li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--space-2); }
.zone-history-change-kind { display: grid; width: 1.25rem; height: 1.25rem; place-items: center; border-radius: .3rem; background: rgb(59 130 246 / .1); color: var(--info); font: 700 .7rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.zone-history-changes .added .zone-history-change-kind { background: rgb(34 197 94 / .1); color: var(--success); }
.zone-history-changes .removed .zone-history-change-kind { background: rgb(239 68 68 / .1); color: var(--danger); }
.zone-history-changes li > div { display: grid; min-width: 0; gap: .18rem; }
.zone-history-changes strong { overflow-wrap: anywhere; font: 500 .74rem/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.zone-history-changes li > div > span { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .4rem; color: var(--muted-foreground); font-size: .7rem; overflow-wrap: anywhere; }
.zone-history-changes li > div > span small { color: color-mix(in oklch, var(--muted-foreground) 70%, transparent); font-size: .62rem; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }
.zone-history-rollback { display: flex; flex: 0 0 auto; margin: 0; }
.zone-history-rollback .button { display: inline-flex; align-items: center; gap: .4rem; }
.zone-history-rollback .nav-icon { width: .9rem; height: .9rem; }
.record-open-button .nav-icon { width: 1rem; height: 1rem; }
.record-open-placeholder { width: 1.5rem; min-width: 1.5rem; justify-self: end; }
.isotope-zone-dialog { width: min(32rem, calc(100vw - 2rem)); }
.zone-settings-dialog { max-height: min(90vh, 48rem); overflow: hidden; }
.zone-settings-dialog[open] { grid-template-rows: auto auto minmax(0, 1fr); }
.zone-settings-tabs { margin: 0; }
.zone-settings-form { width: 100%; min-height: 0; height: 100%; max-height: none; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.zone-settings-panel { min-height: 0; align-content: start; gap: .85rem; overflow-x: hidden; overflow-y: auto; padding: .15rem; }
.zone-settings-form > .dialog-footer { position: relative; z-index: 2; flex: 0 0 auto; border-top: 1px solid var(--border); background: var(--background); padding-top: .85rem; }
.zone-settings-section { display: grid; gap: .8rem; border-top: 1px solid var(--border); padding-top: var(--space-4); }
.zone-settings-section.first { border-top: 0; padding-top: 0; }
.zone-settings-section > div { display: flex; align-items: flex-start; gap: .65rem; }
.zone-settings-section > div > span:last-child { display: grid; gap: .18rem; }
.zone-settings-section strong { font-size: .82rem; }
.zone-settings-section small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.4; }
.zone-settings-section-icon { display: grid; width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; place-items: center; border-radius: .4rem; background: var(--muted); color: var(--muted-foreground); }
.zone-settings-section-icon .nav-icon { width: .95rem; height: .95rem; }
.zone-settings-section textarea { min-height: 4.5rem; resize: vertical; }
.zone-dnssec-form { max-height: min(72vh, 44rem); grid-auto-rows: max-content; overflow-x: hidden; overflow-y: auto; }
.zone-dnssec-form > .dialog-footer { position: sticky; z-index: 2; bottom: 0; margin: 0 -.1rem -.1rem; border-top: 1px solid var(--border); background: var(--background); padding: .8rem .1rem .1rem; }
.zone-dnssec-status { display: grid; overflow: hidden; gap: 0; border: 1px solid var(--border); border-radius: .6rem; background: var(--card); }
.zone-dnssec-nsec3 { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: var(--space-3); border: 1px solid var(--border); border-radius: .55rem; background: color-mix(in oklch, var(--muted) 35%, transparent); padding: var(--space-3); }
.zone-dnssec-nsec3[hidden] { display: none; }
.zone-dnssec-status > header { display: flex; align-items: center; gap: .65rem; border-bottom: 1px solid var(--border); padding: .8rem; }
.zone-dnssec-status > header > span:last-child { display: grid; min-width: 0; gap: .15rem; }
.zone-dnssec-status > header strong { font-size: .82rem; }
.zone-dnssec-status > header small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; }
.zone-dnssec-policy { align-items: start; }
.zone-dnssec-key-list { display: grid; gap: .6rem; padding: .7rem .8rem; }
.zone-dnssec-key { display: grid; min-width: 0; gap: .45rem; border: 1px solid var(--border); border-radius: .5rem; background: color-mix(in oklch, var(--muted) 28%, transparent); padding: .65rem; }
.zone-dnssec-key > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.zone-dnssec-key > header > span:first-child { display: flex; align-items: baseline; gap: var(--space-2); }
.zone-dnssec-key > header small, .zone-dnssec-key > small { color: var(--muted-foreground); font-size: .68rem; }
.zone-dnssec-key-state { border-radius: 999px; background: var(--muted); padding: .15rem .45rem; color: var(--muted-foreground); font-size: .62rem; font-weight: 700; text-transform: capitalize; }
.zone-dnssec-key-state.active { background: color-mix(in oklch, var(--success) 14%, transparent); color: var(--success); }
.zone-dnssec-key-state.published, .zone-dnssec-key-state.ready { background: color-mix(in oklch, var(--info) 14%, transparent); color: #60a5fa; }
.zone-dnssec-key-state.retiring { background: color-mix(in oklch, var(--warning) 14%, transparent); color: var(--warning); }
.zone-dnssec-key .zone-dnssec-copy { border: 0; padding: .35rem 0 0; }
.zone-dnssec-key .zone-dnssec-actions { display: flex; flex-wrap: wrap; gap: .45rem; padding: var(--space-1) 0 0; }
.zone-settings-section-icon.signed { background: color-mix(in oklch, var(--success) 12%, transparent); color: var(--success); }
.zone-dnssec-copy { display: grid; min-width: 0; gap: .35rem; border-bottom: 1px solid var(--border); padding: var(--space-3) .8rem; }
.zone-dnssec-copy > span:first-child { color: var(--muted-foreground); font-size: .68rem; font-weight: 600; }
.zone-dnssec-copy .zone-copyable { width: 100%; }
.zone-dnssec-copy .zone-copyable code { flex: 1; font-size: .7rem; }
.zone-dnssec-copy .zone-copyable button { opacity: 1; }
.zone-dnssec-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: .7rem .8rem; }
.zone-dnssec-actions .button { display: inline-flex; width: auto; align-items: center; gap: .45rem; }
.zone-dnssec-actions .nav-icon { width: .9rem; height: .9rem; }
.zone-dnssec-warning, .zone-dnssec-note { border: 1px solid color-mix(in oklch, var(--warning) 55%, var(--border)); border-radius: .55rem; padding: var(--space-3); background: color-mix(in oklch, var(--warning) 7%, transparent); color: var(--muted-foreground); font-size: .72rem; line-height: 1.5; }
.zone-dnssec-warning { display: grid; gap: .2rem; }
.zone-dnssec-warning strong { color: var(--foreground); font-size: .75rem; }
.zone-dynamic-toggle { display: flex !important; align-items: center; grid-template-columns: 1fr auto !important; gap: var(--space-4) !important; border: 1px solid var(--border); border-radius: .55rem; padding: var(--space-3); background: var(--card); cursor: pointer; }
.zone-dynamic-toggle > span:first-child { display: grid; gap: .2rem; }
.zone-dynamic-toggle > .switch { flex: 0 0 auto; }
.zone-create-options { display: grid; gap: .8rem; border-top: 1px solid var(--border); padding-top: .9rem; }
.zone-create-options[hidden] { display: none; }
.zone-create-options small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.4; }
.zone-create-options textarea { min-height: 4.25rem; resize: vertical; }
.isotope-record-dialog { width: min(46rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: min(90vh, 52rem); overflow: hidden; padding: 0; }
.isotope-record-dialog[open] { grid-template-rows: auto minmax(0, 1fr); gap: 0; }
.isotope-record-dialog > *, .isotope-record-form > * { min-width: 0; }
.isotope-zone-import-dialog { width: min(36rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: min(90vh, 48rem); overflow-x: hidden; overflow-y: auto; }
.isotope-zone-import-dialog > *, .zone-import-form > * { min-width: 0; }
.isotope-zone-import-dialog .dialog-header code { color: var(--foreground); font-size: .8rem; }
.zone-import-form { gap: var(--space-4); }
.zone-import-form label > span small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; }
.zone-conversion-dialog { max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; }
.zone-conversion-dialog[open] { grid-template-columns: minmax(0, 1fr); }
.zone-conversion-form, .zone-conversion-form > * { min-width: 0; }
.zone-conversion-dialog .dialog-header strong { color: var(--foreground); font-weight: 500; overflow-wrap: anywhere; }
.zone-conversion-notice { margin: 0; font-size: .8rem; line-height: 1.5; }
.zone-import-help { margin: 0; color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.zone-import-help code { color: var(--foreground); font-size: inherit; }
.file-picker { display: flex; min-width: 0; align-items: center; gap: .7rem; }
.file-picker > .button { display: inline-flex; width: auto; flex: 0 0 auto; align-items: center; gap: .45rem; cursor: pointer; }
.file-picker > .button .nav-icon { width: 1rem; height: 1rem; }
.file-picker > span { overflow: hidden; min-width: 0; color: var(--muted-foreground); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.zone-import-input { display: grid; gap: var(--space-4); }
.zone-import-input [hidden] { display: none !important; }
.zone-import-modes { display: flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--border); border-radius: 999px; background: var(--muted); }
.zone-import-modes button { display: flex; flex: 1; align-items: center; justify-content: center; gap: var(--space-2); padding: .65rem var(--space-2); border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); font: inherit; font-size: .78rem; font-weight: 500; cursor: pointer; }
.zone-import-modes button[aria-pressed="true"] { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px #00000012; }
.zone-import-modes .nav-icon { width: 1rem; height: 1rem; }
.blocking-dialog-form .file-dropzone { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: var(--space-2); min-height: 13rem; padding: 1.75rem var(--space-4); --dropzone-border: color-mix(in oklch, var(--muted-foreground) 45%, var(--border)); border: 1px solid var(--dropzone-border); border-radius: var(--radius); background: color-mix(in oklch, var(--muted) 25%, transparent); text-align: center; cursor: pointer; }
.file-dropzone:hover, .file-dropzone.is-dragging, .file-dropzone:focus-within { --dropzone-border: var(--primary); background: color-mix(in oklch, var(--primary) 6%, var(--background)); }
.file-dropzone:focus-within { outline: 2px solid var(--ring); outline-offset: 3px; }
.file-dropzone input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-dropzone .file-dropzone-upload-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: .35rem; border: 1px solid var(--border); border-radius: .8rem; background: var(--background); color: var(--primary); box-shadow: 0 2px 5px #00000008; }
.file-dropzone-upload-icon .nav-icon { width: 1.25rem; height: 1.25rem; }
.file-dropzone strong { font-size: .9rem; font-weight: 600; }
.file-dropzone > span:not(.file-dropzone-upload-icon) { font-size: .78rem; color: var(--muted-foreground); font-weight: 400; }
.file-dropzone-browse { color: var(--primary); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.file-dropzone > small { margin-top: var(--space-2); color: var(--muted-foreground); font-size: .7rem; }
.file-dropzone-selection { display: flex; min-height: 4rem; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted); }
.file-dropzone-selection > .nav-icon { flex-shrink: 0; color: var(--primary); width: 1.2rem; }
.file-dropzone-selection > div { display: grid; min-width: 0; flex: 1; gap: .2rem; }
.file-dropzone-selection strong { overflow-wrap: anywhere; font-size: .78rem; font-weight: 500; }
.file-dropzone-selection .icon-button { padding: 0; }
.file-dropzone-selection small { color: var(--muted-foreground); font-size: .7rem; }
[data-file-dropzone-status]:empty { display: none; }
.zone-import-editor { display: grid; gap: .65rem; }
.zone-import-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.zone-import-editor-heading label { font-size: .78rem; font-weight: 500; }
.zone-import-editor-heading .button { font-size: .7rem; padding: .4rem .6rem; min-height: 2rem; }
.zone-import-editor textarea { min-height: 13rem; max-height: 22rem; resize: vertical; white-space: pre; font-family: var(--font-mono, monospace); font-size: .75rem; line-height: 1.7; }
[data-zone-import-status]:empty { display: none; }
.zone-import-options { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
:is(.blocking-dialog-form, .catalog-import-dialog) .zone-import-option { display: grid; grid-template-columns: 1rem minmax(0, 1fr); align-items: start; gap: var(--space-3); border-top: 1px solid var(--border); padding: var(--space-3); cursor: pointer; }
:is(.blocking-dialog-form, .catalog-import-dialog) .zone-import-option:first-child { border-top: 0; }
:is(.blocking-dialog-form, .catalog-import-dialog) .zone-import-option:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.zone-import-option > input { width: 1rem; height: 1rem; margin: .1rem 0 0; padding: 0; accent-color: var(--primary); }
.zone-import-option > span { display: grid; min-width: 0; gap: .18rem; }
.zone-import-option strong { font-size: .78rem; font-weight: 500; }
.zone-import-option small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.4; }
.zone-import-option.danger strong { color: var(--destructive); }
.isotope-record-dialog > .dialog-header { border-bottom: 1px solid var(--border); padding: var(--space-6) 3.5rem var(--space-4) var(--space-6); }
.isotope-record-form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.isotope-record-form > input[type="hidden"] { position: absolute; }
.isotope-record-dialog-body { display: grid; min-height: 0; align-content: start; gap: var(--space-6); overflow-x: hidden; overflow-y: auto; padding: var(--space-6); }
.isotope-record-form > .dialog-footer { flex: 0 0 auto; border-top: 1px solid var(--border); padding: var(--space-4) var(--space-6); }
.record-type-fieldset { display: grid; gap: .65rem; margin: 0; border: 0; padding: 0; }
.record-type-fieldset legend { margin-bottom: .65rem; font-size: .75rem; font-weight: 600; }
.record-type-fieldset > p { margin: 0; color: var(--muted-foreground); font-size: .7rem; }
.record-type-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.record-type-choice { display: flex; width: 100%; height: 2.25rem; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--background); font-size: .75rem; font-weight: 500; cursor: pointer; }
.record-type-choice:hover { background: var(--accent); }
.record-type-choice.active { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.record-more-types { display: block; width: 12.5rem; }
.record-specific-fields { display: grid; min-width: 0; gap: var(--space-4); }
.record-field { display: grid; min-width: 0; gap: var(--space-2); font-size: .8rem; font-weight: 500; }
.record-field.secondary > span, .record-field-grid .record-field.secondary > span { color: var(--muted-foreground); font-size: .72rem; }
.record-field small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.45; }
.record-text-value { min-height: 6.25rem; }
.record-text-value.short { min-height: 5rem; }
.record-field-grid { display: grid; min-width: 0; gap: var(--space-4); }
.record-field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.record-field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.record-field-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.record-field-grid.mx { grid-template-columns: minmax(0, 3fr) minmax(6rem, 1fr); }
.record-field-grid.caa { grid-template-columns: minmax(0, 3fr) minmax(7rem, 2fr) minmax(4.5rem, 1fr); }
.mono-input { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.edit-record-type { display: flex; align-items: center; gap: .65rem; padding-bottom: var(--space-1); }
.edit-record-type .record-type-badge { width: auto; min-width: 2.75rem; min-height: 1.8rem; border: 0; background: var(--secondary); padding-inline: var(--space-3); color: var(--secondary-foreground); font-size: .75rem; }
.edit-record-type small { overflow: hidden; min-width: 0; color: var(--muted-foreground); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.record-enabled { display: flex !important; margin-left: auto; align-items: center; grid-template-columns: auto auto !important; gap: var(--space-2) !important; cursor: pointer; }
.record-enabled b { font-size: .75rem; font-weight: 400; }
.record-enabled .switch input:checked + span { background: var(--primary); }
.record-advanced { min-width: 0; }
.record-advanced > summary { display: inline-flex; height: 2.25rem; align-items: center; gap: var(--space-2); border-radius: calc(var(--radius) - 2px); padding: 0 var(--space-3); color: var(--muted-foreground); font-size: .8rem; font-weight: 500; list-style: none; cursor: pointer; }
.record-advanced > summary::-webkit-details-marker { display: none; }
.record-advanced > summary:hover { background: var(--accent); color: var(--foreground); }
.record-advanced > summary .nav-icon { width: 1rem; height: 1rem; }
.record-advanced-chevron { display: block; flex: 0 0 auto; width: .5rem; height: .5rem; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: translateY(-.125rem) rotate(45deg); transition: transform 150ms ease; }
.record-advanced[open] > summary .record-advanced-chevron { transform: translateY(.125rem) rotate(225deg); }
.record-advanced-content { display: grid; min-width: 0; gap: var(--space-4); padding-top: var(--space-4); }
.record-advanced-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.edit-record-footer { align-items: center; }
.edit-record-delete { display: inline-flex; align-items: center; gap: .45rem; margin-right: auto; }
.edit-record-delete .nav-icon { width: 1rem; height: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .blocking-update-button.htmx-request .icon-refresh,
  .blocking-update-button.is-updating .icon-refresh { animation-duration: 1.6s; }
  .mobile-header, .replica-read-only-banner { transition: none; }
}

.auth-body { display: grid; min-height: 100vh; place-items: center; padding: var(--space-6); }
.auth-shell { display: grid; width: min(28rem, 100%); gap: var(--space-4); }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 0.65rem; color: var(--foreground); }
.auth-brand strong { font-size: 1.5rem; font-weight: 700; }
.auth-card { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); padding: var(--space-6); color: var(--card-foreground); }
.auth-logo { display: grid; width: 3rem; height: 3rem; place-items: center; }
.auth-logo img { width: 100%; height: 100%; }
.auth-card h1 { margin: 0; font-size: 1.25rem; font-weight: 700; text-align: center; }
.auth-card > p { margin: 0.35rem 0 var(--space-6); color: var(--muted-foreground); text-align: center; }
.about-license-button { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.about-license-button:hover { text-decoration: underline; }
.license-dialog { width: min(32rem, calc(100vw - 2rem)); }
.license-dialog .license-content { max-height: min(28rem, 60dvh); margin-inline: -1.5rem; overflow: auto; }
.license-dialog .license-content pre { margin: 0; border-right: 0; border-left: 0; border-radius: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--foreground); font: .75rem/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
/* Third-party licenses: a row per piece of software that opens to its
   license. The dialog's list is the one scroll area, so an open license
   grows the list rather than scrolling inside it. */
.license-dialog .dialog-footer .third-party-licenses-button { margin-right: auto; }
.third-party-licenses-dialog { width: min(36rem, calc(100vw - 2rem)); }
.third-party-licenses section + section { margin-top: var(--space-2); }
.release-notes-content.third-party-licenses h3 { margin: var(--space-3) var(--space-6) var(--space-2); color: var(--muted-foreground); font-size: .75rem; font-weight: 600; }
.third-party-license { border-top: 1px solid var(--border); }
.third-party-license:last-child { border-bottom: 1px solid var(--border); }
.third-party-license > summary { display: grid; min-height: 2.75rem; grid-template-columns: minmax(0, 1fr) auto 1rem; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-6); cursor: pointer; list-style: none; }
.third-party-license > summary::-webkit-details-marker { display: none; }
.third-party-license > summary:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.third-party-license-name { overflow-wrap: anywhere; font-weight: 500; }
.third-party-license-kind { flex: none; border: 1px solid var(--border); border-radius: 999px; padding: .05rem var(--space-2); color: var(--muted-foreground); font-size: .6875rem; font-weight: 600; }
.third-party-license > summary .nav-icon { flex: 0 0 1rem; color: var(--muted-foreground); transition: transform 150ms ease; }
.third-party-license[open] > summary .nav-icon { transform: rotate(180deg); }
.third-party-license-text { display: grid; justify-items: start; gap: var(--space-2); border-top: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 25%, transparent); padding: var(--space-3) var(--space-6) var(--space-4); }
.third-party-license-link { display: inline-flex; max-width: 100%; align-items: center; gap: .35rem; font-size: .75rem; overflow-wrap: anywhere; }
.third-party-license-link .nav-icon { width: .8rem; height: .8rem; flex: 0 0 .8rem; }
.release-notes-content .third-party-license-text h4 { margin: var(--space-2) 0 0; font-size: .75rem; }
.license-dialog .license-content .third-party-license-text pre { max-height: none; overflow: visible; border: 0; background: transparent; padding: 0; }
.third-party-license-loading { color: var(--muted-foreground); font-size: .78rem; }
.auth-form { display: grid; gap: var(--space-4); }
.auth-form button { width: 100%; margin-top: var(--space-1); }
.integration-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin: 0; }
.integration-facts > div { display: grid; gap: 0.15rem; border-radius: calc(var(--radius) - 2px); background: var(--muted); padding: 0.6rem var(--space-3); }
.integration-facts dt { color: var(--muted-foreground); font-size: 0.75rem; }
/* The address is long, so it takes its own row above the short facts, which
   sit four across on a wide card and two by two on a narrow one. */
.mcp-card-body { container-type: inline-size; }
.mcp-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mcp-facts .integration-fact-address { grid-column: 1 / -1; }
@container (max-width: 36rem) { .mcp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The wizard's tool list follows the group permission picker: a checkbox per
   tool with the grant it needs pushed to the right, and no inner scrolling. */
.mcp-tool-sections .permission-surface .permission-checks { max-height: none; overflow: visible; border-bottom: 0; padding-bottom: 0; }
/* Rows sit flush, their padding keeping them apart, so both rows of sections
   fit a laptop window without scrolling. */
.mcp-tool-sections .permission-checks { gap: 0; }
.mcp-tool-sections .permission-checks label { align-items: center; padding: .3rem .45rem; }
.mcp-tool-sections .permission-checks input { margin: 0; }
.mcp-tool-sections .mcp-tool-grant { margin-left: auto; color: var(--muted-foreground); font-size: .625rem; white-space: nowrap; }
.mcp-tool-sections .permission-surface > header > .mcp-tool-section-title { display: flex; align-items: center; gap: .3rem; }
/* The info button sits after the title at the left, so its tooltip opens
   rightward instead of running off the dialog's edge. */
.mcp-section-info { color: var(--muted-foreground); }
.mcp-section-info .operational-metric-tooltip { right: auto; left: -.45rem; text-align: left; }
.mcp-section-info .operational-metric-tooltip::before { right: auto; left: .85rem; transform: translate(-50%, 50%) rotate(45deg); }
/* Keep the step bar close to the title and the list close to the bar. */
.mcp-setup-dialog[open] { gap: var(--space-2); }
.mcp-setup-form > .dialog-tab-panel { padding-top: var(--space-3); }
/* Three steps whose markers are the dialog's tabs: the chosen step is
   current, and every step before it, with the line after it, is complete. */
.wizard-progress.mcp-wizard-progress { width: min(100%, 20rem); grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto; justify-self: center; padding: 0 0 .4rem; }
.mcp-wizard-progress > button[aria-selected="true"] { color: var(--info); }
.mcp-wizard-progress > button[aria-selected="true"] > span { border-color: var(--info); background: rgb(59 130 246 / .12); }
.mcp-wizard-progress > button:has(~ button[aria-selected="true"]) { color: var(--success); }
.mcp-wizard-progress > button:has(~ button[aria-selected="true"]) > span { border-color: var(--success); background: rgb(34 197 94 / .12); }
.mcp-wizard-progress > i:has(~ button[aria-selected="true"]) { background: var(--success); }
.table-badges.mcp-grant-summary { max-width: none; }
.mcp-grant-summary code { font-size: .625rem; }
.mcp-group-form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
/* Buttons in the Access step size their icons like other console buttons;
   the flex basis is set too, or the icon keeps its larger default width. */
.mcp-group-form .button { display: inline-flex; align-items: center; gap: .45rem; }
.mcp-group-form .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
#mcp-access-group.wizard-panel.compact, #mcp-access-token.wizard-panel.compact { gap: var(--space-3); }
.mcp-access-token.is-waiting .wizard-heading { opacity: .6; }
#mcp-access-group .wizard-heading small strong { color: var(--foreground); font-size: inherit; font-weight: 600; }
.mcp-group-form .field-control { flex: 1 1 12rem; }
/* The join box matches the name field's height and centers its contents. */
.mcp-group-form .settings-check { display: inline-flex; box-sizing: border-box; height: 2.25rem; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); font-size: .8125rem; }
.mcp-group-form .settings-check input { margin: 0; }
#mcp-group-result:empty { display: none; }
.mcp-client-tabs .dialog-tab-list { margin: 0; }
.mcp-client-tabs .dialog-tab-panel { gap: var(--space-2); min-width: 0; padding: 0; }
.mcp-client-tabs .field-help { margin: 0; }
.mcp-client-tabs .dialog-tab { white-space: nowrap; }
@media (max-width: 480px) { .mcp-client-tabs .dialog-tab-list.four { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 1rem; } .mcp-client-tabs .dialog-tab-list.four .dialog-tab { border-radius: .75rem; } }
.integration-facts dd { overflow: hidden; margin: 0; font-size: 0.9375rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
/* An address puts its copy button beside the label and the address on its
   own line underneath, so its value lays its code and button into the tile. */
.integration-fact-address { grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
.integration-fact-address dd { display: contents; }
.integration-facts .integration-fact-address > dt { grid-column: 1; grid-row: 1; padding-right: 0; }
.integration-fact-address code { display: block; overflow: hidden; min-width: 0; grid-column: 1 / -1; grid-row: 2; text-overflow: ellipsis; white-space: nowrap; }
.integration-facts .integration-fact-address .fact-copy { position: static; grid-column: 2; grid-row: 1; }
.fact-copy { display: grid; width: 1.4rem; height: 1.4rem; grid-column: 2; grid-row: 1; place-items: center; border: 0; border-radius: 50%; background: transparent; padding: 0; color: var(--muted-foreground); }
.fact-copy:hover { background: color-mix(in oklch, var(--foreground) 9%, transparent); color: var(--foreground); }
.fact-copy:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.fact-copy > span { width: 100%; height: 100%; align-items: center; justify-content: center; line-height: 0; }
.fact-copy .copy-icon-default { display: flex; }
.fact-copy .copy-icon-success { display: none; }
.fact-copy .nav-icon { display: block; width: .8rem; height: .8rem; }
.fact-copy.is-copied .copy-icon-default { display: none; }
.fact-copy.is-copied .copy-icon-success { display: flex; color: var(--success); }
.sso-review-note { margin: 0; font-size: 0.8125rem; line-height: 1.5; }
.sso-badge { margin-left: 0.35rem; }
.signin-methods { display: grid; gap: var(--space-2); }
.signin-method-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: 0.65rem 0.85rem; }
.signin-method-row > div { display: grid; gap: 0.1rem; min-width: 0; }
.signin-method-row strong { font-size: 0.8125rem; }
.signin-method-row > div span { color: var(--muted-foreground); font-size: 0.75rem; line-height: 1.45; }
/* The subject is an opaque identifier and is usually a UUID. It is clipped to
   one line rather than allowed to set the row's height. */
.signin-method-subject { overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; text-overflow: ellipsis; white-space: nowrap; }
.signin-method-row form { flex-shrink: 0; }
.signin-method-row .button { white-space: nowrap; }
/* The wizard inherits the UniFi wizard's grid, which bounds the dialog and
   zeroes the grid minimums so only the step panel scrolls. Without that the
   panel grows past the viewport and drags the footer off screen. */
.sso-wizard-dialog { width: min(44rem, calc(100% - 3rem)); }
/* The dialog body styles every label as a bold grid, which leaves helper text
   inheriting the label's weight and colour. These re-quiet it inside the
   wizard rather than changing the shared rule every other dialog relies on. */
.sso-wizard-dialog .isotope-dialog-body { gap: 0.8rem; }
.sso-wizard-dialog .isotope-dialog-body label small { color: var(--muted-foreground); font-size: 0.75rem; font-weight: 400; line-height: 1.4; }
/* A checkbox is a row, not a stack: the shared label rule would put the box on
   its own line with its text underneath. */
.sso-wizard-dialog label.checkbox { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; }
.sso-wizard-dialog label.checkbox input { margin: 0; }
.sso-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.8rem; }
/* The shared label rule uses a child combinator, so a label nested one level
   down inside a field row matches nothing and renders unstyled. */
.sso-wizard-dialog .sso-field-row label { display: grid; gap: var(--space-2); font-size: 0.8125rem; font-weight: 500; }
.sso-presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: 0.8125rem; color: var(--muted-foreground); }
.sso-presets .button { height: 1.85rem; padding: 0 0.65rem; font-size: 0.8125rem; }
.sso-toggles, .sso-mappings { display: grid; gap: 0.6rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: 0.85rem var(--space-4); }
.sso-toggles legend, .sso-mappings legend { padding: 0 0.35rem; font-size: 0.8125rem; font-weight: 500; }
.sso-toggles label.checkbox { display: flex; align-items: flex-start; gap: var(--space-2); font-weight: 400; }
.sso-mappings small { color: var(--muted-foreground); font-size: 0.75rem; }
.sso-mapping-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; }
.sso-mapping-row .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.auth-sso { margin-bottom: var(--space-4); }
/* Scoped through .auth-sso so it outranks `.auth-form button`, which paints
   every button in the card as the primary action. Two primary buttons stacked
   would give the password form and the provider equal weight. */
.auth-sso .auth-sso-button { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: 0; border: 1px solid var(--border); background: var(--card); color: var(--card-foreground); }
.auth-sso .auth-sso-button:hover { background: var(--accent); opacity: 1; }
.auth-sso .auth-sso-button svg { width: 1rem; height: 1rem; }
.auth-divider { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); color: var(--muted-foreground); font-size: 0.8125rem; }
.auth-divider::before, .auth-divider::after { flex: 1; height: 1px; background: var(--border); content: ""; }
.auth-error { margin-bottom: var(--space-4); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklch, var(--destructive) 10%, transparent); padding: var(--space-3); color: var(--destructive); font-size: 0.875rem; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 1023px) {
  .content { padding: var(--space-4); }
	.page-columns { grid-template-columns: 1fr; }
	.page-main { grid-column: auto; }
	.cache-layout { grid-template-columns: 1fr; }
	.isotope-blocking-layout { grid-template-columns: 1fr; }
	.cache-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blocking-layout { grid-template-columns: 1fr; }
	.blocking-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.blocking-aside .tip-box { grid-column: 1 / -1; }
	.primary-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dashboard-rankings, .dashboard-distributions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  html.sidebar-mobile-open, html.sidebar-mobile-open body { overflow: hidden; }
  .app-shell { display: flex; gap: 0; padding: 0; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 16rem; height: 100dvh; flex-basis: 16rem; max-height: none; overflow: hidden; border-right: 1px solid var(--sidebar-border); background: var(--sidebar); box-shadow: .75rem 0 2rem rgb(0 0 0 / .18); transform: translateX(-100%); transition: transform 180ms ease; }
	.sidebar-rail, .sidebar-collapsed .sidebar-rail { display: none; }
  .sidebar-collapsed .sidebar { width: 16rem; flex-basis: 16rem; }
  .sidebar-collapsed .brand-copy, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-item > span, .sidebar-collapsed .user-copy, .sidebar-collapsed .user-action { display: grid; }
  .sidebar-collapsed .nav-item { justify-content: flex-start; padding: 0 var(--space-2); }
  .sidebar-collapsed .sidebar-header { padding-inline: var(--space-2); }
  .sidebar-collapsed .brand { width: auto; height: auto; flex: 1; justify-content: flex-start; padding: var(--space-2); margin-inline: 0; border-radius: 999px; }
  .sidebar-collapsed .sidebar-collapse { display: grid; }
	.sidebar-collapsed .command-palette-trigger { grid-template-columns: 1.25rem minmax(0, 1fr) auto; width: 100%; justify-items: stretch; padding: 0 var(--space-3); }
	.sidebar-collapsed .command-palette-trigger-label, .sidebar-collapsed .command-palette-trigger kbd { display: initial; }
	/* Mobile navigation is used by touch, so keep the full menu on a deliberate
	   48px rhythm instead of carrying over the compact desktop controls. */
	.sidebar-header { flex: 0 0 auto; padding: var(--space-3); }
	.sidebar-collapse { top: var(--space-3); right: .75rem; bottom: var(--space-3); width: 2.75rem; height: 2.75rem; }
	.sidebar-nav-wrap { flex: 1 1 auto; }
	.nav { padding: var(--space-1) var(--space-3) var(--space-3); }
	/* Keep the section break visible without spending a full touch target on it. */
	.nav-group { padding: .375rem 0; }
	.nav-label { height: 2.5rem; padding: .625rem var(--space-3); font-size: .8125rem; }
	.nav-item, .sidebar-collapsed .nav-item { height: 3rem; min-height: 3rem; gap: var(--space-3); padding: 0 var(--space-4); font-size: .9375rem; }
	.nav-item + .nav-item { margin-top: .35rem; }
	.nav-icon { width: 1.25rem; height: 1.25rem; flex-basis: 1.25rem; }
	.sidebar-bottom { flex: 0 0 auto; gap: var(--space-2); margin-top: 0; background: var(--sidebar); padding: var(--space-3) var(--space-3) max(.75rem, env(safe-area-inset-bottom)); }
	.command-palette-trigger { height: 3rem; padding-inline: var(--space-4); font-size: .875rem; }
	.user-menu { min-height: 3rem; padding: .375rem var(--space-3); }
	.avatar { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; }
	.user-action { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
	.account-popover { left: 50%; transform: translateX(-50%); }
	.sidebar-mobile-open .sidebar { transform: translateX(0); }
  /* The open menu leaves the page inert, like a dialog does, so its scrim
     blurs and fades in the way dialog backdrops do. */
  .sidebar-scrim { position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
  .sidebar-mobile-open .sidebar-scrim { display: block; animation: backdrop-in 150ms ease-out; }
  /* A swipe moves the drawer and scrim with the finger, so neither eases. */
  .sidebar-dragging .sidebar, .sidebar-dragging .sidebar-scrim { transition: none !important; animation: none !important; }
  .main { min-height: 100vh; overflow: visible; border: 0; border-radius: 0; box-shadow: none; }
  /* The header sticks so navigation stays one tap away, but slides out of the
     way while reading down a long page and comes back on the first scroll up. */
  .mobile-header { position: sticky; top: 0; z-index: 15; display: flex; height: 3.5rem; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); background: var(--background); transition: transform 180ms ease; }
  .mobile-header button { position: absolute; left: 1rem; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 0; border-radius: 50%; background: transparent; }
	.mobile-header [data-sidebar-toggle] .nav-icon { width: 1.25rem; height: 1.25rem; }
	.mobile-header .mobile-command-palette-trigger { right: 1rem; left: auto; }
  .mobile-header-brand { display: inline-flex; height: 2.75rem; align-items: center; border-radius: 0.375rem; padding-inline: var(--space-3); font-size: 1.125rem; font-weight: 700; }
  .mobile-header-hidden .mobile-header { transform: translateY(-100%); }
  /* The banner parks below the header and slides up with it, so the two never
     stack on top of each other at the same sticky offset. */
  .replica-read-only-banner { top: 3.5rem; transition: top 180ms ease; }
  .mobile-header-hidden .replica-read-only-banner { top: 0; }
  .content { padding: var(--space-4); }
  .chart-card { min-height: 23rem; }
  .chart-wrap { height: 15rem; padding-inline: var(--space-4); }
  .range-tabs button { padding-inline: var(--space-2); }
	.dashboard-rankings, .dashboard-distributions { grid-template-columns: 1fr; }
	.zone-dnssec-nsec3 { grid-template-columns: 1fr; }
	.styled-time-popover { width: 100%; }
	.range-times .styled-time-popover { width: calc(200% + .5rem); }
}

@media (max-width: 639px) {
	.command-palette { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); margin: var(--space-2) auto; border-radius: .7rem; }
	.command-palette-search { grid-template-columns: 1.25rem minmax(0, 1fr) 2rem; padding-left: .8rem; }
	.command-palette-search > kbd { display: none; }
	.command-palette-search-scope { grid-template-columns: 2rem minmax(0, 1fr); }
	.command-palette-search-modes { grid-column: 2; justify-self: start; }
	.command-palette [data-command-item] { grid-template-columns: 2rem minmax(0, 1fr); }
	.command-palette-option-kind { display: none; }
	.command-palette-footer { justify-content: center; }
	.command-palette-footer span:first-child { display: none; }
}

@media (max-width: 639px) {
	.notification-stack, .toast-region { right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); left: .75rem; width: auto; }
	.notification-stack { max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
	.notification-stack > .toast-region { right: auto; bottom: auto; left: auto; width: 100%; }
	.dashboard-footer { flex-wrap: wrap; justify-content: center; gap: .45rem var(--space-4); border-top: 1px solid var(--border); padding: .85rem var(--space-1) max(.75rem, env(safe-area-inset-bottom)); text-align: center; }
	.dashboard-footer-status { order: 1; }
	.dashboard-footer-version { order: 2; }
	.dashboard-footer-version::before { margin-right: var(--space-4); content: "•"; }
	.dashboard-footer-details { order: 3; flex: 0 0 100%; align-items: center; flex-direction: column; justify-content: center; gap: .3rem; }
	.dashboard-footer-detail-line { gap: .65rem; }
	.dashboard-footer-details span { white-space: nowrap; }
	.dashboard-footer-detail-line span + span::before { margin-right: .65rem; content: "•"; }
	.stats-overview-header { align-items: flex-start; }
	.stats-overview-heading { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
	.stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .stat-card { min-height: 5.5rem; padding: 0.7rem var(--space-3); }
  .stat-card strong { font-size: 1.25rem; }
  .card-header { padding-inline: var(--space-4); }
	.chart-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .625rem var(--space-4); }
	.chart-header .chart-live { margin-left: 0; justify-self: end; }
	.range-tabs { display: none; }
	.range-select { display: block; grid-column: 1; grid-row: 2; }
	.range-select select, .range-select .styled-select { width: 100%; }
	.range-custom-mobile { display: inline-flex; grid-column: 2; grid-row: 2; align-items: center; }
	.query-composer { padding: var(--space-4); }
	.query-primary-row { display: grid; grid-template-columns: 1fr 1fr; }
	.query-primary-row .search-field { grid-column: span 2; min-width: 0; }
	.record-type-select { width: 100%; }
	.resolve-button { justify-content: center; }
	.query-options-row { display: grid; grid-template-columns: 1fr 1fr; }
	.resolver-combobox, .query-options-row .transport-picker, .query-options-row .edns-subnet { width: auto; }
	.resolver-combobox { grid-column: span 2; }
	.resolver-popover { width: 100%; }
	/* Stacked on a phone, the main button (last in every footer) goes on top,
	   and the one that just closes the dialog, such as Cancel or Done, goes to
	   the bottom, the way iOS stacks them. */
	.dialog-footer { flex-direction: column-reverse; }
	.dialog-footer > [data-dialog-close] { order: -1; }
	.dialog-footer .button { width: 100%; }
	.isotope-record-dialog { width: calc(100vw - 1rem); max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
	.isotope-record-dialog > .dialog-header { padding: var(--space-5) var(--space-12) .85rem var(--space-4); }
	.isotope-record-dialog-body { gap: var(--space-5); padding: var(--space-4); }
	.edit-record-type { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .65rem; }
	.edit-record-type small { overflow: visible; line-height: 1.4; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
	.edit-record-type .record-enabled { grid-column: 1 / -1; margin-left: 0; }
	.chart-range-popover { top: 6.5rem; right: 1rem; }
	.result-metadata { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
	.dns-result-header { align-items: stretch; flex-direction: column; padding-inline: var(--space-4); }
	.copy-response { width: 100%; }
	.result-content { padding-inline: var(--space-4); }
	.record-row { gap: var(--space-2); padding-inline: var(--space-3); }
	.record-ttl { min-width: 3.5rem; flex-basis: 3.5rem; }
	.cache-card-header { padding: var(--space-5); }
	.cache-card-body { padding: var(--space-4); }
	.cache-stat-grid, .cache-actions, .cache-aside { grid-template-columns: 1fr; }
	.cache-actions { margin-inline: -1rem; padding-inline: var(--space-4); }
	.operational-metric { min-height: 4.5rem; padding: .8rem .9rem; }
	.cache-actions p { min-height: 0; }
	.cache-browser-dialog > .dialog-header { padding: var(--space-4) var(--space-12) 0 var(--space-4); }
	.cache-browser-body { padding: var(--space-4); }
	.cache-record-row { grid-template-columns: 1fr auto; }
	.cache-record-row > span { grid-column: 1; }
	.cache-record-row > code { grid-column: 1 / -1; grid-row: 2; }
	.chart-live { margin-left: 0; }
	.distribution-content { flex-direction: column; }
	.blocking-aside { grid-template-columns: 1fr; }
	.blocking-aside .tip-box { grid-column: auto; }
	.blocking-panel { padding: var(--space-4); }
	.blocking-panel > header { align-items: stretch; flex-direction: column; }
	.domain-list-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
	.domain-list-toolbar > .button, .domain-list-toolbar > .domain-import-form { width: 100%; min-width: 0; }
	.domain-list-toolbar > .button, .domain-list-toolbar > .domain-import-form > .button { white-space: nowrap; }
	.domain-list-toolbar > .domain-import-form > .button { width: 100%; }
	.domain-list-add { grid-area: 1 / 1; }
	.domain-list-clear { grid-area: 1 / 2; }
	.domain-list-import { grid-area: 2 / 1; }
	.domain-list-export { grid-area: 2 / 2; }
	.blocking-source-row { grid-template-columns: 2rem minmax(0, 1fr); padding-inline: var(--space-3); }
	.blocking-source-row .source-status { display: none; }
	.blocking-status-card { padding: var(--space-4); }
	.blocking-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-6) -1rem -1rem; padding-inline: var(--space-3); }
	.blocking-quick-actions > .button, .blocking-quick-actions > .pause-menu, .pause-menu > summary { min-width: 0; width: 100%; }
	.blocking-quick-actions > .button, .pause-menu > summary { justify-content: center; padding-inline: .6rem; font-size: .8rem; white-space: nowrap; }
	.blocking-status-stats { grid-template-columns: 1fr; margin-top: var(--space-5); }
	.blocking-quick-actions > small { display: inline-flex; grid-column: 1 / -1; width: auto; flex-wrap: nowrap; align-items: baseline; gap: var(--space-1); margin-left: 0; justify-self: center; color: var(--muted-foreground); text-align: center; }
	.blocking-quick-actions > small span { font-size: inherit; font-weight: 400; }
	.blocking-quick-actions > small span::after { content: ":"; }
	.blocking-quick-actions > small strong { color: inherit; font-size: inherit; font-weight: 400; }
	.blocking-workspace > .blocking-tabs span { display: none; }
	.blocking-list-toolbar { align-items: stretch; flex-direction: column; }
	.blocking-list-toolbar form label { justify-content: flex-end; }
	.isotope-source-row { grid-template-columns: 1.5rem minmax(0, 1fr) 2rem 2rem; }
	.catalog-tabs { grid-template-columns: repeat(3, 1fr); }
	.catalog-dialog { width: calc(100vw - 1rem); }
	.catalog-row { grid-template-columns: minmax(0, 1fr) 2.25rem 2.25rem; padding-inline: var(--space-3); }
	.catalog-row .button { padding: 0; }
	.catalog-row .catalog-added > span, .catalog-row .block-list-add-idle > span { display: none; }
	.isotope-zone-heading h1 { font-size: 1.5rem; }
	.isotope-zone-heading p { font-size: .78rem; }
	.isotope-zone-heading .zone-primary-action span { display: none; }
	.isotope-zone-heading .zone-primary-action { width: 2.25rem; padding: 0; }
	.zone-filter-bar { align-items: stretch; flex-direction: column; }
	.zone-filter-selects { width: 100%; }
	.zone-filter-selects label { flex: 1; width: auto; }
	.zone-desktop-badges { display: none; }
	.zone-mobile-badges { display: flex; }
	.isotope-zone-row { min-height: 4.2rem; padding-left: var(--space-3); }
	.zone-more-button { opacity: 1; }
	.zone-records-heading { gap: var(--space-1); }
	.zone-records-title h1 { font-size: 1.1rem; }
	.zone-records-title > div { flex-wrap: wrap; }
	.zone-records-actions { gap: .3rem; }
	.zone-records-actions .zone-primary-action { width: 2.25rem; padding: 0; }
	.zone-records-actions .zone-primary-action span { display: none; }
	.zone-history-dialog { width: calc(100vw - 1rem); max-height: 92dvh; }
	.zone-history-dialog > .dialog-header { padding: var(--space-5) var(--space-12) .85rem var(--space-4); }
	.zone-history-entry > summary { padding-inline: .85rem; }
	.zone-history-diff { padding: .85rem; }
	.zone-history-diff-heading { align-items: stretch; flex-direction: column; }
	.zone-history-rollback, .zone-history-rollback .button { width: 100%; }
	.zone-history-rollback .button { justify-content: center; }
	.zone-record-filter-bar { flex-direction: row; }
	.zone-record-type-filter { width: 7.5rem; }
	.isotope-record-row { grid-template-columns: 3.25rem minmax(0, 1fr) 3.5rem 1.75rem; gap: var(--space-2); padding-inline: var(--space-3); }
	.record-value-copy { display: none; }
	.zone-copyable button { opacity: 1; }
	.record-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.record-more-types { width: 100%; }
	.record-field-grid.two, .record-field-grid.three, .record-field-grid.four, .record-field-grid.mx, .record-field-grid.caa { grid-template-columns: 1fr; }
	.record-advanced-grid { grid-template-columns: 1fr; }
	.edit-record-footer { display: flex; }
	.edit-record-delete { margin-right: 0; }
	}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Settings and administration control plane */
.built-in-badge, .current-badge, .status-badge { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; background: var(--muted); padding: .2rem .6rem; color: var(--muted-foreground); font-size: .68rem; font-weight: 600; line-height: 1.4; }
.settings-check { display: flex; align-items: flex-start; gap: .7rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .8rem; cursor: pointer; }
.settings-check input, .role-checks input, .permission-checks input { width: 1rem; height: 1rem; flex: 0 0 1rem; margin: .1rem 0 0; }
.settings-check > span { display: grid; gap: .2rem; }
.settings-check strong { font-size: .8rem; }
.read-only-field { display: grid; gap: .3rem; border: 1px dashed var(--border); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklch, var(--muted) 40%, transparent); padding: .8rem; }
.read-only-field > span { color: var(--muted-foreground); font-size: .7rem; }
.attached-network-list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.attached-network-list li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-width: 0; }
.attached-network-list code { min-width: 0; font-family: var(--font-mono, monospace); font-size: .8rem; overflow-wrap: anywhere; }
.attached-network-list small { flex: none; }
.attached-networks > strong { font-size: .8rem; font-weight: 500; }
/* The networks only matter while private access is chosen. */
.settings-panel-stack:not(:has(select[name="recursion"] option[value="private"]:checked)) .attached-networks { display: none; }
.status-badge.success { background: rgb(34 197 94 / .13); color: var(--success-strong); }
.dark .status-badge.success { color: var(--success); }
.status-badge.danger { background: color-mix(in srgb, var(--destructive) 14%, transparent); color: var(--destructive); }
.current-badge { background: rgb(59 130 246 / .13); color: var(--info); }
.built-in-badge { margin-left: .2rem; }
.role-checks, .permission-checks { display: grid; gap: .4rem; }
.role-checks label, .permission-checks label { display: flex; align-items: flex-start; gap: .55rem; border-radius: .4rem; padding: .45rem; cursor: pointer; }
.role-checks label:hover, .permission-checks label:hover { background: var(--muted); }
.role-checks label > span { display: grid; gap: .1rem; }
.role-checks strong { font-size: .75rem; }
.role-checks small { color: var(--muted-foreground); font-size: .65rem; }
.token-creation-fields { display: grid; gap: var(--space-4); }
.token-creation-fields > label { display: grid; gap: var(--space-2); font-size: .8125rem; font-weight: 500; }
.admin-empty { min-height: 6rem; padding: var(--space-4); font-size: .8rem; }

/* Isotope control-plane pages. These mirror the React/shadcn source layout. */
.cluster-layout { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(17rem, 1fr); align-items: start; gap: var(--space-6); }
.cluster-main-column, .cluster-aside { display: grid; min-width: 0; align-content: start; gap: var(--space-5); }
.cluster-live-status { display: grid; min-width: 0; gap: var(--space-5); }
.cluster-status-card { overflow: hidden; }
.cluster-status-card > header { display: flex; min-height: 5rem; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border); padding: var(--space-5) var(--space-6); }
.cluster-status-card > header > div:first-child { min-width: 0; flex: 1 1 16rem; }
.cluster-status-card > header h2 { display: flex; min-width: 0; align-items: center; gap: .6rem; margin: 0; font-size: var(--status-card-title-size); }
.cluster-status-card > header h2 > span { min-width: 0; }
.cluster-status-card > header h2 .nav-icon { width: var(--status-card-title-icon-size); height: var(--status-card-title-icon-size); color: var(--info); }
.cluster-status-card > header p { margin: .35rem 0 0; color: var(--muted-foreground); font-size: .8rem; }
.cluster-empty-state { min-height: 18rem; gap: .55rem; padding: var(--space-8); }
.cluster-empty-state > .empty-state-icon { width: 3.5rem; height: 3.5rem; border-radius: 999px; background: var(--muted); }
.cluster-empty-state > .empty-state-icon .nav-icon { width: 1.65rem; height: 1.65rem; }
.cluster-empty-state h3 { margin: .4rem 0 0; font-size: 1.05rem; }
.cluster-empty-state p { max-width: 28rem; font-size: .8rem; line-height: 1.5; }
.cluster-restart-notice { display: flex; max-width: 30rem; align-items: center; gap: var(--space-2); border: 1px solid var(--warning-strong); border-radius: .5rem; background: rgb(217 119 6 / .08); padding: .65rem .8rem; color: color-mix(in oklch, var(--warning-strong) 72%, var(--foreground)); font-size: .72rem; line-height: 1.4; text-align: left; }
.cluster-restart-notice .nav-icon { width: .95rem; height: .95rem; flex: 0 0 .95rem; }
.cluster-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: var(--space-3); }
.cluster-empty-actions .button { display: inline-flex; align-items: center; gap: .45rem; }
.cluster-live-indicator { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted-foreground); font-size: .72rem; font-weight: 600; }
.cluster-live-indicator i { width: .5rem; height: .5rem; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 .2rem rgb(16 185 129 / .12); }
.cluster-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-3); }
.cluster-header-actions .button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .35rem; white-space: nowrap; }
.cluster-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-6); }
.cluster-identity { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4); border-top: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 45%, transparent); padding: var(--space-3) var(--space-6); color: var(--muted-foreground); font-size: .7rem; }
.cluster-identity > div { display: grid; min-width: 0; gap: .2rem; }
.cluster-identity span { font-weight: 600; }
.cluster-identity strong { overflow: hidden; color: var(--foreground); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.cluster-identity code { color: var(--foreground); font-size: .75rem; overflow-wrap: anywhere; }
.cluster-nodes-card { overflow: hidden; }
.cluster-nodes-card > header { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
.cluster-nodes-card > header h2 { margin: 0; font-size: 1rem; }
.cluster-nodes-card > header p { margin: var(--space-1) 0 0; color: var(--muted-foreground); font-size: .72rem; }
.cluster-updated-badge { flex: 0 0 auto; gap: .35rem; font-weight: 500; white-space: nowrap; }
.cluster-updated-badge .nav-icon { width: .75rem; height: .75rem; }
.cluster-node-row { display: grid; min-height: 5rem; gap: var(--space-4); border-top: 1px solid var(--border); padding: var(--space-5) var(--space-6); }
.cluster-node-heading { display: flex; min-width: 0; align-items: center; gap: var(--space-4); }
.cluster-node-icon { position: relative; display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; border-radius: .5rem; background: var(--muted); color: var(--muted-foreground); }
.cluster-node-icon.local { background: rgb(59 130 246 / .12); color: var(--info); }
.cluster-node-state-dot { position: absolute; right: -.15rem; bottom: -.15rem; width: .6rem; height: .6rem; border: 2px solid var(--card); border-radius: 999px; background: var(--muted-foreground); box-shadow: 0 0 0 1px color-mix(in oklch, var(--muted-foreground) 18%, transparent); }
.cluster-node-icon.online .cluster-node-state-dot { background: var(--success); box-shadow: 0 0 0 1px rgb(34 197 94 / .22); }
.cluster-node-icon.unreachable .cluster-node-state-dot { background: var(--danger); box-shadow: 0 0 0 1px rgb(239 68 68 / .22); }
.cluster-node-icon .nav-icon { width: 1.1rem; height: 1.1rem; }
.cluster-node-copy { display: grid; min-width: 0; flex: 1; gap: .35rem; }
.cluster-node-copy > div { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.cluster-node-copy strong { font-size: .82rem; }
.cluster-node-copy code, .cluster-node-copy small { overflow: hidden; color: var(--muted-foreground); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.cluster-node-portal { display: inline-flex; width: fit-content; max-width: 100%; min-width: 0; align-items: center; gap: var(--space-1); color: var(--primary); font-size: .68rem; font-weight: 500; }
.cluster-node-portal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cluster-node-portal:hover { text-decoration: underline; }
.cluster-node-portal .nav-icon { width: .7rem; height: .7rem; flex: 0 0 .7rem; }
.cluster-node-meta { display: grid; flex: 0 0 auto; justify-items: end; gap: .15rem; font-size: .68rem; }
.cluster-node-meta > span, .cluster-node-meta > small { color: var(--muted-foreground); }
.cluster-node-meta > span { text-transform: capitalize; }
.cluster-node-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.cluster-node-actions.split { width: 100%; justify-content: space-between; }
.cluster-node-actions form { margin: 0; }
/* A node's panel puts Promote and Remove on their own row, above Copy Link,
   so neither row wraps in a narrow panel. */
.query-detail-footer:has(> .cluster-node-actions) { flex-wrap: wrap; }
.query-detail-footer > .cluster-node-actions { order: -1; width: 100%; flex-wrap: nowrap; }
.query-detail-footer > .cluster-node-actions .button { gap: .45rem; white-space: nowrap; }
.query-detail-footer > .cluster-node-actions .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.cluster-node-details { display: grid; gap: var(--space-4); }
.cluster-node-details .cluster-node-portal { font-size: .8125rem; }
.cluster-node-note { margin: 0; color: var(--muted-foreground); font-size: .8125rem; }
.block-list-failure { margin-bottom: var(--space-3); }
.cluster-remove-node { border-color: rgb(239 68 68 / .45); color: var(--danger); }
.cluster-remove-node:hover { border-color: var(--danger); background: rgb(239 68 68 / .12); color: var(--danger); }
.cluster-remove-node .nav-icon { width: .9rem; height: .9rem; }
.cluster-sync-badge { display: inline-flex; width: fit-content; align-items: center; border-radius: 999px; background: var(--muted); padding: .2rem .6rem; color: var(--muted-foreground); font-size: .68rem; font-weight: 600; line-height: 1.4; }
.cluster-sync-badge.current { background: rgb(6 182 212 / .13); color: #0891b2; }
.cluster-sync-badge.unverified { background: rgb(245 158 11 / .13); color: var(--warning-strong); }
.cluster-sync-badge.behind { background: rgb(239 68 68 / .13); color: var(--danger); }
.cluster-sync-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.cluster-sync-progress progress { width: 100%; height: .35rem; overflow: hidden; border: 0; border-radius: 999px; background: var(--muted); appearance: none; }
.cluster-sync-progress progress::-webkit-progress-bar { border-radius: 999px; background: var(--muted); }
.cluster-sync-progress progress::-webkit-progress-value { border-radius: 999px; background: #06b6d4; }
.cluster-sync-progress progress::-moz-progress-bar { border-radius: 999px; background: #06b6d4; }
.cluster-sync-indeterminate { position: relative; width: 100%; height: .35rem; overflow: hidden; border-radius: 999px; background: var(--muted); }
.cluster-sync-indeterminate::after { position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, #06b6d4 0, #06b6d4 7px, #0891b2 7px, #0891b2 14px); background-size: 20px 20px; content: ""; animation: cluster-sync-stripes .7s linear infinite; }
@keyframes cluster-sync-stripes { to { background-position: 20px 0; } }
.cluster-sync-progress span { color: var(--muted-foreground); font-size: .67rem; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cluster-sync-indeterminate::after { animation: none; } }
.cluster-sync-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.cluster-sync-grid > div { display: grid; min-width: 0; gap: .2rem; border-left: 1px solid var(--border); padding-left: var(--space-3); }
.cluster-sync-grid > div:first-child { border-left: 0; padding-left: 0; }
.cluster-sync-grid span { color: var(--muted-foreground); font-size: .65rem; }
.cluster-sync-grid strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.cluster-danger-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); }
.cluster-danger-card h2 { margin: 0; font-size: 1rem; }
.cluster-danger-card p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: .75rem; }
.cluster-danger-card small { display: block; margin-top: .35rem; color: var(--muted-foreground); font-size: .7rem; }
.cluster-danger-card form, .cluster-danger-card .button { flex: 0 0 auto; }
.cluster-danger-card .button { display: inline-flex; align-items: center; gap: .45rem; }
.cluster-guidance, .cluster-details { padding: var(--space-5); }
.cluster-details header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 1.2rem; }
.cluster-details header h2 { margin: 0; }
.cluster-details .status-badge { width: fit-content; }
.cluster-details .button { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .45rem; margin-top: 1.1rem; }
.status-badge.warning { background: rgb(245 158 11 / .13); color: var(--warning-strong); }
.cluster-guidance h2, .cluster-details h2 { margin: 0 0 1.2rem; font-size: 1rem; }
.cluster-guidance > div { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4); }
.cluster-guidance i { width: .5rem; height: .5rem; flex: 0 0 .5rem; margin-top: .35rem; border-radius: 50%; }
.cluster-guidance i.blue { background: var(--info); } .cluster-guidance i.green { background: var(--success); } .cluster-guidance i.purple { background: #a855f7; }
.cluster-guidance p { display: grid; gap: .2rem; margin: 0; }
.cluster-guidance strong { font-size: .8rem; } .cluster-guidance span { color: var(--muted-foreground); font-size: .75rem; line-height: 1.45; }
.warning-box { border: 1px solid var(--warning-strong); border-radius: var(--radius); background: rgb(217 119 6 / .08); padding: var(--space-4); color: color-mix(in oklch, var(--warning-strong) 70%, var(--foreground)); font-size: .75rem; line-height: 1.5; }
.cluster-details dl { display: grid; margin: 0; }
.cluster-details dl > div { display: grid; gap: var(--space-1); border-top: 1px solid var(--border); padding: var(--space-3) 0; }
.cluster-details dl > div:first-child { border-top: 0; padding-top: 0; }
.cluster-details dt { color: var(--muted-foreground); font-size: .68rem; }
.cluster-details dd { min-width: 0; margin: 0; font-size: .75rem; font-weight: 600; overflow-wrap: anywhere; }
.cluster-dialog { width: min(calc(100% - 2rem), 34rem); padding: 0; }
.cluster-dialog > .dialog-header { padding: var(--space-6) var(--space-6) var(--space-2); }
.cluster-dialog > .dialog-footer, .cluster-dialog form > .dialog-footer { border-top: 1px solid var(--border); padding: var(--space-4) var(--space-6); }
.cluster-dialog textarea { width: 100%; resize: vertical; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); outline: 0; background: transparent; padding: .65rem var(--space-3); color: inherit; font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.cluster-dialog textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.cluster-dialog label small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.45; }
.cluster-onboarding-dialog { width: min(calc(100% - 2rem), 38rem); max-height: min(90vh, 42rem); overflow: hidden; }
.cluster-onboarding-dialog[open] { grid-template-rows: auto minmax(0, 1fr); gap: 0; }
.cluster-onboarding-dialog > form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.cluster-onboarding-dialog > form > .isotope-dialog-body, .cluster-onboarding-dialog > .isotope-dialog-body { overflow-y: auto; }
.cluster-onboarding-dialog .dialog-header { padding: var(--space-5) var(--space-6) var(--space-3); }
.cluster-onboarding-dialog .isotope-dialog-body { gap: var(--space-3); padding: var(--space-4) var(--space-6) 1.2rem; }
.wizard-progress,
.cluster-wizard-progress { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto; align-items: start; padding: 0 var(--space-2) .4rem; }
.wizard-progress > div,
.cluster-wizard-progress > div { display: grid; justify-items: center; gap: .3rem; color: var(--muted-foreground); }
.wizard-progress > div > span,
.cluster-wizard-progress > div > span { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--background); font-size: .66rem; font-weight: 700; }
.wizard-progress > div > span .nav-icon,
.cluster-wizard-progress > div > span .nav-icon { width: .78rem; height: .78rem; }
.wizard-progress > div > small,
.cluster-wizard-progress > div > small { font-size: .64rem; font-weight: 600; }
.wizard-progress > div.current,
.cluster-wizard-progress > div.current { color: var(--info); }
.wizard-progress > div.current > span,
.cluster-wizard-progress > div.current > span { border-color: var(--info); background: rgb(59 130 246 / .12); }
.wizard-progress > div.complete,
.cluster-wizard-progress > div.complete { color: var(--success); }
.wizard-progress > div.complete > span,
.cluster-wizard-progress > div.complete > span { border-color: var(--success); background: rgb(34 197 94 / .12); }
.wizard-progress > i,
.cluster-wizard-progress > i { height: 1px; margin-top: .85rem; background: var(--border); }
.wizard-progress > div.complete + i,
.cluster-wizard-progress > div.complete + i { background: var(--success); }
.wizard-panel,
.cluster-wizard-panel { display: grid; gap: .8rem; }
.wizard-panel[hidden],
.cluster-wizard-panel[hidden] { display: none; }
.cluster-wizard-panel > label,
.cluster-certificate-panel > label,
.cluster-certificate-panel .field-grid > label { display: grid; min-width: 0; align-content: start; gap: var(--space-2); font-size: .8125rem; font-weight: 500; line-height: 1.35; }
.wizard-heading,
.cluster-wizard-heading { display: flex; align-items: center; gap: .7rem; border-top: 1px solid var(--border); padding-top: .8rem; }
.wizard-heading > span,
.cluster-wizard-heading > span { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .5rem; background: rgb(59 130 246 / .12); color: var(--info); }
.wizard-heading > span .nav-icon,
.cluster-wizard-heading > span .nav-icon { width: 1.1rem; height: 1.1rem; }
.wizard-heading > div,
.cluster-wizard-heading > div { display: grid; gap: .15rem; }
.wizard-heading strong,
.cluster-wizard-heading strong { font-size: .9rem; }
.wizard-heading small,
.cluster-wizard-heading small { color: var(--muted-foreground); font-size: .72rem; }
.cluster-wizard-advanced { border-top: 1px solid var(--border); padding-top: .85rem; }
.cluster-wizard-advanced > summary { width: fit-content; cursor: pointer; color: var(--muted-foreground); font-size: .72rem; font-weight: 600; }
.cluster-wizard-advanced[open] > summary { margin-bottom: .85rem; }
.cluster-wizard-advanced > label { display: grid; gap: .45rem; font-size: .78rem; font-weight: 500; }
.cluster-certificate-section { display: grid; gap: .65rem; }
.cluster-certificate-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.cluster-certificate-choices > label { position: relative; min-width: 0; cursor: pointer; }
.cluster-certificate-choices > label > span { display: grid; min-height: 3.7rem; justify-items: center; align-content: center; gap: .12rem; border: 1px solid var(--border); border-radius: .5rem; padding: .4rem .55rem; color: var(--muted-foreground); text-align: center; }
.cluster-certificate-choices > label.active > span { border-color: var(--info); background: rgb(59 130 246 / .08); color: var(--foreground); box-shadow: 0 0 0 1px var(--info); }
.cluster-certificate-choices .nav-icon { width: .9rem; height: .9rem; margin-bottom: .08rem; }
.cluster-certificate-choices strong { max-width: 100%; overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.cluster-certificate-choices small { font-size: .62rem; font-weight: 400; white-space: nowrap; }
.cluster-certificate-panel { display: grid; gap: .65rem; }
.cluster-certificate-panel[hidden], .cluster-acme-credentials [hidden] { display: none; }
.cluster-dialog-note.compact { padding: .65rem .7rem; }
.cluster-certificate-advanced { border-top: 1px solid var(--border); padding-top: .65rem; }
.cluster-certificate-advanced > summary { display: flex; width: 100%; align-items: center; gap: .45rem; cursor: pointer; list-style: none; color: var(--muted-foreground); font-size: .72rem; font-weight: 600; }
.cluster-certificate-advanced > summary::-webkit-details-marker { display: none; }
.cluster-certificate-advanced > summary .nav-icon { width: .85rem; height: .85rem; flex: 0 0 .85rem; }
.cluster-certificate-advanced > summary .icon-chevron-down { margin-left: auto; transition: transform .16s ease; }
.cluster-certificate-advanced[open] > summary .icon-chevron-down { transform: rotate(180deg); }
.cluster-certificate-advanced-content { display: grid; grid-template-columns: minmax(7rem, .35fr) minmax(0, 1fr); align-items: start; gap: var(--space-3); padding-top: var(--space-3); }
.cluster-certificate-advanced-content > label { display: grid; min-width: 0; gap: .45rem; font-size: .78rem; font-weight: 500; }
.cluster-acme-credentials { display: grid; gap: .85rem; }
.cluster-restart-step { display: grid; justify-items: center; gap: .55rem; border-top: 1px solid var(--border); padding: var(--space-8) var(--space-4) var(--space-4); text-align: center; }
.cluster-restart-step > span { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; background: rgb(59 130 246 / .12); color: var(--info); }
.cluster-restart-step > span .nav-icon { width: 1.35rem; height: 1.35rem; }
.cluster-restart-step h3 { margin: var(--space-1) 0 0; font-size: 1rem; }
.cluster-restart-step p { max-width: 27rem; margin: 0; color: var(--muted-foreground); font-size: .75rem; line-height: 1.5; }
.cluster-onboarding-dialog > [data-sable-restart] { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
[data-sable-restart] > .isotope-dialog-body { overflow-y: auto; }
[data-sable-restart] > .dialog-footer { align-items: center; border-top: 1px solid var(--border); padding: var(--space-4) var(--space-6); }
[data-sable-restart] > .dialog-footer [data-sable-restart-button] { display: inline-flex; align-items: center; gap: .45rem; }
[data-sable-restart] > .dialog-footer [data-sable-restart-button] .nav-icon { width: 1rem; height: 1rem; }
[data-sable-restart].is-restarting .cluster-restart-step > span .nav-icon,
[data-sable-restart].is-restarting [data-sable-restart-button] .nav-icon { animation: blocking-refresh-spin .8s linear infinite; }
[data-sable-restart].is-restarting [data-restart-exit] { pointer-events: none; opacity: .5; }
.cluster-onboarding-dialog .dialog-footer [hidden] { display: none; }
.cluster-settings-dialog { width: min(calc(100% - 2rem), 46rem); max-height: min(90vh, 42rem); overflow: hidden; padding: 0; }
.cluster-settings-dialog[open] { grid-template-rows: auto auto minmax(0, 1fr); gap: 0; }
.cluster-settings-dialog > .dialog-header { padding: var(--space-6) var(--space-6) 1.1rem; }
.cluster-settings-dialog > form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.cluster-settings-dialog .dialog-footer [hidden] { display: none; }
.cluster-dialog-note.success { border-color: color-mix(in oklch, var(--success) 45%, var(--border)); background: rgb(34 197 94 / .08); }
.cluster-dialog-note.success > .nav-icon { color: var(--success); }
.cluster-dialog-note { display: flex; gap: .7rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: .8rem; }
.cluster-dialog-note > .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; margin-top: .1rem; color: var(--info); }
.cluster-dialog-note p { display: grid; gap: .2rem; margin: 0; }
.cluster-dialog-note strong { font-size: .75rem; } .cluster-dialog-note span { color: var(--muted-foreground); font-size: .7rem; line-height: 1.4; }
.cluster-token-value { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); padding: .4rem .4rem .4rem var(--space-3); }
.cluster-token-value code { display: block; min-width: 0; overflow: hidden; color: var(--muted-foreground); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.cluster-copy-token { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }
.cluster-copy-token .copy-icon-default,
.cluster-copy-token .copy-icon-success { align-items: center; justify-content: center; line-height: 0; }
.cluster-copy-token .copy-icon-default { display: inline-flex; }
.cluster-copy-token .nav-icon { display: block; width: .9rem; height: .9rem; }
.cluster-copy-token.is-copied .copy-icon-default { display: none; }
.cluster-copy-token.is-copied .copy-icon-success { display: inline-flex; }
.cluster-join-error { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7rem; border: 1px solid color-mix(in oklch, var(--destructive) 55%, var(--border)); border-radius: .5rem; background: color-mix(in oklch, var(--destructive) 9%, transparent); padding: .8rem; color: var(--destructive); }
.cluster-join-error > .nav-icon { width: 1rem; height: 1rem; margin-top: .1rem; }
.cluster-join-error > div { display: grid; min-width: 0; gap: .2rem; }
.cluster-join-error strong { font-size: .75rem; }
.cluster-join-error span { color: var(--foreground); font-size: .7rem; line-height: 1.45; overflow-wrap: anywhere; }
.cluster-join-submit > span { align-items: center; justify-content: center; gap: .45rem; }
.cluster-join-submit-idle { display: inline-flex; }
.cluster-join-submit-pending { display: none; }
[data-cluster-join-form].htmx-request .cluster-join-submit-idle { display: none; }
[data-cluster-join-form].htmx-request .cluster-join-submit-pending { display: inline-flex; }
[data-cluster-join-form].htmx-request .cluster-join-submit-pending > .nav-icon { animation: blocking-refresh-spin .8s linear infinite; }

@media (max-width: 1050px) { .cluster-layout { grid-template-columns: 1fr; } .cluster-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cluster-aside .warning-box { grid-column: 1 / -1; } }
@media (max-width: 800px) { .cluster-identity, .cluster-sync-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cluster-sync-grid > div:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 639px) { .cluster-metrics { grid-template-columns: 1fr; padding: var(--space-4); } }
@media (max-width: 700px) { .cluster-identity, .cluster-sync-grid, .cluster-aside { grid-template-columns: 1fr; } .cluster-sync-grid > div { border-top: 1px solid var(--border); border-left: 0; padding: .55rem 0 0; } .cluster-sync-grid > div:first-child { border-top: 0; padding-top: 0; } .cluster-aside .warning-box { grid-column: auto; } .cluster-danger-card { align-items: stretch; flex-direction: column; } .cluster-danger-card .button { width: 100%; justify-content: center; } .cluster-node-meta { display: none; } .cluster-node-actions .button { width: 100%; justify-content: center; } .cluster-node-actions, .cluster-node-actions form { width: 100%; } .cluster-nodes-card > header { align-items: flex-start; flex-wrap: wrap; } }
/* On a phone the columns stack, which left Rolling Updates below every node.
   Flatten both columns into one list so it follows Cluster Status. */
@media (max-width: 700px) {
  .cluster-layout { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-5); }
  .cluster-main-column, .cluster-aside, .cluster-live-status { display: contents; }
  .cluster-status-card { order: -2; }
  #cluster-updates { order: -1; }
}
@media (max-width: 700px) { .cluster-certificate-choices { grid-template-columns: 1fr; } .cluster-certificate-choices > label > span { min-height: 3.25rem; grid-template-columns: auto 1fr; justify-items: start; text-align: left; } .cluster-certificate-choices small { display: none; } .cluster-certificate-advanced-content { grid-template-columns: 1fr; } }

.isotope-control-page { gap: var(--space-6); }
.isotope-tab-list { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: .125rem; border-radius: 999px; background: var(--muted); padding: var(--space-1); }
.isotope-tab { display: inline-flex; min-width: 0; height: 1.75rem; align-items: center; justify-content: center; gap: .35rem; border: 0; border-radius: 999px; background: transparent; padding: 0 var(--space-3); color: var(--muted-foreground); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.isotope-tab:hover:not(:disabled) { color: var(--foreground); }
.isotope-tab.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .16); }
.stats-scope-toggle button:hover:not(.active):not(:disabled),
.range-tabs button:hover:not(.active):not(.picker-open):not(:disabled),
.isotope-tab:hover:not(.active):not(:disabled),
.dialog-tab:hover:not(.active):not(:disabled),
.catalog-tabs button:hover:not(.active):not(:disabled),
.blocking-tabs button:hover:not(.active):not(:disabled) {
  background: transparent;
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px var(--border);
}
.isotope-tab:disabled { cursor: not-allowed; opacity: .38; }
.isotope-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.tab-count { display: inline-flex; min-width: 1.25rem; height: 1.15rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--secondary); padding: 0 .375rem; color: var(--secondary-foreground); font-size: .625rem; line-height: 1; }
.isotope-tab.active .tab-count { background: var(--muted); }
.isotope-tab-panel, .settings-tab-panel { margin-top: 0; }

.isotope-data-card { overflow: hidden; }
.isotope-data-header { display: flex; min-height: 4rem; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border); padding: var(--space-4); }
.isotope-data-header > div { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.isotope-data-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.isotope-data-header > div > p { margin: 0; color: var(--muted-foreground); font-size: .875rem; }
.button.compact { display: inline-flex; height: 2rem; align-items: center; gap: .45rem; padding-inline: var(--space-3); font-size: .75rem; }
/* The basis matches the width. Otherwise phones give the icon the sidebar's
   1.25rem basis, and Safari sizes the button too small and wraps its label. */
.button.compact .nav-icon { width: 1rem; height: 1rem; flex-basis: 1rem; }
[data-replica-primary-only="true"] { cursor: not-allowed !important; opacity: .45 !important; }
.switch:has(input[data-replica-primary-only="true"]) { cursor: not-allowed; opacity: .45; }
.replica-read-only-banner { position: sticky; top: 0; z-index: 15; display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid color-mix(in oklch, var(--info) 60%, var(--border)); background-color: color-mix(in oklch, var(--info) 10%, var(--background)); background-image: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in oklch, var(--info) 7%, transparent) 14px 22px); padding: var(--space-2) var(--space-6); box-shadow: 0 2px 10px rgb(0 0 0 / .08); backdrop-filter: blur(12px); }
.replica-read-only-copy { display: flex; min-width: 0; align-items: center; gap: .55rem; }
.replica-read-only-copy > .nav-icon { box-sizing: border-box; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; border-radius: .375rem; background: color-mix(in oklch, var(--info) 16%, transparent); padding: var(--space-1); color: var(--info); }
.replica-read-only-copy > span { overflow: hidden; color: var(--muted-foreground); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.replica-read-only-copy strong { margin-right: .45rem; color: var(--foreground); font-weight: 600; }
.replica-primary-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .35rem; color: var(--info); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.replica-primary-link:hover { text-decoration: underline; }
.replica-primary-link .nav-icon { width: .875rem; height: .875rem; }
@media (max-width: 639px) { .replica-read-only-banner { padding-inline: var(--space-4); } .replica-read-only-copy > span > span { display: none; } }
.profile-page { display: grid; width: min(68rem, 100%); gap: var(--space-5); margin-inline: auto; }
.profile-tabs { width: fit-content; }
.profile-tabs .isotope-tab { min-width: 8rem; gap: .45rem; }
.profile-tabs .nav-icon { width: 1rem; height: 1rem; }
.profile-account-stack { display: grid; width: min(52rem, 100%); gap: var(--space-4); }
.profile-settings-card { overflow: hidden; }
.profile-settings-card .isotope-data-header > div { display: grid; align-items: initial; gap: .2rem; }
.profile-settings-card .isotope-data-header > div > p { font-size: .75rem; }
.profile-settings-form { display: grid; }
.profile-settings-body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.profile-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.profile-username { display: grid; gap: .2rem; border-radius: .5rem; background: color-mix(in oklch, var(--muted) 55%, transparent); padding: var(--space-3) var(--space-4); }
.profile-username > span { color: var(--muted-foreground); font-size: .6875rem; font-weight: 600; text-transform: uppercase; }
.profile-username > strong { font: 500 .85rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.profile-username > small, .profile-settings-body .field-control small { color: var(--muted-foreground); font-size: .7rem; }
.profile-passkey-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); border-radius: .5rem; background: color-mix(in oklch, var(--muted) 55%, transparent); padding: var(--space-3) var(--space-4); }
.profile-passkey-details { display: grid; min-width: 0; gap: .2rem; overflow-wrap: anywhere; }
.profile-passkey-details strong { font-size: .85rem; font-weight: 600; }
.profile-passkey-details small { color: var(--muted-foreground); font-size: .7rem; }
.profile-passkey-row > button, .profile-password-header > button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .4rem; }
.profile-passkey-row > button .nav-icon, .profile-password-header > button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.profile-password-header { flex-wrap: wrap; }
.profile-password-header > button { margin-left: auto; }
[data-passkey-status]:empty { display: none; }
.profile-security-note { display: flex; align-items: center; gap: .55rem; color: var(--muted-foreground); font-size: .72rem; }
.profile-security-note .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.profile-card-footer { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); padding: var(--space-3) var(--space-5); }
.profile-token-page { min-width: 0; }
.profile-token-list { overflow: hidden; }
.profile-token-list .isotope-data-header > div { display: flex; }
.profile-token-table th:first-child, .profile-token-table td:first-child { padding-left: var(--space-5); }
.profile-token-table td:first-child strong { font: 600 .8rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.profile-token-table .muted-cell { white-space: nowrap; }
.profile-token-empty { min-height: 15rem; gap: .35rem; }
.profile-token-empty > .empty-state-icon { width: 2.5rem; height: 2.5rem; margin-bottom: .35rem; border-radius: .6rem; background: color-mix(in oklch, var(--info) 13%, transparent); color: var(--info); }
.profile-token-empty > .empty-state-icon .nav-icon { width: 1.15rem; height: 1.15rem; }
.profile-token-empty h3 { font-size: .875rem; }
.profile-token-empty p { max-width: 24rem; font-size: .75rem; }
.profile-token-dialog { width: min(38rem, calc(100vw - 2rem)); }
.profile-token-mobile-row, .data-mobile-row { display: grid; gap: .7rem; border-top: 1px solid var(--border); padding: var(--space-4); }
.profile-token-mobile-row:first-child, .data-mobile-row:first-child { border-top: 0; }
.profile-token-mobile-heading, .data-mobile-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.profile-token-mobile-heading strong { font: 600 .82rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.profile-token-mobile-row dl, .data-mobile-row dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.profile-token-mobile-row dl > div, .data-mobile-row dl > div { display: grid; gap: .15rem; }
.profile-token-mobile-row dt, .data-mobile-row dt { color: var(--muted-foreground); font-size: .65rem; text-transform: uppercase; }
.profile-token-mobile-row dd, .data-mobile-row dd { overflow: hidden; margin: 0; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 639px) { .profile-field-grid { grid-template-columns: 1fr; } .profile-tabs { width: 100%; } .profile-tabs .isotope-tab { min-width: 0; flex: 1; } .profile-token-mobile-row dl { grid-template-columns: 1fr; } }
.admin-desktop-table { width: 100%; overflow-x: auto; }
.isotope-table { width: 100%; border-collapse: collapse; font-size: .8125rem; text-align: left; }
.admin-desktop-table .isotope-table thead { background: color-mix(in oklch, var(--muted) 82%, transparent); }
.isotope-table th { height: 2.75rem; padding: 0 var(--space-4); color: var(--muted-foreground); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.isotope-table td { height: 3.75rem; border-top: 1px solid var(--border); padding: .625rem var(--space-4); vertical-align: middle; }
.isotope-table tbody tr[data-dialog-open], .isotope-table tbody tr[data-row-opener] { cursor: pointer; }
.isotope-table tbody tr:hover { background: color-mix(in oklch, var(--muted) 50%, transparent); }
.isotope-table td:last-child { width: 3rem; }
.isotope-table td:last-child > .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
.isotope-table code { font-size: .75rem; }
.muted-cell { color: var(--muted-foreground); }
.right-cell { text-align: right; }
.right-cell form { display: inline-flex; }
.table-badges { display: flex; max-width: 22rem; flex-wrap: wrap; gap: var(--space-1); }
.table-badges > span, .mobile-role-list > span, .count-badge, .token-type-badge { display: inline-flex; width: fit-content; min-height: 1.3rem; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: .1rem .45rem; font-size: .625rem; line-height: 1.1; }
.token-type-badge { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.permission-access, .current-text { color: var(--success-strong); font-size: .6875rem; font-weight: 500; }
.current-text { margin-left: .3rem; }
.admin-mobile-list { display: none; }
.admin-mobile-row { display: flex; width: 100%; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: var(--space-3); border: 0; border-top: 1px solid var(--border); background: transparent; padding: var(--space-4); text-align: left; }
.admin-mobile-row:first-child { border-top: 0; }
.admin-mobile-row > div:first-child { display: grid; min-width: 0; flex: 1; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem var(--space-2); }
.admin-mobile-row strong { min-width: 0; overflow: hidden; font: 500 .8125rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.admin-mobile-row .count-badge { justify-self: end; }
.admin-mobile-row small { grid-column: 1 / -1; overflow: hidden; color: var(--muted-foreground); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-mobile-user-row > div.admin-mobile-user-copy { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.admin-mobile-user-meta { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .3rem var(--space-2); }
.admin-mobile-user-meta > small { min-width: 0; flex: 0 1 auto; grid-column: auto; }
.mobile-role-list { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-1); color: var(--muted-foreground); }
.admin-mobile-group-row > div.admin-mobile-group-copy { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.admin-mobile-user-trailing, .admin-mobile-group-trailing { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-3); }
.admin-mobile-user-statuses { display: flex; align-items: center; gap: .3rem; }
.admin-mobile-user-statuses .sso-badge { margin-left: 0; }
.admin-mobile-user-trailing .nav-icon, .admin-mobile-group-trailing .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; color: var(--muted-foreground); }
.admin-mobile-row > .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; color: var(--muted-foreground); }
.session-mobile-row { display: grid; gap: .35rem; border-top: 1px solid var(--border); padding: var(--space-4); }
.session-mobile-row:first-child { border-top: 0; }
.session-mobile-row > div { display: flex; align-items: center; gap: .4rem; }
.session-mobile-row > div > form { display: inline-flex; margin-left: auto; }
.session-mobile-row .icon-button { width: 2rem; height: 2rem; flex-basis: 2rem; }
.session-mobile-row code, .session-mobile-row small { color: var(--muted-foreground); font-size: .7rem; }

.api-token-result { min-height: 4.5rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklch, var(--muted) 35%, transparent); padding: var(--space-3); color: var(--muted-foreground); font-size: .75rem; }
.api-token-result .query-error, .api-token-result .token-created { color: var(--foreground); }
.field-help { margin: -.25rem 0 0; color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.token-secret { display: flex; width: 100%; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--muted); padding: var(--space-3); }
.token-secret > span { flex: 1; color: var(--foreground); font: .75rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.token-secret button { opacity: 1; }

.isotope-form-dialog { width: min(calc(100% - 2rem), 32rem); }
/* Six Format choices fit on one line. */
.isotope-form-dialog.alert-destination-dialog { width: min(calc(100% - 2rem), 38rem); }
.isotope-dialog-body { display: grid; gap: var(--space-4); overflow-y: auto; padding: var(--space-6); }
.isotope-dialog-body > label { display: grid; gap: var(--space-2); font-size: .8125rem; font-weight: 500; }
.isotope-dialog-body fieldset { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: var(--space-3); }
.isotope-dialog-body legend { padding: 0 .35rem; font-size: .75rem; font-weight: 600; }
.group-edit-dialog { width: min(calc(100% - 2rem), 52rem); max-height: min(92vh, 52rem); overflow: hidden; padding: 0; }
.group-edit-dialog[open] { grid-template-rows: auto minmax(0, 1fr); gap: 0; }
.group-edit-dialog > .dialog-header { padding: var(--space-6) var(--space-6) var(--space-4); }
.group-edit-dialog > form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.group-edit-dialog .isotope-dialog-body { min-height: 0; }
.group-edit-dialog > form > .dialog-footer { align-items: center; border-top: 1px solid var(--border); padding: var(--space-4) var(--space-6); }
.permission-surface-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.permission-surface { display: grid; min-width: 0; align-content: start; gap: .85rem; border: 1px solid var(--border); border-radius: .5rem; padding: var(--space-4); }
.permission-surface > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.permission-surface > header > div:first-child { display: grid; min-width: 0; gap: .2rem; }
.permission-surface h3 { margin: 0; font-size: .9rem; }
.permission-surface header p { margin: 0; color: var(--muted-foreground); font-size: .7rem; }
.permission-bulk-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .2rem; }
.permission-bulk-actions button { border: 0; border-radius: .3rem; background: transparent; color: var(--muted-foreground); padding: var(--space-1) .35rem; font: inherit; font-size: .65rem; cursor: pointer; }
.permission-bulk-actions button:hover, .permission-bulk-actions button:focus-visible { background: var(--muted); color: var(--foreground); }
.permission-surface .permission-checks { max-height: 15rem; overflow-y: auto; border-block: 1px solid var(--border); padding-block: var(--space-2); }
.permission-surface .permission-checks span { min-width: 0; overflow-wrap: anywhere; font: .68rem/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.zone-scope { display: grid; gap: .35rem; }
.zone-scope > label, .zone-grant-list label { display: flex; align-items: center; gap: var(--space-2); border-radius: .35rem; padding: .35rem; font-size: .72rem; cursor: pointer; }
.zone-scope input { width: 1rem; height: 1rem; flex: 0 0 1rem; margin: 0; }
.zone-grant-list { display: grid; max-height: 8rem; gap: .15rem; overflow-y: auto; border-top: 1px solid var(--border); padding-top: .4rem; }
.zone-scope:has(> label input[value="all"]:checked) .zone-grant-list { opacity: .45; }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.row-actions form { display: inline-flex; }
.dialog-footer.split { justify-content: space-between; }
.dialog-footer .button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }

.user-edit-dialog { width: min(calc(100% - 2rem), 40rem); max-height: min(90vh, 44rem); overflow: hidden; padding: 0; }
.user-edit-dialog[open] { grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0; }
.user-edit-dialog > .dialog-header { padding: var(--space-6) var(--space-6) 1.1rem; }
.dialog-tab-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 var(--space-6); border-radius: 999px; background: var(--muted); padding: var(--space-1); }
.dialog-tab-list.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dialog-tab-list.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dialog-tab-list.four .dialog-tab { gap: .3rem; padding: 0 var(--space-1); }
.dialog-tab { display: inline-flex; height: 2rem; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); font-size: .75rem; font-weight: 600; }
.dialog-tab:hover { color: var(--foreground); }
.dialog-tab.active { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .16); }
.dialog-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.user-dialog-content { min-height: 0; overflow-y: auto; }
.user-edit-dialog > form.user-dialog-content { display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.user-edit-dialog > form.user-dialog-content > .dialog-tab-panel { overflow-y: auto; }
.dialog-tab-panel { display: grid; gap: var(--space-5); padding: var(--space-5) var(--space-6) var(--space-6); }
.dialog-tab-panel[hidden] { display: none; }
.user-profile-form, .password-update-form, .group-membership-form { display: grid; gap: var(--space-4); }
.password-update-form { border-top: 1px solid var(--border); padding-top: var(--space-5); }
.form-section-heading { display: grid; gap: var(--space-1); }
.form-section-heading h3 { margin: 0; font-size: .875rem; font-weight: 600; }
.form-section-heading p { margin: 0; color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; }
.group-membership-form fieldset { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: var(--space-2); }
.user-panel-action { display: flex; justify-content: flex-end; }
.user-dialog-footer { align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding: var(--space-4) var(--space-6); }
.user-token-panel { align-content: start; }
.user-token-warning { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .65rem; border: 1px solid color-mix(in oklch, var(--warning) 55%, var(--border)); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklch, var(--warning) 8%, transparent); padding: var(--space-3); }
.user-token-warning > .nav-icon { width: 1rem; height: 1rem; margin-top: .1rem; color: var(--warning); }
.user-token-warning > div { display: grid; gap: .2rem; }
.user-token-warning strong { font-size: .75rem; }
.user-token-warning span { color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.user-token-list { overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.user-token-row { display: grid; gap: var(--space-3); border-top: 1px solid var(--border); padding: var(--space-4); }
.user-token-row:first-child { border-top: 0; }
.user-token-heading, .user-token-heading > div { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.user-token-heading { justify-content: space-between; }
.user-token-heading strong { overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.user-token-heading form { display: inline-flex; }
.user-token-heading .icon-button { width: 2rem; height: 2rem; flex: 0 0 2rem; }
.user-token-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); color: var(--muted-foreground); font-size: .7rem; }
.user-token-meta > span { display: grid; gap: .15rem; }
.user-token-meta small { color: var(--foreground); font-size: .625rem; font-weight: 600; text-transform: uppercase; }
.user-token-empty { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.user-danger-actions { display: flex; align-items: center; gap: var(--space-2); }
.user-danger-actions form { display: inline-flex; }
.user-footer-actions { display: flex; align-items: center; gap: var(--space-2); }

.settings-source-card > header h2 { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.settings-source-card > header p { margin: .3rem 0 0; color: var(--muted-foreground); font-size: .8125rem; }
/* The strip shares each row out between whatever tabs land on it, so adding
   or dropping a section never leaves a hole at the end of a row. */
.settings-tab-list { display: flex; width: 100%; flex-wrap: wrap; gap: var(--space-1); border-radius: 999px; }
.settings-tab-list > .settings-tab { flex: 1 1 calc((100% - 9 * .25rem) / 10); }
/* The basis names how many tabs share a row, and flex-grow fills whatever row
   they land on: ten across while there is room, then two even rows of five,
   down to phones 375px wide, where Recursion still fits. Narrower phones get
   four. A plain fixed basis wraps wherever it happens to run out and leaves
   the last row holding one tab stretched across the whole strip. */
@media (max-width: 960px) { .settings-tab-list > .settings-tab { flex-basis: calc((100% - 4 * .25rem) / 5); } }
/* One row is a capsule like every other segmented control. Once the strip
   wraps, a capsule around two rows reads as a blob, so the track and its tabs
   drop to concentric rounded rectangles: the tab's .75rem is the track's 1rem
   less its .25rem padding. */
@media (max-width: 960px) { .settings-tab-list { border-radius: 1rem; } .settings-tab-list > .settings-tab { border-radius: .75rem; } }
@media (max-width: 374px) { .settings-tab-list > .settings-tab { flex-basis: calc((100% - 3 * .25rem) / 4); } }
.settings-tab { height: 3.25rem; flex-direction: column; gap: var(--space-1); border-radius: 999px; padding: .45rem var(--space-1); }
.settings-tab .nav-icon { width: 1rem; height: 1rem; }
.settings-tab span { font-size: .6875rem; line-height: 1; }
.isotope-settings-form, .settings-panel-stack { display: grid; gap: var(--space-6); }
.settings-source-card { overflow: hidden; }
.settings-source-card:has(.styled-time[data-open="true"]) { position: relative; z-index: 10; overflow: visible; }
.settings-source-card > header { border-bottom: 0; padding: var(--space-6) var(--space-6) var(--space-3); }
.settings-source-card > header h2 { font-size: 1rem; }
.settings-source-card > header h2 .nav-icon { width: 1.25rem; height: 1.25rem; }
.isotope-card-content { display: grid; gap: var(--space-4); padding: var(--space-4) var(--space-6) var(--space-6); }
.field-grid { display: grid; align-items: start; gap: var(--space-4); }
.field-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cache-ttl-grid { margin-top: var(--space-2); }
.field-control { display: grid; min-width: 0; align-content: start; gap: var(--space-2); font-size: .8125rem; font-weight: 500; }
.field-control > small, .field-help { color: var(--muted-foreground); font-size: .68rem; font-weight: 400; line-height: 1.45; }
.field-error { margin: 0; color: var(--destructive); font-size: .7rem; font-weight: 500; line-height: 1.4; }
.field-grid-message { grid-column: 1 / -1; }
.field-control input[aria-invalid="true"], .group-membership-fieldset.invalid { border-color: var(--destructive); box-shadow: 0 0 0 1px color-mix(in srgb, var(--destructive) 45%, transparent); }
.group-membership-fieldset { min-width: 0; margin: 0; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: var(--space-2); }
.group-access-status { display: grid; gap: .2rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: var(--space-3); }
.group-access-status strong { font-size: .75rem; }
.group-access-status span { color: var(--muted-foreground); font-size: .68rem; line-height: 1.45; }
.group-access-status.api-only { border-color: rgb(59 130 246 / .45); background: rgb(59 130 246 / .08); }
.group-access-status.web-enabled { border-color: rgb(34 197 94 / .45); background: rgb(34 197 94 / .08); }
.field-control textarea, .protocol-setting textarea { width: 100%; resize: vertical; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); outline: none; background: transparent; padding: .625rem var(--space-3); color: inherit; font: .8125rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.field-control textarea:focus, .protocol-setting textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.field-control small, .protocol-setting small, .read-only-field small { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; line-height: 1.45; }
.narrow-control { max-width: 20rem; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: var(--space-4); }
.switch-row > span { display: grid; gap: .2rem; }
.switch-row input[type=checkbox] { width: 2.25rem; height: 1.25rem; flex: 0 0 2.25rem; accent-color: var(--primary); }
.setting-switch-row { cursor: pointer; }
.setting-switch-row input[type=checkbox], .alert-watch-switch input[type=checkbox] { position: relative; width: 2.75rem; height: 1.5rem; flex-basis: 2.75rem; appearance: none; border: 1px solid var(--input); border-radius: 999px; background: var(--muted); padding: 0; cursor: pointer; transition: border-color 150ms, background 150ms; }
.setting-switch-row input[type=checkbox]::after, .alert-watch-switch input[type=checkbox]::after { position: absolute; top: .1875rem; left: .1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--background); box-shadow: 0 1px 3px rgb(0 0 0 / .28); content: ""; transition: transform 150ms; }
.setting-switch-row input[type=checkbox]:checked, .alert-watch-switch input[type=checkbox]:checked { border-color: var(--primary); background: var(--primary); }
.setting-switch-row input[type=checkbox]:checked::after, .alert-watch-switch input[type=checkbox]:checked::after { transform: translateX(1.25rem); }
.setting-switch-row:has(input:disabled) { cursor: not-allowed; opacity: .58; }
.setting-switch-row input[type=checkbox]:disabled, .alert-watch-switch input[type=checkbox]:disabled { cursor: not-allowed; }
.settings-insights { display: grid; gap: var(--space-3); }
.settings-insights-data { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.settings-insights-data p { margin: 0; color: var(--muted-foreground); font-size: .8rem; line-height: 1.5; }
.settings-insights-data strong { color: var(--foreground); font-weight: 600; }
.settings-insights-data .button { display: inline-flex; align-items: center; gap: .4rem; }
.isotope-dialog-body > .settings-insights-delete { display: flex; align-items: center; gap: .55rem; font-size: .85rem; font-weight: 400; cursor: pointer; }
.protocol-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.protocol-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.protocol-setting { display: grid; gap: var(--space-3); border: 1px solid var(--border); border-radius: .5rem; padding: var(--space-4); }
.protocol-setting > div { display: grid; gap: .2rem; }
.certificate-settings, .acme-settings, .manual-certificate-settings { display: grid; gap: var(--space-4); }
.certificate-manual-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.certificate-manual-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.certificate-manual-actions .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.certificate-manual-note { display: flex; align-items: flex-start; gap: .55rem; color: var(--muted-foreground); font-size: .76rem; line-height: 1.45; }
.certificate-manual-note svg { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .08rem; }
.certificate-dialog { width: min(46rem, calc(100vw - 2rem)); }
.certificate-mode-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); border-radius: .5rem; background: var(--muted); padding: var(--space-1); }
.certificate-mode-control label { display: flex; min-height: 2.5rem; cursor: pointer; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: calc(var(--radius) - 3px); color: var(--muted-foreground); font-size: .75rem; font-weight: 600; }
.certificate-mode-control label.active { border-color: var(--border); background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.certificate-mode-control input, .cluster-certificate-choices > label > input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; border: 0; padding: 0; clip-path: inset(50%); opacity: 0; pointer-events: none; white-space: nowrap; }
/* Each provider carries its own accent so the card changes colour with the
   selection. In a long column of identical grey fields that tint is the only
   thing saying which service is about to receive credentials. */
.acme-provider-card { --provider-accent: var(--muted-foreground); }
.acme-provider-card[data-acme-provider-selected="cloudflare"] { --provider-accent: #f6821f; }
.acme-provider-card[data-acme-provider-selected="porkbun"] { --provider-accent: #ef6461; }
.acme-provider-card[data-acme-provider-selected="namecheap"] { --provider-accent: #ff5000; }
.acme-provider-card[data-acme-provider-selected="godaddy"] { --provider-accent: #00a4a6; }
.acme-provider-card[data-acme-provider-selected="digitalocean"] { --provider-accent: #0080ff; }
.acme-provider-card[data-acme-provider-selected="hetzner"] { --provider-accent: #d50c2d; }
.acme-provider-card[data-acme-provider-selected="route53"] { --provider-accent: #ff9900; }
.acme-provider-card[data-acme-provider-selected="ovh"] { --provider-accent: #4d7bd4; }
.acme-provider-card[data-acme-provider-selected="rfc2136"] { --provider-accent: #a78bfa; }
.acme-provider-card > header { position: relative; display: flex; align-items: center; gap: .9rem; margin: -1rem -1rem 0; border-bottom: 1px solid color-mix(in srgb, var(--provider-accent) 35%, var(--border)); background: linear-gradient(90deg, color-mix(in srgb, var(--provider-accent) 12%, transparent), transparent 70%); padding: var(--space-4); }
.acme-provider-card > header > div { display: grid; min-width: 0; flex: 1 1 auto; gap: .2rem; }
.acme-provider-card header strong { font-size: .875rem; }
.acme-provider-card header small { color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.acme-provider-icon { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border-radius: .6rem; background: color-mix(in srgb, var(--provider-accent) 18%, transparent); color: var(--provider-accent); }
.acme-provider-icon .nav-icon { width: 1.25rem; height: 1.25rem; }
.certificate-status { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: var(--space-4); }
.certificate-status-icon { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border-radius: .6rem; background: var(--background); color: var(--muted-foreground); }
.certificate-status-icon .nav-icon { width: 1.25rem; height: 1.25rem; }
.certificate-status.active .certificate-status-icon { background: rgb(34 197 94 / .14); color: var(--success); }
.certificate-status.attention .certificate-status-icon { background: color-mix(in srgb, var(--destructive) 14%, transparent); color: var(--destructive); }
/* The detail column keeps a floor of 16rem so the button drops to its own row
   when the card is narrow, rather than squeezing the status text into a column. */
.certificate-status-detail { display: grid; min-width: 0; flex: 1 1 16rem; gap: var(--space-1); }
.certificate-status-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.certificate-status-heading strong { font-size: .875rem; }
.certificate-status-detail > span { overflow: hidden; color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; text-overflow: ellipsis; }
.certificate-status-separator { margin-inline: .35rem; }
.certificate-status .badge { display: inline-flex; min-height: 1.35rem; flex: 0 0 auto; align-items: center; border-radius: 999px; background: var(--background); padding: .12rem var(--space-2); color: var(--muted-foreground); font-size: .67rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.certificate-status .badge.success { background: rgb(34 197 94 / .16); color: var(--success); }
.certificate-status .badge.danger { background: color-mix(in srgb, var(--destructive) 16%, transparent); color: var(--destructive); }
.acme-provider-card .badge { display: inline-flex; min-height: 1.35rem; flex: 0 0 auto; align-items: center; border-radius: 999px; background: var(--muted); padding: .12rem var(--space-2); color: var(--muted-foreground); font-size: .67rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.acme-provider-card .badge.success { background: rgb(34 197 94 / .16); color: var(--success); }
.certificate-details-link { border: 0; background: none; padding: 0; color: var(--foreground); font: inherit; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: .2em; cursor: pointer; }
.certificate-details-link:hover { text-decoration-style: solid; }
.certificate-details-body { display: grid; gap: var(--space-5); }
.certificate-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.certificate-detail { display: grid; min-width: 0; gap: .2rem; }
.certificate-detail > span { color: var(--muted-foreground); font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.certificate-detail > strong { font-size: .82rem; font-weight: 600; overflow-wrap: anywhere; }
.certificate-detail-value { display: flex; width: 100%; align-items: flex-start; gap: .35rem; border-radius: .35rem; background: var(--muted); padding: .3rem .45rem; }
.certificate-detail-value > code { min-width: 0; flex: 1 1 auto; font-size: .7rem; line-height: 1.5; overflow-wrap: anywhere; }
.certificate-detail-value > button { margin-top: .1rem; }
.certificate-detail-section { display: grid; gap: var(--space-2); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.certificate-detail-section h3 { margin: 0; font-size: .82rem; }
.certificate-detail-section > p { margin: 0; color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; }
.certificate-detail-empty { color: var(--muted-foreground); font-size: .75rem; }
.certificate-name-list { display: grid; margin: var(--space-1) 0 0; gap: .35rem; padding: 0; list-style: none; }
.certificate-name-list li { display: flex; align-items: center; gap: var(--space-2); border: 1px solid var(--border); border-radius: .4rem; padding: .4rem .6rem; font-size: .78rem; overflow-wrap: anywhere; }
.certificate-name-list .nav-icon { width: .95rem; height: .95rem; flex: 0 0 .95rem; color: var(--success); }
.certificate-name-list.pending li { border-color: color-mix(in srgb, var(--destructive) 40%, transparent); }
.certificate-name-list.pending .nav-icon { color: var(--destructive); }
.certificate-shared-settings { display: grid; gap: var(--space-3); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.certificate-shared-label { color: var(--muted-foreground); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.certificate-error { display: flex; align-items: flex-start; gap: var(--space-2); border: 1px solid color-mix(in srgb, var(--destructive) 50%, transparent); border-radius: .5rem; background: color-mix(in srgb, var(--destructive) 8%, transparent); padding: var(--space-3); color: var(--destructive); font-size: .72rem; line-height: 1.45; }
.certificate-error .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.acme-provider-card { display: grid; gap: var(--space-4); border: 1px solid var(--border); border-radius: .5rem; padding: var(--space-4); }
.certificate-renew-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .45rem; justify-self: start; white-space: nowrap; }
.certificate-renew-button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.certificate-renew-button.htmx-request .nav-icon { animation: blocking-refresh-spin .8s linear infinite; }
.about-page { width: 100%; max-width: 56rem; margin-inline: auto; }
.about-hero { display: grid; justify-items: center; padding: var(--space-8) var(--space-4); text-align: center; }
.about-mascot { width: 11rem; height: auto; margin-bottom: var(--space-4); }
.about-hero h1 { margin: 0 0 var(--space-2); font-size: 2.25rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.about-hero > p { margin: 0; color: var(--muted-foreground); font-size: .875rem; }
.about-runtime-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-3); color: var(--muted-foreground); font-size: .6875rem; }
.about-meta-divider { color: var(--border); }
.about-card > header { min-height: auto; padding: var(--space-5) var(--space-6) var(--space-2); }
.about-card > header h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.about-card-content { display: grid; gap: var(--space-4); padding: var(--space-3) var(--space-6) var(--space-6); }
.about-card-content > p { margin: 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.55; }
.about-card-content code { font: .75rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.about-links { display: flex; flex-wrap: wrap; column-gap: var(--space-6); row-gap: var(--space-2); font-size: .8125rem; }
.about-links a, .inline-link { color: var(--primary); }
.about-links a { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.about-links a:hover, .inline-link:hover, .about-footer a:hover { text-decoration: underline; }
.about-links .nav-icon { width: .75rem; height: .75rem; }
.about-version-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); border-top: 1px solid var(--border); padding-top: var(--space-5); }
.about-version-copy { display: grid; min-width: 0; gap: .35rem; }
.about-version-copy > span { color: var(--muted-foreground); font-size: .6875rem; }
.about-version-copy > strong { font-size: 1.25rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.about-build-meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); min-width: 0; margin: 0; }
.about-build-meta > div { display: grid; min-width: 0; align-content: start; gap: .35rem; }
.about-build-meta dt { color: var(--muted-foreground); font-size: .6875rem; }
.about-build-meta dd { margin: 0; font-size: .75rem; overflow-wrap: anywhere; }
.about-build-timestamp { display: flex; flex-wrap: wrap; column-gap: .35rem; }
.about-build-timestamp > span:last-child { white-space: nowrap; }
.about-commit { white-space: nowrap; }
.about-card-title { display: inline-flex; align-items: center; gap: var(--space-2); }
.about-card-title .nav-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; color: #f1ad47; }
.about-code-block { position: relative; min-width: 0; }
.about-code-block pre { max-height: none; padding-right: 2.75rem; background: color-mix(in oklch, var(--muted) 40%, transparent); font-size: .6875rem; }
.about-copy-button { position: absolute; top: .4rem; right: .4rem; display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 0; border-radius: 50%; background: transparent; padding: 0; color: var(--muted-foreground); transition: background 120ms; }
.about-copy-button:hover { background: var(--accent); color: var(--foreground); }
/* Center the icon the way the record copy buttons do: without this the
   text-height icon wrappers sit up and to the left of the hover box. */
.about-copy-button > span { align-items: center; justify-content: center; line-height: 0; }
.about-copy-button:not(.is-copied) > .copy-icon-default, .about-copy-button.is-copied > .copy-icon-success { display: flex; }
.about-copy-button.is-copied > .copy-icon-success { color: var(--success); }
.about-copy-button .nav-icon { width: .85rem; height: .85rem; flex-basis: .85rem; }
.about-metrics-preview { display: grid; justify-items: start; gap: var(--space-3); }
.about-metrics-preview pre { width: 100%; max-height: 14rem; font-size: .6875rem; }
.about-metrics-preview pre:not(:empty) { display: block !important; }
.about-update { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); }
.about-update-summary { display: flex; min-width: 0; flex: 1 1 20rem; align-items: center; gap: var(--space-3); }
.about-update-icon { display: grid; width: 2.15rem; height: 2.15rem; flex: 0 0 2.15rem; place-items: center; border-radius: .55rem; background: color-mix(in oklch, currentColor 13%, transparent); color: var(--muted-foreground); }
.about-update-icon .nav-icon { width: 1.1rem; height: 1.1rem; }
.about-update-copy { display: grid; min-width: 0; gap: .2rem; }
.about-update-copy strong { font-size: .8125rem; }
.about-update-copy small { overflow-wrap: anywhere; color: var(--muted-foreground); font-size: .6875rem; line-height: 1.5; }
.update-release-dialog { width: min(42rem, calc(100vw - 2rem)); pointer-events: auto; }
.update-release-dialog .release-notes-content { margin: 0; padding-right: var(--space-1); max-height: min(28rem, 60dvh); }
/* The auto margin keeps the actions on the right when they wrap under the
   summary, instead of hugging the left edge. */
.about-update-actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 0 auto; }
.about-update-actions:empty { display: none; }
.about-update-actions > form { margin: 0; }
.about-update-check-pending { display: none; }
[data-update-check]:is(.htmx-request, [aria-busy="true"]) .about-update-check-idle { display: none; }
[data-update-check]:is(.htmx-request, [aria-busy="true"]) .about-update-check-pending { display: inline; }
[data-update-check]:is(.htmx-request, [aria-busy="true"]) .icon-refresh { animation: about-update-spin .65s linear infinite; }
[data-update-check].htmx-request .about-update-menu { pointer-events: none; }
/* Split control: the check runs on the left half, the release channel lives
   behind the caret so the row keeps one visible action. */
.about-update-split { position: relative; display: inline-flex; }
.about-update-split > .button { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* summary.button, not summary: .button.compact carries its own inline padding
   and icon size, and would otherwise win and squeeze the caret. */
.about-update-menu > summary.button { display: inline-flex; width: 2rem; flex: 0 0 2rem; align-items: center; justify-content: center; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; padding-inline: 0; }
.about-update-menu > summary.button .nav-icon { width: .875rem; height: .875rem; flex: none; transition: transform 120ms ease; }
.about-update-menu[open] > summary.button { background: var(--accent); }
.about-update-menu[open] > summary.button .nav-icon { transform: rotate(180deg); }
/* .card clips to its rounded corners, which cuts the menu off at the card
   edge. Lift the clip only while the menu is open. */
.about-card:has(.about-update-menu[open]) { overflow: visible; }
.about-update-menu > div { position: absolute; top: calc(100% + .35rem); right: 0; z-index: 50; display: grid; width: max-content; max-width: 15rem; gap: .3rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--popover, var(--card)); color: var(--popover-foreground, var(--foreground)); padding: .6rem .7rem; box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .28), 0 .2rem .5rem rgb(0 0 0 / .18); }
.about-update-menu > div small { color: var(--muted-foreground); font-size: .625rem; line-height: 1.4; }
.about-update-channel { display: flex; align-items: center; gap: .45rem; font-size: .75rem; white-space: nowrap; cursor: pointer; }
.about-update-channel input { width: .9rem; height: .9rem; accent-color: var(--primary); }
.about-update-development { border-color: color-mix(in oklch, #f1ad47 45%, var(--border)); background: repeating-linear-gradient(-45deg, rgb(241 173 71 / .13) 0 12px, rgb(241 173 71 / .05) 12px 24px); }
.about-update-development .about-update-icon { color: color-mix(in oklch, #f1ad47 75%, var(--foreground)); }
.about-update-available { border-color: color-mix(in oklch, #2563eb 45%, var(--border)); }
.about-update-available .about-update-icon { color: #2563eb; }
.about-update-current .about-update-icon { color: var(--success); }
.about-update-installed { border-color: color-mix(in oklch, var(--success) 45%, var(--border)); }
.about-update-installed .about-update-icon { color: var(--success); }
.about-update-failed { border-color: color-mix(in oklch, var(--destructive) 45%, var(--border)); }
.about-update-failed .about-update-icon { color: var(--destructive); }
.about-update-installed .about-update-icon .icon-refresh { display: none; }
.about-update.is-restarting .about-update-icon .icon-power { display: none; }
.about-update.is-restarting .about-update-icon .icon-refresh { display: block; }
.about-update-busy .about-update-icon .nav-icon, .about-update.is-restarting .about-update-icon .icon-refresh { animation: about-update-spin 1.4s linear infinite; }
@keyframes about-update-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .about-update-busy .about-update-icon .nav-icon, .about-update.is-restarting .about-update-icon .icon-refresh, [data-update-check]:is(.htmx-request, [aria-busy="true"]) .icon-refresh { animation: none; }
}
.about-footer { padding: var(--space-1) 0 var(--space-4); color: var(--muted-foreground); font-size: .75rem; text-align: center; }
@media (max-width: 640px) {
  .about-hero { padding: var(--space-4) var(--space-2); }
  .about-mascot { width: 8.5rem; margin-bottom: var(--space-3); }
  .about-runtime-meta { gap: .45rem var(--space-3); }
  .about-meta-divider { display: none; }
  .about-card > header { padding-inline: var(--space-4); }
  .about-card-content { padding-inline: var(--space-4); }
  .about-version-row { flex-direction: column; align-items: stretch; }
  .about-build-meta { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-3); }
  .about-commit-suffix { display: none; }
  .about-update { align-items: stretch; }
  /* Equal columns, however many actions there are, so Release notes never
     outgrows the main action beside it. */
  .about-update-actions { display: grid; width: 100%; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
  .about-update-actions > form { min-width: 0; }
  .about-update-actions > form > .button, .about-update-actions > form > .about-update-split { width: 100%; }
  .about-update-split { flex: 1 1 0; }
  .about-update-actions > .button { justify-content: center; }
  .about-update-split > .button { flex: 1; justify-content: center; }
}
.settings-panel-save { display: flex; justify-content: flex-end; }
.settings-blocking-radio-list { margin-top: 0; }
.settings-blocking-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.settings-blocking-actions .button { display: inline-flex; align-items: center; gap: .45rem; }
.settings-blocking-actions .nav-icon { width: 1rem; height: 1rem; }
.settings-advanced { border-top: 1px solid var(--border); padding-top: .85rem; }
.settings-advanced > summary { display: flex; width: 100%; align-items: center; gap: .45rem; cursor: pointer; list-style: none; color: var(--muted-foreground); font-size: .72rem; font-weight: 600; }
.settings-advanced > summary::-webkit-details-marker { display: none; }
.settings-advanced > summary .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; }
.settings-advanced > summary .icon-chevron-down { margin-left: auto; transition: transform .16s ease; }
.settings-advanced[open] > summary { margin-bottom: .85rem; }
.settings-advanced[open] > summary .icon-chevron-down { transform: rotate(180deg); }

.logs-page { width: 100%; }
.logs-tab-list { display: grid; width: fit-content; grid-template-columns: repeat(2, minmax(8rem, 1fr)); }
.logs-tab-panel { min-width: 0; }
.logs-card { overflow: hidden; }
.logs-toolbar { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border); padding: var(--space-4) var(--space-5); }
.logs-toolbar > div, .logs-toolbar h2, .logs-toolbar-actions, .logs-pagination, .logs-pagination > div, .logs-pagination nav { display: flex; align-items: center; }
/* The count belongs beside the heading at every width: only the filter
   tokens after it are allowed to wrap onto a line of their own. */
.log-title { display: flex; min-width: 0; align-items: baseline; gap: .6rem; }
.logs-toolbar > div:first-child { min-width: 0; gap: var(--space-3); }
/* The heading shares its text baseline with the count beside it, so the icon
   centres itself on the line instead of setting the heading's baseline. */
.logs-toolbar h2 { align-items: baseline; gap: var(--space-2); margin: 0; font-size: 1rem; }
.logs-toolbar h2 .nav-icon { width: 1.1rem; height: 1.1rem; align-self: center; }
.logs-toolbar-actions { gap: var(--space-2); }
.logs-toolbar-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }
.logs-toolbar-actions .nav-icon { width: .9rem; height: .9rem; }
.logs-toolbar-actions .live.active { border-color: rgb(16 185 129 / .55); color: #10b981; }
.runtime-level-field { display: block; width: 9rem; }
.runtime-log-viewer { height: min(38rem, calc(100vh - 22rem)); min-height: 20rem; overflow: auto; background: color-mix(in oklch, var(--background) 90%, #000); padding: var(--space-3) 0; scroll-padding: .75rem; font: .72rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.runtime-log-line { display: grid; grid-template-columns: 11.75rem 3.5rem minmax(12rem, auto) minmax(0, 1fr); gap: var(--space-3); padding: .18rem var(--space-5); }
.runtime-log-line:hover { background: color-mix(in oklch, var(--muted) 55%, transparent); }
.runtime-log-line time, .runtime-log-attributes { color: var(--muted-foreground); }
.runtime-log-level { font-weight: 700; }
.level-info .runtime-log-level { color: var(--info); }
.level-warn .runtime-log-level { color: var(--warning); }
.level-error .runtime-log-level { color: var(--danger); }
.level-debug .runtime-log-level { color: #a855f7; }
.runtime-log-message { color: var(--foreground); }
.runtime-log-attributes { overflow-wrap: anywhere; }
.logs-empty { min-height: 20rem; font-size: .8rem; }
.logs-empty.error { color: var(--destructive); }
.log-total { color: var(--muted-foreground); font-size: .78rem; white-space: nowrap; }
.logs-toolbar-actions .button.active { background: var(--accent); color: var(--accent-foreground); }
/* Applied filters read as tokens beside the count while the filter bar is
   collapsed, so a panel narrowed by a dashboard link never looks unfiltered. */
.query-filter-tokens { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .35rem; }
/* The open filter bar already spells the filters out, so the tokens stand in
   for it only while it is closed. */
.logs-card:has(.query-log-filters:not([hidden])) .query-filter-tokens { display: none; }
.query-logs-toolbar > div:first-child { flex-wrap: wrap; }
.query-logs-toolbar h2, .logs-toolbar .log-total { white-space: nowrap; }
.query-filter-token { display: inline-flex; max-width: 22rem; align-items: center; gap: .3rem; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in oklch, var(--muted) 60%, transparent); padding: .12rem .3rem .12rem .55rem; font-size: .72rem; line-height: 1.6; }
.query-filter-token b { color: var(--muted-foreground); font-weight: 500; }
.query-filter-token > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.query-filter-token a, .query-filter-clear { display: grid; width: 1.05rem; height: 1.05rem; flex: none; place-items: center; border-radius: 999px; color: var(--muted-foreground); }
.query-filter-token a:hover, .query-filter-clear:hover { background: var(--accent); color: var(--foreground); }
.query-filter-token .nav-icon, .query-filter-clear .nav-icon { width: .7rem; height: .7rem; }
.query-filter-clear { width: 1.25rem; height: 1.25rem; }
.query-filter-clear .nav-icon { width: .8rem; height: .8rem; }
/* The caret is a segment of the Filters button: it points at the state the
   click leads to, the way the collapsed bar itself does. */
.filters-toggle { gap: .4rem; overflow: hidden; padding-right: 0; }
.filters-toggle .filter-count { display: grid; min-width: 1.1rem; height: 1.1rem; place-items: center; border-radius: 999px; background: var(--primary); padding: 0 .3rem; color: var(--primary-foreground); font-size: .65rem; font-weight: 600; }
.filters-toggle .button-caret { display: grid; width: 2.15rem; align-self: stretch; flex: 0 0 2.15rem; place-items: center; margin-left: .1rem; border-left: 1px solid var(--border); }
.filters-toggle[aria-expanded="true"] .button-caret .nav-icon { rotate: 180deg; }
.filters-toggle .button-caret .nav-icon { width: .75rem; height: .75rem; transition: rotate .15s ease; }
.live-icon { display: inline-flex; }
.button.live .live-icon.pause, .button.live[aria-pressed="true"] .live-icon.play { display: none; }
.button.live[aria-pressed="true"] .live-icon.pause { display: inline-flex; }
.query-log-filters { border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 60%, transparent); }
.query-log-filters > summary { display: flex; min-height: 2.75rem; align-items: center; gap: .45rem; cursor: pointer; padding: 0 var(--space-5); color: var(--muted-foreground); font-size: .78rem; font-weight: 600; list-style: none; }
.query-log-filters > summary::-webkit-details-marker { display: none; }
.query-log-filters > summary:hover { color: var(--foreground); }
.query-log-filters > summary .nav-icon { width: .9rem; height: .9rem; }
.filter-count { display: grid; min-width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: .65rem; }
.query-log-filters form { display: grid; gap: var(--space-4); border-top: 1px solid var(--border); padding: var(--space-4) var(--space-5); }
.isotope-query-filters form { border-top: 0; padding: 1.1rem var(--space-5); }
.query-filter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.query-filter-grid label { display: grid; min-width: 0; gap: .4rem; color: var(--muted-foreground); font-size: .7rem; font-weight: 600; }
/* A date input reports an intrinsic width wider than its column, so it has
   to be told to shrink like the text fields beside it. */
.query-filter-grid input, .query-filter-grid select { min-width: 0; width: 100%; }
/* A date reads as one value, so its field is given room for the whole thing. */
.query-filter-wide { grid-column: span 2; }
/* The window filter opens the same calendar the dashboard's custom range uses,
   rather than two bare datetime-local inputs. */
.query-filter-range { position: relative; display: grid; min-width: 0; gap: .4rem; color: var(--muted-foreground); font-size: .7rem; font-weight: 600; }
.range-trigger { display: flex; width: 100%; height: 2.25rem; min-width: 0; align-items: center; gap: .45rem; border: 1px solid var(--input, var(--border)); border-radius: calc(var(--radius) - 2px); background: transparent; padding: 0 var(--space-3); color: var(--foreground); font-size: .875rem; font-weight: 400; text-align: left; }
.range-trigger .nav-icon { width: .9rem; height: .9rem; flex: none; color: var(--muted-foreground); }
.range-trigger > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.range-trigger > .styled-select-chevron { flex: 0 0 .55rem; overflow: visible; }
.range-trigger[aria-expanded="true"] .styled-select-chevron { transform: translateY(.15rem) rotate(225deg); }
.range-trigger:focus-visible, .range-trigger.picker-open { border-color: var(--ring); outline: 0; box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 28%, transparent); }
.query-range-popover { top: calc(100% + .35rem); left: 0; }
.range-picker-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.range-picker-actions .button { width: 100%; height: 2rem; min-height: 2rem; }

.query-filter-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.query-filter-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.query-filter-actions .nav-icon { width: .9rem; height: .9rem; }
.log-search-bar { display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--border); padding: .65rem var(--space-5); }
.log-search-bar .search-field { position: relative; min-width: 12rem; flex: 1; }
.log-result-actions { display: flex; gap: .4rem; }
.log-result-actions .icon-button { width: 2rem; height: 2rem; flex-basis: 2rem; }
.log-result-actions .nav-icon { width: .9rem; height: .9rem; }
/* The query table stops growing where the runtime viewer stops, so the two
   tabs stand the same height instead of one of them scrolling the page. */
.query-log-table-scroll { max-height: min(38rem, calc(100vh - 22rem)); min-height: 18rem; overflow: auto; scroll-padding: 2.5rem 0; }
/* On desktop the active log card owns the main viewport's remaining height.
   Its reading region scrolls while the paging controls stay in place. */
@media (min-width: 768px) {
	.main:has(.logs-page) { display: flex; height: calc(100vh - 1.5rem); height: calc(100dvh - 1.5rem); flex-direction: column; }
	.main:has(.logs-page) > .content { display: flex; min-height: 0; flex: 1; }
	.logs-page { min-height: 0; flex: 1; grid-template-rows: auto auto minmax(0, 1fr); }
	.logs-tab-panel { min-height: 0; }
	.logs-card { display: flex; height: 100%; min-height: 0; flex-direction: column; }
	.runtime-log-viewer, .query-log-table-scroll, .logs-empty { flex: 1; }
	.runtime-log-viewer { height: auto; }
	.query-log-table-scroll { max-height: none; }
}
.isotope-query-log-table thead { position: sticky; top: 0; z-index: 2; background: color-mix(in oklch, var(--muted) 82%, transparent); backdrop-filter: blur(8px); }
.isotope-query-log-table th { text-transform: none; letter-spacing: 0; }
.isotope-query-log-table td { height: auto; min-height: 3.5rem; padding-block: .65rem; }
.isotope-query-log-table time, .isotope-query-log-table code, .isotope-query-log-table .query-name, .query-protocol { font: .72rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.isotope-query-log-table .query-name { max-width: 15rem; }
.query-type-pill { border: 0; border-radius: .3rem; background: var(--muted); color: var(--foreground); font-weight: 600; }
.isotope-query-log-table .source-pill, .isotope-query-log-table .rcode { border: 0; border-radius: .3rem; padding: .22rem var(--space-2); font-size: .68rem; font-weight: 600; }
.isotope-query-log-table .source-cache { background: rgb(59 130 246 / .12); color: var(--info); }
.isotope-query-log-table .source-upstream { background: rgb(34 197 94 / .12); color: var(--success); }
.isotope-query-log-table .source-authoritative { background: rgb(168 85 247 / .12); color: #a855f7; }
.isotope-query-log-table .source-blocked, .isotope-query-log-table .source-error { background: rgb(239 68 68 / .12); color: var(--danger); }
.query-answers { min-width: 12rem; max-width: 30rem; }
.query-answers > div { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.query-answers > div > span { display: inline-block; min-width: 0; max-width: min(20rem, 100%); overflow: hidden; border-radius: .3rem; background: color-mix(in oklch, var(--muted) 60%, transparent); padding: .18rem .4rem; font: .68rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
/* Folded copies of the columns the narrow layout drops: hidden while the full
   table fits, so only one copy is ever in the page. */
.query-fold, .query-fold-tight { display: none; }
.query-name-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.isotope-query-log-table tr[data-query-detail-row] { cursor: pointer; }
/* Long clients and answers can overflow even the desktop layout. Keep the
   controls visible while the result columns scroll underneath them. */
.query-col-actions, .query-row-actions { position: sticky; right: 0; width: 6rem; text-align: right; }
.query-row-actions { z-index: 1; background: var(--card); white-space: nowrap; }
.query-col-actions { z-index: 3; background: color-mix(in oklch, var(--muted) 82%, var(--card)); }
.isotope-query-log-table tr:hover .query-row-actions { background: color-mix(in oklch, var(--muted) 50%, var(--card)); }
/* Reserve each action's slot even when a blocked row omits the Block form. */
.query-row-controls { display: grid; grid-template-columns: repeat(3, 1.75rem); align-items: center; justify-content: end; gap: var(--space-1); }
.query-row-controls > .query-detail-button { grid-column: 1; grid-row: 1; }
.query-row-controls > form { display: flex; grid-column: 2; grid-row: 1; }
.query-row-controls > form:has(.allow) { grid-column: 3; }
.query-detail-button, .query-policy-action { width: 1.75rem; height: 1.75rem; place-items: center; border: 0; border-radius: .35rem; background: transparent; color: var(--muted-foreground); }
.query-detail-button { display: inline-grid; }
.query-detail-button:hover, .query-detail-button:focus-visible { background: var(--accent); color: var(--foreground); }
.query-policy-action { display: inline-grid; opacity: 0; transition: opacity 140ms, color 140ms, background 140ms; }
.isotope-query-log-table tr:hover .query-policy-action, .query-row-actions:focus-within .query-policy-action { opacity: 1; }
.query-policy-action:hover { background: var(--accent); }
.query-policy-action.block:hover { color: var(--danger); }
.query-policy-action.allow:hover { color: #10b981; }
.query-policy-action .nav-icon { width: .85rem; height: .85rem; }
.query-detail-button .nav-icon { width: .9rem; height: .9rem; }
/* A drawer is as wide as a form dialog, room for three actions in its footer. */
.query-detail-dialog { position: fixed; inset: 0 0 0 auto; width: min(32rem, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; overflow: hidden; border: 0; border-left: 1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius); background: var(--background); color: var(--foreground); padding: 0; box-shadow: -1rem 0 3rem rgb(0 0 0 / .24); }
.query-detail-dialog[open] { display: flex; flex-direction: column; animation: query-detail-in 120ms cubic-bezier(.2, 0, 0, 1); }
.query-detail-dialog::backdrop { background: rgb(0 0 0 / .52); animation: backdrop-in 120ms ease-out; }
@keyframes query-detail-in { from { opacity: 0; translate: 1rem 0; } to { opacity: 1; translate: 0 0; } }
.query-detail-header { position: relative; display: flex; min-height: 5rem; align-items: center; border-bottom: 1px solid var(--border); padding: var(--space-4) 3.5rem var(--space-4) var(--space-5); }
.query-detail-header > div { display: grid; min-width: 0; gap: .2rem; }
.query-detail-header span { color: var(--muted-foreground); font-size: .6875rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.query-detail-range { white-space: nowrap; }
.query-detail-range::before { content: "·\00a0"; }
.query-detail-header h2 { overflow: hidden; margin: 0; font: 600 1rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.query-detail-body { display: grid; align-content: start; flex: 1; gap: var(--space-6); overflow-y: auto; padding: var(--space-5); }
.query-detail-result { display: flex; gap: var(--space-2); }
.query-detail-result .source-pill, .query-detail-result .rcode { border: 0; border-radius: .35rem; padding: .28rem .55rem; font-size: .72rem; font-weight: 600; }
.query-detail-result .source-cache { background: rgb(59 130 246 / .12); color: var(--info); }
.query-detail-result .source-upstream { background: rgb(34 197 94 / .12); color: var(--success); }
.query-detail-result .source-authoritative { background: rgb(168 85 247 / .12); color: #a855f7; }
.query-detail-result .source-local { background: rgb(6 182 212 / .12); color: #06b6d4; }
.query-detail-result .source-blocked, .query-detail-result .source-error { background: rgb(239 68 68 / .12); color: var(--danger); }
.query-detail-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.query-detail-grid > div { display: grid; min-width: 0; min-height: 4.25rem; grid-column: span 2; align-content: center; gap: var(--space-1); border-radius: calc(var(--radius) - 2px); background: var(--muted); padding: .65rem var(--space-3); }
.query-detail-grid > .fact-wide { grid-column: span 3; }
.query-detail-grid > .fact-full { grid-column: 1 / -1; }
/* A fact tile with a copyable value carries its copy button in the corner,
   like the Dynamic DNS address cards. The button drops the card's grid
   placement so it pins to the tile rather than to the label row. */
.query-detail-grid > .fact-copyable { position: relative; }
.fact-copyable > dt { padding-right: 1.75rem; }
.fact-copyable .fact-copy { position: absolute; top: .5rem; right: .5rem; grid-column: auto; grid-row: auto; }
.fact-copyable code { overflow-wrap: anywhere; }
.query-detail-grid dt, .query-detail-answer h3, .query-detail-explain h3 { margin: 0; color: var(--muted-foreground); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.query-detail-grid dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .875rem; font-weight: 500; line-height: 1.35; }
.query-detail-grid code { font-size: .8rem; }
.query-detail-answer { display: grid; gap: .625rem; }
.query-detail-answer > div { display: grid; gap: .4rem; }
.query-detail-answer code { overflow-wrap: anywhere; border: 1px solid var(--border); border-radius: .4rem; background: color-mix(in oklch, var(--muted) 55%, transparent); padding: .55rem .65rem; font-size: .75rem; }
.query-detail-answer span { color: var(--muted-foreground); font-size: .875rem; }
/* A button label keeps the button's own type, not the drawer's label styles. */
:is(.query-detail-header, .query-detail-answer) .button span { color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.query-detail-explain { display: grid; gap: .9rem; border-top: 1px solid var(--border); padding-top: var(--space-5); }
.query-detail-section-heading { display: grid; gap: .35rem; }
.query-detail-section-heading p, .query-detail-explain-legacy { margin: 0; color: var(--muted-foreground); font-size: .8rem; line-height: 1.45; }
.query-decision-path { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.query-decision-path li { position: relative; display: grid; grid-template-columns: .75rem minmax(0, 1fr); gap: .65rem; min-height: 3rem; padding-bottom: .7rem; }
.query-decision-path li:not(:last-child)::after { position: absolute; top: .65rem; bottom: -.15rem; left: .22rem; width: 1px; background: var(--border); content: ""; }
.query-decision-marker { position: relative; z-index: 1; width: .5rem; height: .5rem; margin-top: var(--space-1); border: 2px solid var(--background); border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 1px color-mix(in oklch, var(--primary) 70%, var(--border)); }
.query-decision-path li > div { display: grid; gap: .1rem; }
.query-decision-kind { color: var(--muted-foreground); font-size: .65rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.query-decision-path strong { font-size: .82rem; font-weight: 600; }
.query-decision-path [data-query-decision-detail] { color: var(--muted-foreground); font-size: .75rem; overflow-wrap: anywhere; }
.query-detail-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); border-top: 1px solid var(--border); padding: .85rem var(--space-5); }
/* The X in a drawer's header closes it, so the footer holds only actions. A
   drawer with none, such as one still loading, has no footer. */
.query-detail-footer:not(:has(.button)) { display: none; }
.query-detail-policy-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.query-detail-policy-actions form { display: inline-flex; }
.query-detail-policy-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.query-detail-policy-actions .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.query-detail-policy-actions .button { white-space: nowrap; }
/* Block and Allow sit together at the width of the wider one. */
.query-policy-row { display: inline-grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--space-2); min-width: 0; }
.query-policy-row .button > span { overflow: hidden; text-overflow: ellipsis; }
.query-log-table.full th, .query-log-table.full td { padding-inline: var(--space-5); }
.query-log-table.full td { height: 3.25rem; }
.query-log-table.full code { font-size: .75rem; }
.query-log-table .source-cache { color: var(--warning); }
.query-log-table .source-upstream { color: #70ad47; }
.query-log-table .source-authoritative { color: #559bd4; }
.query-log-table .source-blocked, .query-log-table .source-error { color: var(--danger); }
.logs-pagination { min-height: 3.75rem; justify-content: flex-end; gap: var(--space-4); border-top: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 45%, transparent); padding: .6rem var(--space-5); color: var(--muted-foreground); font-size: .72rem; }
.logs-pagination > div { gap: var(--space-2); }
.logs-pagination select, .logs-pagination .styled-select { width: 4.5rem; }
.logs-pagination .styled-select-trigger { height: 2rem; }
.logs-pagination nav { gap: .3rem; }
.logs-pagination .icon-button { width: 2rem; height: 2rem; flex-basis: 2rem; }
.logs-pagination .icon-button:disabled { cursor: not-allowed; opacity: .35; }

/* Bound the full table to the card: long values truncate within their own
   columns instead of disappearing beneath the pinned action column. */
@media (min-width: 1561px) {
	.isotope-query-log-table { table-layout: fixed; }
	.query-log-table.full th, .query-log-table.full td { padding-inline: var(--space-3); }
	.query-col-time { width: 9rem; }
	.query-col-client { width: 21%; }
	.query-col-domain { width: 18%; }
	.query-col-type { width: 5rem; }
	.query-col-source { width: 6.75rem; }
	.query-col-status { width: 6.5rem; }
	.query-col-protocol { width: 5rem; }
	.query-col-actions { width: 7.25rem; }
	.isotope-query-log-table .query-name, .query-col-answer { min-width: 0; max-width: none; }
	.query-col-client code, .query-time time { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 980px) {
	.field-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.query-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.runtime-log-line { grid-template-columns: 11.75rem 3.5rem minmax(0, 1fr); }
	.runtime-log-attributes { grid-column: 3; }
}

/* The full nine columns need about 1220px of table, which only a very wide
   window can give once the sidebar takes its share. Below that the client, the
   protocol and the answers fold into the cells they belong to rather than
   pushing the table into a sideways scroll. */
@media (max-width: 1560px) {
	.query-col-client, .query-col-protocol, .query-col-answer { display: none; }
	.query-fold-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem var(--space-2); margin-top: .15rem; color: var(--muted-foreground); font: .66rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
	.query-fold-meta code { min-width: 0; max-width: 100%; overflow: hidden; color: inherit; font: inherit; text-overflow: ellipsis; white-space: nowrap; }
	.query-fold-answers { display: block; min-width: 0; max-width: none; margin-top: .3rem; }
	/* A row with no answer says so in the Answer column; folded under the
	   domain the same dash would just repeat itself down the table. */
	.query-fold-answers .muted-cell { display: none; }
	.query-log-table.full th, .query-log-table.full td { padding-inline: .85rem; }
	.isotope-query-log-table .query-name { max-width: 16rem; overflow: visible; white-space: normal; }
	.query-time { white-space: nowrap; }
}

/* Narrower still: the domain gives up width before the table gives up a column. */
@media (max-width: 1150px) {
	.query-log-table.full th, .query-log-table.full td { padding-inline: .6rem; }
	.isotope-query-log-table .query-name { max-width: 11rem; }
}

/* Tablet width leaves room for the domain, the status and little else, so the
   type and the response join the client and the protocol under the timestamp. */
@media (max-width: 960px) {
	.query-col-type, .query-col-source { display: none; }
	.query-fold-tight { display: inline; }
	.isotope-query-log-table .query-name { max-width: 9rem; }
	/* The heading and its controls stop sharing a line here rather than at the
	   phone breakpoint: on one line this narrow the buttons sit on top of the
	   entry count. */
	.logs-toolbar { align-items: stretch; flex-direction: column; }
	.query-logs-toolbar > div:first-child { align-items: stretch; flex-direction: column; }
	/* The runtime line drops to two columns at the same width, so the attribute
	   text stops being squeezed into a hand's width of column. */
	.runtime-log-line { grid-template-columns: 1fr 3.5rem; gap: var(--space-1) var(--space-3); padding-block: .4rem; }
	.runtime-log-message, .runtime-log-attributes { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
	.isotope-query-log-table { table-layout: fixed; }
	.query-log-table.full th, .query-log-table.full td { padding-inline: .4rem; }
	.query-col-time { width: 7.25rem; }
	.query-col-status { width: 5rem; }
	.query-row-actions, .query-col-actions { width: 2.5rem; padding-inline: var(--space-1) !important; }
	.query-row-actions form { display: none; }
	.query-row-controls { grid-template-columns: 2rem; }
	.query-detail-button { display: inline-grid; width: 2rem; height: 2rem; }
	.isotope-query-log-table .query-name { max-width: none; }
	.query-detail-dialog { inset: auto 0 0; width: 100vw; height: auto; max-height: 88dvh; border-top: 1px solid var(--border); border-left: 0; border-radius: 1rem 1rem 0 0; }
	.query-detail-dialog[open] { animation-name: query-detail-mobile-in; }
	@keyframes query-detail-mobile-in { from { opacity: 0; translate: 0 1rem; } to { opacity: 1; translate: 0 0; } }
	.query-detail-footer { padding-bottom: max(.85rem, env(safe-area-inset-bottom)); }
	.query-detail-policy-actions { width: 100%; }
	.query-detail-policy-actions form, .query-detail-policy-actions .button { flex: 1; }
	/* A query's actions pair up, two to a row, and Block and Allow take a
	   row each when they name a rule set or everyone. */
	.query-detail-footer > .query-detail-policy-actions:has(> .query-policy-row) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.query-detail-policy-actions:has(> .query-policy-row) .button { min-width: 0; padding-inline: var(--space-3); }
	.query-detail-policy-actions:has(> .query-policy-row) > .button, .query-policy-split [data-split-action] .button { width: 100%; }
	.query-policy-row { display: grid; grid-column: 1 / -1; }
	.query-policy-row.scoped { grid-auto-flow: row; }
	.query-policy-split .split-button-trigger { padding: 0; }
	/* A node's Remove and Promote don't fit side by side, so they stack. */
	.query-detail-footer > .cluster-node-actions { flex-wrap: wrap; }
	.query-detail-footer > .cluster-node-actions > * { flex: 1 1 auto; }
	.query-detail-footer > .cluster-node-actions .button { width: 100%; }
}

@media (max-width: 700px) {
  .admin-tab-list { display: grid; width: 100%; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-1); }
  .admin-tab-list .isotope-tab { width: 100%; grid-column: span 2; }
  .admin-tab-list .isotope-tab:nth-child(n + 4) { grid-column: span 3; }
  /* Two rows, so concentric rounded rectangles like .settings-tab-list. */
  .admin-tab-list { border-radius: 1rem; }
  .admin-tab-list .isotope-tab { border-radius: .75rem; }
	.logs-tab-list { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-only, .admin-desktop-table { display: none; }
  .admin-mobile-list { display: block; }
  .isotope-data-header { min-height: 3.75rem; }
	.field-grid.two, .field-grid.three, .field-grid.four, .protocol-grid, .protocol-grid.three, .certificate-mode-control { grid-template-columns: 1fr; }
	.certificate-renew-button { width: 100%; }
	.certificate-detail-grid { grid-template-columns: 1fr; }
  .settings-source-card > header, .isotope-card-content { padding-inline: var(--space-4); }
	.isotope-form-dialog, .isotope-form-dialog.mcp-setup-dialog { width: calc(100% - 1rem); }
	.isotope-form-dialog.alert-destination-dialog { width: calc(100% - 1rem); }
	.group-edit-dialog { width: calc(100% - 1rem); max-height: calc(100vh - 1rem); }
	.permission-surface-grid { grid-template-columns: 1fr; }
	/* A phone has no room for a title and the quick picks side by side, so the
	   picks go under the title, lined up with it. */
	.mcp-tool-sections .permission-surface > header { flex-direction: column; align-items: flex-start; gap: .35rem; }
	.mcp-tool-sections .permission-bulk-actions { margin-left: -.35rem; }
	/* The dialog's own padding is enough on a phone. Without the step panel's
	   and some of the cards' padding, tool names such as get_cluster_status fit
	   on one line. */
	.mcp-setup-form > .dialog-tab-panel { padding-inline: 0; }
	.mcp-tool-sections .permission-surface { padding-inline: var(--space-3); }
	.mcp-tool-sections .permission-checks label { padding-inline: .3rem; }
	.user-edit-dialog { width: calc(100% - 1rem); max-height: calc(100vh - 1rem); }
	.user-edit-dialog > .dialog-header { padding-inline: var(--space-4); }
	.dialog-tab-list { margin-inline: var(--space-4); }
	.dialog-tab-panel { padding-inline: var(--space-4); }
	.user-edit-dialog .field-grid.two { grid-template-columns: 1fr; }
	.user-dialog-footer { align-items: stretch; flex-direction: column; padding-inline: var(--space-4); }
	.user-danger-actions { width: 100%; }
	.user-danger-actions form, .user-danger-actions .button { flex: 1; }
	.user-footer-actions { width: 100%; }
	.user-footer-actions .button { flex: 1; }
	.settings-blocking-actions { align-items: stretch; flex-direction: column-reverse; }
	.settings-blocking-actions .button { justify-content: center; }
	.logs-toolbar { align-items: stretch; flex-direction: column; }
	.logs-toolbar-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.runtime-level-field { width: 100%; }
	.query-filter-grid { grid-template-columns: 1fr; }
	.query-filter-wide { grid-column: auto; }
	.query-logs-toolbar > div:first-child { align-items: stretch; flex-direction: column; }
	.query-log-table-scroll { max-height: none; }
	.logs-pagination { align-items: flex-end; flex-wrap: wrap; justify-content: space-between; }
}

/* The query-log title and its two compact actions still fit side by side on
   small tablets and larger phones. Preserve the stacked layout below this
   range, where the entry count and controls would otherwise compete. */
@media (min-width: 561px) and (max-width: 960px) {
	.logs-toolbar:not(.query-logs-toolbar) .logs-toolbar-actions { display: flex; flex: none; }
}

/* A collapsed desktop sidebar returns enough width to keep either log title and
   its controls together even while the viewport is in the tablet range. */
@media (min-width: 768px) and (max-width: 960px) {
	.sidebar-collapsed .logs-toolbar:not(.query-logs-toolbar) { align-items: center; flex-direction: row; }
	.sidebar-collapsed .logs-toolbar:not(.query-logs-toolbar) > div:first-child { align-items: center; flex-direction: row; }
	.sidebar-collapsed .logs-toolbar:not(.query-logs-toolbar) .logs-toolbar-actions { display: flex; flex: none; }
	.sidebar-collapsed .query-logs-toolbar { align-items: center; flex-direction: row; }
	.sidebar-collapsed .query-logs-toolbar > div:first-child { align-items: center; flex-direction: row; }
	.sidebar-collapsed .query-logs-toolbar .logs-toolbar-actions { display: flex; flex: none; }
}

/* Apps */
.wizard-progress { grid-template-columns: auto minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto minmax(1rem, 1fr) auto; }
.integration-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border); padding: var(--space-5) var(--space-6); }
.integration-card > header > .status-badge { flex: 0 0 auto; white-space: nowrap; }
.card-identity { display: flex; min-width: 0; align-items: flex-start; gap: .85rem; }
.card-identity p { margin: .2rem 0 0; color: var(--muted-foreground); font-size: .75rem; }
.card-glyph { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border-radius: .6rem; background: rgb(59 130 246 / .12); color: var(--info); }
.card-glyph .nav-icon { width: 1.2rem; height: 1.2rem; }
.integration-card-body { display: grid; gap: var(--space-5); padding: var(--space-5) var(--space-6); }
.integration-card-empty { justify-items: start; }
.integration-card-empty p { max-width: 46rem; margin: 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.55; }
.integration-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.integration-card-actions-primary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
/* Outline destructive: present but not shouting next to the primary action. */
.button.outline.destructive { border-color: color-mix(in srgb, var(--destructive) 55%, var(--border)); background: var(--background); color: var(--destructive); }
.button.outline.destructive:hover { background: color-mix(in srgb, var(--destructive) 12%, transparent); opacity: 1; }
.integration-card-actions .button, .integration-card-actions-primary .button, .integration-card-empty .button { display: inline-flex; align-items: center; gap: .45rem; }
/* The global input rule stretches every control to the full field width, which
   turns a checkbox or radio into a large square. Restore natural sizing. */
.integrations-page input[type="checkbox"], .integrations-page input[type="radio"],
.unifi-wizard-dialog input[type="checkbox"], .unifi-wizard-dialog input[type="radio"] {
	width: 1rem; height: 1rem; flex: 0 0 1rem; padding: 0; accent-color: var(--info);
}
/* Switches keep their track on this page, where plain checkboxes are shrunk. */
.integrations-page .setting-switch-row input[type="checkbox"] { width: 2.75rem; height: 1.5rem; flex: 0 0 2.75rem; }
.integration-card-actions .button .nav-icon, .integration-card-actions-primary .button .nav-icon, .integration-card-empty .button .nav-icon { width: 1rem; height: 1rem; flex-basis: 1rem; }
#unifi-status, #dynamic-dns-status { display: grid; gap: .6rem; }
.unifi-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; color: var(--muted-foreground); font-size: .72rem; }
.button.is-syncing .icon-refresh, .unifi-status-line .icon-refresh { animation: blocking-refresh-spin .8s linear infinite; }
.button.is-syncing { cursor: progress; }
.integration-card-actions .button:disabled { cursor: not-allowed; opacity: .55; }
.integration-progress { height: .3rem; }
.unifi-status-line .nav-icon { width: .85rem; height: .85rem; }
.unifi-status { display: flex; gap: .7rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: .8rem; }
.unifi-status.error { border-color: color-mix(in srgb, var(--destructive) 45%, var(--border)); background: color-mix(in srgb, var(--destructive) 8%, transparent); }
.unifi-status.error > .nav-icon { color: var(--destructive); }
.unifi-status.success { border-color: color-mix(in srgb, var(--metric-no-error) 45%, var(--border)); background: color-mix(in srgb, var(--metric-no-error) 8%, transparent); }
.unifi-status.success > .nav-icon { color: var(--metric-no-error); }
.unifi-status.warning { border-color: color-mix(in srgb, var(--warning-strong) 45%, var(--border)); background: color-mix(in srgb, var(--warning-strong) 8%, transparent); }
.unifi-status.warning > .nav-icon { color: var(--warning-strong); }
.unifi-status > .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; margin-top: .1rem; }
.unifi-status > div { display: grid; min-width: 0; gap: .2rem; }
.unifi-status strong { font-size: .75rem; }
.unifi-status span { color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.integration-error-summary { white-space: pre-line; overflow-wrap: anywhere; }
.integration-error-details { min-width: 0; margin-top: .15rem; color: var(--muted-foreground); font-size: .68rem; }
.integration-error-details summary { width: max-content; cursor: pointer; color: var(--foreground); }
.integration-error-details pre { max-width: 100%; max-height: 12rem; overflow: auto; margin: var(--space-2) 0 0; border: 1px solid var(--border); border-radius: .4rem; background: var(--background); padding: .65rem; color: var(--muted-foreground); font-size: .65rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.unifi-connection dl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-4); }
.unifi-connection dl > div { border-top: 0; padding-top: 0; }
.unifi-auth-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.choice-tile { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--border); border-radius: .55rem; padding: .6rem .8rem; cursor: pointer; }
.choice-tile.active { border-color: var(--info); background: rgb(59 130 246 / .08); }
.choice-tile > span { display: grid; gap: .2rem; }
.choice-tile strong { font-size: .8rem; }
.choice-tile small { color: var(--muted-foreground); font-size: .68rem; line-height: 1.4; }
.field-control.checkbox { align-content: start; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2) .6rem; }
.field-control.checkbox > input { grid-row: 1; }
.field-control.checkbox > span { grid-column: 2; font-size: .8125rem; }
.field-control.checkbox > small { grid-column: 1 / -1; }
.dynamic-dns-global-settings { align-items: start; margin-top: var(--space-2); }
.dynamic-dns-publishers { display: grid; gap: var(--space-5); }
.dynamic-dns-publishers-empty { margin: 0; border: 1px dashed var(--border); border-radius: .5rem; padding: var(--space-4); color: var(--muted-foreground); font-size: .72rem; text-align: center; }
.dynamic-dns-publisher { min-width: 0; }
.dynamic-dns-publisher + .dynamic-dns-publisher { border-top: 1px solid var(--border); padding-top: var(--space-5); }
.dynamic-dns-publisher > summary, .dynamic-dns-zone > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.dynamic-dns-publisher > summary { border-radius: .45rem; padding: .35rem var(--space-1); list-style: none; cursor: pointer; }
.dynamic-dns-publisher > summary::-webkit-details-marker { display: none; }
.dynamic-dns-publisher > summary:hover { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.dynamic-dns-publisher-summary { display: grid; min-width: 0; gap: .12rem; }
.dynamic-dns-publisher-summary strong { font-size: .82rem; }
.dynamic-dns-publisher-summary small { overflow: hidden; color: var(--muted-foreground); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-dns-publisher-tools { display: flex; flex: 0 0 auto; align-items: center; gap: .45rem; }
.dynamic-dns-publisher-chevron { display: grid; place-items: center; color: var(--muted-foreground); }
.dynamic-dns-publisher-chevron .nav-icon { width: .85rem; height: .85rem; transition: rotate 150ms ease; }
.dynamic-dns-publisher[open] .dynamic-dns-publisher-chevron .nav-icon { rotate: 180deg; }
.dynamic-dns-publisher-body { display: grid; min-width: 0; gap: var(--space-4); padding-top: .85rem; }
.dynamic-dns-zones { display: grid; border-top: 1px solid var(--border); }
.dynamic-dns-zone { min-width: 0; border-bottom: 1px solid var(--border); }
.dynamic-dns-zone > summary { padding: .7rem var(--space-1); list-style: none; cursor: pointer; }
.dynamic-dns-zone > summary::-webkit-details-marker { display: none; }
.dynamic-dns-zone > summary:hover { background: color-mix(in srgb, var(--muted) 35%, transparent); }
.dynamic-dns-zone-summary { display: grid; min-width: 0; gap: .12rem; }
.dynamic-dns-zone-summary strong { font-size: .75rem; }
.dynamic-dns-zone-summary small { overflow: hidden; color: var(--muted-foreground); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.dynamic-dns-zone-chevron { display: grid; flex: 0 0 auto; place-items: center; color: var(--muted-foreground); }
.dynamic-dns-zone-chevron .nav-icon { width: .8rem; height: .8rem; transition: rotate 150ms ease; }
.dynamic-dns-zone[open] .dynamic-dns-zone-chevron .nav-icon { rotate: 180deg; }
.dynamic-dns-zone-body { display: grid; gap: var(--space-3); padding: .1rem 0 .85rem; }
.dynamic-dns-zone-footer { display: flex; justify-content: flex-end; }
.dynamic-dns-publisher-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .65rem; padding-top: .4rem; }
.dynamic-dns-add-provider-menu, .dynamic-dns-add-zone { justify-self: start; }
.dynamic-dns-add-provider-menu { position: relative; z-index: 10; margin-top: .35rem; }
.dynamic-dns-add-provider-menu[open] { z-index: 70; }
.dynamic-dns-add-provider-menu > summary { display: inline-flex; }
.dynamic-dns-add-provider-menu[open] > summary .styled-select-chevron { transform: translateY(.15rem) rotate(225deg); }
.dynamic-dns-add-provider-menu > div { position: absolute; top: calc(100% + .35rem); left: 0; z-index: 70; display: grid; width: min(20rem, calc(100vw - 3rem)); max-height: min(21rem, 50vh); overflow-y: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--popover); padding: .3rem; color: var(--popover-foreground); box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .38), 0 .2rem .6rem rgb(0 0 0 / .22); transform-origin: top left; animation: resolver-popover-in 120ms ease-out; }
.dynamic-dns-add-provider-menu[data-side="top"] > div { top: auto; bottom: calc(100% + .35rem); transform-origin: bottom left; }
.dynamic-dns-add-provider-menu > div button { display: flex; width: 100%; min-height: 2.35rem; align-items: center; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; padding: .45rem .65rem; color: inherit; font-size: .8rem; text-align: left; }
.dynamic-dns-add-provider-menu > div button:hover, .dynamic-dns-add-provider-menu > div button:focus-visible { background: var(--accent); color: var(--accent-foreground); outline: 0; }
.dynamic-dns-add-provider-menu > div button:disabled { cursor: not-allowed; opacity: .4; }
.dynamic-dns-add-provider-menu > div button:disabled:hover { background: transparent; }
.unifi-zone-rows { display: grid; gap: var(--space-3); }
.unifi-zone-row { display: grid; gap: var(--space-3); overflow: hidden; border: 1px solid var(--border); border-radius: .55rem; }
.unifi-zone-row > header {
	display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
	border-bottom: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 55%, transparent);
	padding: .55rem .9rem;
}
.unifi-zone-row > header strong { font-size: .82rem; }
.unifi-zone-row > header code { font-size: .7rem; }
.unifi-zone-fields { display: grid; align-items: start; gap: var(--space-3) var(--space-4); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 5.5rem; padding: 0 .9rem; }
.unifi-zone-row > .field-control.checkbox { padding: 0 .9rem .85rem; }
.unifi-zone-preview { min-height: 1rem; color: var(--muted-foreground); font-size: .7rem; }
.unifi-zone-preview code { color: var(--foreground); font-size: .7rem; }
.unifi-network-table td:first-child, .unifi-network-table th:first-child { width: 3.5rem; }
.unifi-network-table td { height: 3rem; }
.unifi-network-table label { cursor: pointer; font-weight: 600; }
.unifi-plan-records > summary, .unifi-skipped > summary { cursor: pointer; font-size: .78rem; font-weight: 600; }
.unifi-plan-records .admin-desktop-table { max-height: 18rem; overflow-y: auto; margin-top: .6rem; }
.unifi-skipped ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; color: var(--muted-foreground); font-size: .72rem; line-height: 1.6; }
.unifi-wizard-dialog { width: min(56rem, calc(100% - 3rem)); }
.isotope-form-dialog.mcp-setup-dialog { width: min(48rem, calc(100% - 3rem)); }
.mcp-setup-dialog[open] { grid-template-rows: auto auto minmax(0, 1fr); max-height: calc(100dvh - 2rem); }
.mcp-setup-form { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
.mcp-setup-form > .dialog-tab-panel { overflow-y: auto; }
/* Only the step panel scrolls. Without bounding the form the dialog itself
   grows past its max-height and drags the footer off screen. */
.unifi-wizard-dialog[open] { grid-template-rows: auto minmax(0, 1fr); }
.unifi-wizard-dialog > form { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
.unifi-wizard-dialog .isotope-dialog-body { min-height: 0; }
.unifi-wizard-dialog .wizard-footer {
	margin: 0 -1.5rem -1.5rem; border-top: 1px solid var(--border);
	background: var(--background); padding: .9rem var(--space-6);
}
/* The step indicator stays put while the panel scrolls, so the operator can see
   where they are and jump back without scrolling up first. */
/* A negative top margin would leave an uncovered band that content scrolls
   through, so the bar supplies the panel's top padding instead. */
.unifi-wizard-dialog .isotope-dialog-body { padding-top: 0; }
.unifi-wizard-dialog .wizard-progress {
	position: sticky; top: 0; z-index: 3;
	margin-inline: -1.5rem; border-bottom: 1px solid var(--border);
	background: var(--background); padding: 1.15rem var(--space-6) .7rem;
}
.wizard-progress > button {
	display: grid; width: auto; height: auto; justify-items: center; gap: .3rem;
	border: 0; border-radius: .35rem; background: none; padding: 0;
	color: var(--muted-foreground); cursor: pointer; font: inherit;
}
.wizard-progress > button > span {
	display: grid; width: 1.7rem; height: 1.7rem; place-items: center;
	border: 1px solid var(--border); border-radius: 50%; background: var(--background);
	font-size: .66rem; font-weight: 700;
}
.wizard-progress > button > small { font-size: .64rem; font-weight: 600; }
.wizard-progress > button.complete { color: var(--success); }
.wizard-progress > button.complete > span { border-color: var(--success); background: rgb(34 197 94 / .12); }
.wizard-progress > button.complete + i { background: var(--success); }
.wizard-progress > button:hover > small { text-decoration: underline; }
.wizard-progress > button:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
/* The connection step has three sections; full-size headings push the last one
   below the fold, so it uses a single-line variant. */
.wizard-panel.compact { gap: .45rem; }
/* Headings carry a divider to separate sections, but the first one already has
   the sticky step bar's border above it. */
.wizard-panel > .wizard-heading:first-child { border-top: 0; padding-top: 0; }
.wizard-heading.compact { align-items: center; gap: .55rem; padding-top: .55rem; }
.wizard-heading.compact > span { width: 1.5rem; height: 1.5rem; flex-basis: 1.5rem; border-radius: .4rem; }
.wizard-heading.compact > span .nav-icon { width: .85rem; height: .85rem; }
.wizard-heading.compact > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.wizard-heading.compact strong { font-size: .82rem; }
.wizard-heading.compact small { font-size: .68rem; }
.wizard-footer { align-items: center; justify-content: space-between; }
.wizard-footer-advance { display: flex; align-items: center; gap: var(--space-2); }
.wizard-footer .button { display: inline-flex; align-items: center; gap: .45rem; }
.wizard-footer .button .nav-icon { width: 1rem; height: 1rem; }
/* display:contents keeps the form's grid rows (body, footer) intact now that the
   body is wrapped, while the disabled attribute still reaches every control. */
.isotope-record-fieldset { display: contents; margin: 0; border: 0; padding: 0; }
.isotope-record-fieldset > * { min-width: 0; }
.isotope-record-fieldset:disabled input, .isotope-record-fieldset:disabled select, .isotope-record-fieldset:disabled textarea { cursor: default; opacity: .85; }
.isotope-record-fieldset:disabled .switch { opacity: .6; }
.record-readonly-footer { align-items: center; justify-content: space-between; gap: var(--space-4); }
.record-readonly-note { display: flex; align-items: center; gap: .45rem; color: var(--muted-foreground); font-size: .7rem; line-height: 1.4; }
.record-readonly-note .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; color: var(--info); }
.record-owner-cell { display: flex; min-width: 0; align-items: center; gap: var(--space-2); }
.record-owner-cell > .zone-copyable { min-width: 0; }
.record-source-badge { display: inline-flex; width: auto; min-width: 0; align-items: center; justify-content: center; justify-self: end; border-radius: 999px; background: rgb(59 130 246 / .13); padding: .1rem .35rem; color: var(--info); font-size: .6rem; font-weight: 600; line-height: 1.3; }
.record-source-badge.alias { background: #ede9fe; color: #5b21b6; }
.dark .record-source-badge.alias { background: #4c1d95; color: #ddd6fe; }
.record-source-badge-empty { visibility: hidden; }

@media (max-width: 1100px) {
	.zone-records-heading {
		display: grid;
		grid-template-columns: 2.25rem minmax(0, 1fr);
		gap: var(--space-2) var(--space-3);
	}
	.zone-back-button { grid-column: 1; grid-row: 1; }
	.zone-records-title { grid-column: 2; grid-row: 1; }
	.zone-records-actions {
		grid-column: 1 / -1;
		grid-row: 2;
		width: 100%;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: .4rem;
	}
	.isotope-record-row {
		grid-template-columns: 3.25rem minmax(0, 2fr) minmax(0, 3fr) 3.5rem 4.5rem 1.75rem;
		gap: var(--space-2);
		padding-inline: var(--space-3);
	}
	.integration-card-actions { align-items: stretch; flex-direction: column-reverse; }
	.integration-card-actions-primary { width: 100%; align-items: stretch; flex-direction: column; }
	.integration-card-actions .button, .integration-card-actions form { width: 100%; justify-content: center; }
}

@media (max-width: 767px) {
	.isotope-record-row {
		grid-template-columns: 3.25rem minmax(0, 1fr) 1.75rem;
		grid-template-areas:
			"type owner open"
			"type value open";
		min-height: 4.4rem;
		gap: var(--space-1) var(--space-2);
		padding-block: .55rem;
	}
	.record-type-badge { grid-area: type; }
	.record-owner-cell { grid-area: owner; }
	.record-value-copy { display: flex; grid-area: value; min-width: 0; }
	.record-ttl, .record-source-badge { display: none; }
	.record-open-button, .record-open-placeholder { grid-area: open; align-self: center; }
}

@media (max-width: 700px) {
	.unifi-connection dl { grid-template-columns: 1fr; }
	.unifi-connection dl > div { border-top: 1px solid var(--border); padding: .6rem 0; }
	.unifi-connection dl > div:first-child { border-top: 0; padding-top: 0; }
	.unifi-auth-modes { grid-template-columns: 1fr; }
	.unifi-zone-fields { grid-template-columns: 1fr; }
	.unifi-wizard-dialog { width: calc(100% - 1rem); }
	.unifi-wizard-dialog .wizard-progress { margin-inline: -1rem; padding-inline: var(--space-4); }
	.unifi-wizard-dialog .wizard-footer { margin: 0 -1rem -1rem; padding-inline: var(--space-4); }
	.wizard-footer { align-items: stretch; flex-direction: column-reverse; }
	.wizard-footer-advance { align-items: stretch; flex-direction: column-reverse; }
	/* Two steps need only Back beside the main button; Cancel stays below. */
	.mcp-setup-dialog .wizard-footer-advance { flex-direction: row; }
	.mcp-setup-dialog .wizard-footer-advance .button { flex: 1 1 0; }
	.wizard-footer .button { width: 100%; justify-content: center; }
	.wizard-progress { grid-template-columns: auto 1fr auto 1fr auto 1fr auto; }
	.field-grid.dynamic-dns-global-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Backup and restore */
.backup-form { display: grid; gap: var(--space-4); }
.backup-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .65rem; }
.backup-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.backup-actions .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.backup-download { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: var(--space-3) var(--space-4); }
.backup-download-file { display: flex; min-width: 0; align-items: center; gap: .7rem; }
.backup-download-file > .nav-icon { width: 1.1rem; height: 1.1rem; flex: 0 0 1.1rem; color: var(--muted-foreground); }
.backup-download-file > div { display: grid; min-width: 0; gap: .15rem; }
.backup-download-file strong { overflow: hidden; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.backup-download-file span { color: var(--muted-foreground); font-size: .72rem; }
.backup-download .button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; }
.backup-download .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.backup-progress { display: grid; gap: var(--space-2); border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: .9rem var(--space-4); }
.backup-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.backup-progress-heading strong { font-size: .8125rem; }
.backup-progress-heading span { color: var(--muted-foreground); font-size: .75rem; font-variant-numeric: tabular-nums; }
.backup-progress-track { overflow: hidden; height: .375rem; border-radius: 999px; background: color-mix(in srgb, var(--foreground) 12%, transparent); }
.backup-progress-fill { width: 0; height: 100%; border-radius: 999px; background: var(--primary); transition: width 220ms ease; }
.backup-progress-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); color: var(--muted-foreground); font-size: .72rem; }
.backup-progress-meta span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.backup-upload[hidden] { display: none; }
@media (max-width: 640px) {
  .backup-actions { justify-content: stretch; }
  .backup-actions .button { flex: 1 1 auto; }
  .backup-download .button { width: 100%; }
}

/* Restore is not a routine action, so its card says so before it is used. */
.settings-danger-card { border-color: color-mix(in srgb, var(--destructive) 32%, var(--border)); }
.settings-danger-card > header h2 .nav-icon { color: var(--destructive); }
.backup-inventory { display: grid; gap: .3rem; margin: 0 0 .6rem; padding-left: 1.1rem; color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; }
.backup-panel .settings-advanced > small { display: block; color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.backup-schedule-status { display: flex; align-items: center; gap: var(--space-4); border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: .45rem var(--space-2) .45rem .9rem; color: var(--muted-foreground); font-size: .72rem; }
.backup-schedule-timestamps { display: flex; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.backup-schedule-timestamps > span { display: flex; gap: .35rem; }
.backup-schedule-time-compact { display: none; }
.backup-schedule-status strong { color: var(--foreground); }
.backup-schedule-status .error, .backup-schedule-status .error strong { color: var(--destructive); }
.backup-schedule-status > .button { flex: 0 0 auto; }
.backup-local-list { overflow: hidden; border: 1px solid var(--border); border-radius: .5rem; }
.backup-local-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); border-top: 1px solid var(--border); padding: var(--space-3) .9rem; }
.backup-local-row:first-child { border-top: 0; }
.backup-local-icon { color: var(--muted-foreground); }
.backup-local-icon .nav-icon { width: 1rem; height: 1rem; }
.backup-local-detail { display: grid; min-width: 0; gap: .12rem; }
.backup-local-detail strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.backup-local-detail span { color: var(--muted-foreground); font-size: .68rem; }
.backup-local-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.backup-local-actions form { display: flex; margin: 0; }
.button.outline.backup-local-delete { border-color: color-mix(in oklch, var(--destructive) 45%, var(--border)); color: var(--destructive); }
.button.outline.backup-local-delete:hover { background: color-mix(in oklch, var(--destructive) 12%, transparent); }
.backup-local-restore-note { display: block; color: var(--muted-foreground); font-size: .7rem; line-height: 1.45; }
.backup-history-header-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.backup-history-header-actions .button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.backup-history-header-actions .button .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.backup-run-split { display: flex; align-items: stretch; }
.backup-run-split > form { display: flex; margin: 0; }
.backup-run-split > form .button { border-radius: 999px 0 0 999px; }
.backup-run-menu { position: relative; }
.backup-run-menu > summary { width: 2.15rem; height: 100%; border-left-color: color-mix(in oklch, currentColor 25%, transparent); border-radius: 0 999px 999px 0; padding: 0; }
.backup-run-menu > summary .nav-icon { width: .8rem; height: .8rem; }
.backup-run-menu[open] > summary .nav-icon { rotate: 180deg; }
.backup-run-menu > div { position: absolute; top: calc(100% + .35rem); right: 0; z-index: 50; display: grid; width: max-content; min-width: 13rem; overflow: hidden; border: 1px solid var(--border); border-radius: .5rem; background: var(--popover, var(--card)); padding: .3rem; color: var(--popover-foreground, var(--foreground)); box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .35); }
.backup-run-menu > div button { display: flex; min-height: 2rem; align-items: center; gap: .55rem; border: 0; border-radius: .35rem; background: transparent; padding: 0 .65rem; color: inherit; font-size: .76rem; text-align: left; white-space: nowrap; }
.backup-run-menu > div button:hover { background: var(--muted); }
.backup-run-menu > div .nav-icon { width: .9rem; height: .9rem; }
.backup-history-footer { display: flex; min-width: 0; align-items: baseline; gap: var(--space-2); border-top: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 45%, transparent); padding: var(--space-3) var(--space-6); color: var(--muted-foreground); font-size: .7rem; }
.backup-history-footer span { flex: none; font-weight: 600; }
.backup-history-footer code { min-width: 0; overflow-wrap: anywhere; }
.backup-local-empty { gap: .35rem; padding: var(--space-5); }
.backup-local-empty .nav-icon { width: 1.35rem; height: 1.35rem; }
.backup-local-empty h3 { font-size: .8rem; }
.backup-local-empty p { max-width: 34rem; font-size: .72rem; }
@media (max-width: 640px) {
  .backup-schedule-status { gap: .65rem; padding: .65rem var(--space-3); }
  .backup-schedule-timestamps { flex-direction: column; flex-wrap: nowrap; gap: var(--space-1); }
  .backup-schedule-timestamps > span { white-space: nowrap; }
  .backup-schedule-time-full { display: none; }
  .backup-schedule-time-compact { display: inline; }
  .backup-history-card > header { align-items: stretch; flex-direction: column; }
  .backup-history-header-actions { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .backup-history-header-actions > .button { width: 100%; }
  .backup-run-split { width: 100%; }
  .backup-run-split > form { flex: 1 1 auto; }
  .backup-run-split > form .button { width: 100%; }
  .backup-history-footer { align-items: stretch; flex-direction: column; gap: var(--space-1); padding-inline: var(--space-4); }
  .backup-history-footer code { display: block; width: 100%; line-height: 1.4; }
  .backup-local-row { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .backup-local-actions { display: grid; width: 100%; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
  .backup-local-actions > a, .backup-local-actions > button, .backup-local-actions > form, .backup-local-actions > form > button { width: 100%; min-width: 0; }
  .backup-local-actions .button { justify-content: center; gap: .35rem; padding-inline: .55rem; line-height: 1; }
  .backup-local-actions .button .nav-icon { width: .9rem; height: .9rem; flex-basis: .9rem; }
  .backup-local-actions .button span { overflow: hidden; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
}
.field-note { color: var(--destructive); font-size: .7rem; }
.field-note[hidden] { display: none; }
.field-control input[aria-invalid="true"] { border-color: var(--destructive); }
.backup-archive-preview { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--muted); padding: .7rem .9rem; }
.backup-archive-preview[hidden] { display: none; }
.backup-archive-preview > div { display: grid; min-width: 0; gap: .15rem; }
.backup-archive-preview strong { font-size: .78rem; }
.backup-archive-preview span { color: var(--muted-foreground); font-size: .72rem; }
.backup-archive-icon .nav-icon { width: 1.05rem; height: 1.05rem; color: var(--muted-foreground); }
.backup-archive-preview.is-invalid { border-color: color-mix(in srgb, var(--destructive) 45%, var(--border)); }
.backup-archive-preview.is-invalid .backup-archive-icon .nav-icon, .backup-archive-preview.is-invalid strong { color: var(--destructive); }
.backup-archive-preview.inline, .backup-archive-preview.inline.is-invalid { display: block; border: 0; background: transparent; padding: 0; }
.backup-archive-preview.inline > div { gap: .12rem; }
.backup-archive-preview.inline strong, .backup-archive-preview.inline span { color: var(--muted-foreground); font-size: .7rem; font-weight: 400; }
.file-dropzone-selection.is-invalid { border-color: color-mix(in srgb, var(--destructive) 45%, var(--border)); }
.file-dropzone-selection.is-invalid > .nav-icon, .file-dropzone-selection.is-invalid .backup-archive-preview.inline strong { color: var(--destructive); }

/* TSIG keys. A row states the algorithm, whether the vault holds a secret, and
   which zones depend on the key, because removing one breaks every transfer
   and update it guards. */
.tsig-key-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.tsig-key-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto 2rem; align-items: center; gap: var(--space-3); border-top: 1px solid var(--border); padding: var(--space-3) var(--space-4); }
.tsig-key-row:first-child { border-top: 0; }
.tsig-key-row:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.tsig-key-icon { display: grid; place-items: center; color: var(--muted-foreground); }
.tsig-key-icon .nav-icon { width: 1rem; height: 1rem; }
.tsig-key-row > div { display: grid; min-width: 0; gap: .15rem; }
.tsig-key-row strong { font: 500 .875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; overflow-wrap: anywhere; }
.tsig-key-row small { color: var(--muted-foreground); font-size: .7rem; overflow-wrap: anywhere; }
.tsig-key-warning { display: flex; align-items: center; gap: .3rem; color: var(--destructive); }
.tsig-key-warning .nav-icon { width: .85rem; height: .85rem; flex: 0 0 auto; }
.tsig-empty { gap: .35rem; padding: 2.5rem var(--space-4); }
.tsig-empty > .nav-icon { width: 1.6rem; height: 1.6rem; margin-bottom: .3rem; }
.tsig-empty h3 { font-size: .9rem; }
.tsig-empty p { max-width: 26rem; font-size: .78rem; }
.settings-action-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.settings-action-card > header > div { min-width: 0; }
.settings-action-card > header > .button { flex: 0 0 auto; }
@media (max-width: 640px) {
  .tsig-key-row { grid-template-columns: 1.5rem minmax(0, 1fr) 2rem; padding-inline: var(--space-3); }
  .tsig-key-row .button.compact { grid-column: 2 / -1; justify-self: start; }
}

/* Motion preferences cover every interaction, including swapped fragments and
   third-party loading indicators, rather than relying on each component. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (forced-colors: active) {
  :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline-color: Highlight; }
  .nav-item.active, .isotope-tab.active, [role="tab"][aria-selected="true"] { border: 1px solid Highlight; }
  .source-pill, .rcode, .status-badge, .domain-policy-badge { border: 1px solid currentColor !important; }
	.setting-switch-row input[type=checkbox] { forced-color-adjust: none; border-color: ButtonText; background: Canvas; }
	.setting-switch-row input[type=checkbox]::after { background: ButtonText; }
	.setting-switch-row input[type=checkbox]:checked { border-color: Highlight; background: Highlight; }
	.setting-switch-row input[type=checkbox]:checked::after { background: HighlightText; }
	.command-palette [data-command-item].active { outline: 2px solid Highlight; }
	.command-palette-search-modes button[aria-checked="true"] { outline: 2px solid Highlight; }
}

/* htmx injects these two rules as an inline <style> element on load, which the
   console's strict style-src CSP blocks. Injection is turned off via the
   htmx-config meta tag, so the rules are carried here instead. */
.htmx-indicator { opacity: 0; visibility: hidden; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; visibility: visible; transition: opacity 200ms ease-in; }

.catalog-import-members { max-height: 24rem; overflow: auto; }
.catalog-import-members span { overflow-wrap: anywhere; }
.catalog-import-members small { display: block; opacity: .7; }
.catalog-import-result { padding-block: var(--space-3); border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.catalog-import-result p { margin-top: .35rem; }
.catalog-import-progress { display: none; }
.htmx-request .catalog-import-progress, .catalog-import-progress.htmx-request { display: block; }

.catalog-import-dialog .catalog-import-steps { grid-template-columns: auto minmax(2rem, 1fr) auto minmax(2rem, 1fr) auto; }
.catalog-import-type { min-width: 0; border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.catalog-import-type legend { font-size: .8rem; font-weight: 600; padding-bottom: .65rem; }
.catalog-import-type .choice-tile:has(input:checked) { border-color: var(--info); background: rgb(59 130 246 / .08); }
.catalog-import-primary-confirmation { display: none; }
.catalog-import-type:has(input[value="primary"]:checked) .catalog-import-primary-confirmation { display: grid; gap: var(--space-3); }
.catalog-import-result.catalog-import-alert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; padding: var(--space-4); }
.catalog-import-alert > .nav-icon { width: 1.1rem; height: 1.1rem; margin-top: .1rem; }
.catalog-import-alert strong { color: var(--foreground); }
.catalog-import-result.warning-box { border-color: var(--warning-strong); }
.dnssec-migration-steps { display: grid; gap: .65rem; font-size: .78rem; line-height: 1.55; color: var(--foreground); }
.dnssec-migration-steps ol { padding-left: var(--space-5); margin: 0; display: grid; gap: .6rem; }
.dnssec-migration-details { margin-top: var(--space-3); }
.dnssec-migration-details summary { cursor: pointer; font-weight: 600; }
.dnssec-migration-details[open] summary { margin-bottom: var(--space-3); }

.zone-conversion-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zone-conversion-facts .zone-conversion-source { grid-column: 1 / -1; }
.zone-conversion-facts .zone-conversion-source dd { white-space: normal; overflow-wrap: anywhere; }
.zone-conversion-warning { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; }
.zone-conversion-warning > .nav-icon { width: 1rem; height: 1rem; margin-top: .1rem; }
.zone-conversion-warning > div { display: grid; gap: .4rem; }
.zone-conversion-warning p { margin: 0; }
.zone-conversion-info { border-color: color-mix(in oklch, var(--info) 45%, var(--border)); background: rgb(59 130 246 / .08); }
.zone-catalog-membership { display: block; color: var(--muted-foreground); font-size: .72rem; font-weight: 400; overflow-wrap: anywhere; }
.zone-catalog-membership a { color: var(--foreground); text-decoration: underline; text-underline-offset: .15rem; }

:is(.isotope-zone-name, .zone-records-title) .zone-catalog-membership { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
:is(.isotope-zone-name, .zone-records-title) .zone-catalog-membership > .nav-icon { width: .85rem; height: .85rem; flex: 0 0 .85rem; }

.zone-records-title .zone-catalog-membership a { color: inherit; }
.release-notes-content { overflow-wrap: anywhere; font-size: .8125rem; line-height: 1.6; max-height: 22rem; overflow: auto; margin-top: var(--space-3); }
.release-notes-content :is(h1, h2, h3, h4) { font-size: .875rem; line-height: 1.4; margin: .8rem 0 .4rem; }
.release-notes-content :is(p, ul, ol, pre) { margin: var(--space-2) 0; }
.release-notes-content :is(ul, ol) { padding-left: 1.2rem; }
.release-notes-content pre { white-space: pre-wrap; font-size: .75rem; }
.release-notes-content img { max-width: 100%; height: auto; }
.release-notes-content a { text-decoration: underline; }
.cluster-update-nodes { display: grid; gap: .875rem; padding: 0; list-style: none; }
.cluster-update-node { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: center; gap: .65rem; }
.cluster-update-node:not(:last-child)::after { content: ""; position: absolute; left: .75rem; transform: translateX(-50%); top: calc(50% + .875rem); height: calc(100% - .875rem); width: 1px; background: var(--border); }
.cluster-update-step { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--muted); color: var(--muted-foreground); font-size: .6875rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.cluster-update-step .nav-icon { width: .875rem; height: .875rem; }
.cluster-update-step:has(.icon-loader-circle) { border-color: transparent; background: color-mix(in oklch, var(--warning-strong) 12%, transparent); color: var(--warning-strong); }
.dark .cluster-update-step:has(.icon-loader-circle) { color: #f1ad47; }
.cluster-update-step .icon-loader-circle { animation: about-update-spin 1s linear infinite; }
.cluster-update-node[data-state="complete"] .cluster-update-step { border-color: transparent; background: color-mix(in oklch, var(--success-strong) 12%, transparent); color: var(--success-strong); }
.dark .cluster-update-node[data-state="complete"] .cluster-update-step { color: var(--success); }
.cluster-update-node[data-state="failed"] .cluster-update-step { border-color: transparent; background: color-mix(in oklch, var(--destructive) 12%, transparent); color: var(--destructive); }
.cluster-update-node > div { display: grid; min-width: 0; gap: .1rem; }
.cluster-update-node strong { font-size: .75rem; font-weight: 500; overflow-wrap: anywhere; }
.cluster-update-node > div > span { color: var(--muted-foreground); font-size: .6875rem; line-height: 1.4; }
.cluster-update-status { font-size: .75rem; font-weight: 500; }

.cluster-update-card { padding: var(--space-5); }
/* A rollout started from About or the update notification lands here. */
#cluster-updates { scroll-margin-top: 1rem; }
@media (max-width: 767px) { #cluster-updates { scroll-margin-top: 4.5rem; } }
.cluster-update-card > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cluster-update-card > header h2 { margin: 0; font-size: 1rem; }
.cluster-update-version { flex: 0 0 auto; gap: .3rem; white-space: nowrap; }
.cluster-update-version .nav-icon { width: .8rem; height: .8rem; }
.cluster-update-version.available { background: color-mix(in oklch, var(--warning-strong) 12%, transparent); color: var(--warning-strong); }
.dark .cluster-update-version.available { color: #f1ad47; }
.cluster-update-version.installing { background: color-mix(in oklch, var(--warning-strong) 12%, transparent); color: var(--warning-strong); }
.dark .cluster-update-version.installing { color: #f1ad47; }
.cluster-update-version.current { background: color-mix(in oklch, var(--success-strong) 12%, transparent); color: var(--success-strong); }
.dark .cluster-update-version.current { color: var(--success); }
.cluster-update-content { display: grid; gap: var(--space-4); margin-top: var(--space-2); font-size: .8125rem; }
.cluster-update-content > :is(p, ol) { margin: 0; }
.cluster-update-content > p { color: var(--muted-foreground); font-size: .75rem; line-height: 1.5; }
/* Two equal columns at every width. A wrapping row stacked the buttons in the
   narrow side column whenever a label ran a few pixels long, then unstacked
   them when a shorter label, such as Checking…, took its place. */
.cluster-update-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.cluster-update-actions:empty { display: none; }
.cluster-update-actions > form { min-width: 0; }
.cluster-update-actions > :only-child { grid-column: 1 / -1; }
.cluster-update-actions > .button,
.cluster-update-actions > form .button { width: 100%; min-width: 0; justify-content: center; padding-inline: var(--space-2); white-space: nowrap; }

/* Insights */
.insights-range { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); padding-top: var(--space-1); }
.insight-notes { display: grid; gap: var(--space-1); }
.insight-notes p { margin: 0; }
.insight-findings .isotope-data-header .count-badge { flex: 0 0 auto; }
/* Findings and Devices say which range they count under their title, as the
   ranking cards beside them do, so the range stays visible on phones. Their
   header band comes from the ranking cards' rule. */
.isotope-data-header > .ranking-heading { display: grid; align-items: initial; gap: .15rem; }
.insight-finding-list { margin: 0; padding: 0; list-style: none; }
.insight-finding { display: grid; min-height: 4.5rem; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); border-top: 1px solid var(--border); padding: var(--space-4); }
.insight-finding:first-child, .insight-findings-skeleton .isotope-data-header + .insight-finding { border-top: 0; }
.insight-finding-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .55rem; background: color-mix(in oklch, currentColor 13%, transparent); color: var(--muted-foreground); }
.insight-finding-icon .nav-icon { width: 1.1rem; height: 1.1rem; }
.insight-finding.tone-attention .insight-finding-icon { color: var(--warning-strong); }
.insight-finding.tone-notice .insight-finding-icon { color: #2563eb; }
.insight-finding.tone-positive .insight-finding-icon { color: var(--success-strong); }
.dark .insight-finding.tone-attention .insight-finding-icon { color: #f1ad47; }
.dark .insight-finding.tone-notice .insight-finding-icon { color: #60a5fa; }
.dark .insight-finding.tone-positive .insight-finding-icon { color: var(--success); }
.insight-finding-copy { display: grid; min-width: 0; gap: .2rem; }
.insight-finding-title { color: var(--muted-foreground); font-size: .75rem; font-weight: 500; }
.insight-finding-copy strong { overflow: hidden; font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.insight-finding-copy strong.mono { font: 500 .875rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.insight-finding-copy p { margin: 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.45; }
.insight-evidence-button { flex: 0 0 auto; gap: var(--space-1); }
.insight-finding-actions { display: flex; align-items: center; gap: var(--space-2); }
/* A row's hide menu is a round icon the height of Details beside it. */
.insight-row-hide > summary.icon-button { width: 2rem; height: 2rem; flex-basis: 2rem; color: var(--muted-foreground); }
.insight-row-hide > summary.icon-button:hover, .insight-row-hide[open] > summary.icon-button { color: var(--foreground); }
.insight-evidence-button .nav-icon { width: .875rem; height: .875rem; }
.insight-findings-empty, .insight-section-empty { min-height: 11rem; gap: .35rem; padding: var(--space-6) var(--space-4); }
.insight-findings-empty > .empty-state-icon { width: 2.5rem; height: 2.5rem; margin-bottom: .35rem; border-radius: .6rem; background: color-mix(in oklch, var(--success-strong) 13%, transparent); color: var(--success-strong); }
.dark .insight-findings-empty > .empty-state-icon { color: var(--success); }
.insight-findings-empty > .empty-state-icon .nav-icon { width: 1.15rem; height: 1.15rem; }
.insight-findings-empty h3, .insight-section-empty h3 { font-size: .875rem; }
/* A finding's link that cannot open is neither good nor bad news. */
.insight-link-missing { min-height: 16rem; }
.insight-link-missing > .empty-state-icon, .dark .insight-link-missing > .empty-state-icon { background: var(--muted); color: var(--muted-foreground); }
.insight-findings-empty p, .insight-section-empty p { max-width: 30rem; font-size: .75rem; line-height: 1.5; }
.insight-section-empty > .nav-icon { width: 1.25rem; height: 1.25rem; margin-bottom: .35rem; color: var(--muted-foreground); }
.insight-section-empty .button { margin-top: var(--space-2); }
.insight-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.insight-metrics[data-metric-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insight-metrics[data-metric-count="1"] { grid-template-columns: minmax(0, 1fr); }
.insight-metric-skeleton { border-color: var(--border); }
.insight-metric-skeleton > span { width: 60%; height: .875rem; }
.insight-rankings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.insight-skeleton-title { width: 9rem; height: .625rem; }
.insight-skeleton-line { width: min(28rem, 80%); height: .75rem; margin-top: .3rem; }
.insights-skeleton { display: grid; gap: var(--space-6); }
.insight-contribution-table tbody th { height: 3.75rem; border-top: 1px solid var(--border); padding: .625rem var(--space-4); color: var(--foreground); font-size: .8125rem; font-weight: 400; text-align: left; white-space: normal; }
.insight-contribution-table td:last-child { width: auto; }
.insight-list-name { display: grid; min-width: 0; max-width: 22rem; gap: .15rem; }
.insight-list-name strong { font-weight: 600; }
.insight-list-name code { overflow: hidden; color: var(--muted-foreground); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.numeric-cell, .insight-share, .insight-overlap-share { font-variant-numeric: tabular-nums; }
.insight-share-cell { display: flex; min-width: 9.5rem; align-items: center; gap: .625rem; }
/* Share bars use Sable's gold, the deeper amber on light backgrounds. */
.insight-share-bar { --insight-share-fill: var(--warning-strong); display: block; width: 5rem; height: .375rem; flex: 0 0 5rem; overflow: hidden; border: 0; border-radius: 999px; background: var(--muted); appearance: none; }
.dark .insight-share-bar { --insight-share-fill: #f1ad47; }
.insight-share-bar::-webkit-progress-bar { border-radius: 999px; background: var(--muted); }
.insight-share-bar::-webkit-progress-value { border-radius: 999px; background: var(--insight-share-fill); }
.insight-share-bar::-moz-progress-bar { border-radius: 999px; background: var(--insight-share-fill); }
.insight-share { min-width: 3.25rem; font-size: .8125rem; font-weight: 500; }
.insight-overlap-share { margin-left: var(--space-1); color: var(--muted-foreground); font-size: .75rem; }
.insight-contribution .blocklist-health-warning { display: flex; align-items: center; gap: .35rem; color: var(--destructive); font-size: .75rem; }
.insight-contribution .blocklist-health-warning .nav-icon { width: .875rem; height: .875rem; flex: 0 0 auto; }
.insight-queries-cell { display: inline-grid; justify-items: end; gap: .1rem; }
.insight-queries-cell small { color: var(--muted-foreground); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.insight-failed-cell > .numeric-cell { color: var(--warning-strong); font-weight: 600; }
.dark .insight-failed-cell > .numeric-cell { color: var(--warning); }
.insight-app-category { color: var(--muted-foreground); font-size: .72rem; }
.insight-card-note p + p { margin-top: .35rem; }
.insight-card-note { border-top: 1px solid var(--border); background: color-mix(in oklch, var(--muted) 45%, transparent); padding: var(--space-3) var(--space-4); }
.insight-card-note p { margin: 0; color: var(--muted-foreground); font-size: .75rem; line-height: 1.5; }
.insight-card-note strong { color: var(--foreground); font-weight: 600; }
.insight-list-mobile-row .data-mobile-heading { align-items: flex-start; }
.insight-list-mobile-row .data-mobile-heading > span:first-child { display: grid; min-width: 0; gap: .15rem; }
.insight-list-mobile-row .data-mobile-heading strong { font-size: .8125rem; font-weight: 600; }
.insight-list-mobile-row .data-mobile-heading small { overflow: hidden; color: var(--muted-foreground); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.insight-list-mobile-row .insight-share-bar { width: 100%; }
.insight-list-mobile-row dd { font-variant-numeric: tabular-nums; }
.insight-overlap { color: var(--muted-foreground); font-size: .72rem; }
/* Evidence charts: gray for the context, the finding's own color for what it
   is about, and HTML labels at fixed shares of the width. */
.insight-chart { --insight-chart-emphasis: #2563eb; }
.insight-chart.tone-attention { --insight-chart-emphasis: var(--warning-strong); }
.insight-chart.tone-positive { --insight-chart-emphasis: var(--success-strong); }
.dark .insight-chart { --insight-chart-emphasis: #60a5fa; }
.dark .insight-chart.tone-attention { --insight-chart-emphasis: #f1ad47; }
.dark .insight-chart.tone-positive { --insight-chart-emphasis: var(--success); }
.insight-chart-plot { display: block; width: 100%; height: auto; overflow: visible; }
/* A bar chart reads out the slot under the pointer or finger: the bar lifts,
   the rest fade back, and the reading sits beside it at the chart's top. A
   sideways drag scrubs across the bars; an upward one still scrolls. */
.insight-chart-frame { position: relative; border-radius: .25rem; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.insight-chart-frame:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.insight-chart-frame [data-chart-slot] { transition: opacity 120ms ease; }
.insight-chart-frame.is-reading [data-chart-slot]:not(.is-active) { opacity: .4; }
.insight-chart-tooltip { top: 0; min-width: 9rem; }
/* The drawer sizes and mutes every span in its sections; a chart's labels keep
   the chart's own type. */
.insight-chart :is(.chart-tooltip-row, .insight-chart-axis) span { color: inherit; font-size: inherit; }
.insight-chart-tooltip .chart-tooltip-row .insight-chart-swatch.average { width: .7rem; }
.insight-chart-muted { fill: color-mix(in oklch, var(--muted-foreground) 45%, transparent); }
.insight-chart-emphasis { fill: var(--insight-chart-emphasis); }
.insight-chart-expected { fill: color-mix(in oklch, var(--insight-chart-emphasis) 10%, transparent); stroke: var(--insight-chart-emphasis); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.insight-chart-average { stroke: color-mix(in oklch, var(--foreground) 60%, transparent); stroke-width: 1.25; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.insight-chart-baseline { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.insight-chart-ticks { stroke: var(--insight-chart-emphasis); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.insight-chart-axis { display: grid; margin-top: .35rem; color: var(--muted-foreground); font-size: .72rem; font-variant-numeric: tabular-nums; }
.insight-chart-axis.quarters { grid-template-columns: repeat(4, 1fr); }
.insight-chart-axis.ends { grid-template-columns: 1fr auto 1fr; }
.insight-chart-axis.ends span:last-child { justify-self: end; }
.insight-chart-legend { display: flex; flex-wrap: wrap; gap: .35rem var(--space-4); margin: .6rem 0 0; padding: 0; color: var(--muted-foreground); font-size: .75rem; list-style: none; }
.insight-chart-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.insight-chart-swatch { width: .65rem; height: .65rem; border-radius: 2px; }
.insight-chart-swatch.muted { background: color-mix(in oklch, var(--muted-foreground) 45%, transparent); }
.insight-chart-swatch.emphasis { background: var(--insight-chart-emphasis); }
.insight-chart-swatch.average { height: 0; border-top: 1.5px dashed color-mix(in oklch, var(--foreground) 60%, transparent); border-radius: 0; }
.insight-chart-swatch.tick { width: 2px; height: .8rem; border-radius: 0; background: var(--insight-chart-emphasis); }
.insight-why { display: grid; gap: .65rem; border-top: 1px solid var(--border); padding-top: var(--space-5); }
.insight-why h3 { margin: 0; color: var(--muted-foreground); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.insight-why ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.insight-why li { display: flex; align-items: flex-start; gap: .55rem; font-size: .8125rem; line-height: 1.4; }
.insight-why li .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; margin-top: .15rem; color: var(--success-strong); }
.dark .insight-why li .nav-icon { color: var(--success); }
.insight-why li code { font-size: .78rem; overflow-wrap: anywhere; }
.insight-why li.insight-cause { color: var(--muted-foreground); }
.insight-why li.insight-cause .nav-icon, .dark .insight-why li.insight-cause .nav-icon { color: var(--muted-foreground); }
.insight-method { margin-top: .1rem; }
.insight-method > summary { display: flex; width: fit-content; align-items: center; gap: .4rem; border-radius: calc(var(--radius) - 4px); color: var(--muted-foreground); cursor: pointer; font-size: .7rem; font-weight: 600; letter-spacing: .04em; list-style: none; text-transform: uppercase; }
.insight-method > summary::-webkit-details-marker { display: none; }
.insight-method > summary::after { width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: rotate(-45deg); transition: transform 150ms ease; }
.insight-method[open] > summary::after { transform: rotate(45deg) translate(-.1rem, -.1rem); }
.insight-method > summary:hover { color: var(--foreground); }
.insight-method > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: .2rem; }
.insight-method > p { margin: .6rem 0 0; color: var(--muted-foreground); font-size: .8rem; line-height: 1.5; }
.insight-evidence-summary p { color: var(--foreground); font-size: .875rem; }
.insight-list-row { position: relative; display: flex; min-width: 0; min-height: 3rem; align-items: center; gap: var(--space-4); border-top: 1px solid var(--border); padding: var(--space-2) var(--space-3); }
.insight-list-row:first-child { border-top: 0; }
.insight-list-row.has-link:has(.insight-list-link:hover) { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.insight-list-row:has(.insight-list-link:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }
.insight-list-copy { display: grid; min-width: 0; flex: 1; gap: .1rem; }
/* The drawer mutes every span in its sections; a row's value is the content. */
.query-detail-answer .insight-row-value { min-width: 0; color: var(--foreground); font-size: inherit; }
.insight-row-value > strong { min-width: 0; font: 500 .8125rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; overflow-wrap: anywhere; }
/* The copy button sits above the row-wide link so both stay usable. */
.insight-row-value > button { position: relative; z-index: 1; }
.insight-row-value > .insight-row-watch { position: relative; z-index: 1; display: grid; width: 1.25rem; height: 1.25rem; flex: 0 0 1.25rem; place-items: center; border-radius: calc(var(--radius) - 4px); color: var(--muted-foreground); }
.insight-row-value > .insight-row-watch:hover { background: var(--muted); color: var(--foreground); }
.insight-row-value > .insight-row-watch .nav-icon { width: .8rem; height: .8rem; flex-basis: .8rem; }
.insight-row-value > button.is-copied .copy-icon-success { color: var(--success); }
.insight-list-copy small { overflow: hidden; color: var(--muted-foreground); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.insight-list-link, .insight-list-count { flex: 0 0 auto; color: var(--muted-foreground); font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.insight-list-link { display: inline-flex; align-items: center; }
.insight-list-link::after { position: absolute; inset: 0; content: ""; }
.insight-list-link:focus-visible { outline: none; }
.insight-list-link .nav-icon { width: 1rem; height: 1rem; }
button.insight-list-link { border: 0; background: none; padding: 0; cursor: pointer; }
.insight-fact-note { display: block; margin-top: .2rem; color: var(--muted-foreground); font-size: .72rem; font-weight: 400; }
/* The drawer spaces the children of its sections apart; a list's rows must
   touch so their dividers and hover states meet. */
.query-detail-answer > .insight-client-list { gap: 0; }
.insight-client-list { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }

.insights-tab-list .isotope-tab { min-width: 7.5rem; }
.insights-tab-list .nav-icon { width: 1rem; height: 1rem; }
.insights-tab-panel { display: grid; min-width: 0; gap: var(--space-6); }
.insights-tab-panel[hidden] { display: none; }
/* The Devices search sits under the card's heading, as Query Logs' does, with
   the filters beside it. When the card is narrow the filters drop below. */
.insight-entity-filter-selects { display: flex; flex: none; gap: var(--space-2); }
.insight-entity-filter-selects > * { width: 8.75rem; }
.insight-entity-filter-selects > :is(.insight-device-type-filter, .insight-app-category-filter) { width: 11rem; }
.insight-entity-search-bar .insights-skeleton-block { height: 2.25rem; border-radius: calc(var(--radius) - 2px); }
.insight-entity-search-bar > .insights-skeleton-block { min-width: 12rem; flex: 1; }
@container (max-width: 36rem) {
  .insight-entity-search-bar { flex-wrap: wrap; row-gap: var(--space-2); padding-inline: var(--space-4); }
  .insight-entity-filter-selects { flex: 1 1 100%; }
  .insight-entity-filter-selects > *, .insight-entity-filter-selects > :is(.insight-device-type-filter, .insight-app-category-filter) { min-width: 0; flex: 1; width: auto; }
}
.insight-entity-table tbody th { height: 3.75rem; border-top: 1px solid var(--border); padding: .625rem var(--space-4); color: var(--foreground); font-size: .8125rem; font-weight: 400; text-align: left; }
.insight-entity-table td:last-child { width: 3rem; }
.insight-entity-table .icon-button { width: 2rem; height: 2rem; flex-basis: 2rem; border-color: transparent; background: transparent; }
.insight-entity-table .icon-button:hover { background: var(--accent); }
.insight-entity-table .muted-cell { white-space: nowrap; }
.insight-entity-cell { display: grid; min-width: 11rem; max-width: 26rem; gap: .2rem; }
/* When the card is too narrow for every column the name matters more than
   history. The card's own width decides, since the sidebar can take a third of
   the window, and a row that ran off the edge would hide its details button. */
.insight-entity-card { container-type: inline-size; }
@container (max-width: 68rem) { .insight-entity-table .insight-optional-cell { display: none; } }
/* Narrower still, as on a tablet with the sidebar open, the card lists its
   devices the way a phone does. */
@container (max-width: 50rem) {
  .insight-entity-card .admin-desktop-table { display: none; }
  .insight-entity-card .admin-mobile-list { display: block; }
}
.insight-device-ids { display: grid; min-width: 0; gap: .1rem; }
.insight-device-ids code { color: var(--muted-foreground); font-size: .72rem; white-space: nowrap; }
.insight-entity-name { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-1) .4rem; }
.insight-entity-name strong { min-width: 0; overflow: hidden; font-size: .8125rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.insight-entity-name strong.mono { font: 500 .8125rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.insight-entity-name .status-badge, .insight-device-badges .status-badge { padding: .1rem .45rem; font-size: .625rem; }
.insight-entity-mobile-row .insight-entity-name strong:not(.mono) { font-family: inherit; font-weight: 600; }
.insight-entity-mobile-row .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; color: var(--muted-foreground); }
.admin-mobile-row > div.insight-entity-mobile-copy { display: grid; min-width: 0; flex: 1; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
/* A device's row starts with a gray tile for what it is; the drawer sets the
   same icon before its type. */
.insight-type-tile { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .5rem; background: var(--muted); color: var(--muted-foreground); }
.insight-type-tile .nav-icon, .insight-entity-mobile-row .insight-type-tile .nav-icon { width: 1rem; height: 1rem; flex: none; color: inherit; }
.insight-entity-heading { display: flex; align-items: center; gap: var(--space-3); }
.insight-list-row > .insight-type-tile { margin-right: -.25rem; }
/* An app's logo is a small app tile in the brand's color, ringed in dark mode
   so a black tile keeps its edge; an app without a logo shows its category's
   icon on a gray tile. The app's name always sits beside it. */
.app-icon { width: 2rem; height: 2rem; flex: 0 0 2rem; }
svg.app-icon { display: block; border-radius: .5rem; }
.dark svg.app-icon, svg.app-icon-white { box-shadow: 0 0 0 1px color-mix(in oklch, var(--foreground) 14%, transparent); }
.app-icon-category { display: grid; place-items: center; border-radius: .5rem; background: var(--muted); color: var(--muted-foreground); }
.app-icon-category .nav-icon { width: 1rem; height: 1rem; }
.top-stats-row > .app-icon { width: 1.75rem; height: 1.75rem; flex-basis: 1.75rem; }
.insight-list-row > .app-icon { margin-right: -.25rem; }
.query-detail-header > .app-icon { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; margin-right: .85rem; border-radius: .6rem; }
.query-detail-header > .app-icon-category .nav-icon { width: 1.25rem; height: 1.25rem; }
.query-detail-header > .insight-type-tile { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; margin-right: .85rem; border-radius: .6rem; }
.query-detail-header > .insight-type-tile .nav-icon { width: 1.25rem; height: 1.25rem; }
.insight-entity-mobile-copy small { font-variant-numeric: tabular-nums; }
.insight-device-content { display: contents; }
/* A link to a Settings card lands just below the top of the window and
   outlines the card for a moment. */
[data-settings-card] { scroll-margin-top: 1rem; transition: box-shadow .6s ease; }
[data-settings-card].is-linked { box-shadow: 0 0 0 2px var(--ring); }
/* A drawer's content is swapped in whole. Its wrapper lays out as if it
   weren't there, so the body fills the drawer and the footer stays at the
   bottom. */
.query-detail-content { display: contents; }
.check-domain-form { display: flex; gap: var(--space-2); }
.blocking-check-search .search-field input { width: 100%; }
.check-domain-form .search-field { flex: 1; }
/* With a device field, the domain takes the first row and the device shares the second with Check. */
.check-domain-form:has(.suggest-input) { flex-wrap: wrap; }
.check-domain-form:has(.suggest-input) .search-field { flex-basis: 100%; }
.check-domain-result { display: grid; gap: .6rem; }
.check-domain-result p { margin: 0; line-height: 1.5; }
.query-detail-answer > .check-domain-lists { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.check-domain-lists > .button { width: auto; gap: .45rem; }
.check-domain-lists .nav-icon { width: 1rem; height: 1rem; }
.query-detail-why { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--space-3); font-size: .875rem; }
.query-detail-why[hidden] { display: none; }
.query-detail-why .nav-icon { width: 1rem; height: 1rem; }
.check-domain-note { margin: 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.5; }
/* Visually hidden labels are absolutely positioned; anchoring them to the
   scrolling body keeps them from making the whole drawer scrollable. */
.insight-device-dialog .query-detail-body { position: relative; }
.insight-device-content.htmx-request > * { opacity: .55; transition: opacity 150ms ease; }
.insight-device-loading { display: grid; gap: var(--space-3); }
.insight-device-badges { flex-wrap: wrap; }
.insight-device-badges:empty { display: none; }
.query-detail-title-row { display: flex; min-width: 0; align-items: center; gap: .35rem; }
.query-detail-title-row > h2 { min-width: 0; }
.query-detail-title-action { display: grid; width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; place-items: center; border: 0; border-radius: calc(var(--radius) - 4px); background: transparent; padding: 0; color: var(--muted-foreground); }
.query-detail-title-action:hover { background: var(--muted); color: var(--foreground); }
.query-detail-title-action:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.query-detail-title-action .nav-icon { width: .875rem; height: .875rem; }
.query-detail-header > .query-detail-title-editor { display: grid; width: 100%; gap: .2rem; }
/* The drawer's body flexes to fill the dialog; the header must keep its own
   height when an inline editor makes it taller. */
.insight-device-dialog .query-detail-header { flex: 0 0 auto; }
.insight-name-editor { display: grid; gap: var(--space-2); margin-top: .35rem; }
.insight-name-editor input[name="name"] { font: 500 .9375rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.insight-name-help { color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; }
.insight-name-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
/* A drawer action keeps its width while it runs, with a spinner in place of
   its label: on the button that sent the request, or on the submit button of
   the form that did. */
.insight-action { position: relative; }
/* The drawer header sets its own spans as eyebrows; a label is not one. */
.insight-action > :is(.insight-action-idle, .insight-action-pending) { align-items: center; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; }
.insight-action > .insight-action-idle { display: inline-flex; }
.insight-action > .insight-action-pending { position: absolute; inset: 0; display: none; justify-content: center; }
:is(.insight-action.htmx-request, form.htmx-request .insight-action[type="submit"]) .insight-action-idle { visibility: hidden; }
:is(.insight-action.htmx-request, form.htmx-request .insight-action[type="submit"]) .insight-action-pending { display: inline-flex; }
:is(.insight-action.htmx-request, form.htmx-request .insight-action[type="submit"]) .icon-loader-circle { animation: blocking-refresh-spin .8s linear infinite; }
:is(.insight-name-editor, .insight-type-form) button:disabled { cursor: wait; }
@media (prefers-reduced-motion: reduce) {
  :is(.insight-action.htmx-request, form.htmx-request .insight-action[type="submit"]) .icon-loader-circle { animation-duration: 1.6s; }
}

@media (max-width: 1279px) {
	.insight-metrics, .insight-metrics[data-metric-count="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.insight-metrics[data-metric-count="3"] > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
	.insight-rankings { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
	.insights-tab-list { width: 100%; }
	/* Four labels fill a phone's width, so the icons give way. */
	.insights-tab-list .isotope-tab { min-width: 0; flex: 1; padding-inline: var(--space-2); }
	.insights-tab-list .isotope-tab .nav-icon { display: none; }
	/* The column fills the page. Left to size itself, it shrinks to the
	   subtitle, and the range row ends where the subtitle does. */
	.insights-heading { display: grid; grid-template-columns: minmax(0, 1fr); }
	.insights-range { width: 100%; padding-top: 0; }
	.insights-range .range-select { width: 100%; }
	.insight-metrics, .insight-metrics[data-metric-count="3"] { grid-template-columns: minmax(0, 1fr); }
	.insight-metrics[data-metric-count="3"] > :last-child { grid-column: auto; }
	.insight-finding { grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); }
	.insight-finding-actions { align-self: center; gap: var(--space-1); }
	/* The hide menu sits above the Details tap area that covers the row. */
	.insight-row-hide { z-index: 1; }
	.insight-row-hide[open] { z-index: 30; }
	.insight-finding-copy strong { white-space: normal; overflow-wrap: anywhere; }
	/* On a phone the button shrinks to its chevron and stretches its tap area
	   over the whole finding; the label stays as its accessible name. */
	.insight-finding { position: relative; }
	.insight-finding:has(.insight-evidence-button:hover) { background: color-mix(in oklch, var(--muted) 45%, transparent); }
	.insight-finding .insight-evidence-button { position: static; width: 2rem; height: 2rem; align-self: center; justify-content: center; border-color: transparent; background: transparent; padding: 0; box-shadow: none; }
	.insight-finding .insight-evidence-button::after { position: absolute; inset: 0; content: ""; }
	.insight-finding .insight-evidence-button:hover { background: transparent; }
	.insight-finding .insight-evidence-button:focus-visible { outline: none; }
	.insight-finding:has(.insight-evidence-button:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }
	.insight-evidence-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.insight-evidence-button .nav-icon { width: 1rem; height: 1rem; color: var(--muted-foreground); }
}

html:not([data-passkeys-supported]) [data-passkey-capability] { display: none !important; }

/* Insights drawer buttons size to their labels so none wraps on a phone. */
@media (max-width: 640px) {
	.insight-drawer-actions .button { flex: 1 1 auto; white-space: nowrap; }
}
/* The drawer header sets every span as an uppercase eyebrow; a name source
   keeps its own spelling, such as UniFi. */
.query-detail-header .insight-name-source span { color: inherit; font: inherit; letter-spacing: normal; text-transform: none; }
.query-detail-header .insight-name-source { flex: 0 0 auto; margin-left: var(--space-1); padding: .1rem .45rem; font-size: .625rem; letter-spacing: normal; text-transform: none; white-space: nowrap; }
/* App names and other plain words keep the body face. */
.insight-row-value.plain > strong { font-family: inherit; font-size: .875rem; font-weight: 500; }
/* How blocking treats a device: its rule set, any hold, and their editors. */
.insight-device-blocking { display: grid; gap: var(--space-3); }
.query-detail-answer > .insight-blocking-row { display: flex; align-items: flex-start; gap: var(--space-3); }
.insight-blocking-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .5rem; background: var(--muted); color: var(--muted-foreground); }
.insight-blocking-icon .nav-icon { width: 1rem; height: 1rem; }
.insight-hold .insight-blocking-icon { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.insight-blocking-detail { display: grid; min-width: 0; flex: 1; gap: .15rem; }
.query-detail-answer .insight-blocking-detail strong { color: var(--foreground); font-size: .9375rem; font-weight: 600; }
.query-detail-answer .insight-blocking-detail small { color: var(--muted-foreground); font-size: .8125rem; line-height: 1.4; text-transform: none; }
.insight-blocking-detail strong:has(.status-badge) { display: flex; align-items: center; gap: var(--space-2); }
.insight-blocking-row > .query-detail-title-action { margin-left: auto; }
.insight-blocking-note { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.4; }
.insight-blocking-note .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; margin-top: .15rem; }
.query-detail-answer > .insight-hold-actions, .insight-hold-form > .insight-hold-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.insight-hold-form { display: grid; gap: var(--space-3); }
.insight-hold-choices { display: grid; gap: var(--space-2); margin: 0; border: 0; padding: 0; }
.insight-hold-choices legend { margin-bottom: var(--space-1); padding: 0; color: var(--foreground); font-size: .875rem; font-weight: 500; }
.insight-hold-choices label { display: flex; align-items: center; gap: var(--space-2); font-size: .875rem; }
.insight-hold-choices input[type="time"] { width: 8rem; margin-left: var(--space-1); }
.insight-hold-choices small { color: var(--muted-foreground); font-size: .8125rem; }
.insight-hold-form button:disabled, .insight-hold-actions button:disabled { cursor: wait; }
/* What a device is: the guess, its evidence, and the correction. */
.insight-device-type { display: grid; gap: .6rem; }
.query-detail-answer.insight-device-type > .insight-type-summary { display: flex; }
.insight-type-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.query-detail-answer .insight-type-summary strong { color: var(--foreground); font-size: .9375rem; font-weight: 600; }
.query-detail-answer .insight-type-summary .insight-type-unknown { color: var(--muted-foreground); font-weight: 500; }
.insight-type-summary .status-badge { padding: .1rem .45rem; font-size: .625rem; }
.insight-type-reasons { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.insight-type-reasons li { display: flex; align-items: flex-start; gap: .55rem; font-size: .8125rem; line-height: 1.4; }
.query-detail-answer .insight-type-reasons span { color: var(--foreground); font-size: inherit; }
.insight-type-reasons li .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; margin-top: .15rem; color: var(--success-strong); }
.dark .insight-type-reasons li .nav-icon { color: var(--success); }
.query-detail-answer .insight-type-reasons li code { border: 0; background: none; padding: 0; font-size: .78rem; overflow-wrap: anywhere; }
.insight-type-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); }
.insight-type-form .field-control { min-width: 12rem; flex: 1; }
/* Hiding a finding: Hide Finding at the end of Why Sable surfaced this, and
   the card's hidden list. The row is as tall as the button and rises into the
   section's top padding, so the heading stays where it sits without the
   button and the reasons start the section's own gap below it. The summary is
   a block, so the menu's box is exactly the button whatever the font's line
   metrics. The menu opens upward when the drawer has no room below it. */
.insight-why-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.insight-why-heading.has-hide-menu { margin-top: -.5rem; }
.insight-hide-menu { position: relative; }
.insight-hide-menu > summary.button { display: flex; }
.insight-hide-menu[open] > summary { background: var(--accent); color: var(--accent-foreground); }
.insight-hide-menu > form { position: absolute; top: calc(100% + .35rem); right: 0; z-index: 20; display: grid; width: 16rem; max-width: calc(100vw - 2.5rem); margin: 0; border: 1px solid var(--border); border-radius: .625rem; background: var(--popover); padding: .375rem; color: var(--popover-foreground); box-shadow: 0 12px 32px rgb(0 0 0 / .22); }
.insight-hide-menu[data-side="top"] > form { top: auto; bottom: calc(100% + .35rem); }
.insight-hide-menu > form > span { padding: .3rem var(--space-2) .35rem; color: var(--muted-foreground); font-size: .6875rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.insight-hide-menu button { display: grid; gap: .2rem; width: 100%; border: 0; border-radius: .375rem; background: transparent; padding: .55rem var(--space-2); color: inherit; text-align: left; }
.insight-hide-menu button:hover, .insight-hide-menu button:focus-visible { background: var(--accent); color: var(--accent-foreground); }
.insight-hide-menu strong { font-size: .8125rem; font-weight: 500; }
.insight-hide-menu small { color: var(--muted-foreground); font-size: .6875rem; line-height: 1.4; }
.insight-hidden { border-top: 1px solid var(--border); padding: var(--space-3) var(--space-5); }
.insight-hidden > summary { width: fit-content; cursor: pointer; color: var(--muted-foreground); font-size: .75rem; font-weight: 600; }
.insight-hidden > summary:hover { color: var(--foreground); }
.insight-hidden ul { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.insight-hidden li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.insight-hidden li > div { display: grid; min-width: 0; gap: .1rem; }
.insight-hidden strong { overflow: hidden; font-size: .8125rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.insight-hidden small { color: var(--muted-foreground); font-size: .72rem; }
/* The bell beside the range control says whether Insights alerts are on and
   leads to Settings > Alerts. Settings beside it opens what Insights does
   with each kind of finding. */
.insight-alerts-bell, .insight-settings-open { flex: 0 0 auto; gap: .35rem; }
.insight-alerts-bell .nav-icon, .insight-settings-open .nav-icon { width: 1rem; height: 1rem; }
.insight-alerts-bell.on .nav-icon { color: var(--success-strong); }
.insight-alerts-bell.paused .nav-icon { color: var(--warning-strong); }
.dark .insight-alerts-bell.on .nav-icon { color: var(--success); }
.dark .insight-alerts-bell.paused .nav-icon { color: #f1ad47; }
/* An operator who may not open Settings sees the state without a link. */
span.insight-alerts-bell { cursor: default; }
span.insight-alerts-bell:hover { background: var(--background); color: var(--foreground); }
/* The header and footer stay put while the list of kinds scrolls between. */
.isotope-form-dialog.insight-settings-dialog { width: min(calc(100% - 2rem), 46rem); max-height: min(92vh, 60rem); overflow: hidden; padding: 0; }
.insight-settings-dialog[open] { grid-template-rows: auto minmax(0, 1fr); gap: 0; }
.insight-settings-dialog > .dialog-header { padding: var(--space-6) 3.5rem var(--space-4) var(--space-6); }
.insight-settings { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
.insight-settings-body { min-height: 0; gap: var(--space-5); padding-top: var(--space-1); }
.insight-settings-footer { align-items: center; border-top: 1px solid var(--border); padding: var(--space-4) var(--space-6); }
.insight-settings-footer .insight-settings-reset { margin-right: auto; }
.insight-settings-read-only { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--muted-foreground); font-size: .75rem; line-height: 1.45; }
.insight-settings-read-only .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; }
.insight-settings-group { display: grid; }
.insight-settings-group > h3 { margin: 0 0 var(--space-1); color: var(--muted-foreground); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.insight-setting { display: grid; gap: var(--space-3); border-top: 1px solid var(--border); padding: .85rem 0; }
.insight-setting-heading { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.insight-setting-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .5rem; background: color-mix(in oklch, currentColor 11%, transparent); color: var(--muted-foreground); }
.insight-setting-icon .nav-icon { width: 1rem; height: 1rem; }
.insight-setting-copy { display: grid; min-width: 0; gap: .15rem; }
.insight-setting-copy strong { font-size: .8125rem; font-weight: 600; }
.insight-setting-copy small { color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; }
/* Show and alert, Show only, or Off: one choice, drawn like the range tabs. */
.insight-mode-control { display: inline-flex; align-items: center; gap: .125rem; border-radius: .5rem; background: var(--muted); padding: var(--space-1); }
.insight-mode-option { display: inline-flex; height: 1.75rem; align-items: center; justify-content: center; border-radius: .375rem; padding: 0 .6rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.insight-mode-option input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; border: 0; padding: 0; clip-path: inset(50%); opacity: 0; pointer-events: none; white-space: nowrap; }
.insight-mode-option:hover:not(:has(input:disabled)) { color: var(--foreground); }
.insight-mode-option:has(input:checked) { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .16); }
.insight-mode-option:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }
.insight-mode-option:has(input:disabled) { cursor: default; }
.insight-mode-option:has(input:disabled:not(:checked)) { opacity: .5; }
/* Limits line up under the kind's name, and fade while the kind is off. */
.insight-setting-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding-left: 2.75rem; }
.insight-setting:has(input[value="off"]:checked) .insight-setting-limits { opacity: .55; }
.insight-limit input { height: 2rem; font-size: .8125rem; }
@media (max-width: 640px) {
	.insight-settings-dialog > .dialog-header { padding: var(--space-5) 3.25rem .85rem var(--space-5); }
	.insight-settings-body { padding: var(--space-1) var(--space-5) var(--space-5); }
	.insight-settings-footer { padding: .85rem var(--space-5); }
	.insight-settings-footer .insight-settings-reset { margin-right: 0; }
	.insight-setting-heading { grid-template-columns: 2rem minmax(0, 1fr); }
	.insight-mode-control { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.insight-mode-option { padding: 0 .35rem; }
	.insight-setting-limits { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
}
@media (forced-colors: active) {
	.insight-mode-option:has(input:checked) { border: 1px solid Highlight; }
}
/* The Overview opens with one sentence about what stands out, led by an icon
   in the tone of the most important finding. Each subject it names is
   underlined in its own finding's tone and opens that finding. */
.insights-headline { --headline-tone: #2563eb; display: flex; align-items: flex-start; gap: .85rem; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--muted) 45%, transparent); padding: .9rem 1.1rem; }
.insights-headline.tone-attention, .insights-headline-subject.tone-attention { --headline-tone: var(--warning-strong); }
.insights-headline.tone-positive, .insights-headline-subject.tone-positive { --headline-tone: var(--success-strong); }
.insights-headline-subject.tone-notice { --headline-tone: #2563eb; }
.dark .insights-headline, .dark .insights-headline-subject.tone-notice { --headline-tone: #60a5fa; }
.dark .insights-headline.tone-attention, .dark .insights-headline-subject.tone-attention { --headline-tone: #f1ad47; }
.dark .insights-headline.tone-positive, .dark .insights-headline-subject.tone-positive { --headline-tone: var(--success); }
.insights-headline-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .55rem; background: color-mix(in oklch, var(--headline-tone) 14%, transparent); color: var(--headline-tone); }
.insights-headline-icon .nav-icon { width: 1.05rem; height: 1.05rem; }
.insights-headline > p { min-width: 0; margin: 0; padding-top: .2rem; color: var(--foreground); font-size: 1.0625rem; font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.insights-headline-subject { max-width: 100%; color: inherit; font: inherit; font-weight: 650; overflow-wrap: anywhere; text-align: start; text-decoration: underline 2px color-mix(in oklch, var(--headline-tone) 55%, transparent); text-underline-offset: .25em; }
.insights-headline-subject.mono { font-family: var(--font-mono, monospace); font-size: .92em; }
button.insights-headline-subject { display: inline; border: 0; border-radius: .2rem; background: none; padding: 0; cursor: pointer; transition: text-decoration-color 120ms ease; }
button.insights-headline-subject:hover { text-decoration-color: var(--headline-tone); }
button.insights-headline-subject:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.insights-headline-more { color: var(--muted-foreground); text-decoration: none; white-space: nowrap; }
.insights-headline-more:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: .2em; }
.insights-headline-skeleton .insight-skeleton-line { flex: 1; max-width: 32rem; margin-top: .65rem; }
.insight-findings { scroll-margin-top: 1rem; }
@media (max-width: 640px) {
	.insights-headline { gap: .7rem; padding: .8rem .9rem; }
	.insights-headline > p { font-size: 1rem; }
	.insight-findings { scroll-margin-top: 4.5rem; }
}
/* The Insights bell beside the range control says whether alerts are on:
   green when they are, and amber when they are paused. */

/* Settings > Alerts. */
.alerts-status-card { padding: var(--space-4) var(--space-6); }
.alerts-status { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.alerts-status-icon { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border-radius: .6rem; background: var(--muted); color: var(--muted-foreground); }
.alerts-status-icon .nav-icon { width: 1.25rem; height: 1.25rem; }
.alerts-status.on .alerts-status-icon { background: rgb(34 197 94 / .14); color: var(--success-strong); }
.dark .alerts-status.on .alerts-status-icon { color: var(--success); }
.alerts-status.paused .alerts-status-icon { background: rgb(245 158 11 / .14); color: var(--warning-strong); }
.dark .alerts-status.paused .alerts-status-icon { color: var(--warning); }
/* The detail keeps a floor of 16rem so Pause drops to its own row on a narrow
   card rather than squeezing the sentence into a column. */
.alerts-status-detail { display: grid; min-width: 0; flex: 1 1 16rem; gap: var(--space-1); }
.alerts-status-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.alerts-status-heading strong { font-size: .875rem; }
.alerts-status-detail > span { color: var(--muted-foreground); font-size: .75rem; line-height: 1.45; }
.alerts-status > .button { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; }
.alerts-empty { gap: .35rem; padding: var(--space-8) var(--space-4); }
.alerts-empty > .nav-icon { width: 1.6rem; height: 1.6rem; margin-bottom: .3rem; }
.alerts-empty h3 { font-size: .9rem; }
.alerts-empty p { max-width: 28rem; font-size: .78rem; }
.alert-destination-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); }
.alert-destination-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); border-top: 1px solid var(--border); padding: .85rem var(--space-4); }
.alert-destination-row:first-child { border-top: 0; }
.alert-destination-icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .5rem; background: var(--muted); color: var(--muted-foreground); }
.alert-destination-icon .nav-icon { width: 1rem; height: 1rem; }
.alert-destination-icon .alert-format-mark { width: .9rem; height: .9rem; }
.alert-destination-detail { display: grid; min-width: 0; gap: var(--space-1); }
.alert-destination-detail strong { font-size: .875rem; overflow-wrap: anywhere; }
.alert-destination-detail small { color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; overflow-wrap: anywhere; }
.alert-destination-detail .alert-destination-problem { display: flex; align-items: flex-start; gap: .3rem; color: var(--destructive); }
.alert-destination-problem .nav-icon { width: .85rem; height: .85rem; flex: 0 0 auto; margin-top: .1rem; }
.alert-destination-separator { margin-inline: .35rem; }
.alert-destination-groups { display: flex; flex-wrap: wrap; gap: .3rem; }
.alert-group-tag { border-radius: 999px; background: var(--muted); padding: .05rem var(--space-2); color: var(--muted-foreground); font-size: .65rem; font-weight: 600; line-height: 1.5; }
.alert-destination-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
/* The icon's flex-basis matches its width. Left at .nav-icon's larger basis,
   Safari sizes each button for the smaller icon and Send Test wraps. */
.alert-destination-actions .button { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.alert-destination-actions .button .nav-icon { width: .9rem; height: .9rem; flex-basis: .9rem; }
.alert-groups { display: grid; gap: var(--space-3); }
.alert-choice-row { flex-wrap: wrap; }
.alert-choice { display: inline-flex; flex: 0 0 auto; gap: .125rem; border-radius: .5rem; background: var(--muted); padding: var(--space-1); }
.alert-choice label { display: inline-flex; height: 1.75rem; align-items: center; border-radius: .375rem; padding: 0 .65rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.alert-choice label:has(input:checked) { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / .16); }
.alert-choice label:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }
.alert-choice label:has(input:disabled) { cursor: not-allowed; opacity: .58; }
/* The failed sign-in limit belongs to its switch, so the two share a border. */
/* Failed Sign-Ins carries its limit under its switch, and Check for updates
   its schedule. */
.alert-sign-ins, .update-check { display: grid; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.alert-sign-ins > .switch-row, .update-check > .switch-row { border: 0; }
.alert-sign-in-limit, .update-check-schedule { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); border-top: 1px solid var(--border); padding: var(--space-3) var(--space-4); color: var(--muted-foreground); font-size: .78rem; }
.alert-sign-in-limit input { width: 5rem; height: 2rem; }
.alert-sign-ins:has(input[name="sign_ins"]:not(:checked)) .alert-sign-in-limit { opacity: .6; }
.update-check-schedule > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.update-check-schedule .styled-select, .update-check-schedule .styled-time { width: 8.5rem; }
.update-check-day .styled-select { width: 9.5rem; }
/* The schedule folds away while checks are off, and the day and time show
   only for the schedules that use them. */
.update-check:has(input[name="check_on_login"]:not(:checked)) .update-check-schedule { display: none; }
.update-check-schedule:has(select[name="check_schedule"] option[value="hourly"]:checked) .update-check-at { display: none; }
.update-check-schedule:not(:has(select[name="check_schedule"] option[value="weekly"]:checked)) .update-check-day { display: none; }
/* The Insights Findings switch carries a switch for each kind of finding, so
   the kinds sit inside its border. */
.alert-insights { display: grid; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.alert-insights > .switch-row { border: 0; }
.alert-insight-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .15rem var(--space-6); min-width: 0; margin: 0; border: 0; border-top: 1px solid var(--border); padding: var(--space-2) var(--space-4); }
.alert-insight-kind { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 2.25rem; cursor: pointer; }
.alert-insight-kind > span { display: grid; gap: .1rem; min-width: 0; }
.alert-insight-kind strong { font-size: .8rem; font-weight: 500; }
.alert-insight-kind small { color: var(--muted-foreground); font-size: .72rem; }
.alert-insight-kind input[type=checkbox] { position: relative; width: 2.25rem; height: 1.25rem; flex: 0 0 2.25rem; appearance: none; border: 1px solid var(--input); border-radius: 999px; background: var(--muted); padding: 0; cursor: pointer; transition: border-color 150ms, background 150ms; }
.alert-insight-kind input[type=checkbox]::after { position: absolute; top: .125rem; left: .125rem; width: .875rem; height: .875rem; border-radius: 50%; background: var(--background); box-shadow: 0 1px 3px rgb(0 0 0 / .28); content: ""; transition: transform 150ms; }
.alert-insight-kind input[type=checkbox]:checked { border-color: var(--primary); background: var(--primary); }
.alert-insight-kind input[type=checkbox]:checked::after { transform: translateX(1rem); }
.alert-insight-kind input[type=checkbox]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.alert-insight-kind:has(input:disabled) { cursor: not-allowed; opacity: .58; }
.alert-insight-kind input[type=checkbox]:disabled { cursor: not-allowed; }
.alert-insight-kinds-note { margin: 0; border-top: 1px solid var(--border); padding: .6rem var(--space-4); color: var(--muted-foreground); font-size: .75rem; }
.alert-insight-kinds-note a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }
/* With Insights Findings off, its kinds fold away. They still post with the
   form, so saving keeps each kind as it was. */
.alert-insights:has(input[name="insights"]:not(:checked)) :is(.alert-insight-kinds, .alert-insight-kinds-note) { display: none; }
.alert-groups-save { display: flex; justify-content: flex-end; }
.alert-browsers { display: grid; gap: var(--space-3); }
/* Browsers carry their browsers under the row, beside the destination's
   details rather than under its icon. They sit flat in the row, past a rule,
   rather than in boxes of their own inside it. */
.alert-destination-browsers { grid-column: 2 / -1; gap: .15rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.alert-destination-browsers .alert-push-card { gap: .6rem; border: 0; border-radius: 0; background: none; padding: .2rem 0; }
.alert-destination-browsers .alert-push-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; align-self: flex-start; margin-top: .1rem; background: none; }
.alert-destination-browsers .alert-browser-list { gap: 0; }
.alert-destination-browsers .alert-browser-heading { padding-top: .45rem; }
.alert-destination-browsers .alert-browser { gap: .6rem; border: 0; border-radius: 0; padding: .35rem 0; }
.alert-destination-browsers .alert-browser + .alert-browser { border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent); }
.alert-push-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: color-mix(in oklch, var(--muted) 45%, transparent); padding: var(--space-3) .85rem; }
.alert-push-icon { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .5rem; background: var(--muted); color: var(--muted-foreground); }
.alert-push-icon .nav-icon { width: 1rem; height: 1rem; }
.alert-push-card[data-push-state="ready"] .alert-push-icon { color: #2563eb; }
.alert-push-card[data-push-state="on"] .alert-push-icon { color: var(--success-strong); }
.alert-push-card:is([data-push-state="blocked"], [data-push-state="insecure"], [data-push-state="unsupported"]) .alert-push-icon { color: var(--warning-strong); }
.dark .alert-push-card[data-push-state="ready"] .alert-push-icon { color: #60a5fa; }
.dark .alert-push-card[data-push-state="on"] .alert-push-icon { color: var(--success); }
.dark .alert-push-card:is([data-push-state="blocked"], [data-push-state="insecure"], [data-push-state="unsupported"]) .alert-push-icon { color: #f1ad47; }
.alert-push-copy { display: grid; flex: 1 1 14rem; min-width: 0; gap: .15rem; font-size: .8125rem; }
.alert-push-copy small { color: var(--muted-foreground); font-size: .72rem; line-height: 1.45; }
.alert-push-copy .alert-push-error { color: var(--destructive); }
.alert-push-card > .button { flex: 0 0 auto; }
.alert-push-form { display: none; }
.alert-browser-list { display: grid; gap: .4rem; }
.alert-browser-heading { color: var(--muted-foreground); font-size: .72rem; font-weight: 600; }
.alert-browser { display: flex; align-items: center; gap: .65rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .55rem .65rem; }
.alert-browser > .nav-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; color: var(--muted-foreground); }
.alert-browser > div { display: grid; flex: 1 1 auto; min-width: 0; gap: .1rem; font-size: .8125rem; }
.alert-browser small { color: var(--muted-foreground); font-size: .7rem; }
.alert-browser > .button { display: inline-flex; align-items: center; gap: .4rem; }
.alert-browser > .button .nav-icon { width: .9rem; height: .9rem; flex-basis: .9rem; }
.alert-browser-this { margin-left: .45rem; border-radius: 999px; background: var(--muted); padding: .05rem .45rem; color: var(--muted-foreground); font-size: .65rem; font-weight: 500; vertical-align: middle; }
.alert-browser-note { margin: 0; color: var(--muted-foreground); font-size: .8125rem; }
.alert-browser-orphans { margin-top: var(--space-3); }
@media (max-width: 640px) {
	.alerts-status-card { padding: var(--space-4); }
	.alert-destination-row { grid-template-columns: 2rem minmax(0, 1fr); padding-inline: var(--space-3); }
	.alert-destination-actions { grid-column: 2 / -1; justify-content: flex-start; }
}

/* The Add and Edit Destination dialog. Six Format choices fit on one line. */
.alert-destination-form { display: grid; gap: var(--space-4); }
.alert-destination-body { padding: 0; }
/* A problem arrives as a toast that floats over the dialog, so its slot takes no room. */
.alert-destination-notice { display: contents; }
.alert-destination-form .dialog-footer .alert-preview-button { margin-right: auto; }
.isotope-dialog-body fieldset:is(.alert-formats, .alert-sends), fieldset.rule-set-lists { min-width: 0; margin: 0; border: 0; padding: 0; }
.isotope-dialog-body :is(.alert-formats, .alert-sends) > legend, .rule-set-lists > legend { margin-bottom: var(--space-2); padding: 0; font-size: .8125rem; font-weight: 500; }
.alert-format-tabs { display: flex; flex-wrap: wrap; width: 100%; align-items: center; gap: .125rem; border-radius: .5rem; background: var(--muted); padding: var(--space-1); }
.alert-format { display: inline-flex; flex: 1 1 auto; height: 1.75rem; align-items: center; justify-content: center; gap: .4rem; border-radius: .375rem; padding: 0 .6rem; white-space: nowrap; color: var(--muted-foreground); font-size: .8125rem; cursor: pointer; }
.alert-format .nav-icon { width: .875rem; height: .875rem; flex: 0 0 .875rem; }
.alert-format .alert-format-mark { width: .8rem; height: .8rem; flex-basis: .8rem; }
.alert-format:has(input:checked) { background: var(--background); color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.16); }
.alert-format:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }
.alert-format:has(input:disabled) { cursor: not-allowed; opacity: .5; }
:is(.alert-sends-choice, .rule-set-choice) { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: .8125rem; font-weight: 400; }
:is(.alert-sends-choice, .alert-sends-groups, .rule-set-choice, .rule-set-list-choices) label { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
:is(.alert-sends, .rule-set-lists, .rule-set-schedule-blocks, .insight-hold-choices) :is(input[type="radio"], input[type="checkbox"]) { width: 1rem; height: 1rem; flex: 0 0 1rem; margin: 0; padding: 0; accent-color: var(--foreground); }
:is(.alert-sends-groups, .rule-set-list-choices) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem var(--space-4); margin-top: .65rem; border-top: 1px solid var(--border); padding-top: .65rem; font-size: .8125rem; font-weight: 400; }
.alert-sends-groups small { color: var(--muted-foreground); font-size: .68rem; }
/* Everything needs no list of groups. */
.alert-sends:has(input[name="sends_all"][value="true"]:checked) .alert-sends-groups { display: none; }
.alert-destination-note { margin: 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.5; }
.alert-destination-advanced-body { display: grid; gap: .85rem; }
.alert-headers { display: grid; gap: var(--space-2); }
.alert-headers:empty { display: none; }
.alert-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; align-items: center; gap: var(--space-2); }
.alert-header-add { justify-self: start; }
.alert-preview-copy { z-index: 1; }
.alert-preview { position: fixed; inset: auto; z-index: 100; box-sizing: border-box; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--popover); padding: .3rem; color: var(--popover-foreground); box-shadow: 0 1rem 2.5rem rgb(0 0 0 / .38), 0 .2rem .6rem rgb(0 0 0 / .22); }
.alert-preview:popover-open { display: flex; flex-direction: column; transform-origin: top left; animation: resolver-popover-in 120ms ease-out; }
.alert-preview[data-side="top"] { transform-origin: bottom left; }
.alert-preview-error { margin: 0; padding: .45rem .65rem 0; color: var(--destructive); font-size: .8125rem; }
.alert-preview pre { flex: 1 1 auto; min-height: 0; max-height: none; margin: 0; overflow: auto; border: 0; border-radius: 0; background: transparent; padding: .45rem 2.25rem .45rem .65rem; font-size: .75rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 480px) {
	:is(.alert-sends-groups, .rule-set-list-choices) { grid-template-columns: 1fr; }
}

/* Rule sets: the Default row and one row per rule set, and a dialog whose
   block list choices scroll when there are many. */
.rule-set-toolbar .field-help { margin: 0; max-width: 36rem; }
.rule-set-toolbar > .button { flex: none; white-space: nowrap; }
.rule-set-row small { text-transform: none; }
.rule-set-row .rule-set-name { overflow-wrap: anywhere; }
.rule-set-empty { min-height: 0; margin-top: var(--space-4); padding: var(--space-6); }
.rule-set-note { margin: var(--space-4) 0 0; }
.rule-set-form { display: grid; gap: var(--space-4); }
.rule-set-body { padding: 0; }
/* A problem arrives as a toast that floats over the dialog, so its slot takes no room. */
.rule-set-notice { display: contents; }
.rule-set-list-choices { max-height: 12rem; overflow-y: auto; }
.rule-set-lists:not(.rule-set-scope) > .rule-set-list-choices { margin-top: 0; border-top: 0; padding-top: 0; }
.rule-set-list-choices span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-set-lists > small { display: block; margin-top: var(--space-2); }
.rule-set-blocking-section { display: grid; gap: var(--space-4); }
.rule-set-blocking-section .switch-row { margin: 0; }
.rule-set-blocking-section .rule-set-domains-help { margin: 0; }
.rule-set-delete-locked { display: inline-flex; cursor: not-allowed; }
.rule-set-delete-locked .icon-button:disabled { opacity: .4; pointer-events: none; }
/* All Your Block Lists needs no list to pick from. */
.rule-set-scope:has(input[name="scope"][value="all"]:checked) .rule-set-list-choices { display: none; }
/* A rule set's panel: its own blocked and allowed domains, each with a field
   to add one above a compact list. */
.query-detail-answer > .rule-set-domains-heading { display: flex; align-items: center; gap: var(--space-2); }
.query-detail-answer .rule-set-domains-help, .rule-set-domains-empty { margin: 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.4; }
.query-detail-answer > .rule-set-domain-form { display: flex; gap: var(--space-2); }
.rule-set-domain-form input { min-width: 0; flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .8125rem; }
.rule-set-domain-form .button { flex: none; }
.rule-set-domain-list .blocked-domain-row { min-height: 2.75rem; grid-template-columns: 1.25rem minmax(0, 1fr) auto; padding: .3rem var(--space-2) .3rem var(--space-3); }
.rule-set-device-row { display: grid; min-height: 2.75rem; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); border-top: 1px solid var(--border); padding: .4rem var(--space-2) .4rem var(--space-3); }
.rule-set-device-row:first-child { border-top: 0; }
.rule-set-device-row:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
.rule-set-device-icon { display: inline-flex; color: var(--muted-foreground); }
.rule-set-device-icon .nav-icon { width: 1rem; height: 1rem; }
.rule-set-device-name { display: grid; min-width: 0; gap: .1rem; }
.rule-set-device-name strong, .rule-set-device-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-set-device-name strong { font-size: .875rem; font-weight: 500; }
.rule-set-device-name small { color: var(--muted-foreground); font: .75rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.rule-set-device-form input { font-family: inherit; font-size: .875rem; }
/* A device picker is a field that wears the select chevron and lists
   devices in the styled select's popover, each with its icon and address. */
.suggest-input { position: relative; display: flex; min-width: 0; flex: 1; }
.suggest-input input { width: 100%; padding-right: 2.25rem; }
.device-picker-toggle { position: absolute; top: 0; right: 0; display: grid; width: 2.25rem; height: 100%; place-items: center; border: 0; background: none; padding: 0; color: var(--muted-foreground); cursor: pointer; }
.device-picker[data-open="true"] .styled-select-chevron { transform: translateY(.15rem) rotate(225deg); }
.device-picker-option { gap: 0; cursor: pointer; }
.device-picker-option .styled-select-icon { margin-right: .65rem; }
.device-picker-copy { display: grid; min-width: 0; }
.device-picker-copy > span, .device-picker-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-picker-copy small { color: var(--muted-foreground); font: .75rem ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.device-picker-empty { margin: 0; padding: .55rem .65rem; color: var(--muted-foreground); font-size: .8125rem; }
.rule-set-domains-note { margin-top: var(--space-3); }
.rule-set-domains-note button { border: 0; background: none; padding: 0; color: var(--primary); cursor: pointer; font: inherit; font-weight: 600; }
.rule-set-domains-note button:hover { text-decoration: underline; }
.rule-set-domains-note button:focus-visible { border-radius: .2rem; outline: 2px solid var(--ring); outline-offset: 2px; }

/* Watches: a row per watch with its switch beside Edit and Remove, and a
   dialog whose device list scrolls on its own when a network has many. */
.alert-watch-note { display: flex; align-items: flex-start; gap: .45rem; margin-bottom: var(--space-3); }
.alert-watch-note .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; margin-top: .15rem; }
.alert-watch-note:last-child { margin: var(--space-3) 0 0; }
.alert-watch-row.off .alert-destination-icon { opacity: .55; }
.alert-watch-actions { align-items: center; }
.alert-watch-switch { display: inline-flex; margin-right: var(--space-1); cursor: pointer; }
.alert-watch-device-pick { display: grid; gap: var(--space-3); margin-top: .65rem; border-top: 1px solid var(--border); padding-top: .65rem; }
.alert-watch-devices:has(input[name="any_device"][value="true"]:checked) .alert-watch-device-pick { display: none; }
.alert-watch-device-list { display: grid; max-height: 12rem; overflow-y: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); }
.alert-watch-device-list label { display: flex; align-items: center; gap: .6rem; border-top: 1px solid var(--border); padding: .45rem .65rem; font-size: .8125rem; font-weight: 400; cursor: pointer; }
.alert-watch-device-list label:first-child { border-top: 0; }
.alert-watch-device-list label > span { display: grid; min-width: 0; }
.alert-watch-device-list strong { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.alert-watch-device-list small { overflow: hidden; color: var(--muted-foreground); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.mcp-grant-coverage { display: flex; align-items: flex-start; gap: .55rem; margin: 0; }
.mcp-grant-coverage-icon { display: none; }
.mcp-grant-coverage[data-matched] .mcp-grant-coverage-icon { display: contents; }
.mcp-grant-coverage-icon .nav-icon { width: .9rem; height: .9rem; flex: 0 0 .9rem; margin-top: .15rem; color: var(--success-strong); }
.dark .mcp-grant-coverage-icon .nav-icon { color: var(--success); }

/* One checkbox everywhere. A native box in the light dark-mode accent color
   gets a dark contrast ring around it, so the box and its check are drawn
   instead. Switches keep their own track, including the older .switch ones
   that hide a plain checkbox under a drawn track. */
input[type="checkbox"]:not([role="switch"], .switch > input) { position: relative; box-sizing: border-box; width: 1rem; min-width: 1rem; height: 1rem; min-height: 1rem; appearance: none; border: 1px solid var(--muted-foreground); border-radius: .25rem; background: transparent; box-shadow: none; padding: 0; cursor: pointer; }
input[type="checkbox"]:not([role="switch"], .switch > input):checked { border-color: var(--primary); background: var(--primary); }
input[type="checkbox"]:not([role="switch"], .switch > input):checked::after { position: absolute; inset: 0; background: var(--primary-foreground); content: ""; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .75rem no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .75rem no-repeat; }
input[type="checkbox"]:not([role="switch"], .switch > input):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
input[type="checkbox"]:not([role="switch"], .switch > input):disabled { cursor: not-allowed; opacity: .5; }
.query-detail-answer > .rule-set-apps-actions { display: flex; }
.rule-set-app-row { grid-template-columns: 1.75rem minmax(0, 1fr) auto; }
.rule-set-app-row > .app-icon { width: 1.75rem; height: 1.75rem; flex-basis: 1.75rem; }
.rule-set-app-row .rule-set-device-name small { font-family: inherit; }
/* The app picker fills a rule set's panel: a search, then each category's
   apps as tiles that check when chosen. */
.rule-set-app-form { display: grid; gap: var(--space-4); }
.rule-set-app-form .rule-set-domains-help { margin: 0; color: var(--muted-foreground); font-size: .8125rem; line-height: 1.4; }
.rule-set-app-group { display: grid; min-width: 0; gap: var(--space-2); margin: 0; border: 0; padding: 0; }
.rule-set-app-group > legend { margin-bottom: var(--space-2); padding: 0; color: var(--muted-foreground); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.rule-set-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--space-2); }
.rule-set-app-choice { position: relative; display: flex; min-width: 0; min-height: 2.75rem; align-items: center; gap: .6rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: .45rem .6rem; cursor: pointer; font-size: .8125rem; font-weight: 500; transition: border-color 120ms ease, background 120ms ease; }
.rule-set-app-choice:hover { background: color-mix(in oklch, var(--muted) 45%, transparent); }
/* The tile is the checkbox, so the box itself steps out of the row. */
.rule-set-app-choice > input[type="checkbox"][name="app"] { position: absolute; width: 1px; min-width: 0; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.rule-set-app-choice > .app-icon { width: 1.75rem; height: 1.75rem; flex-basis: 1.75rem; }
.rule-set-app-choice > span:not(.rule-set-app-check, .app-icon) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-set-app-check { display: grid; width: 1.125rem; height: 1.125rem; flex: 0 0 1.125rem; place-items: center; border: 1px solid var(--input); border-radius: 999px; color: transparent; }
.rule-set-app-check .nav-icon { width: .75rem; height: .75rem; }
.rule-set-app-choice:has(> input:checked) { border-color: var(--foreground); background: color-mix(in oklch, var(--muted) 55%, transparent); }
.rule-set-app-choice:has(> input:checked) .rule-set-app-check { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
.rule-set-app-choice:has(> input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
:is(.rule-set-app-group, .rule-set-app-choice)[hidden] { display: none; }
/* A rule set's schedules: each row says when it runs and what it blocks,
   with whether it is on now beside Edit and Delete. Its form reuses the app
   picker's tiles for the days and apps. */
.rule-set-schedule-row { grid-template-columns: 1.25rem minmax(0, 1fr) auto; }
.rule-set-schedule-row .rule-set-device-name strong { display: flex; align-items: center; gap: var(--space-2); }
.rule-set-schedule-row .rule-set-device-name small { font-family: inherit; white-space: normal; }
.rule-set-schedule-actions { display: flex; align-items: center; gap: var(--space-1); }
.rule-set-schedule-overrides { display: flex; flex-wrap: wrap; grid-column: 2 / -1; gap: var(--space-2); padding-bottom: var(--space-1); }
.rule-set-schedule-days, .rule-set-schedule-blocks { margin: 0; border: 0; padding: 0; }
.rule-set-schedule-days > legend, .rule-set-schedule-blocks > legend { margin-bottom: var(--space-2); padding: 0; }
.rule-set-schedule-blocks > small { display: block; margin-top: var(--space-2); }
.rule-set-schedule-day-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rule-set-schedule-day { width: 2.5rem; height: 2.5rem; min-height: 0; flex: none; justify-content: center; border-radius: 999px; padding: 0; }
.rule-set-schedule-day > input[type="checkbox"][name="day"] { position: absolute; width: 1px; min-width: 0; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.rule-set-schedule-day > span:not(.app-icon) { flex: 0 1 auto; text-align: center; }
.rule-set-schedule-day:has(> input:checked) { border-color: var(--foreground); background: var(--foreground); color: var(--background); }
.rule-set-schedule-times { gap: var(--space-3); }
.rule-set-schedule-apps { display: grid; gap: var(--space-4); }
/* Everything needs no apps to pick from. */
.rule-set-schedule-form:has(input[name="block"][value="everything"]:checked) .rule-set-schedule-apps { display: none; }
@media (max-width: 640px) {
	.rule-set-schedule-day-grid { gap: var(--space-1); }
}