/* ==========================================================================
   itkab.com — tools
   Loads after global.css. Everything here is scoped to a tool page.
   ========================================================================== */

/* --- Drop zone ----------------------------------------------------------- */

.drop {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--s4);
  padding: var(--s8) var(--s5);
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel-high), var(--panel));
  box-shadow: var(--lift-2);
  text-align: center;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.drop.is-over {
  border-color: var(--hazard);
  border-style: solid;
  background: linear-gradient(180deg, var(--panel-high), var(--hazard-wash));
}
.drop.is-busy { border-style: solid; }

.drop h2 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-h2);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.drop p { margin: 0; color: var(--steel); font-size: var(--t-sm); max-width: 52ch; }

.drop-pick {
  border: 0;
  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.12em;
  text-transform: uppercase;
  padding: var(--s3) var(--s5);
  cursor: pointer;
  transition: transform 0.16s var(--ease), background-color 0.16s var(--ease);
}
.drop-pick:hover { background: var(--hazard-lift); }
.drop-pick:active { transform: translateY(1px); }

.drop-formats {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--t-dense);
  color: var(--steel-dim);
}
.drop-formats span {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 2px var(--s3);
}

/* --- Progress ------------------------------------------------------------ */

.progress {
  width: min(100%, 30rem);
  height: 4px;
  border-radius: 999px;
  background: var(--hairline-soft);
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--hazard);
  transition: width 0.12s linear;
}

/* --- Privacy proof ------------------------------------------------------- */

.privacy-strip {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--hairline-soft);
  border-left: 2px solid var(--verdigris);
  border-radius: var(--radius);
  background: var(--panel);
  font-family: var(--mono);
  font-size: var(--t-dense);
  color: var(--steel);
}
.privacy-strip b {
  color: var(--verdigris);
  font-weight: 500;
}
.privacy-strip[data-state="dirty"] { border-left-color: var(--oxide); }
.privacy-strip[data-state="dirty"] b { color: var(--oxide); }
.privacy-strip small {
  color: var(--steel-dim);
  font-size: var(--t-dense);
  margin-left: auto;
}

/* --- Summary numbers ----------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat { background: var(--panel); padding: var(--s4) var(--s5); }
.stat b {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-num);
  font-weight: var(--w-display);
  letter-spacing: -0.02em;
  color: var(--bone);
}
.stat span {
  display: block;
  margin-top: var(--s1);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.stat[data-severity="fail"] b { color: var(--oxide); }
.stat[data-severity="warn"] b { color: var(--hazard); }
.stat[data-severity="info"] b { color: var(--verdigris); }

/* --- Findings ------------------------------------------------------------ */

.findings { display: grid; gap: var(--s3); }

.finding {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--steel-dim);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
}
.finding[data-level="Error"] { border-left-color: var(--oxide); }
.finding[data-level="Warning"] { border-left-color: var(--hazard); }

.finding-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  width: 100%;
  padding: var(--s4) var(--s5);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.finding-head:hover { background: var(--panel-high); }

.finding-tag {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-dim);
  flex: 0 0 auto;
}
.finding[data-level="Error"] .finding-tag { color: var(--oxide); }
.finding[data-level="Warning"] .finding-tag { color: var(--hazard); }

.finding-msg {
  flex: 1 1 20rem;
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--bone);
  overflow-wrap: anywhere;
}
.finding-line {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--steel-dim);
}

.finding-body {
  padding: 0 var(--s5) var(--s5);
  border-top: 1px solid var(--hairline-soft);
}
.finding-body[hidden] { display: none; }
.finding-body h4 {
  margin: var(--s4) 0 var(--s2);
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-dim);
}

.context {
  margin: 0;
  padding: var(--s3) var(--s4);
  background: var(--graphite-deep);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--t-dense);
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
  color: var(--steel);
}
.context b { color: var(--bone); font-weight: 500; display: block; }

/* --- Code explanations --------------------------------------------------- */

.code-hit {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: var(--s4) var(--s5);
}
.code-hit + .code-hit { margin-top: var(--s3); }
.code-hit-head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s2);
}
.code-hit-head strong {
  font-family: var(--mono);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--bone);
}
.code-hit[data-severity="fail"] .code-hit-head strong { color: var(--oxide); }
.code-hit[data-severity="warn"] .code-hit-head strong { color: var(--hazard); }
.code-hit[data-severity="info"] .code-hit-head strong { color: var(--verdigris); }
.code-hit-head em {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.code-hit p { margin: 0 0 var(--s2); font-size: var(--t-sm); color: var(--steel); }
.code-hit p:last-child { margin-bottom: 0; }
.code-hit a { color: var(--hazard); text-decoration-color: var(--link-underline); }

/* --- Log viewer ---------------------------------------------------------- */

.viewer-controls {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--s4);
}
.viewer-controls select,
.viewer-controls input {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--bone);
  font-family: var(--mono);
  font-size: var(--t-xs);
  padding: var(--s2) var(--s3);
}
.viewer-controls input { flex: 1 1 14rem; min-width: 0; }
.viewer-controls select:focus-visible,
.viewer-controls input:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }
.viewer-count {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-dim);
}

.rows {
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg);
  background: var(--graphite-deep);
  overflow: hidden;
}

