/* ==========================================================================
   Whois Investigator

   0.  Typeface
   1.  Brand colours (edit these first)
   2.  Design tokens — dark (default) and light
   3.  Base elements and typography
   4.  Buttons, forms and controls
   5.  Header, navigation and footer
   6.  Page furniture: headings, hero, sections, panels
   7.  Status tags and signals
   8.  Tables
   9.  Search forms and the extension picker
   10. Result tables (bulk / list / lookalikes)
   11. Reports: banners, data lists, DNS, certificate, raw response
   12. Watchlist, history and admin
   13. Account pages
   14. Motion
   15. Responsive
   16. Print

   The site is DARK FIRST: :root carries the dark palette and the light theme is
   an override on [data-theme="light"]. Visitors land on dark whatever their OS
   prefers — the console look is the site's identity — and the moon/sun control
   in the header stores their choice. See wwwroot/js/theme.js.
   ========================================================================== */


/* 0. TYPEFACE --------------------------------------------------------------
   Inter, self-hosted: the content security policy sets font-src 'self', so no
   external font host is reachable. One variable file covers 100-900.
   -------------------------------------------------------------------------- */

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


/* 1. BRAND COLOURS ---------------------------------------------------------
   Everything that carries the brand reads from this one block. Change the
   hex values below and the whole site re-colours: the logo mark, primary
   buttons, links, focus rings, chart bars and every active state.

   Dark needs a brighter green than light does — the same hex cannot carry
   both — so there is one value per theme rather than one for the site.
   -------------------------------------------------------------------------- */

:root {
  --brand: #2ee08a;         /* Signal green: links, active states, primary fills */
  --brand-hover: #6bf0b4;   /* Hover / pressed — BRIGHTER than --brand on dark */
  --brand-wash: rgba(46, 224, 138, .10);   /* Pale wash behind selected items */
  --brand-line: rgba(46, 224, 138, .34);   /* Borders derived from the brand */
  --brand-glow: rgba(46, 224, 138, .16);   /* Focus rings and the hero halo */
  --on-brand: #041a10;      /* Text sitting on a solid --brand fill */
}

:root[data-theme="light"] {
  --brand: #12694a;
  --brand-hover: #0b452f;   /* Hover is DARKER than --brand on light */
  --brand-wash: #e6f3ec;
  --brand-line: #b7d9c8;
  --brand-glow: rgba(18, 105, 74, .18);
  --on-brand: #ffffff;
}


/* 2. DESIGN TOKENS --------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Neutrals — a cool near-black ground with three raised steps above it. */
  --page: #0a0d0f;          /* Page background */
  --surface: #11161a;       /* Cards and panels */
  --surface-alt: #171e23;   /* Inset areas, table headers, wells */
  --surface-hi: #1d252b;    /* Hover row, pressed control */
  --line: #232c32;          /* Borders */
  --line-strong: #33404a;   /* Borders that need to read as a divider */
  --ink: #eff4f3;           /* Headings */
  --body: #b6c2c5;          /* Body copy */
  --muted: #7e8f94;         /* Secondary copy, labels */
  --faint: #5b6a70;         /* Placeholder-level copy */

  /* The header and footer chrome. Near-black in BOTH themes: the dark bar is
     the one piece of the identity that does not flip. */
  --chrome: #06090a;
  --chrome-line: #1c242a;
  --chrome-ink: #e8efee;
  --chrome-muted: rgba(232, 239, 238, .62);

  /* Meaning. On dark these are the light end of each hue with a translucent
     backing, so a tag tints whatever surface it lands on. */
  --ok: #34d399;            /* Available, valid, healthy */
  --ok-bg: rgba(52, 211, 153, .13);
  --ok-line: rgba(52, 211, 153, .32);
  --warn: #f2b544;          /* Needs attention */
  --warn-bg: rgba(242, 181, 68, .13);
  --warn-line: rgba(242, 181, 68, .32);
  --bad: #fa7a72;           /* Expired, invalid, failed */
  --bad-bg: rgba(250, 122, 114, .13);
  --bad-line: rgba(250, 122, 114, .32);
  --info: #7cc7e8;          /* Registered / factual, no judgement */
  --info-bg: rgba(124, 199, 232, .13);
  --info-line: rgba(124, 199, 232, .32);

  /* Shape */
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;

  /* Depth. Drop shadows barely register on a near-black ground, so panels are
     lifted with a hairline top highlight as well as a shadow. */
  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 26px rgba(0, 0, 0, .30);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 22px 48px rgba(0, 0, 0, .42);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .045);

  /* Type */
  --sans: "Inter var", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", Consolas,
          "Liberation Mono", monospace;

  --speed: .18s;
  --ease: cubic-bezier(.32, .72, .32, 1);
}

:root[data-theme="light"] {
  color-scheme: light;

  --page: #f6f8f7;
  --surface: #ffffff;
  --surface-alt: #f1f5f3;
  --surface-hi: #e9efec;
  --line: #dde3e0;
  --line-strong: #c4cec9;
  --ink: #10161a;
  --body: #333c41;
  --muted: #5d6a70;
  --faint: #8a9599;

  --ok: #10714a;
  --ok-bg: #e3f2ea;
  --ok-line: #b6dcc8;
  --warn: #86560a;
  --warn-bg: #fbf0d6;
  --warn-line: #e8cf92;
  --bad: #9c2f27;
  --bad-bg: #fae2df;
  --bad-line: #eab8b2;
  --info: #2c505e;
  --info-bg: #e5eef2;
  --info-line: #b9d1dc;

  --shadow: 0 1px 2px rgba(16, 22, 26, .05), 0 8px 22px rgba(16, 22, 26, .07);
  --shadow-lift: 0 2px 5px rgba(16, 22, 26, .07), 0 18px 38px rgba(16, 22, 26, .11);
  --edge: none;
}


