/* ================================================================
   verify-tool.css — MODE 1: standalone "Fact-check anything" tool
   Component-specific styles for the paste-box tool card. Composes
   ON TOP OF the site's own tools-page stylesheet (styles.css) —
   reuses its CSS variables (--ink,--muted,--paper,--panel,--line,
   --accent,--deep,--shadow*) rather than inventing new colors, so
   this drops into /tools/ looking native. In this local build,
   reference/styles.css is a read-only copy of the live file used
   only so the demo renders identically without depending on the
   live site path.
   ================================================================ */

.vft-card{
  background:var(--panel,#fff);
  border:1px solid var(--line,#d9dfdf);
  border-radius:12px;
  padding:clamp(20px,3vw,32px);
  box-shadow:var(--shadow,0 18px 46px rgba(23,33,43,.10));
  max-width:820px;
}

.vft-label{
  display:block;
  font-weight:900;
  color:var(--ink,#17212b);
  margin-bottom:8px;
  font-size:15px;
}
.vft-label small{
  display:block;
  font-weight:600;
  color:var(--muted,#586575);
  font-size:13.5px;
  margin-top:4px;
  line-height:1.5;
}

.vft-textarea{
  width:100%;
  min-height:220px;
  border:1px solid var(--line,#d9dfdf);
  border-radius:8px;
  padding:14px 16px;
  background:#f8fafc;
  color:var(--ink,#17212b);
  font:inherit;
  font-size:15px;
  line-height:1.6;
  resize:vertical;
}
.vft-textarea:focus{
  outline:2px solid var(--accent,#0f766e);
  outline-offset:1px;
  background:#fff;
}

.vft-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:8px;
  flex-wrap:wrap;
}
.vft-count{color:var(--muted,#586575);font-size:13px}

.vft-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
  align-items:center;
}

.vft-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:50px;
  padding:0 22px;
  border:1px solid var(--deep,#17324a);
  border-radius:8px;
  background:var(--deep,#17324a);
  color:var(--paper,#fbfaf7);
  font:inherit;
  font-size:15.5px;
  font-weight:950;
  cursor:pointer;
  box-shadow:var(--shadow-soft,0 8px 22px rgba(23,33,43,.06));
  transition:background .15s ease, transform .1s ease;
}
.vft-btn:hover{background:#173954}
.vft-btn:active{transform:translateY(1px)}
.vft-btn:focus-visible{outline:3px solid var(--accent,#0f766e);outline-offset:2px}
.vft-btn[disabled]{opacity:.65;cursor:default}
.vft-btn-secondary{background:transparent;color:var(--deep,#17324a)}
.vft-btn-secondary:hover{background:rgba(23,50,74,.08)}

.vft-clear{
  background:transparent;
  border:1px solid var(--line,#d9dfdf);
  color:var(--muted,#586575);
  font-weight:800;
  min-height:50px;
  padding:0 16px;
  border-radius:8px;
  cursor:pointer;
  font:inherit;
  font-size:14px;
}
.vft-clear:hover{border-color:#9bd4cd;color:var(--accent,#0f766e)}

.vft-status{
  font-size:14.5px;
  line-height:1.5;
  margin:14px 0 0;
  min-height:1.4em;
  color:#0f6b3f;
  font-weight:700;
}
.vft-status.is-error{color:#b23b3b}
.vft-status:empty{margin:0}

.vft-fallback{
  display:none;
  width:100%;
  min-height:140px;
  margin-top:12px;
  padding:12px 14px;
  font-family:ui-monospace,Menlo,monospace;
  font-size:13px;
  line-height:1.5;
  color:#222;
  background:#fff;
  border:1px solid var(--line,#d9dfdf);
  border-radius:8px;
  resize:vertical;
}

.vft-note{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line,#d9dfdf);
  color:var(--muted,#586575);
  font-size:14.5px;
  line-height:1.65;
}
.vft-note strong{color:var(--ink,#17212b)}

/* transparency preview reuses the site's details.instructions
   pattern (same classes as tools/reality-engine.html) so it's
   visually identical to every other Instructions dropdown */
.vft-preview{
  white-space:pre-wrap;
  word-break:break-word;
  font-family:ui-monospace,Menlo,monospace;
  font-size:13px;
  line-height:1.55;
  color:#222;
  background:#f8fafc;
  border:1px solid var(--line,#d9dfdf);
  border-radius:8px;
  padding:14px 16px;
  margin:0;
  max-height:380px;
  overflow-y:auto;
}

@media (max-width:640px){
  .vft-card{padding:18px;border-radius:10px}
  .vft-textarea{min-height:180px;font-size:16px} /* 16px avoids iOS auto-zoom on focus */
  .vft-actions{flex-direction:column;align-items:stretch}
  .vft-btn,.vft-clear{width:100%}
}

/* Level chooser — three depths of the Half-Truth Detector (v4). Quick is the default so the
   tool still behaves exactly as it did for anyone who does not care to choose. 2026-09-16. */
.vft-levels{margin:18px 0 4px;padding:14px 16px;border:1px solid var(--line,#d9d4c7);border-radius:14px;background:rgba(255,255,255,.6)}
.vft-levels legend{padding:0 6px;font-weight:800;font-size:14px}
.vft-levels label{display:flex;gap:10px;align-items:flex-start;padding:7px 2px;cursor:pointer}
.vft-levels input{margin-top:4px;flex:none;width:18px;height:18px}
.vft-levels span{display:block}
.vft-levels strong{display:block;font-size:16px}
.vft-levels small{display:block;color:var(--muted,#6b6459);font-size:13px;line-height:1.35}