/* IP to AWS Service: styles for the home page tool (app.js) and the live
   widgets (live.js). Loaded only on pages that use those scripts.
   Uses the design tokens from style.css (--bg, --text, --accent, ...), each
   with a fallback so this file still renders sensibly on its own. */

/* ---------- tool frame ---------- */

.tool { max-width: 50rem; margin: 0 0 3rem; }
.tool h1 { margin-bottom: .35rem; }
.tool-lead { margin: 0 0 1.25rem; }

.tool-form { margin: 0; }
.tool-label { display: block; margin: 0 0 .35rem; font-weight: 600; }
.tool-row { display: flex; gap: .5rem; }
.tool-input.tool-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 3rem;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 1rem;
}
.tool-input::placeholder { font-family: var(--font, system-ui, sans-serif); }
.tool-input[aria-invalid="true"] {
  border-color: var(--warn-line, #b06a00);
  box-shadow: 0 0 0 1px var(--warn-line, #b06a00);
}
.tool-submit.btn { flex: none; min-height: 3rem; padding-inline: 1.25rem; }

.field-error {
  margin: .45rem 0 0;
  color: var(--warn-text, #7a4800);
  font-weight: 600;
  font-size: .9375rem;
}
.tool-hint { margin: .45rem 0 0; }

.tool-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .9rem;
  margin: .5rem 0 0;
}
.tool-examples a {
  display: inline-block;
  padding-block: .3rem;
  font-family: var(--mono, ui-monospace, monospace);
}

/* Keyboard hint is noise on touch screens; the input hint is kept for screen readers on phones. */
@media (hover: none), (max-width: 40rem) {
  .kbd-hint { display: none; }
}
@media (max-width: 40rem) {
  .tool-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- shared data status line (ui.renderStatus) ---------- */

.status-line {
  min-height: 2.9rem; /* two lines on a phone: no layout shift as the text changes */
  margin: .75rem 0 .5rem;
  color: var(--text-muted, #4e5a66);
  font-size: .875rem;
  line-height: 1.6;
}
.status-line:focus { outline: none; }
/* Phones: room for the progress bar plus two lines ("… · saved copy in use"), so a background refresh doesn't shift the page. */
@media (max-width: 40rem) { .tool:not([data-result="shown"]) > .status-line { min-height: 3.6rem; } }
.status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
}
.status-progress {
  flex: none;
  width: 7rem;
  height: .55rem;
  accent-color: var(--accent, #0a5ea8);
}
.status-text { flex: 1 1 14rem; min-width: 0; }
.status-age { white-space: nowrap; }
.status-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.status-actions:empty { display: none; }
.status-line[data-state="error"] .status-text,
.status-line[data-state="offline"] .status-text { color: var(--warn-text, #7a4800); font-weight: 600; }
.status-warn {
  margin: .3rem 0 0;
  padding: .3rem .6rem;
  border-radius: var(--radius-small, 6px);
  background: var(--warn-bg, #fdf3e1);
  color: var(--warn-text, #7a4800);
  font-weight: 600;
}

/* ---------- result region ---------- */

/* Reserved height: the first answer doesn't push the page down. */
.result-region { min-height: 15rem; }
@media (min-width: 48rem) { .result-region { min-height: 17rem; } }

/* The placeholder fills the reserved space, so no empty band sits under it.
   It is shown only once app.js runs (html.js); without JavaScript the
   <noscript> notice takes its place. */
.result-placeholder {
  display: none;
  min-height: inherit;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--border-strong, #7a8794);
  border-radius: var(--radius, 8px);
  color: var(--text-muted, #4e5a66);
}
.js .result-placeholder { display: grid; place-content: center; }
.result-placeholder > * { max-width: 36rem; }
.result-placeholder > :last-child { margin-bottom: 0; }
.result-region > noscript .callout { margin: 0; }

.result-card {
  padding: 1rem 1rem 1.15rem;
  border: 1px solid var(--border, #d5dce3);
  border-left: 4px solid var(--border-strong, #7a8794);
  border-radius: var(--radius, 8px);
  background: var(--bg, #fff);
  box-shadow: var(--shadow, none);
}
@media (min-width: 48rem) { .result-card { padding: 1.25rem 1.5rem 1.4rem; } }
.result-card[data-verdict="aws"],
.result-card[data-verdict="partial"],
.result-card[data-verdict="amazon-asn"] { border-left-color: var(--ok-text, #0b5a3b); }
.result-card[data-verdict="notlisted"],
.result-card[data-verdict="host-error"] { border-left-color: var(--warn-line, #b06a00); }
.result-card[data-verdict="special"] { border-left-color: var(--special-text, #4a2ea0); }
.result-card[data-verdict="host"] { border-left-color: var(--accent, #0a5ea8); }
.result-card > :last-child { margin-bottom: 0; }

.result-query {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  margin: 0 0 .4rem;
}
.result-q { font-size: .9375rem; }
/* Echoed input, DNS names and network names can contain right-to-left text: keep it from reordering what surrounds it. */
.result-card code, .result-q { unicode-bidi: isolate; }
.host-unicode { margin: 0 0 .75rem; }
.result-title {
  margin: 0 0 .6rem;
  font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  scroll-margin-top: 1rem;
}
/* Programmatic focus target only (tabindex=-1), not a control. */
.result-title:focus { outline: none; }

.result-honesty {
  margin: 0 0 .75rem;
  font-size: .9375rem;
  font-weight: 600;
}
.result-body p,
.result-wait { margin: 0 0 .65rem; max-width: var(--measure, 46rem); }
.result-body-slot > :last-child > :last-child { margin-bottom: .65rem; }

.result-notes {
  margin: .5rem 0 1rem;
  padding: .5rem .8rem;
  border-radius: var(--radius-small, 6px);
  background: var(--bg-soft, #f5f7f9);
  font-size: .875rem;
}
.result-notes-label { margin: 0 0 .15rem; font-weight: 600; }
.result-notes ul { margin: 0; padding-left: 1.2rem; }

.result-sub { margin: 1.25rem 0 .5rem; font-size: 1.0625rem; }
.result-data { margin: .75rem 0 .5rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }

.copy-btn { min-width: 7.5em; }
.copy-btn.is-copied {
  border-color: var(--ok-border, #a3d6be);
  background: var(--ok-bg, #e4f4ec);
  color: var(--ok-text, #0b5a3b);
}

.result-why { margin: -.5rem 0 1rem; font-size: .9375rem; }
.result-why > summary { padding-block: .3rem; color: var(--accent, #0a5ea8); }
.result-why > p { max-width: var(--measure, 46rem); }

.cell-sub {
  display: block;
  margin-top: .1rem;
  color: var(--text-muted, #4e5a66);
  font-size: .8125rem;
  line-height: 1.4;
}

.code-list { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.code-link { text-decoration: none; }
.code-link > code { color: var(--accent, #0a5ea8); }
.code-link:hover > code { text-decoration: underline; text-underline-offset: .18em; }

/* ---------- range table ---------- */

.range-table td { font-size: .9375rem; }
.range-table tr.is-innermost > td { background: var(--accent-soft, #e8f1fa); }
.row-tag {
  display: inline-block;
  margin-left: .45rem;
  color: var(--text-muted, #4e5a66);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Narrow screens: each row becomes a small labelled block. Table roles are set
   explicitly in the markup, so assistive tech still sees a table. */
@media (max-width: 40rem) {
  .stack-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .stack-table,
  .stack-table tbody,
  .stack-table tr,
  .stack-table td { display: block; width: 100%; }
  .stack-table tr { padding: .55rem .75rem; border-bottom: 1px solid var(--border, #d5dce3); }
  .stack-table tbody tr:last-child { border-bottom: 0; }
  .stack-table td {
    position: relative;
    min-height: 1.6rem;
    padding: .2rem 0 .2rem 7rem;
    border: 0;
    text-align: left;
  }
  .stack-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: .3rem;
    width: 6.5rem;
    color: var(--text-muted, #4e5a66);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .stack-table td.num { text-align: left; }
  .table-wrap .stack-table :not(pre) > code { white-space: normal; overflow-wrap: anywhere; }
  .range-table tr.is-innermost { background: var(--accent-soft, #e8f1fa); }
  .range-table tr.is-innermost > td { background: none; }
}

/* ---------- optional checks (RIPEstat, reverse DNS) ---------- */

.result-extra {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #d5dce3);
}
.result-extra > .result-sub { margin-top: 0; }
.result-extra > p { max-width: var(--measure, 46rem); }
.extra-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  margin: 0 0 .5rem;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2rem;
  cursor: pointer;
}
.check input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; }
.extra-msg { margin: .5rem 0; }
.extra-out > :last-child { margin-bottom: 0; }

.asn-list,
.ptr-list { margin: .5rem 0; padding: 0; list-style: none; }
.asn-list > li,
.ptr-list > li { padding: .45rem 0; border-top: 1px solid var(--border, #d5dce3); }
.asn-list > li:first-child,
.ptr-list > li:first-child { border-top: 0; }
.ptr-name { display: inline-block; margin-bottom: .15rem; }
.ptr-info { display: block; }

.result-extra.abuse-panel,
.abuse-panel {
  margin-top: 1.25rem;
  padding: .7rem 1rem;
  border: 1px solid var(--border, #d5dce3);
  border-radius: var(--radius, 8px);
  background: var(--bg-soft, #f5f7f9);
}
.abuse-panel > summary { padding-block: .25rem; }
.abuse-panel > :last-child { margin-bottom: 0; }
.abuse-panel ul { padding-left: 1.2rem; }

/* ---------- hostnames ---------- */

.host-self { margin: 0 0 .75rem; font-size: .9375rem; }
.host-hint { display: block; font-size: .875rem; }
.host-hint > strong { font-weight: 600; }
.host-status { margin: 0 0 .5rem; color: var(--text-muted, #4e5a66); }
.host-summary { margin: 0 0 .6rem; font-size: 1.0625rem; font-weight: 650; }
.host-note { margin: 1rem 0 .5rem; max-width: var(--measure, 46rem); }

.chain-list { margin: 0 0 1rem; padding-left: 1.4rem; }
.chain-list > li { margin: .35rem 0; }
.chain-arrow { color: var(--text-muted, #4e5a66); }

.addr-list {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border, #d5dce3);
  border-radius: var(--radius, 8px);
}
.addr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .9rem;
  padding: .5rem .75rem;
  border-top: 1px solid var(--border, #d5dce3);
}
.addr-row:first-child { border-top: 0; }
.addr-link { display: inline-block; min-width: 9rem; padding-block: .3rem; font-weight: 600; }
.addr-verdict {
  display: inline-flex;
  flex: 1 1 16rem;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  font-size: .9375rem;
}

/* ---------- home page content below the tool ---------- */

.home-section { margin-top: 3rem; }
.home-links { max-width: none; }

/* ---------- live widgets (live.js) ---------- */

.live-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}
.live-note { flex: 1 1 16rem; margin: 0; }
.live-status { min-height: 1.6rem; margin: .75rem 0; }
.live-body > :last-child { margin-bottom: 0; }
.live-wait { margin: 0; }
.live-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .75rem 1rem;
  margin: 0 0 1rem;
}
.live-field > label { display: block; margin: 0 0 .25rem; font-size: .875rem; font-weight: 600; }
.live-field > select { width: 100%; }
.live-count { margin: 0 0 .5rem; font-weight: 600; }
.live-count:focus,
.live .callout:focus { outline: none; }
.live-output-block { margin: 0 0 .5rem; }
.live-output.live-output { width: 100%; min-height: 8rem; font-size: .8125rem; white-space: pre; overflow-wrap: normal; }
.live-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }
.live-meta { margin: .5rem 0 0; }
.live-warn { margin: 0 0 .75rem; }
.live-error { margin: 0; color: var(--warn-text, #7a4800); font-weight: 600; }

.live-table .num { text-align: right; white-space: nowrap; }
.live-table tr.is-unknown > td { background: var(--warn-bg, #fdf3e1); }
.nbg-list { margin: 0; padding: 0; list-style: none; }
.nbg-list > li + li { margin-top: .3rem; }
@media (max-width: 40rem) {
  .live-table tr.is-unknown { background: var(--warn-bg, #fdf3e1); }
  .live-table tr.is-unknown > td { background: none; }
}

/* ---------- phones: the answer first ---------- */

/* Once an answer is showing, a small screen puts it right under the search
   box: the intro and the examples are hidden, and the data status line moves
   below the card (only while it has no buttons, so the keyboard order still
   matches what is on screen). */
@media (max-width: 40rem) {
  .tool[data-result="shown"] { display: flex; flex-direction: column; }
  .tool[data-result="shown"] > h1 { margin-bottom: .75rem; }
  .tool[data-result="shown"] .tool-lead,
  .tool[data-result="shown"] .tool-examples { display: none; }
  .tool[data-result="shown"] .result-region { order: 1; margin-top: .75rem; }
  .tool[data-result="shown"] .status-line:not([data-state="error"], [data-state="offline"]) { order: 2; min-height: 0; margin-top: .5rem; }
}

/* ---------- touch screens: 44px targets ---------- */

@media (pointer: coarse) {
  .btn-small { min-height: 2.75rem; }
  /* Padding, not display:flex, so summaries keep their disclosure triangle. */
  .result-extra > summary,
  .result-why > summary { padding-block: .6rem; }
  .tool-examples a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0; }
  .code-link { display: inline-block; padding-block: .625rem; }
  .code-list { gap: 0 .5rem; }
  .addr-link { padding-block: .65rem; }
  .check { min-height: 2.75rem; }
}

/* ---------- preferences ---------- */

@media (forced-colors: active) {
  .result-card, .result-placeholder, .addr-list, .abuse-panel { border: 1px solid CanvasText; }
  .result-card { border-left-width: 4px; }
  .status-progress { forced-color-adjust: auto; }
}

@media print {
  .tool-form, .tool-examples, .status-line, .result-actions, .extra-controls, .live-intro, .live-actions { display: none !important; }
  .result-card { box-shadow: none; break-inside: avoid; }
  .abuse-panel:not([open]) { display: none; }
}