/* 3. BASE ELEMENTS AND TYPOGRAPHY ------------------------------------------ */

html {
  font-size: 16px;
  min-height: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  color: var(--body);
  background: var(--page);
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.018em;
  text-wrap: balance;
}

a {
  color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--speed) var(--ease);
}

a:hover,
a:focus-visible {
  color: var(--brand-hover);
}

/* One consistent, visible focus ring everywhere. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

code, pre, .mono {
  font-family: var(--mono);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 1.5rem 0;
  opacity: 1;
}

.muted {
  color: var(--muted);
}

.faint {
  color: var(--faint);
}

/* Domains, IPs and record values are identifiers — monospace so that
   l/1 and O/0 can be told apart. Matters most on the lookalike checker. */
.ident {
  font-family: var(--mono);
  font-size: .95em;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.container {
  max-width: 1180px;
}

.narrow {
  max-width: 900px;
}

::selection {
  background: var(--brand-glow);
  color: var(--ink);
}

/* Scrollbars, so the raw-response pane and long tables match the chrome. */
* {
  scrollbar-color: var(--line-strong) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--faint);
  background-clip: content-box;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: .7rem 1.1rem;
  color: var(--on-brand);
  background: var(--brand);
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  color: var(--on-brand);
}


/* 4. BUTTONS, FORMS AND CONTROLS ------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.3;
  padding: .55rem 1rem;
  transition: background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary,
.btn-primary:visited {
  color: var(--on-brand);
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 4px 14px var(--brand-glow);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled {
  color: var(--on-brand);
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 20px var(--brand-glow);
}

.btn-outline-secondary,
.btn-outline-secondary:visited {
  color: var(--body);
  background: var(--surface-alt);
  border-color: var(--line-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  color: var(--ink);
  background: var(--surface-hi);
  border-color: var(--brand);
}

.btn-sm {
  padding: .32rem .65rem;
  font-size: .8rem;
}

.btn:disabled {
  opacity: .7;
}

/* A text-weight button: used for "all / none", "remove", "copy". */
.ext-toggle {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--brand);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition: color var(--speed) var(--ease);
}

.ext-toggle:hover,
.ext-toggle:focus {
  color: var(--brand-hover);
  text-decoration: underline;
}

.form-control,
.form-select {
  color: var(--ink);
  background: var(--surface-alt);
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease),
              background-color var(--speed) var(--ease);
}

.form-control:hover,
.form-select:hover {
  border-color: var(--faint);
}

.form-control::placeholder {
  color: var(--faint);
}

.form-control:focus,
.form-select:focus {
  color: var(--ink);
  background: var(--surface-alt);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

/* Bootstrap paints its own chevron; recolour it for the dark ground. */
:root:not([data-theme="light"]) .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237e8f94' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-check-input {
  background-color: var(--surface-alt);
  border-color: var(--line-strong);
}

.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* Small clipboard button that sits beside a value. */
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  padding: 0;
  color: var(--faint);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: .78rem;
  cursor: pointer;
  transition: color var(--speed) var(--ease),
              background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.copy-btn:hover,
.copy-btn:focus {
  color: var(--brand);
  background: var(--surface-hi);
  border-color: var(--line-strong);
}

.copy-btn.is-copied {
  color: var(--ok);
  border-color: var(--ok-line);
  background: var(--ok-bg);
}


/* 5. HEADER, NAVIGATION AND FOOTER -----------------------------------------
   The bar stays near-black in both themes. It is the constant the rest of the
   site hangs off, and it is what makes the tool read as an instrument.
   -------------------------------------------------------------------------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-line);
}

.app-nav {
  padding: 0;
}

.app-nav > .container {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  color: var(--chrome-ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover,
.brand:focus {
  color: var(--chrome-ink);
}

/* The mark: a green lens on a dark tile, lit from within. */
.brand .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  color: var(--brand);
  background: rgba(46, 224, 138, .12);
  border: 1px solid rgba(46, 224, 138, .3);
  border-radius: 7px;
  font-size: .95rem;
  opacity: 1;
  box-shadow: 0 0 14px rgba(46, 224, 138, .16);
  transition: box-shadow var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

.brand:hover .bi {
  background: rgba(46, 224, 138, .2);
  box-shadow: 0 0 20px rgba(46, 224, 138, .3);
}

.brand__mark {
  font-weight: 650;
}

.brand__mark span {
  font-weight: 400;
  color: var(--chrome-muted);
}

.navbar-toggler {
  padding: .3rem .55rem;
  margin-left: .5rem;
  color: var(--chrome-ink);
  border-color: rgba(255, 255, 255, .18);
}

.navbar-toggler:focus {
  box-shadow: none;
}

.app-nav .navbar-nav {
  align-items: center;
  gap: .15rem;
}

.app-nav .nav-link {
  position: relative;
  color: var(--chrome-muted);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  padding: .4rem .75rem;
  white-space: nowrap;
  transition: color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}

