/**
 * Whois Lookup — tool styles
 *
 * Layout, the registration detail grid, and the state colours for availability,
 * expiry and EPP status codes. Cards, tabs, tables, chips, meters and skeletons
 * are all frikwork; nothing here restyles one.
 *
 * The raw whois response is registrar-controlled text, so `.whois-raw` only
 * ever receives it via textContent — the styling here must not tempt anyone
 * into rendering it as markup.
 */

.whois-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: var(--fw-space-lg);
  align-items: start;
}

.whois-side { display: flex; flex-direction: column; gap: var(--fw-space-lg); }
.whois-side .app-panel + .app-panel { margin-top: 0; }
.whois-main { min-width: 0; }

.whois-raw-toggle { margin-top: var(--fw-space-sm); }

/* --- TLD cloud -------------------------------------------------------------- */

.whois-tld-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-space-xs);
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--fw-space-xs) 0;
}
.whois-tld { cursor: pointer; border: 0; font: inherit; font-size: 0.75rem; }
.whois-tld:hover { background: var(--fw-bg-hover); color: var(--fw-brand-text); }
.whois-tld-empty { margin: var(--fw-space-sm) 0 0; }

/* --- Report header ---------------------------------------------------------- */

.whois-report { min-width: 0; }

.whois-report__head {
  display: flex;
  align-items: center;
  gap: var(--fw-space-md);
  flex-wrap: wrap;
  padding-bottom: var(--fw-space-md);
  margin-bottom: var(--fw-space-lg);
  border-bottom: 1px solid var(--fw-border);
}
.whois-report__globe { font-size: 1.4rem; color: var(--fw-brand-text); }
.whois-report__id { min-width: 0; flex: 1 1 14rem; }
.whois-report__id h3 { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.whois-report__meta { margin: 0.15rem 0 0; color: var(--fw-text-muted); }

/* Availability pill. Registered is the common case and stays quiet; available
   is the answer people are hunting for, so it gets the brand colour. */
.whois-avail {
  display: inline-flex;
  align-items: center;
  gap: var(--fw-space-xs);
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--fw-border);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.whois-avail--available {
  border-color: transparent;
  background: var(--fw-gradient-primary);
  color: var(--fw-on-primary);
}
.whois-avail--registered { color: var(--fw-text-2); }
.whois-avail--unknown { color: var(--fw-text-muted); font-style: italic; }

/* --- Overview pane ---------------------------------------------------------- */

.whois-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--fw-space-lg);
}

.whois-subhead {
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
  margin: 0 0 var(--fw-space-sm);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fw-text-muted);
}
.whois-subhead i { color: var(--fw-brand-text); }

.whois-detail { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 0.35rem var(--fw-space-md); }
.whois-detail dt,
.whois-detail .whois-label { color: var(--fw-text-muted); font-size: 0.82rem; }
.whois-val {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.85rem;
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.whois-expiry { font-weight: 600; }
.whois-expiry--ok { color: var(--fw-success); }
.whois-expiry--warn { color: var(--fw-warning); }
.whois-expiry--critical { color: var(--fw-danger); }

.whois-lifetime { margin-top: var(--fw-space-md); }
.whois-lifetime p { margin: var(--fw-space-xs) 0 0; color: var(--fw-text-muted); }

.whois-link { overflow-wrap: anywhere; }

/* --- Name servers ----------------------------------------------------------- */

.whois-ns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fw-space-xs); }
.whois-ns__item {
  display: flex;
  align-items: center;
  gap: var(--fw-space-sm);
  padding: var(--fw-space-sm);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-sm);
  background: var(--fw-bg-2);
}
.whois-ns__item i { color: var(--fw-text-muted); }

/* --- EPP status codes -------------------------------------------------------- */

.whois-statuses { display: flex; flex-wrap: wrap; gap: var(--fw-space-xs); }
.whois-status {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-sm);
  font-size: 0.75rem;
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--fw-text-2);
}
/* A lock status is protective, not a problem — green would read as "fine" and
   grey as "inert", so it gets its own treatment. */
.whois-status--lock { border-color: var(--fw-info); color: var(--fw-info); }
.whois-status--ok { border-color: var(--fw-success); color: var(--fw-success); }

/* --- Raw response ------------------------------------------------------------ */

.whois-raw {
  max-height: 32rem;
  overflow: auto;
  margin: 0;
  padding: var(--fw-space-md);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.whois-loading { display: flex; flex-direction: column; gap: var(--fw-space-sm); padding: var(--fw-space-md) 0; }
.whois-tabs { margin-top: var(--fw-space-md); }
.whois-actions { display: flex; gap: var(--fw-space-sm); flex-wrap: wrap; }
.whois-stats { margin-bottom: var(--fw-space-lg); }

/* --- Batch / wizard ---------------------------------------------------------- */

.whois-wizard-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--fw-space-lg);
  align-items: start;
}

.whois-progress-panel { margin-bottom: var(--fw-space-lg); }
.whois-progress__row { display: flex; align-items: center; gap: var(--fw-space-md); flex-wrap: wrap; }
.whois-progress__label { font-size: 0.85rem; }
.whois-progress__current { color: var(--fw-text-muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.whois-progress__meter { flex: 1 1 12rem; min-width: 8rem; }
.whois-progress__tally { display: flex; gap: var(--fw-space-sm); flex-wrap: wrap; }

.whois-tally { font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.whois-tally--good { color: var(--fw-success); }
.whois-tally--bad { color: var(--fw-danger); }
.whois-tally--wait { color: var(--fw-text-muted); }

.whois-log {
  max-height: 22rem;
  overflow-y: auto;
  font-size: 0.78rem;
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.whois-server { overflow-wrap: anywhere; }
.whois-table-panel { min-width: 0; }
.whois-batch { display: flex; flex-direction: column; gap: var(--fw-space-md); }

/* --- AI suggestion panel ------------------------------------------------------ */

.whois-ai { display: flex; flex-direction: column; gap: var(--fw-space-sm); }
.whois-ai__status { display: flex; align-items: center; gap: var(--fw-space-sm); font-size: 0.85rem; }
.whois-ai__meter { width: 100%; }
.whois-ai__summary { color: var(--fw-text-muted); font-size: 0.82rem; line-height: 1.5; }

/* --- Responsive ---------------------------------------------------------------- */

@media (max-width: 1100px) {
  .whois-layout,
  .whois-wizard-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .whois-detail { grid-template-columns: 1fr; gap: 0.1rem; }
  .whois-detail dt,
  .whois-detail .whois-label { margin-top: var(--fw-space-sm); }
}

/* Wizard: the per-row action column. Six icon buttons that must stay on one
   line and must not stretch the column when the table scrolls horizontally. */
.whois-row-actions { white-space: nowrap; text-align: right; }
.whois-row-actions .fw-icon-btn { margin-left: 0.15rem; }
.whois-reg-tld { white-space: nowrap; }
.whois-reg-server { overflow-wrap: anywhere; font-size: 0.85rem; }