/* ============================================================================
   tool-robots.css - the widget on /tools/robots-and-sitemap only.

   pages.css dresses prose pages. This page also carries a tool: an input, a
   submit, and the result cards that /js/tool-robots.js writes into #out. That
   markup is emitted by a shared, hashed script and cannot be renamed, so the
   selectors here match what the script actually produces:

     .out#out          the live region the results are written into
     .r                one result, plus .r-pass / .r-warn / .r-fail / .r-unknown
     .r h3 > .tag      the short word above the title
     .r p, .r code     the explanation and the values quoted from the response

   Scoped to this page rather than added to pages.css so that a change here
   cannot alter any of the twenty-eight prose pages, and pure ASCII because
   tools/preflight.py refuses to ship a bundle that is not.

   Every custom property is given a literal fallback: pages.css already
   references --surface, --bg-sunk and --focus, which tokens.css does not
   define, and an unresolved var() drops the whole declaration.
   ========================================================================= */

/* ------------------------------------------------------------------- form */

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.toolform {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 32px; max-width: 46rem;
}
.toolform input[type="text"] {
  flex: 1 1 17rem; min-width: 0;
  min-height: 52px; padding: 0 20px;
  border: 1px solid var(--line, #E4DED2); border-radius: 999px;
  background: var(--surface, var(--white, #FFFFFF));
  color: var(--ink, #13100C);
  font-family: inherit; font-size: 16px; line-height: 1.2;
}
.toolform input[type="text"]::placeholder { color: var(--muted, #6B6459); }
.toolform .go {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  border: 1px solid var(--ink, #13100C); border-radius: 999px;
  background: var(--ink, #13100C); color: var(--off-white, #FBF8F3);
  font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  transition: background var(--d-1, .3s) var(--e-std, ease),
              border-color var(--d-1, .3s) var(--e-std, ease);
}
.toolform .go:hover {
  background: var(--accent, #8A5F14); border-color: var(--accent, #8A5F14);
}
.toolform .go[disabled] { opacity: .55; cursor: progress; }

.sub {
  margin-top: 14px;
  font-size: 14.5px; line-height: 1.6;
  color: var(--muted, #6B6459); max-width: 62ch;
}

/* ---------------------------------------------------------------- results */

/* Same measure as the form, so the answers line up under the question that
   produced them rather than running the full 1180px of .wrap. */
.out { display: grid; gap: 12px; max-width: 46rem; }
.out:not(:empty) { margin-top: 30px; }

.out .r {
  padding: 18px 20px;
  background: var(--surface, var(--white, #FFFFFF));
  border: 1px solid var(--line, #E4DED2);
  border-left-width: 3px;
  border-radius: 14px;
}
.out .r-pass    { border-left-color: var(--good, #3F6B33); }
.out .r-warn    { border-left-color: var(--warn, #8A5A12); }
.out .r-fail    { border-left-color: var(--bad, #8C3A29); }
.out .r-unknown { border-left-color: var(--muted, #6B6459); }

.out .r h3 {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px;
  margin: 0; font-size: 16.5px; font-weight: 500; line-height: 1.3;
  letter-spacing: -.012em; color: var(--ink, #13100C);
}
.out .tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  white-space: nowrap;
}
.out .r-pass    .tag { color: var(--good, #3F6B33); }
.out .r-warn    .tag { color: var(--warn, #8A5A12); }
.out .r-fail    .tag { color: var(--bad, #8C3A29); }
.out .r-unknown .tag { color: var(--muted, #6B6459); }

.out .r p {
  margin: 10px 0 0;
  font-size: 14.5px; line-height: 1.65; color: var(--body, #4A443B);
}
.out .r code,
.out .r b {
  color: var(--ink, #13100C);
}
.out .r b { font-weight: 500; }
.out .r code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px;
  padding: 2px 7px; margin-top: 3px;
  display: inline-block; max-width: 100%; word-break: break-all;
  background: var(--off-white-sunk, #F4EFE6);
  border: 1px solid var(--line, #E4DED2); border-radius: 6px;
}

/* The status line the script writes while it is still fetching. */
.out > .sub { margin-top: 0; }

/* ------------------------------------------------- the explanation, and on */

.prose.note {
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 32px);
  background: var(--off-white-sunk, #F4EFE6);
  border: 1px solid var(--line, #E4DED2);
  border-radius: var(--radius, 20px);
}
.prose.note b { color: var(--ink, #13100C); font-weight: 500; }
.prose.note code { word-break: break-word; }

.smore {
  padding-block: clamp(28px, 4vw, 44px) clamp(8px, 2vw, 24px);
  font-size: 14.5px; color: var(--muted, #6B6459);
}
.smore p {
  max-width: 62ch;
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line, #E4DED2);
}
.smore a { color: var(--accent, #8A5F14); text-underline-offset: 3px; }
.smore a:hover { color: var(--ink, #13100C); }

@media (max-width: 520px) {
  .toolform .go { flex: 1 1 100%; }
}