.app-nav .nav-link:hover,
.app-nav .nav-link:focus {
  color: var(--chrome-ink);
  background: rgba(255, 255, 255, .07);
}

.app-nav .nav-link.active {
  color: var(--chrome-ink);
  background: rgba(255, 255, 255, .06);
  font-weight: 600;
}

/* The current section is marked by a lit rule under the tab, not a darker box. */
.app-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: -.45rem;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
}

/* Account links sit to the right, behind a hairline divider. */
.nav-account {
  align-items: center;
  gap: .15rem;
  margin-left: auto;
}

.nav-account .nav-link {
  font-size: .83rem;
}

.nav-account__divider {
  width: 1px;
  height: 1.4rem;
  margin: 0 .5rem;
  background: rgba(255, 255, 255, .14);
}

.nav-link-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.nav-logout {
  display: inline-flex;
  margin: 0;
}

.nav-account__user {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Light / dark control. Only the icon for the theme you would switch TO is
   shown; theme.js does nothing but flip the attribute and remember it. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  /* Last in the row on desktop; the media query below moves it beside the
     hamburger once the bar wraps. */
  order: 3;
  margin-left: .35rem;
  padding: 0;
  color: var(--chrome-muted);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  font-size: .9rem;
  cursor: pointer;
  transition: color var(--speed) var(--ease),
              background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.theme-toggle:hover,
.theme-toggle:focus {
  color: var(--brand);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(46, 224, 138, .35);
}

.theme-toggle .bi-sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle .bi-moon-stars {
  display: none;
}

:root[data-theme="light"] .theme-toggle .bi-sun {
  display: inline;
}

.site-footer {
  margin-top: 3.5rem;
  padding: 1.75rem 0;
  color: var(--chrome-muted);
  background: var(--chrome);
  border-top: 1px solid var(--chrome-line);
  font-size: .84rem;
}

.site-footer .container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
}

.site-footer a {
  color: var(--chrome-muted);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--brand);
  text-decoration: underline;
}

.site-footer__brand {
  color: var(--chrome-ink);
  font-weight: 600;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
}

.site-footer__note {
  flex-basis: 100%;
  margin: .35rem 0 0;
  color: rgba(232, 239, 238, .42);
  font-size: .79rem;
  max-width: 90ch;
}


/* 6. PAGE FURNITURE -------------------------------------------------------- */

/* Breadcrumb + title band at the top of every page. */
.page-heading {
  position: relative;
  padding: 1.6rem 0 1.4rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.page-heading .container {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 1.25rem;
}

.page-heading h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 650;
  letter-spacing: -.026em;
}

.page-heading p {
  margin: .4rem 0 0;
  color: var(--muted);
  font-size: .92rem;
  max-width: 62ch;
}

/* The home page: the same band, opened out, with a green halo behind the
   search panel that overlaps it. Dark ground, one instrument, nothing else. */
.page-heading--hero {
  padding: 3.75rem 0 2.5rem;
  background: var(--page);
  border-bottom: 0;
  overflow: hidden;
}

.page-heading--hero::before {
  content: "";
  position: absolute;
  inset: -60% 0 auto 0;
  height: 150%;
  background:
    radial-gradient(58% 50% at 50% 62%, var(--brand-glow) 0%, transparent 68%);
  pointer-events: none;
}

/* A faint dot grid, so the ground reads as a surface rather than a void. */
.page-heading--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(currentColor .8px, transparent .8px);
  background-size: 26px 26px;
  color: var(--line-strong);
  opacity: .35;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%);
  pointer-events: none;
}

.page-heading--hero .container {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
}

.page-heading--hero h1 {
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 2.9rem);
  font-weight: 680;
  letter-spacing: -.038em;
  max-width: 20ch;
  margin: 0 auto;
}

.page-heading--hero p {
  margin: .85rem auto 0;
  font-size: 1.02rem;
  max-width: 56ch;
}

/* A small status line above the hero heading: live, and where the data is from. */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.15rem;
  padding: .3rem .8rem .3rem .55rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.hero-eyebrow__dot {
  width: .45rem;
  height: .45rem;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-bg);
  animation: pulse 2.6s var(--ease) infinite;
}

/* The section that follows a hero pulls the search panel up into the halo. */
.section--under-hero {
  padding-top: 0;
  margin-top: -1.25rem;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0 0 .35rem;
  color: var(--faint);
  font-size: .78rem;
}

.crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.crumbs a:hover,
.crumbs a:focus {
  color: var(--brand);
  text-decoration: underline;
}

.crumbs__sep {
  opacity: .6;
}

/* Report identity: the domain or IP under investigation, stated once, large. */
.report-head__id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem .7rem;
  margin: 0;
  font-family: var(--mono);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}

.report-head__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.report-head__actions form {
  display: inline-flex;
  margin: 0;
}

.eyebrow {
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.section {
  padding: 1.9rem 0 2.5rem;
}

.section--muted {
  background: var(--surface-alt);
  border-top: 1px solid var(--line);
}

.panel,
.whois-panel,
.admin-panel,
.whois-search-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--edge);
}

.whois-panel,
.admin-panel {
  padding: 1.25rem 1.35rem;
}

/* The search panel is the instrument: bigger radius, more lift, and on the
   home page it sits over the hero halo. */
.whois-search-panel {
  position: relative;
  z-index: 1;
  padding: 1.6rem;
  margin-bottom: 1.35rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift), var(--edge);
}

