/* Free tools (bugtape.ai/tools/). Loaded after signal.css. Tokens only:
   --sg-*, --marketing-*, --space-*, --rounded-*, --font-*. */

.tool-crumbs { padding-top: var(--space-3xl); font-size: 14px; }
.tool-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; color: var(--sg-faint); }
.tool-crumbs li + li::before { content: "/"; margin-right: var(--space-lg); color: var(--sg-faint); }
.tool-crumbs a { color: var(--sg-mute); text-decoration: underline; text-underline-offset: var(--space-sm); }
.tool-crumbs [aria-current] { color: var(--sg-ink); }

.tool-panel { display: grid; gap: var(--space-3xl); max-width: 880px; padding: var(--space-3xl); border: 1px solid var(--sg-line-2); border-radius: var(--rounded-lg); background: var(--sg-surface); }
.tool-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tool-drop { display: grid; gap: var(--space-md); place-items: center; min-height: 160px; padding: var(--space-3xl); border: 2px dashed var(--sg-line-2); border-radius: var(--rounded-md); background: var(--sg-room-2); color: var(--sg-ink); text-align: center; cursor: pointer; transition: border-color 160ms var(--sg-out), background-color 160ms var(--sg-out); }
.tool-drop:hover, .tool-drop[data-over] { border-color: var(--sg-ember); background: var(--sg-surface-2); }
.tool-panel:has(.tool-file:focus-visible) .tool-drop { outline: 2px solid var(--sg-ember); outline-offset: 2px; }
.tool-drop-title { font-weight: 600; font-size: 18px; }
.tool-drop-name { max-width: 100%; overflow-wrap: anywhere; color: var(--sg-mute); font: 14px/1.4 var(--font-mono); }

.tool-options { display: grid; gap: var(--space-lg); margin: 0; padding: 0; border: 0; }
.tool-options legend { margin-bottom: var(--space-lg); padding: 0; color: var(--sg-mute); font-weight: 600; }
.tool-check { display: flex; align-items: center; gap: var(--space-xl); min-height: var(--space-touch-target); color: var(--sg-ink); cursor: pointer; }
.tool-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--sg-ember); flex: none; }
.tool-hint { margin: 0; color: var(--sg-mute); font-size: 14px; }

.tool-run { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xl); }
.tool-status { margin: 0; color: var(--sg-mute); font-size: 14px; }
.tool-error { margin: 0; padding: var(--space-xl) var(--space-2xl); border: 1px solid var(--sg-bad); border-radius: var(--rounded-sm); color: var(--sg-bad); }

.tool-report { display: grid; gap: var(--space-3xl); max-width: 880px; margin-top: var(--space-section); padding: var(--space-3xl); border: 1px solid var(--sg-line-2); border-radius: var(--rounded-lg); background: var(--sg-surface); }
.tool-report:focus { outline: none; }
.tool-report h3 { margin: 0; font-size: 24px; }
.tool-total { margin: 0; color: var(--sg-ink); font-size: 18px; }
.tool-warn { margin: 0; color: var(--sg-glow); font-size: 15px; }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xl); }
.tool-copied { color: var(--sg-good); font-size: 14px; }
.tool-more summary { display: flex; align-items: center; min-height: var(--space-touch-target); color: var(--sg-ink); font-weight: 600; cursor: pointer; }
.tool-more summary::-webkit-details-marker { display: none; }
/* display:flex drops the native marker; show the same + that the home limits disclosure uses. */
.tool-more summary::after { content: "+"; margin-left: auto; padding-left: var(--space-lg); color: var(--sg-faint); font-weight: 300; font-size: 1.5em; line-height: 1; transition: rotate 160ms var(--sg-out); }
.tool-more[open] summary::after { rotate: 45deg; }
.tool-pre { max-height: 360px; margin: var(--space-lg) 0 0; padding: var(--space-2xl); overflow: auto; border: 1px solid var(--sg-line); border-radius: var(--rounded-sm); background: var(--sg-room-2); color: var(--sg-mute); font: 13px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }

.tool-browsers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.tool-browser { display: grid; gap: var(--space-lg); align-content: start; padding: var(--space-3xl); border: 1px solid var(--sg-line); border-radius: var(--rounded-md); background: var(--sg-surface); }
.tool-browser > span { color: var(--sg-mute); font: 12px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.tool-browser > strong { color: var(--sg-ink); font-size: 22px; font-weight: 600; }
.tool-steps { display: grid; gap: var(--space-md); margin: 0; padding-left: 1.2em; color: var(--sg-mute); font-size: 15px; line-height: 1.5; }
#export .small-note { margin-top: var(--space-3xl); max-width: 760px; }

.tool-table-wrap { max-width: 100%; }
.tool-rules td { padding-right: var(--space-2xl); vertical-align: top; }
.tool-rules td:first-child { color: var(--sg-ink); font-weight: 600; white-space: nowrap; }
.tool-rules td:nth-child(2) { color: var(--sg-mute); }
.tool-rules td:last-child, .tool-rules th:last-child { text-align: right; white-space: nowrap; }
.tool-rules code { font: 13px var(--font-mono); color: var(--sg-glow); }
.tool-counts td:last-child { font-variant-numeric: tabular-nums; }

.tool-cards { display: grid; gap: var(--space-xl); margin: 0; padding: 0; list-style: none; }
.tool-cards a { display: grid; gap: var(--space-md); padding: var(--space-3xl); border: 1px solid var(--sg-line-2); border-radius: var(--rounded-md); background: var(--sg-surface); color: var(--sg-ink); text-decoration: none; transition: border-color 160ms var(--sg-out); }
.tool-cards a:hover { border-color: var(--sg-ember); }
.tool-cards strong { font-size: 22px; }
.tool-cards span { color: var(--sg-mute); }

@media (max-width: 900px) {
  .tool-browsers { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tool-panel, .tool-report { padding: var(--space-2xl); }
  .tool-drop { min-height: 128px; padding: var(--space-2xl); }
  .tool-actions .button, .tool-run .button { width: 100%; justify-content: center; }
  .tool-rules thead { display: none; }
  .tool-rules tr { display: grid; gap: var(--space-sm); padding: var(--space-xl) 0; border-bottom: 1px solid var(--sg-line); }
  .tool-rules td { padding: 0; border: 0; }
  .tool-rules td:first-child { white-space: normal; }
  .tool-rules td:last-child { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-drop { transition: none; }
  .tool-more summary::after { transition: none; }
}