/* usemarrow.com free tools: the few rules the shared .tool styles in site.css do not cover. Linked from each tool's
   markdown body (no inline style anywhere; the Content Security Policy allows style-src 'self' only). */
.tool .row { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }
.tool .row button { flex: 0 0 auto; }
.tool button[disabled] { opacity: .5; cursor: not-allowed; }
.tool button.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.tool button.secondary:hover { background: var(--surface-muted); color: var(--ink); }
.tool progress { display: block; inline-size: 100%; margin-block-start: 12px; accent-color: var(--accent); }
.tool .preview[hidden] { display: none; }
.tool .preview { max-block-size: 260px; inline-size: auto; max-inline-size: 100%; margin-block-start: 14px; border-radius: 12px; border: 1px solid var(--line); }
.tool .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.tool .grid .wide { grid-column: 1 / -1; }
.tool details { margin-block-start: 16px; }
.tool details pre { white-space: pre-wrap; font-size: 14px; }
.tool fieldset { border: 0; padding: 0; margin: 14px 0 0; }
.tool legend { font-weight: 700; font-size: 14.5px; margin-block-end: 6px; padding: 0; }
.tool fieldset label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin: 0 18px 0 0; }
.tool fieldset input { inline-size: auto; }
.tool .draft { border-block-start: 1px solid var(--line); padding-block-start: 14px; margin-block-start: 18px; }
.tool .draft h3 { margin: 0 0 8px; font-size: 16px; }
.tool .draft textarea { min-block-size: 9em; line-height: 1.5; }
.tool .copied { margin-inline-start: 10px; font-size: 14px; color: var(--muted); }
.tool:not(.ready) .needs-js { display: none; }
@media (max-width: 480px) { .tool .grid { grid-template-columns: 1fr; } .tool { padding: 18px; } }