.whois-panel h2,
.whois-search-panel h2,
.admin-panel h2 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .85rem;
  color: var(--ink);
  font-size: .98rem;
  font-weight: 620;
}

.whois-search-panel h2 {
  font-size: 1.1rem;
  margin-bottom: .45rem;
}

.whois-panel h2 .bi,
.whois-search-panel h2 .bi,
.admin-panel h2 .bi {
  color: var(--brand);
  font-size: 1.05em;
}

.whois-panel h3 {
  margin: 1.2rem 0 .55rem;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.whois-panel-sub,
.panel-sub {
  margin: -.4rem 0 .95rem;
  color: var(--muted);
  font-size: .85rem;
  max-width: 74ch;
}

.whois-panel--block {
  margin-bottom: 1.25rem;
}

.whois-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; /* Panels size to their content instead of stretching to the tallest. */
  gap: 1.1rem;
  margin-bottom: 1.25rem;
}

.empty-state {
  color: var(--muted);
  background: var(--surface-alt);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1.75rem;
  text-align: center;
}

.form-actions,
.admin-actions,
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

.admin-toolbar {
  justify-content: space-between;
  margin-bottom: 1rem;
}

.admin-toolbar p {
  margin: 0;
}

.form-actions {
  margin-top: 1rem;
}

.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.35rem;
}


/* 7. STATUS TAGS AND SIGNALS ----------------------------------------------- */

.stock {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .16rem .55rem;
  color: var(--info);
  background: var(--info-bg);
  border: 1px solid var(--info-line);
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
}

.stock--in {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: var(--ok-line);
}

.stock--out {
  color: var(--bad);
  background: var(--bad-bg);
  border-color: var(--bad-line);
}

.stock--error {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--warn-line);
}

.stock--lg {
  padding: .3rem .75rem;
  font-size: .81rem;
}

.whois-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.whois-pill {
  display: inline-flex;
  align-items: center;
  padding: .16rem .5rem;
  color: var(--body);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .73rem;
  font-weight: 600;
}

.whois-pill--help {
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.whois-pill--dns {
  min-width: 3.4rem;
  justify-content: center;
  color: var(--brand);
  background: var(--brand-wash);
  border-color: var(--brand-line);
}

/* At-a-glance signal tiles at the top of a report. The status now reads as a
   lit dot and a lit left edge rather than a coloured icon alone. */
.investigation-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin: 0 0 1.25rem;
}

.investigation-signal {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-width: 0;
  padding: .85rem .95rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--edge);
  overflow: hidden;
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.investigation-signal:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

/* The lit edge. A pseudo-element rather than a border so it can glow. */
.investigation-signal::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--faint);
}

.investigation-signal > .bi {
  margin-top: .1rem;
  color: var(--faint);
  font-size: 1.05rem;
  line-height: 1;
}

.investigation-signal div {
  display: grid;
  min-width: 0;
  gap: .15rem;
}

.investigation-signal strong {
  color: var(--muted);
  font-size: .67rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.investigation-signal span {
  color: var(--ink);
  font-size: .86rem;
  font-weight: 500;
  line-height: 1.35;
}

.investigation-signal--good::before {
  background: var(--ok);
  box-shadow: 0 0 12px var(--ok);
}

.investigation-signal--good > .bi {
  color: var(--ok);
}

.investigation-signal--warning::before {
  background: var(--warn);
  box-shadow: 0 0 12px var(--warn);
}

.investigation-signal--warning > .bi {
  color: var(--warn);
}

.investigation-signal--danger::before {
  background: var(--bad);
  box-shadow: 0 0 12px var(--bad);
}

.investigation-signal--danger > .bi {
  color: var(--bad);
}


/* 8. TABLES ---------------------------------------------------------------- */

.admin-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--edge);
}

.admin-table {
  margin: 0;
  min-width: 720px;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  --bs-table-bg: transparent;
  --bs-table-color: var(--body);
  --bs-table-border-color: var(--line);
}

.admin-table > thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: .65rem .85rem;
  color: var(--muted);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line-strong);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-table > tbody td {
  padding: .6rem .85rem;
  color: var(--body);
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  vertical-align: middle;
}

.admin-table > tbody tr:first-child td {
  border-top: 0;
}

.admin-table > tbody tr:hover td {
  background: var(--surface-hi);
}

.admin-table__actions {
  display: flex;
  gap: .5rem;
  white-space: nowrap;
}

.whois-table td {
  vertical-align: middle;
}

.whois-panel .admin-table-wrap {
  box-shadow: none;
  border-radius: var(--radius-sm);
}

.whois-dns-table {
  min-width: 520px;
}

.whois-dns-value {
  font-family: var(--mono);
  font-size: .83rem;
  overflow-wrap: anywhere;
}

/* Type and TTL are narrow, fixed facts — only the value column should ever wrap. */
.whois-dns-table th:first-child,
.whois-dns-table td:first-child {
  width: 1%;
  white-space: nowrap;
}

.whois-dns-table th:last-child,
.whois-dns-table td:last-child {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}


/* 9. SEARCH FORMS AND THE EXTENSION PICKER --------------------------------- */

.whois-search-panel > p {
  margin-bottom: 1.1rem;
  color: var(--muted);
  font-size: .92rem;
  max-width: 74ch;
}

.whois-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem;
}

/* The input carries a mono prompt caret in its padding, so the box reads as a
   command line rather than a text field. */
