/* IRRd Test — layout on top of the Web Awesome default theme (dark via
   <html class="wa-dark">). Everything data-driven is built with DOM APIs
   in app.js, so this file only positions things. */

* { box-sizing: border-box; }

/* Author display rules (flex/grid on .loading, wa-* hosts) would otherwise
   beat the UA's [hidden] { display: none }. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font-family: var(--wa-font-family-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  line-height: 1.5;
  min-height: 100vh;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
}

header { margin-bottom: 1rem; }
header .home-link {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--wa-color-text-quiet);
  text-decoration: none;
}
header .home-link:hover,
header .home-link:focus-visible { color: var(--wa-color-brand-on-quiet); text-decoration: underline; }
header h1 { margin: 0; font-size: 1.8rem; color: var(--wa-color-brand-on-quiet); }
header h1 i { margin-right: 0.35rem; }
header .subtitle { margin: 0.25rem 0 0; color: var(--wa-color-text-quiet); font-size: 0.95rem; }

.testing-banner { margin-bottom: 1.25rem; }

.lookup-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.lookup-form wa-input { flex: 1 1 260px; }
/* Line the button up with the input box, below the input's label. */
.lookup-form wa-button { margin-top: 1.55rem; }

#error { margin-bottom: 1rem; }

.loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--wa-color-text-quiet);
  margin: 1rem 0;
}

.summary { margin: 0 0 0.75rem; color: var(--wa-color-text-quiet); }
.summary strong { color: var(--wa-color-text-normal); }

.records { display: grid; gap: 1rem; }

.record-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem 0.9rem;
  flex-wrap: wrap;
}
.record-header .pk { font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.record-header .as-name { color: var(--wa-color-text-quiet); }
.record-header .updated {
  margin-left: auto;
  color: var(--wa-color-text-quiet);
  font-size: 0.85rem;
  white-space: nowrap;
}

dl.attrs {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 0;
}
dl.attrs dt {
  color: var(--wa-color-text-quiet);
  font-family: var(--wa-font-family-code, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.85rem;
  padding-top: 0.1rem;
}
dl.attrs dd { margin: 0; overflow-wrap: anywhere; }
dl.attrs dd .line { display: block; }

.record wa-details { margin-top: 0.9rem; }
.policy h4 {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wa-color-text-quiet);
}
.policy h4:first-child { margin-top: 0; }

pre.code {
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: var(--wa-color-surface-lowered);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m, 6px);
  font-family: var(--wa-font-family-code, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
pre.code + pre.code { margin-top: 0.5rem; }

.query-details { margin-top: 1.25rem; }
.query-details .hint { margin: 0 0 0.6rem; color: var(--wa-color-text-quiet); font-size: 0.9rem; }
.hint code, .summary code { font-size: 0.85em; }

.footer-links { text-align: center; margin: 0 0 1.5rem; }
.footer-links a { color: var(--wa-color-text-quiet); }

@media (max-width: 600px) {
  .container { padding: 1rem 1rem 1.5rem; }
  .lookup-form wa-button { margin-top: 0; width: 100%; }
  dl.attrs { grid-template-columns: 1fr; gap: 0.1rem; }
  dl.attrs dd { margin-bottom: 0.4rem; }
  .record-header .updated { margin-left: 0; white-space: normal; }
}