.row-line {
  display: grid;
  grid-template-columns: 4.5rem 9.5rem 3.5rem 1fr;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  font-family: var(--mono);
  font-size: var(--t-dense);
  line-height: 1.65;
  border-bottom: 1px solid var(--hairline-soft);
}
.row-line:last-child { border-bottom: 0; }
.row-line:nth-child(even) { background: var(--zebra); }
.row-line > * { min-width: 0; overflow-wrap: anywhere; }
.row-num { color: var(--steel-dim); }
.row-time { color: var(--steel-dim); }
.row-comp { color: var(--steel); }
.row-msg { color: var(--bone); white-space: pre-wrap; }
.row-line[data-level="Error"] .row-msg { color: var(--oxide); }
.row-line[data-level="Warning"] .row-msg { color: var(--hazard); }

.rows-more {
  display: block;
  width: 100%;
  padding: var(--s4);
  border: 0;
  border-top: 1px solid var(--hairline-soft);
  background: var(--panel);
  color: var(--steel);
  font-family: var(--mono);
  font-size: var(--t-xs);
  cursor: pointer;
}
.rows-more:hover { color: var(--bone); background: var(--panel-high); }

/* --- Tool index cards ---------------------------------------------------- */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--s4);
}

.tool-card {
  display: block;
  padding: var(--s5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--panel);
  text-decoration: none;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.tool-card:hover { background: var(--panel-high); border-color: var(--steel-dim); }
.tool-card h3 {
  margin: var(--s3) 0 var(--s2);
  font-family: var(--display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--bone);
}
.tool-card p { margin: 0; color: var(--steel); font-size: var(--t-sm); }
.tool-card .eyebrow { color: var(--hazard); }

@media (max-width: 700px) {
  .row-line { grid-template-columns: 1fr; gap: var(--s1); }
  .row-num, .row-time, .row-comp { display: inline; margin-right: var(--s3); }
  .drop { padding: var(--s6) var(--s4); }
}

/* Sub heading inside a results band. */
.band-sub {
  margin: var(--s5) 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);
}
.band-sub:first-child { margin-top: 0; }

/* --- Intake: file or paste ------------------------------------------------

   Two equal paths, not a primary with a hidden alternative. An admin with a
   forty line excerpt is as common as one with a file, and burying paste in a
   disclosure would make the common case the awkward one.
   -------------------------------------------------------------------------- */

.intake { display: grid; gap: var(--s4); }

.intake-modes {
  display: flex;
  gap: var(--s2);
  align-self: start;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--panel);
}
.intake-modes button {
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--steel);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--s2) var(--s4);
  cursor: pointer;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.intake-modes button:hover { color: var(--bone); }
.intake-modes button.is-on { background: var(--panel-high); color: var(--bone); }
.intake-modes button:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }

/* display:grid beats the user agent [hidden] rule, so both panels rendered at
   once and the page showed a drop zone AND a paste box. The same trap already
   caught .finding-body above. A DOM assertion on .hidden passes right through
   this, because the PROPERTY is true while the element is still on screen. */
.drop[hidden],
.paste[hidden] { display: none; }

.paste { display: grid; gap: var(--s3); }
.paste label {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.paste textarea,
.sanitize textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--graphite-deep);
  color: var(--bone);
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.6;
  padding: var(--s4);
}
.paste textarea:focus-visible,
.sanitize textarea:focus-visible { outline: 2px solid var(--hazard); outline-offset: 2px; }

.paste-actions,
.sanitize-controls,
.sanitize-foot {
  display: flex;
  gap: var(--s4);
  align-items: center;
  flex-wrap: wrap;
}
.paste-count,
.sanitize-report {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-dim);
}

/* --- Sanitize ------------------------------------------------------------- */

.sanitize { display: grid; gap: var(--s4); }
.sanitize-opt {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  color: var(--steel);
  cursor: pointer;
}
.sanitize-opt input { accent-color: var(--hazard); }
.sanitize-opt:hover { color: var(--bone); }
.sanitize-foot { align-items: flex-start; }
.sanitize-foot .foot-note { flex: 1 1 24rem; margin: 0; }
.drop-pick[disabled] { opacity: 0.45; cursor: not-allowed; }
.drop-pick[disabled]:hover { background: var(--hazard); }

/* --- Interpretation rules -------------------------------------------------

   Sits between the verdict and the findings. Deliberately quieter than a
   finding card: this is context, not the failure itself, and it should not
   compete with the line that actually broke.
   -------------------------------------------------------------------------- */

.rules { display: grid; gap: var(--s3); }

.rule {
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--verdigris);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: var(--s5);
}
.rule-head {
  display: flex;
  gap: var(--s4);
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.rule-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-body);
  letter-spacing: -0.01em;
  color: var(--bone);
}
.rule-evidence {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verdigris);
  white-space: nowrap;
}
.rule p { margin: 0 0 var(--s3); color: var(--steel); font-size: var(--t-sm); line-height: 1.7; }
.rule-next {
  margin: 0 0 var(--s3);
  padding-left: 1.2em;
  display: grid;
  gap: var(--s2);
  color: var(--steel);
  font-size: var(--t-sm);
  line-height: 1.7;
}
.rule-source { margin: 0; font-size: var(--t-label); }
.rule-source a {
  font-family: var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-dim);
}
.rule-source a:hover { color: var(--bone); }