.whois-search-form .form-control {
  min-height: 3.35rem;
  padding-left: 2.4rem;
  background-color: var(--surface-alt);
  background-image: none;
  font-family: var(--mono);
  font-size: 1.02rem;
  letter-spacing: -.01em;
}

.whois-search-form {
  position: relative;
}

.whois-search-form::before {
  content: "\203A";                /* › */
  position: absolute;
  left: 1rem;
  top: 0;
  height: 3.35rem;
  display: flex;
  align-items: center;
  z-index: 2;
  color: var(--brand);
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.whois-search-form .btn {
  padding-inline: 1.4rem;
}

.whois-search-form--compact {
  margin-bottom: 1.35rem;
}

.whois-search-form--compact .form-control {
  min-height: 2.6rem;
  font-size: .92rem;
}

.whois-search-form--compact::before {
  height: 2.6rem;
  font-size: 1.1rem;
}

.whois-search-hint {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin: .7rem 0 0;
  color: var(--muted);
  font-size: .84rem;
  min-height: 1.4rem;
}

.whois-search-hint .bi {
  color: var(--faint);
}

.whois-search-hint code,
.whois-search-hint .ident {
  color: var(--brand);
  background: var(--brand-wash);
  border: 1px solid var(--brand-line);
  border-radius: 4px;
  padding: .05rem .35rem;
  font-size: .81rem;
}

/* The routing hint swaps as you type: keyword vs full domain vs IP. */
.route-hint[hidden] {
  display: none;
}

.ext-picker {
  margin-top: 1.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

/* Dimmed while the box holds a full domain or IP, where the extensions play no part. */
.ext-picker.is-inactive {
  opacity: .45;
  transition: opacity var(--speed) var(--ease);
}

.ext-picker__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .85rem;
}

.ext-picker__head h3 {
  margin: 0;
  color: var(--ink);
  font-size: .9rem;
  font-weight: 620;
}

.ext-picker__count {
  color: var(--muted);
  font-size: .81rem;
  font-variant-numeric: tabular-nums;
}

.ext-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.ext-group {
  min-width: 0;
  margin: 0;
  padding: .75rem .85rem .85rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.ext-group legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  float: left;
  width: 100%;
  margin: 0 0 .55rem;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ext-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem;
  clear: both;
}

.ext-checkbox {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  margin: 0;
  padding: .24rem .55rem;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .79rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--speed) var(--ease),
              background-color var(--speed) var(--ease),
              color var(--speed) var(--ease);
}

.ext-checkbox:hover {
  border-color: var(--brand);
}

/* Drawn rather than native: forty unchecked system checkboxes render as pale
   squares on a dark ground and become the loudest thing on the page. */
.ext-checkbox input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-content: center;
  width: .82rem;
  height: .82rem;
  flex: none;
  margin: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  accent-color: var(--brand);
  cursor: pointer;
  transition: background-color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.ext-checkbox input:checked {
  background: var(--brand);
  border-color: var(--brand);
}

.ext-checkbox input:checked::after {
  content: "";
  width: .4rem;
  height: .22rem;
  border: 2px solid var(--on-brand);
  border-top: 0;
  border-right: 0;
  transform: translateY(-.07rem) rotate(-45deg);
}

.ext-checkbox:has(input:checked) {
  color: var(--brand);
  background: var(--brand-wash);
  border-color: var(--brand-line);
  font-weight: 600;
}

.whois-list-form .whois-list-input {
  font-family: var(--mono);
  font-size: .87rem;
  margin-bottom: .8rem;
}

.whois-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .9rem;
  margin-top: 1.35rem;
}

.category-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  padding: 1.05rem 1.15rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--edge);
  text-decoration: none;
  transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}

.category-tile:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
}

.category-tile span {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .92rem;
  font-weight: 620;
  line-height: 1.3;
}

.category-tile span .bi {
  color: var(--brand);
}

.category-tile small {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.5;
}

.whois-single-panel {
  margin-top: 1.25rem;
}


/* 10. RESULT TABLES (bulk / list / lookalikes) ----------------------------- */

.bulk-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  margin: 1.6rem 0 .9rem;
}

.bulk-summary h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 620;
}

.bulk-summary__counts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

/* Filter chips: purely client-side show/hide over the result rows. */
.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .8rem;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .75rem;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .81rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--speed) var(--ease),
              background-color var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}

.chip:hover {
  border-color: var(--brand);
}

.chip__count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.chip[aria-pressed="true"] {
  color: var(--on-brand);
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 3px 12px var(--brand-glow);
}

.chip[aria-pressed="true"] .chip__count {
  color: var(--on-brand);
  opacity: .7;
}

.result-table {
  min-width: 640px;
}

.result-table td:first-child {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.result-table__state {
  width: 1%;
  white-space: nowrap;
}

.result-table tr[hidden] {
  display: none;
}

/* A thin colour key down the left edge of each row. */
.result-table tbody tr {
  border-left: 3px solid transparent;
}

.result-table tbody tr.is-available {
  border-left-color: var(--ok);
}

.result-table tbody tr.is-registered {
  border-left-color: var(--info);
}

.result-table tbody tr.is-error {
  border-left-color: var(--warn);
}

.result-table__detail {
  color: var(--muted);
  font-size: .83rem;
}

.result-empty {
  display: none;
  padding: 1.75rem;
  text-align: center;
  color: var(--muted);
}

.result-empty.is-shown {
  display: block;
}


/* 11. REPORTS -------------------------------------------------------------- */

.whois-banner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1.25rem;
  padding: 1.05rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--edge);
  overflow: hidden;
}

