/* Browser tools share the catalog's type, color, and spacing. */
.tools-hero { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 16px; padding: 44px 0 38px; }
.tools-hero h1 { font-size: clamp(2.7rem, 4.7vw, 3.8rem); font-weight: 500; letter-spacing: -.055em; margin-bottom: 22px; }
.tools-hero h1 em { font-family: Georgia, serif; color: var(--accent); font-weight: 400; }
.tools-hero .lead { max-width: 600px; font-size: .98rem; }
.tools-hero .eyebrow { margin-bottom: 20px; }
.tools-hero-art { display: flex; align-items: center; justify-content: center; min-width: 0; }
.tools-hero-art img { display: block; width: 100%; height: auto; }
.tools-promise { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; font-size: .78rem; font-weight: 600; }
.tools-promise span { white-space: nowrap; }
.tools-promise span::before { content: '✓'; color: var(--accent); margin-right: 6px; }
.tools-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; border-top: 1px solid var(--line); padding: 25px 0 22px; }
.tools-section-heading h2 { margin: 0; font-size: 1.35rem; font-weight: 500; }
.tools-section-heading p { margin: 0; color: var(--ink-soft); font-size: .77rem; }
.tools-section-heading .status-dot { width: 5px; height: 5px; border-radius: 50%; }
.tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tool-card { display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); transition: border-color .15s, background .15s, box-shadow .15s; }
.tool-card:hover { background: #fafbff; border-color: #8da6f5; box-shadow: 0 5px 18px #2454eb09; text-decoration: none; }
.tool-card-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.tool-card-top .mono-label { color: var(--ink-soft); font-size: .62rem; }
.tool-mark { color: var(--accent); background: #f0f4ff; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.tool-mark .site-icon { width: 27px; height: 27px; stroke-width: 1.35; }
.tool-card h3 { font-size: 1.2rem; margin: 22px 0 12px; line-height: 1.25; }
.tool-card p { font-size: .82rem; color: var(--ink-soft); margin-bottom: 22px; }
.tool-card-open { align-self: start; margin-top: auto; display: inline-block; padding: 7px 13px; border: 1px solid #c6d3f6; border-radius: 5px; font-size: .75rem; font-weight: 600; color: var(--accent); background: white; transition: background .15s, color .15s; }
.tool-card:hover .tool-card-open, .tool-card:focus-visible .tool-card-open { color: white; background: var(--accent); border-color: var(--accent); }
.tools-support { display: flex; align-items: center; gap: 24px; background: #fff8ed; border: 1px solid #efe4d1; border-radius: 8px; margin: 34px 0 0; padding: 28px; }
.support-illustration { color: #8f6126; display: flex; padding: 0 10px; }
.support-illustration .site-icon { width: 44px; height: 44px; stroke-width: 1.2; }
.tools-support .eyebrow { color: #8f6126; font-size: .62rem; margin: 0 0 8px; }
.tools-support h2 { font-size: 1.3rem; font-weight: 500; margin: 0 0 6px; }
.tools-support p:last-child { color: var(--ink-soft); font-size: .83rem; margin: 0; }
.coffee-button { margin-left: auto; flex-shrink: 0; color: #46331d; background: #f6d59a; border: 1px solid #e9c17f; border-radius: 5px; padding: 11px 18px; font-size: .83rem; font-weight: 600; }
.coffee-button:hover { background: #efc67e; text-decoration: none; }
.tools-footnote { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 26px; }
.tools-footnote h2 { font-size: 1.25rem; margin: 0 0 12px; }
.tools-footnote p { color: var(--ink-soft); font-size: .92rem; }
.tool-breadcrumb { display: flex; gap: 12px; align-items: center; font-size: .78rem; color: var(--ink-soft); margin: 28px 0 22px; }
.tool-heading { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
.tool-heading h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin: 0 0 10px; }
.tool-heading > div > p { color: var(--ink-soft); font-size: .92rem; max-width: 660px; margin-bottom: 16px; }
.tool-heading .tools-promise { gap: 6px 14px; margin-top: 10px; font-size: .73rem; justify-content: flex-end; }
.tool-local-note { font-size: .8rem; color: var(--ink-soft); margin-bottom: 25px; }
.tool-local-note a { margin-left: 6px; text-decoration: underline; }
.tool-workspace { display: grid; grid-template-columns: 230px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tool-settings { background: var(--paper-soft); padding: 22px 18px; border-right: 1px solid var(--line); }
.tool-field { display: block; font-size: .79rem; font-weight: 600; margin-bottom: 17px; }
.tool-field select, .tool-field input { display: block; width: 100%; margin-top: 6px; padding: 9px 8px; font-size: .8rem; min-height: 40px; }
.tool-check { display: flex; gap: 8px; align-items: flex-start; font-size: .78rem; line-height: 1.5; margin: 12px 0; cursor: pointer; }
.tool-check input { margin: 4px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.tool-help { color: var(--ink-soft); font-size: .73rem; line-height: 1.65; margin: 8px 0 14px; }
.tool-settings fieldset { border: 0; border-top: 1px solid var(--line); padding: 12px 0 0; margin: 22px 0 0; min-width: 0; }
.tool-settings legend { padding: 0 8px 0 0; font-size: .77rem; font-weight: 600; }
.tool-run { width: 100%; margin-top: 10px; }
.tool-live { justify-content: center; }
.tool-editors { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.tool-editor { min-width: 0; }
.tool-editor + .tool-editor { border-left: 1px solid var(--line); }
.tool-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 58px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tool-editor-head > label { font-size: .82rem; font-weight: 600; }
.tool-editor-head > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px; }
.tool-editor-head .text-button { font-size: .72rem; padding: 3px 0; }
.tool-editor textarea { display: block; width: 100%; min-height: 390px; height: 48vh; max-height: 850px; padding: 20px 16px; resize: vertical; border: 0; border-radius: 0; color: var(--ink); background: #fff; font: .84rem/1.75 var(--mono); tab-size: 4; overflow-wrap: normal; }
.tool-editor textarea::placeholder { color: #737d8b; }
.tool-editor textarea:focus-visible { outline-offset: -3px; }
.tool-editor textarea[readonly] { background: #fcfdff; }
.tool-editor-info { padding: 10px 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font: .65rem/1.5 var(--mono); min-height: 38px; overflow-wrap: anywhere; }
.tool-result-bar { grid-column: 1 / -1; padding: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.tool-result-bar p { font-size: .77rem; color: var(--ink-soft); margin: 0; flex: 1 1 230px; }
.tool-result-bar .text-button { font-size: .77rem; }
.text-button:disabled { color: #737d8b; cursor: default; text-decoration: none; }
/* Both labels occupy the same grid cell, reserving their full size in either state. */
.copy-control { display: inline-grid; align-items: center; justify-items: center; border-radius: 5px; }
.copy-control > span { grid-area: 1 / 1; white-space: nowrap; }
.copy-confirmation { display: inline-flex; align-items: center; justify-content: center; gap: 5px; visibility: hidden; }
.copy-confirmation svg { width: 16px; height: 16px; flex-shrink: 0; }
.tool-editor-head .copy-control { padding: 4px 8px; }
.copy-control[data-copied="true"], .copy-control[data-copied="true"]:hover, .copy-control[data-copied="true"]:focus-visible, .password-settings .copy-control[data-copied="true"] { color: #246246; background: #eaf5ee; border-color: #bdd9c7; text-decoration: none; }
.copy-control[data-copied="true"] .copy-label { visibility: hidden; }
.copy-control[data-copied="true"] .copy-confirmation { visibility: visible; }
/* Clipboard failures need visible instructions, without replacing result status or moving the editors. */
.copy-feedback-notice[data-error="true"] { position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); height: auto; padding: 14px 18px; clip: auto; overflow: visible; white-space: normal; border: 1px solid #cbd5e3; border-radius: 8px; background: #fff; color: var(--ink); box-shadow: 0 4px 20px #18202b18; font-size: .85rem; line-height: 1.6; }
.tool-error { grid-column: 1 / -1; background: #fff4f0; color: #8b2913; border-left: 3px solid #c65335; padding: 14px 16px; font-size: .85rem; margin: 0 16px 16px; overflow-wrap: anywhere; }
.tool-bottom-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: .77rem; margin: 20px 0 0; }
.tool-settings { grid-column: 1; grid-row: 1; }
.tool-editors { grid-column: 2; grid-row: 1; }
.tool-mobile-actions { display: none; }
.tool-back-mobile { display: none; }
.tool-input-hint { padding: 8px 16px; margin: 0; color: var(--ink-soft); font-size: .7rem; }
.tool-editor.is-dragging { outline: 2px solid var(--accent); outline-offset: -2px; background: #edf3ff; }
.tool-editor.is-dragging textarea { background: #edf3ff; }
@media (max-width: 1100px) { .tool-workspace { grid-template-columns: 210px minmax(0, 1fr); } .tool-editor-head { align-items: flex-start; flex-direction: column; } .tool-heading { flex-direction: column; gap: 0; } .tool-heading .tools-promise { margin: 0 0 14px; } }
@media (max-width: 1050px) { .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tools-hero { grid-template-columns: 1.35fr 1fr; } .tools-hero h1 { font-size: 2.8rem; } .tools-hero .lead br { display: none; } }
@media (max-width: 850px) { .tool-workspace { grid-template-columns: 1fr; } .tool-settings { border-right: 0; border-bottom: 1px solid var(--line); } .tool-settings .tool-field { max-width: 440px; } .tool-run { width: auto; min-width: 180px; } .tool-live { justify-content: flex-start; } .tool-editor textarea { height: 320px; min-height: 240px; } .tools-support { flex-wrap: wrap; } .coffee-button { margin-left: 78px; } }
@media (max-width: 650px) { .tools-hero { grid-template-columns: 1fr; padding: 30px 0 24px; gap: 4px; } .tools-hero-art { max-width: 320px; margin: 0 auto; } .tools-hero h1 { font-size: clamp(2.25rem, 8vw, 3rem); } .tools-hero .lead { font-size: .92rem; } }
@media (max-width: 560px) { .tools-grid { grid-template-columns: 1fr; } .tool-editors { grid-template-columns: 1fr; } .tool-editor + .tool-editor { border-left: 0; border-top: 1px solid var(--line); } .tool-editor-head { flex-direction: row; align-items: center; } .tool-editor textarea { height: 260px; } .tools-support { gap: 18px; padding: 22px; } .support-illustration { display: none; } .coffee-button { margin: 0; } }
@media (max-width: 850px) {
    .tool-editors { grid-column: 1; grid-row: 1; }
    .tool-settings { grid-column: 1; grid-row: 2; border-top: 1px solid var(--line); border-bottom: 0; }
    .tool-mobile-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
    .tool-back-mobile { display: inline-block; margin: 12px 0 12px 16px; }
}
@media (max-width: 560px) {
    .tool-editor textarea, .tool-settings input[type="text"], .tool-settings select { font-size: 16px; }
}

/* Readable guides below the workspace; examples remain useful on small screens. */
.tool-guide { max-width: 960px; margin: 56px auto 64px; padding-top: 28px; border-top: 1px solid var(--line); }
.tool-guide > section { margin-bottom: 40px; }
.tool-guide h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -.025em; margin: 0 0 18px; }
.tool-guide p, .tool-guide li { color: var(--ink-soft); font-size: .95rem; line-height: 1.8; }
.tool-guide li { padding-left: 6px; margin-bottom: 12px; }
.tool-examples { display: grid; gap: 18px; }
.tool-example { padding: 22px; border: 1px solid var(--line); border-radius: 8px; }
.tool-example h3 { margin: 0 0 18px; font-size: 1.05rem; }
.tool-example h4 { margin: 0 0 8px; color: var(--ink-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.tool-example-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tool-example-pair > div { min-width: 0; }
.tool-example pre { margin: 0; padding: 14px; background: var(--paper-soft); white-space: pre-wrap; overflow-wrap: anywhere; font-size: .84rem; line-height: 1.6; }
.tool-example p { margin: 16px 0 0; font-size: .88rem; }
.tool-faq details { padding: 16px 0; border-bottom: 1px solid var(--line); }
.tool-faq summary { cursor: pointer; font-weight: 600; line-height: 1.6; }
.tool-faq details p { margin: 12px 0 0; }
.tool-limits { border-left: 3px solid var(--accent); padding-left: 20px; }
.tool-related > div { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.tool-related a { font-size: .9rem; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 560px) {
    .tool-guide { margin-top: 36px; }
    .tool-example { padding: 16px; }
    .tool-example-pair { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}