/* ==========================================================================
   itkab.com — long-form pages: code references and field notes
   Loads after global.css. Everything here is scoped to .doc or .prose.
   ========================================================================== */

.doc { padding-block: var(--s7) var(--s6); }

.doc-head { max-width: 46rem; }

.doc-head h1 {
  margin: var(--s3) 0 var(--s4);
  font-family: var(--display);
  font-size: var(--t-h1);
  font-weight: 800;
  font-stretch: 94%;
  line-height: 1.02;
  letter-spacing: -0.038em;
}

.doc-head .doc-sub {
  margin: 0;
  font-size: var(--t-lead);
  color: var(--steel);
  max-width: 58ch;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.doc-meta li { display: flex; gap: var(--s2); }
.doc-meta b { color: var(--steel); font-weight: 500; }

/* Severity strip. Same semantic colours as the decoder. */
.verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s5);
  padding: var(--s2) var(--s4);
  border-radius: 999px;
  border: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: var(--t-dense);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.verdict::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--steel);
}
.verdict[data-severity="fail"] { color: var(--oxide); background: var(--oxide-wash); }
.verdict[data-severity="fail"]::before { background: var(--oxide); }
.verdict[data-severity="warn"] { color: var(--hazard); background: var(--hazard-wash); }
.verdict[data-severity="warn"]::before { background: var(--hazard); }
.verdict[data-severity="info"] { color: var(--verdigris); background: var(--verdigris-wash); }
.verdict[data-severity="info"]::before { background: var(--verdigris); }

/* --- Prose --------------------------------------------------------------- */

.prose { max-width: var(--measure); }

.prose h2 {
  margin: var(--s7) 0 var(--s3);
  font-family: var(--display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.prose h3 {
  margin: var(--s6) 0 var(--s2);
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.prose p { margin: 0 0 var(--s4); }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: 1.3rem; }
.prose li { margin-bottom: var(--s2); }
.prose li:last-child { margin-bottom: 0; }
.prose strong { color: var(--bone); font-weight: 600; }

.prose a { color: var(--hazard); text-decoration-color: var(--link-underline); }
.prose a:hover { text-decoration-color: var(--hazard); }

.prose pre {
  margin: 0 0 var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--graphite-deep);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--hazard-deep);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.75;
  color: var(--bone);
}
.prose pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}

/* A short aside that carries a status meaning, not decoration. */
.note-box {
  margin: 0 0 var(--s5);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--steel-dim);
  border-radius: var(--radius-lg);
  background: var(--panel);
  font-size: var(--t-sm);
}
.note-box[data-severity="warn"] { border-left-color: var(--hazard); }
.note-box[data-severity="fail"] { border-left-color: var(--oxide); }
.note-box[data-severity="info"] { border-left-color: var(--verdigris); }
.note-box p:last-child { margin-bottom: 0; }
.note-box b {
  display: block;
  margin-bottom: var(--s1);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel);
  font-weight: 500;
}

/* --- Related and source -------------------------------------------------- */

.related-codes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
}
.related-codes a {
  display: inline-block;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  text-decoration: none;
  color: var(--steel);
  transition: color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.related-codes a:hover { color: var(--bone); border-color: var(--steel-dim); }

.source-line {
  margin: 0;
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline-soft);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--steel-dim);
}

.back-link {
  display: inline-block;
  margin-top: var(--s6);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--steel);
  text-decoration: none;
}
.back-link:hover { color: var(--hazard); }

/* --- Two column reading layout. Rail carries the quick answer and the ad. - */

.doc-body {
  display: grid;
  gap: var(--s6);
  margin-top: var(--s6);
}

.rail { display: grid; gap: var(--s5); align-content: start; }

.rail-card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: var(--s4) var(--s5);
  font-size: var(--t-sm);
}
.rail-card h2 {
  margin: 0 0 var(--s3);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.rail-card p { margin: 0 0 var(--s3); }
.rail-card p:last-child { margin-bottom: 0; }
.rail-card .related-codes { margin-bottom: 0; }

.rail .adslot { min-height: 250px; }

@media (min-width: 60rem) {
  .doc-body {
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: var(--s7);
  }
  .rail { position: sticky; top: 5.5rem; }
}

/* Grid items default to min-width:auto, which lets a wide <pre> or a long
   unbroken path push the whole page sideways instead of scrolling inside its
   own box. Both columns have to be allowed to shrink. */
.doc-body > * { min-width: 0; }
.prose > * { min-width: 0; }
.prose pre { max-width: 100%; }

/* --- Contact: calls to action and the mail-app form ----------------------
   The form has nowhere to submit to. It composes a mailto: and hands it to
   the visitor's mail client, so the site itself never makes a request. See
   assets/js/contact.js.

   Controls are built from the same tokens as .viewer-controls in tools.css
   and .probe in global.css, so they read as one family across the site.
   ---------------------------------------------------------------------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin: var(--s5) 0 var(--s6);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--hazard);
  color: var(--on-hazard);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--s3) var(--s5);
  cursor: pointer;
  transition: background-color 0.16s var(--ease), transform 0.16s var(--ease),
              border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.cta:hover { background: var(--hazard-lift); }
.cta:active { transform: translateY(1px); }

/* .prose a is (0,1,1) and .cta is (0,1,0), so inside prose the link colour
   wins and a filled CTA renders hazard text on a hazard fill: invisible.
   These match the specificity instead of relying on source order. */
.prose a.cta { color: var(--on-hazard); text-decoration: none; }
.prose a.cta:hover { color: var(--on-hazard); }

/* Secondary routes. Same shape, no fill, so the primary one stays primary. */
.cta-quiet {
  background: transparent;
  border-color: var(--hairline);
  color: var(--steel);
  font-weight: 500;
}
.cta-quiet:hover {
  background: transparent;
  border-color: var(--steel-dim);
  color: var(--bone);
}
.prose a.cta-quiet { color: var(--steel); }
.prose a.cta-quiet:hover { color: var(--bone); }

.form { margin: 0 0 var(--s6); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
  /* The fields inside carry no bottom margin, so the row supplies the gap to
     whatever follows. Without this the next label crowds the inputs above. */
  margin-bottom: var(--s4);
}

.form-field { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.form-row .form-field { margin-bottom: 0; }

.form-field label {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-dim);
}

.form-field input,
.form-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--bone);
  font-family: var(--mono);
  font-size: var(--t-sm);
  line-height: 1.6;
  padding: var(--s3) var(--s4);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.form-field textarea { resize: vertical; min-height: 9rem; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--steel-dim); }

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--hazard);
  outline-offset: 2px;
  border-color: var(--hazard-deep);
}

.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
}
.form-note { margin: 0; font-size: var(--t-sm); color: var(--steel-dim); max-width: 38ch; }

.form-status {
  margin: var(--s4) 0 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--steel);
  min-height: 1.4em;   /* reserved, so a message appearing shifts nothing */
}
.form-status[data-state="warn"] { color: var(--hazard); }

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-row .form-field { margin-bottom: var(--s4); }
  .cta-row { gap: var(--s2); }
  .cta { width: 100%; justify-content: center; }
}

/* The correction link in a code page's rail. */
.rail-link {
  display: inline-block;
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--hazard);
  text-decoration-color: var(--link-underline);
  text-underline-offset: 3px;
}
.rail-link:hover { text-decoration-color: var(--hazard); }