.whois-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--line-strong);
}

.whois-banner .bi {
  font-size: 1.35rem;
  line-height: 1.25;
}

.whois-banner strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 620;
}

.whois-banner p {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: .89rem;
}

.whois-banner--available::before {
  background: var(--ok);
  box-shadow: 0 0 16px var(--ok);
}

.whois-banner--available .bi {
  color: var(--ok);
}

.whois-banner--registered::before {
  background: var(--info);
  box-shadow: 0 0 16px var(--info);
}

.whois-banner--registered .bi {
  color: var(--info);
}

.whois-banner--error::before {
  background: var(--bad);
  box-shadow: 0 0 16px var(--bad);
}

.whois-banner--error .bi {
  color: var(--bad);
}

.whois-banner--warning::before {
  background: var(--warn);
  box-shadow: 0 0 16px var(--warn);
}

.whois-banner--warning .bi {
  color: var(--warn);
}

.whois-banner--slim {
  margin-bottom: .9rem;
  padding: .7rem .95rem;
}

.whois-banner--slim .bi {
  font-size: 1.05rem;
}

.whois-banner--slim p {
  margin: 0;
}

.whois-dl {
  display: grid;
  gap: .45rem;
  margin: 0;
}

.whois-dl > div {
  display: grid;
  grid-template-columns: minmax(112px, max-content) minmax(0, 1fr);
  gap: .3rem .95rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}

.whois-dl > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.whois-dl dt {
  color: var(--muted);
  font-weight: 500;
}

.whois-dl dd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.whois-dl--compact > div {
  grid-template-columns: minmax(78px, max-content) minmax(0, 1fr);
  font-size: .84rem;
}

.whois-ns-list {
  display: grid;
  gap: .32rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: .85rem;
}

.whois-ns-list li {
  display: flex;
  align-items: center;
  gap: .4rem;
  overflow-wrap: anywhere;
}

.whois-ns-list .bi {
  color: var(--brand);
  flex: none;
}

.whois-record-snippet {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .45rem .65rem;
  color: var(--body);
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .77rem;
  line-height: 1.55;
  word-break: break-all;
  white-space: pre-wrap;
}

.whois-note {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin-bottom: 1.25rem;
  padding: .75rem .95rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: .86rem;
}

.whois-note .bi {
  margin-top: .15rem;
  color: var(--faint);
}

.whois-raw {
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--edge);
  overflow: hidden;
}

.whois-raw summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 1.1rem;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 620;
  cursor: pointer;
  list-style-position: inside;
  transition: background-color var(--speed) var(--ease);
}

.whois-raw summary:hover {
  background: var(--surface-alt);
}

.whois-raw[open] summary {
  border-bottom: 1px solid var(--line);
}

.whois-raw summary .whois-copy {
  margin-left: auto;
}

/* The raw registry response is a terminal pane in both themes — it is
   machine output, and it should look like machine output. */
.whois-raw pre {
  max-height: 460px;
  overflow: auto;
  margin: 0;
  padding: 1.05rem 1.1rem;
  background: #05080a;
  color: #b9d8c9;
  border-radius: 0;
  font-size: .76rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.whois-meta {
  margin-bottom: 0;
  color: var(--muted);
  font-size: .8rem;
}

.whois-meta a {
  margin-left: .5rem;
}

.whois-ssl-host {
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 400;
}

.whois-sans {
  gap: .3rem;
}

/* Redirect trace: where the domain actually sends a browser. */
.trace-list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-hop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .2rem .75rem;
  padding: .55rem .75rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.trace-hop__code {
  min-width: 2.6rem;
  padding: .1rem .4rem;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  color: var(--info);
  background: var(--info-bg);
  border: 1px solid var(--info-line);
}

.trace-hop__code--ok {
  color: var(--ok);
  background: var(--ok-bg);
  border-color: var(--ok-line);
}

.trace-hop__code--bad {
  color: var(--bad);
  background: var(--bad-bg);
  border-color: var(--bad-line);
}

.trace-hop__url {
  font-family: var(--mono);
  font-size: .82rem;
  overflow-wrap: anywhere;
}

.trace-hop__note {
  grid-column: 2;
  color: var(--muted);
  font-size: .78rem;
}

.trace-arrow {
  color: var(--faint);
  font-size: .8rem;
  text-align: center;
  line-height: 1;
}

/* Lookalike / typosquat report. */
.lookalike-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1rem;
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: .84rem;
}

.lookalike-kind {
  display: inline-flex;
  align-items: center;
  padding: .12rem .45rem;
  color: var(--muted);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}

/* The differing characters are underlined so the swap is obvious at a glance. */
.diff-char {
  color: var(--bad);
  background: var(--bad-bg);
  border-radius: 3px;
  padding: 0 .05rem;
  font-weight: 700;
}


/* 12. WATCHLIST, HISTORY AND ADMIN ----------------------------------------- */

.whois-watch-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 0 0 1.25rem;
}

.whois-watch-bar form {
  display: inline-flex;
  margin: 0;
}

.watch-remove {
  display: inline-flex;
  margin: 0;
}

.whois-recent {
  margin-top: 1.25rem;
}

.whois-recent .admin-table-wrap {
  margin-bottom: .8rem;
  box-shadow: none;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: .9rem;
  margin-bottom: 1.25rem;
}

