/* TryToolz Phase 3 component layer
   Scoped rules for processing notices, share controls, social links and ad containment. */

.tz-processing-note{display:flex;align-items:flex-start;gap:8px;margin:10px 0 14px;padding:10px 12px;border:1px solid #BBF7D0;border-radius:10px;background:#F0FDF4;color:#334155;font-size:12.5px;line-height:1.5}
.tz-processing-note strong{color:#047857;white-space:nowrap}
.tz-processing-note span{min-width:0}
.tz-social-color a > svg{width:18px!important;height:18px!important;max-width:18px!important;max-height:18px!important;min-width:18px!important;min-height:18px!important;display:block!important;flex:0 0 18px!important}
.tz-share-row{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:8px!important;padding:12px 0!important}
.tz-share-row>span{margin-right:2px!important;font-size:13px!important}
.tz-share-row a{display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:34px!important;padding:7px 10px!important}
.tz-share-row a > svg{width:16px!important;height:16px!important;max-width:16px!important;max-height:16px!important;min-width:16px!important;min-height:16px!important;flex:0 0 16px!important}
.tz100-ad{overflow:hidden;contain:layout paint}
.tz100-ad-top,.tz100-ad-bottom{min-height:90px}
.tz100-ad-middle{min-height:90px}
.tz-site-note{margin-top:28px;padding:18px 20px;border:1px solid #BBF7D0;border-radius:12px;background:#F0FDF4;color:#334155}
.tz-site-note h2{margin:0 0 7px;font-size:17px;color:#065F46}
.tz-site-note p{margin:6px 0;font-size:13px;line-height:1.65}
html[data-theme="dark"] .tz-processing-note{background:#062E22;border-color:#047857;color:#CBD5E1}
html[data-theme="dark"] .tz-site-note{background:#062E22;border-color:#047857;color:#CBD5E1}
html[data-theme="dark"] .tz-site-note h2{color:#6EE7B7}
@media(max-width:640px){.tz-processing-note{font-size:12px}.tz-share-row{gap:7px!important}.tz-share-row a{padding:7px 9px!important}.tz100-ad-top,.tz100-ad-bottom{min-height:70px}}

/* 10x polish component layer: scoped, no global SVG sizing */
.tz100-processing-note{display:flex;align-items:flex-start;gap:10px;margin:12px 0;padding:11px 13px;border:1px solid #BBF7D0;border-radius:10px;background:#F0FDF4;color:#334155;font-size:13px;line-height:1.5}
.tz100-processing-note strong{flex:0 0 auto;color:#047857}
.tz100-limit-note{margin:0;padding:13px 15px;border-left:3px solid #047857;background:#F8FAFC;border-radius:0 9px 9px 0;color:#475569}
.tz100-search-suggestions{max-height:min(60vh,520px);overflow:auto}
.tz100-search-suggestions a{min-height:48px}
.tz100-share-row a,.tz100-share-row button{min-height:40px;display:inline-flex;align-items:center;gap:7px}
.tz100-social-links a{min-height:40px}
.tz100-social-links svg{width:18px!important;height:18px!important;display:block!important;flex:0 0 18px!important}
.tz100-share-row svg{width:16px!important;height:16px!important;display:block!important;flex:0 0 16px!important}
.tz100-ad{overflow:hidden;contain:layout paint}
.tz100-ad.top,.tz100-ad.bottom{min-height:70px}
.tz100-ad.middle{min-height:70px}
@media(max-width:760px){.tz100-processing-note{font-size:12px}.tz100-share-row{gap:6px}.tz100-share-row a,.tz100-share-row button{min-height:40px;padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.tz100-card:hover{transform:none!important}.tz100-search-suggestions{scroll-behavior:auto!important}}
@media(min-width:761px){.tz100-ad.top,.tz100-ad.bottom,.tz100-ad.middle{min-height:90px}}

/* Tool UX architecture — function-driven layouts, not category templates. */
.tz100-ux-width-compact .tz100-workspace-frame{max-width:680px;margin-inline:auto}
.tz100-ux-width-medium .tz100-workspace-frame{max-width:900px;margin-inline:auto}
.tz100-ux-width-wide .tz100-workspace-frame{max-width:1160px;margin-inline:auto}

/* One-shot tools start compact and reveal the result only after completion. */
.tz100-state-one-shot .tz100-output-pane{display:none}
.tz100-state-one-shot.tz100-has-result .tz100-output-pane{display:block}
.tz100-state-one-shot.tz100-has-result .tz100-input-pane{display:none}
.tz100-state-one-shot.tz100-has-result .tz100-workspace-frame{grid-template-columns:1fr!important;max-width:900px}
.tz100-state-one-shot.tz100-has-result .tz100-output-pane{max-width:900px;margin-inline:auto;width:100%;}
.tz100-state-one-shot.tz100-has-result .tz100-result{min-height:unset!important}

/* Preview/live tools deliberately keep input and feedback together. */
.tz100-state-live .tz100-output-pane,
.tz100-state-preview .tz100-output-pane{display:block}
.tz100-state-live .tz100-output-pane{position:sticky;top:86px;align-self:start}
.tz100-state-preview .tz100-output-pane{position:sticky;top:86px;align-self:start}

/* Tool-specific visual language. */
.tz100-ux-live-editor .tz100-workspace textarea{min-height:210px!important}
.tz100-ux-rich-editor .tz100-workspace{padding:0!important}
.tz100-ux-rich-editor .tz100-output-pane{background:#fff!important}
.tz100-ux-code .tz100-workspace textarea,
.tz100-ux-code .tz100-result{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace!important}
.tz100-ux-code .tz100-workspace textarea{min-height:280px!important}
.tz100-ux-code .tz100-result{min-height:220px!important}
.tz100-ux-calculator .tz100-workspace-frame,
.tz100-ux-generator .tz100-workspace-frame,
.tz100-ux-validator .tz100-workspace-frame,
.tz100-ux-converter .tz100-workspace-frame{align-items:start}
.tz100-ux-calculator .tz100-output-pane{max-width:520px}
.tz100-ux-calculator .tz100-result{font-size:16px!important}
.tz100-ux-generator .tz100-result{min-height:80px!important}
.tz100-ux-validator .tz100-result{min-height:70px!important}
.tz100-ux-image .tz100-output-pane{background:#fff!important}
.tz100-ux-image .tz100-result{min-height:120px!important}
.tz100-ux-analysis .tz100-result{overflow-x:auto}
.tz100-ux-preview .tz100-result{min-height:140px!important}

/* Result state puts the user's next action first. */
.tz100-state-result .tz100-output-head{padding-bottom:8px;border-bottom:1px solid #e5e7eb}
.tz100-state-result .tz100-output-actions{margin-top:10px;align-items:center}
.tz100-edit-input{order:-1}
.tz100-state-result .tz100-edit-input{display:inline-flex!important}
.tz100-ux-number .tz100-copy,
.tz100-ux-number .tz100-download,
.tz100-ux-diagnostic .tz100-copy,
.tz100-ux-diagnostic .tz100-download,
.tz100-ux-image .tz100-copy{display:none}
.tz100-ux-generated .tz100-copy,
.tz100-ux-code .tz100-copy,
.tz100-ux-text-edit .tz100-copy,
.tz100-ux-conversion .tz100-copy,
.tz100-ux-details .tz100-copy,
.tz100-ux-color .tz100-copy{display:inline-flex}

/* Image tools: upload/controls first, result becomes dominant after processing. */
.tz100-ux-image .tz100-image-upload{padding:16px;border:1px dashed #a7e8cc;border-radius:11px;background:#f6fffb}
.tz100-ux-image .tz100-file-hint{font-size:12px;color:#64748b}
.tz100-state-one-shot.tz100-has-preview .tz100-output-pane{display:block}
.tz100-state-one-shot.tz100-has-preview:not(.tz100-has-result) .tz100-input-pane{display:block}
.tz100-state-one-shot.tz100-has-preview:not(.tz100-has-result) .tz100-workspace-frame{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}

/* Compact calculators/generators avoid the old full-width utility-box feel. */
.tz100-ux-width-compact .tz100-workspace{max-width:620px}
.tz100-ux-width-compact .tz100-workspace input,
.tz100-ux-width-compact .tz100-workspace select{max-width:100%}

@media(max-width:760px){
 .tz100-state-live .tz100-output-pane,
 .tz100-state-preview .tz100-output-pane{position:static}
 .tz100-state-one-shot.tz100-has-preview:not(.tz100-has-result) .tz100-workspace-frame{grid-template-columns:1fr!important}
 .tz100-ux-width-compact .tz100-workspace-frame,
 .tz100-ux-width-medium .tz100-workspace-frame,
 .tz100-ux-width-wide .tz100-workspace-frame{max-width:none}
 .tz100-ux-code .tz100-workspace textarea{min-height:210px!important}
}
@media(prefers-reduced-motion:reduce){
 .tz100-state-result .tz100-output-pane{scroll-behavior:auto!important}
}
.tz100-next-step{margin:7px 0 0;color:#64748b;font-size:12px;line-height:1.5}
html[data-theme="dark"] .tz100-next-step{color:#cbd5e1}

/* Function-driven shell layer: each workflow gets a structural frame, while controls/results remain reusable. */
.tz100-workspace-frame{display:grid;gap:12px;align-items:start;min-width:0}
.tz100-workspace-frame.is-side{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tz100-workspace-frame.is-stack{grid-template-columns:1fr}
.tz100-workspace-frame.is-compact{grid-template-columns:minmax(0,1fr);max-width:680px;margin-inline:auto}
.tz100-frame-live{align-items:stretch}
.tz100-frame-live .tz100-input-pane{min-width:0}
.tz100-frame-live .tz100-output-pane{min-height:100%}
.tz100-frame-calculator{max-width:680px}
.tz100-frame-calculator .tz100-input-pane{padding:2px 0}
.tz100-frame-calculator .tz100-output-pane{max-width:none}
.tz100-frame-converter{max-width:680px}
.tz100-frame-converter .tz100-input-pane{background:transparent}
.tz100-frame-converter .tz100-workspace{padding:12px!important}
.tz100-frame-image .tz100-workspace{min-height:170px}
.tz100-frame-image .tz100-output-pane{min-height:170px}
.tz100-frame-editor .tz100-workspace{min-height:280px}
.tz100-frame-editor .tz100-output-pane{min-height:280px}
.tz100-frame-generator{max-width:900px}
.tz100-frame-validator{max-width:860px}
.tz100-frame-text{max-width:900px}
.tz100-tool-image-compressor .tz100-workspace{border-style:dashed}
.tz100-tool-image-compressor .tz100-workspace .quality,
.tz100-tool-image-compressor .tz100-workspace .mode{max-width:320px}
.tz100-tool-image-resizer .tz100-workspace{border-style:solid}
.tz100-tool-image-resizer .tz100-workspace .width,
.tz100-tool-image-resizer .tz100-workspace .height{max-width:180px}
.tz100-tool-image-resizer .tz100-result{background:#f8fffb!important}
.tz100-tool-image-cropper .tz100-workspace{min-height:300px}
.tz100-tool-image-cropper .tz100-result{min-height:140px!important}
.tz100-tool-image-converter .tz100-workspace,
.tz100-tool-png-to-jpg-converter .tz100-workspace,
.tz100-tool-jpg-to-png-converter .tz100-workspace,
.tz100-tool-webp-converter .tz100-workspace{max-width:720px}
.tz100-tool-image-dimensions .tz100-output-pane{background:transparent!important;border:0!important;padding:0!important}
.tz100-tool-image-preview .tz100-output-pane{background:#0f172a!important;border-color:#0f172a!important}
.tz100-tool-image-preview .tz100-result{background:#111827!important;border-color:#334155!important}
@media(max-width:760px){
 .tz100-workspace-frame.is-side{grid-template-columns:1fr}
 .tz100-frame-editor .tz100-workspace,.tz100-frame-editor .tz100-output-pane{min-height:0}
 .tz100-frame-image .tz100-workspace{min-height:120px}
 .tz100-tool-image-cropper .tz100-workspace{min-height:220px}
}