/* Free tools pages. Uses the site variables from global.css. */
.tool-wrap { max-width: 1100px; margin: 0 auto; padding: 9rem 1.5rem 4rem; }
.tool-wrap h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin-bottom: 1rem; }
.tool-wrap h2 { font-size: 1.6rem; margin: 3rem 0 1rem; }
.tool-lead { color: var(--text-secondary); font-size: 1.15rem; max-width: 760px; margin-bottom: 2rem; }
.tool-panel { background: var(--bg-alt); border: 1px solid var(--border-strong); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.5rem; }
.tool-panel label { display: block; font-weight: 700; margin-bottom: .5rem; }
.tool-howto { color: var(--text-secondary); padding-left: 1.25rem; line-height: 1.8; }
.tool-small { color: var(--text-muted); font-size: .85rem; line-height: 1.6; }
.tool-faq details { border-bottom: 1px solid var(--border); padding: 1rem 0; }
.tool-faq summary { cursor: pointer; font-weight: 700; }
.tool-faq p { color: var(--text-secondary); margin-top: .6rem; line-height: 1.7; }
.tool-cta { text-align: center; background: var(--bg-alt); border: 1px solid var(--border-strong); border-radius: 12px; padding: 2rem 1.5rem; margin: 3rem 0; }
.tool-cta p { color: var(--text-secondary); margin-bottom: 1rem; }
.tool-embed textarea { width: 100%; min-height: 110px; font-family: monospace; font-size: .85rem; }
.tool-btn { background: transparent; color: var(--text-main); border: 1px solid var(--border-strong); border-radius: 4px; padding: .6rem 1.2rem; font-weight: 700; cursor: pointer; font: inherit; }
.tool-btn:hover { border-color: var(--secondary); color: var(--secondary); }
.tool-field { width: 100%; box-sizing: border-box; background: var(--bg-main); color: var(--text-main); border: 1px solid var(--border-strong); border-radius: 6px; padding: .8rem; font: inherit; }
.tool-table-wrap { overflow-x: auto; }
.tool-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 560px; }
.tool-table th, .tool-table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--border); }
.tool-table th { color: var(--text-muted); text-transform: uppercase; font-size: .75rem; letter-spacing: 1px; }
.tool-table td:nth-child(3), .tool-table td:nth-child(4) { white-space: nowrap; }
.tool-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.tool-hub a { display: block; text-decoration: none; color: inherit; background: var(--bg-alt); border: 1px solid var(--border-strong); border-radius: 12px; padding: 1.75rem; }
.tool-hub a:hover { border-color: var(--secondary); }
.tool-hub h2 { margin: 0 0 .5rem; font-size: 1.35rem; }
.tool-hub p { color: var(--text-secondary); margin: 0; }

/* Post preview */
.pp-top { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; gap: 1rem; flex-wrap: wrap; }
#pp-text { min-height: 160px; resize: vertical; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.25rem; }
.pp-card { background: var(--bg-alt); border: 1px solid var(--border-strong); border-radius: 12px; padding: 1.1rem; }
.pp-card-head { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: .75rem; }
.pp-count { font-variant-numeric: tabular-nums; color: var(--secondary); }
.pp-over .pp-count { color: #ff6b6b; }
.pp-post { background: #fff; color: #1c1e21; border-radius: 8px; padding: .9rem; }
.pp-who { display: flex; gap: .6rem; align-items: center; margin-bottom: .6rem; }
.pp-avatar { width: 34px; height: 34px; border-radius: 50%; background: #6dba1e; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.pp-names { display: flex; flex-direction: column; line-height: 1.2; }
.pp-names small { color: #65676b; }
.pp-body { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; font-size: .92rem; line-height: 1.45; }
.pp-more { color: #65676b; font-weight: 600; }
.pp-placeholder { color: #8a8d91; }
.pp-instagram .pp-post { font-family: -apple-system, 'Segoe UI', sans-serif; }
.pp-linkedin .pp-post { border-left: 4px solid #0a66c2; }
.pp-bluesky .pp-post { background: #161e27; color: #f1f3f5; }
.pp-bluesky .pp-names small { color: #8b98a5; }
.pp-meter { height: 5px; background: var(--border); border-radius: 3px; margin-top: .8rem; overflow: hidden; }
.pp-meter span { display: block; height: 100%; background: var(--secondary); }
.pp-over .pp-meter span { background: #ff6b6b; }
.pp-note { color: var(--text-muted); font-size: .82rem; margin-top: .6rem; line-height: 1.5; }

/* Image sizes */
.is-drop { display: block; text-align: center; border: 2px dashed var(--border-strong); border-radius: 12px; padding: 2.5rem 1rem; cursor: pointer; color: var(--text-secondary); }
.is-drop.is-hot, .is-drop:hover { border-color: var(--secondary); }
.is-drop input { display: none; }
.is-controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1rem 0; }
#is-canvas { max-width: 100%; max-height: 70vh; height: auto; cursor: grab; touch-action: none; border: 1px solid var(--border-strong); border-radius: 6px; background: #fff; display: block; margin: 0 auto; }
#is-msg { color: #ff6b6b; margin-top: .5rem; }

/* Embed mode: only the tool and a credit link */
.bp-embed header#main-header, .bp-embed .mobile-menu, .bp-embed footer.footer, .bp-embed .tool-cta, .bp-embed .tool-embed, .bp-embed .tool-faq-section, .bp-embed .tool-howto-section, .bp-embed .tool-lead { display: none !important; }
.bp-embed .tool-wrap { padding-top: 1rem; }
.tool-credit { display: none; text-align: center; margin: 1rem 0; font-size: .9rem; }
.tool-credit a { color: var(--secondary); }
.bp-embed .tool-credit { display: block; }

/* AI slop checker */
#sc-text { min-height: 200px; resize: vertical; }
.sc-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; align-items: center; }
.sc-top { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.sc-score { font-size: 3.5rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
#sc-result[data-band="human"] .sc-score, #sc-result[data-band="human"] .sc-band { color: #6dba1e; }
#sc-result[data-band="some"] .sc-score, #sc-result[data-band="some"] .sc-band { color: #f5a623; }
#sc-result[data-band="ai"] .sc-score, #sc-result[data-band="ai"] .sc-band { color: #ff6b6b; }
.sc-band { font-size: 1.4rem; font-weight: 700; }
.sc-cats { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.sc-cats li { background: var(--bg-main); border: 1px solid var(--border-strong); border-radius: 999px; padding: .25rem .8rem; font-size: .85rem; }
.sc-marked { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; background: var(--bg-main); border: 1px solid var(--border-strong); border-radius: 8px; padding: 1rem; margin-top: 1rem; }
.sc-hit { background: rgba(255, 107, 107, .18); color: inherit; text-decoration: underline wavy #ff6b6b; text-underline-offset: 4px; border-radius: 3px; cursor: help; }
.sc-hit:focus { outline: 2px solid var(--secondary); }
.sc-list { padding-left: 1.25rem; line-height: 1.7; color: var(--text-secondary); }
.sc-list li { margin-bottom: .6rem; }
.sc-phrase { font-weight: 700; color: var(--text-main); }
.sc-note { color: var(--text-muted); font-size: .85rem; margin-top: .75rem; }
.bp-embed .sc-upsell { display: none !important; }