.admin-stats div {
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), var(--edge);
}

.admin-stats span {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.admin-stats strong {
  display: block;
  margin-top: .25rem;
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1.15;
}

.admin-analytics {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.25rem;
}

.admin-analytics h2 {
  font-size: .95rem;
}

.day-chart {
  display: flex;
  align-items: stretch;
  gap: .35rem;
  height: 175px;
}

.day-chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: .25rem;
  min-width: 0;
}

.day-chart__bar {
  width: 100%;
  max-width: 32px;
  background: linear-gradient(to top, var(--brand), var(--brand-hover));
  border-radius: 4px 4px 0 0;
  transition: filter var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

.day-chart__col:hover .day-chart__bar {
  filter: brightness(1.15);
  box-shadow: 0 0 14px var(--brand-glow);
}

.day-chart__count,
.day-chart__label {
  color: var(--muted);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.top-domains {
  margin: 0;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .88rem;
}

.top-domains li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}

.top-domains li a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: .83rem;
}

.top-domains__count {
  margin-left: auto;
  color: var(--muted);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.whois-admin-filter {
  margin-bottom: 1.25rem;
}

.whois-admin-filter__fields {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  /* Take the toolbar's width rather than being sized by content. Without this the percentage in
     the rule below resolves against a container that is itself sized from its content, and the
     last control wraps onto its own line with the row half empty. */
  flex: 1 1 auto;
}

.whois-admin-filter__fields .form-control {
  width: min(100%, 250px);
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .88rem;
  white-space: nowrap;
}

/* Switches between the two admin reports. */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.admin-tabs__link {
  padding: .55rem .9rem;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: .89rem;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.admin-tabs__link:hover {
  color: var(--ink);
  text-decoration: none;
}

.admin-tabs__link.active {
  border-bottom-color: var(--brand);
  color: var(--brand);
}

/* A full-width analytics panel, for lists that sit below the two-column pair. */
.admin-panel--wide {
  margin-bottom: 1.25rem;
}

/* Referrers are plain text rather than links, so they need the same truncation the
   linked lists get from .top-domains li a. */
.top-domains--split li > .ident {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 13. ACCOUNT PAGES -------------------------------------------------------- */

.account-panel {
  max-width: 460px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift), var(--edge);
}

.account-panel h2 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .4rem;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -.028em;
}

.account-panel h2 .bi {
  color: var(--brand);
}

.account-panel > p.muted {
  margin-bottom: 1.35rem;
  font-size: .9rem;
}

.account-panel__field {
  display: grid;
  gap: .3rem;
  margin-bottom: 1rem;
}

.account-panel__field label {
  color: var(--ink);
  font-size: .85rem;
  font-weight: 600;
}

.account-panel__field .form-control {
  min-height: 2.7rem;
}

.account-panel__field small {
  color: var(--muted);
  font-size: .78rem;
}

.account-panel__remember {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .25rem;
  font-size: .88rem;
  cursor: pointer;
}

.account-panel__remember input {
  margin: 0;
  accent-color: var(--brand);
}

.account-panel__submit {
  width: 100%;
  min-height: 2.8rem;
}

.account-panel__errors:not(:empty) {
  margin-bottom: 1rem;
}

.account-panel__errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.account-form {
  padding: 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.account-panel__alt {
  margin: 1.35rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .88rem;
}

/* The register form's bot honeypot. Moved off-screen rather than set to display:none or
   visibility:hidden, both of which the better bots know to skip: the whole point is that a
   script filling in every field it finds in the DOM fills this one too. The field is also
   aria-hidden and out of the tab order in the markup, so nobody is ever asked to complete it.
   Deleting this rule makes a real input appear on the page — remove the check first. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Identity's own scaffolding, which does not know about our tokens. */
.text-danger,
.validation-summary-errors {
  color: var(--bad) !important;
}


/* 14. MOTION ---------------------------------------------------------------
   Registry lookups take seconds, so the wait is part of the design: a lit bar
   crosses the top of the page while one is running, and results arrive rather
   than simply appearing. All of it is suppressed under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

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

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(400%); }
}

/* Indeterminate progress across the top of the viewport, under the header.
   site.js adds .is-busy to <body> when a lookup form is submitted. */
.busy-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2000;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
  pointer-events: none;
}

body.is-busy .busy-bar {
  opacity: 1;
}

.busy-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 25%;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  box-shadow: 0 0 12px var(--brand);
  animation: sweep 1.1s linear infinite;
}

/* Panels and result rows arrive in sequence rather than all at once. The delay
   is capped at six steps so a 200-row bulk result is not still animating. */
.investigation-summary > *,
.whois-grid > *,
.whois-feature-grid > *,
.admin-stats > * {
  animation: rise .38s var(--ease) backwards;
}

.investigation-summary > :nth-child(1),
.whois-grid > :nth-child(1),
.whois-feature-grid > :nth-child(1),
.admin-stats > :nth-child(1) { animation-delay: .02s; }

.investigation-summary > :nth-child(2),
.whois-grid > :nth-child(2),
.whois-feature-grid > :nth-child(2),
.admin-stats > :nth-child(2) { animation-delay: .06s; }

.investigation-summary > :nth-child(3),
.whois-grid > :nth-child(3),
.whois-feature-grid > :nth-child(3),
.admin-stats > :nth-child(3) { animation-delay: .10s; }

.investigation-summary > :nth-child(4),
.whois-grid > :nth-child(4),
.whois-feature-grid > :nth-child(4),
.admin-stats > :nth-child(4) { animation-delay: .14s; }

.investigation-summary > :nth-child(n+5),
.whois-grid > :nth-child(n+5),
.whois-feature-grid > :nth-child(n+5),
.admin-stats > :nth-child(n+5) { animation-delay: .18s; }

.whois-banner {
  animation: rise .38s var(--ease) backwards;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:active,
  .category-tile:hover,
  .investigation-signal:hover {
    transform: none;
  }
}


/* 15. RESPONSIVE ----------------------------------------------------------- */

@media (max-width: 991.98px) {
  .app-nav > .container {
    flex-wrap: wrap;
    padding-top: .4rem;
    padding-bottom: .4rem;
  }

  .app-nav .navbar-collapse {
    flex-basis: 100%;
  }

  .app-nav .navbar-nav {
    align-items: stretch;
    padding: .4rem 0;
  }

  /* The lit underline assumes a horizontal row; stacked, it reads as a rule
     across the whole item, so the active tab falls back to a left edge. */
  .app-nav .nav-link.active::after {
    left: 0;
    right: auto;
    top: .35rem;
    bottom: .35rem;
    width: 2px;
    height: auto;
  }

  .nav-account {
    margin-left: 0;
    padding-top: .4rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }

  .nav-account__divider {
    display: none;
  }

  /* Beside the hamburger rather than below the menu, so it stays reachable
     without opening the nav. It takes the auto margin the toggler would
     otherwise need, or the two would share the free space between them. */
  .theme-toggle {
    order: 0;
    margin-left: auto;
  }
}

@media (max-width: 900px) {
  .whois-grid,
  .admin-analytics {
    grid-template-columns: 1fr;
  }

  .investigation-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-heading--hero {
    padding: 2.5rem 0 2rem;
  }
}

@media (max-width: 640px) {
  .ext-grid {
    grid-template-columns: 1fr;
  }

  .whois-search-panel {
    padding: 1.2rem;
  }

  .whois-search-form {
    grid-template-columns: 1fr;
  }

  .whois-dl > div {
    grid-template-columns: 1fr;
    gap: .05rem;
  }

  .page-heading .container {
    align-items: flex-start;
  }

  .report-head__id {
    font-size: 1.2rem;
  }

  .investigation-summary {
    grid-template-columns: 1fr;
  }

  /* Stacked, but stretched: with align-items:flex-start a column flex container sizes
     each child to its max-content, and the long footer sentence then drags the whole
     document wider than the screen — which also pushes the nav toggle off the edge. */
  .site-footer .container,
  .pagination-bar,
  .admin-toolbar,
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .site-footer__note {
    flex-basis: auto;
  }

  /* Buttons keep their own width rather than spanning the screen. */
  .pagination-bar .btn,
  .form-actions .btn,
  .admin-toolbar .btn,
  .admin-toolbar form {
    align-self: flex-start;
  }
}


/* 16. PRINT ---------------------------------------------------------------
   Reports get printed and saved as PDFs, so give them a clean paper layout:
   no chrome, no interactive controls, nothing clipped or scrolled away.
   Paper is white whichever theme the screen is showing, so the tokens are
   re-declared here rather than each rule being overridden one at a time.
   ------------------------------------------------------------------------- */

@media print {
  :root,
  :root[data-theme="light"] {
    --page: #ffffff;
    --surface: #ffffff;
    --surface-alt: #f4f4f4;
    --surface-hi: #f4f4f4;
    --line: #bbbbbb;
    --line-strong: #999999;
    --ink: #000000;
    --body: #000000;
    --muted: #444444;
    --faint: #666666;
    --brand: #12694a;
    --brand-hover: #0b452f;
    --brand-wash: #eeeeee;
    --brand-line: #bbbbbb;
    --brand-glow: transparent;
    --on-brand: #ffffff;
    --ok: #10714a;
    --warn: #86560a;
    --bad: #9c2f27;
    --info: #2c505e;
    --ok-bg: #eeeeee;
    --warn-bg: #eeeeee;
    --bad-bg: #eeeeee;
    --info-bg: #eeeeee;
    --shadow: none;
    --shadow-lift: none;
    --edge: none;
  }

  .app-header,
  .site-footer,
  .whois-search-form,
  .whois-watch-bar,
  .report-head__actions,
  .filter-bar,
  .copy-btn,
  .whois-copy,
  .pagination-bar,
  .skip-link,
  .theme-toggle,
  .busy-bar,
  .page-heading--hero::before,
  .page-heading--hero::after {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  .section {
    padding: 0;
  }

  .page-heading {
    padding: 0 0 .5rem;
    border-bottom: 1px solid #999;
  }

  .container,
  .narrow {
    max-width: none;
    width: 100%;
  }

  .whois-panel,
  .whois-banner,
  .admin-table-wrap,
  .investigation-signal,
  .whois-raw {
    box-shadow: none;
    border-color: #bbb;
    break-inside: avoid;
  }

  .whois-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Print the raw response on paper, not as white-on-black. */
  .whois-raw pre {
    max-height: none;
    color: #000;
    background: #fff;
    border-top: 1px solid #bbb;
  }

  .whois-raw[open] summary {
    border: 0;
  }

  details {
    break-inside: avoid;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  .admin-table {
    min-width: 0;
  }

  .admin-table > thead th {
    position: static;
    background: #eee;
  }
}