/* Toolisco — styles for Image Color Palette Extractor, Text to ASCII Art Generator, CSS Flexbox
   Generator, CSS Grid Generator, HTML to Markdown Converter and File Duplicate Detector.
   Loaded only on those pages, after seotools.css and utiltools.css (reused read-only). */
.tool-grid.ct-stack{grid-template-columns:minmax(0,1fr)}
.ct-fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-3) var(--s-4)}
.ct-fields .field{margin:0;min-width:0}
.ct-fields .input{width:100%}
.ct-out{width:100%;min-height:180px}
.ct-note{font-size:var(--fs-sm);color:var(--text-soft)}
/* flexbox / grid item editors */
.lg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s-3);margin-top:var(--s-3)}
.lg-card{border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);padding:var(--s-3);min-width:0}
.lg-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-2)}
.lg-card-actions{display:inline-flex;gap:2px}
.lg-card-actions .btn{min-width:36px;padding:.35rem .55rem}
.lg-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2) var(--s-3)}
.lg-fields .field{margin:0;min-width:0}
.lg-fields label{display:flex;flex-direction:column;gap:.25rem;font-size:var(--fs-xs);color:var(--text-soft)}
.lg-fields .input{width:100%;padding:.4rem .5rem;font-size:var(--fs-sm)}
.lg-stage{border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:var(--s-3);background:repeating-conic-gradient(var(--bg-sunken) 0% 25%,var(--surface) 0% 50%) 50%/18px 18px;overflow:auto;max-width:100%}
.fb-root .flex-container,.gd-root .grid-container{box-sizing:border-box;max-width:none;outline:2px solid rgba(99,102,241,.45)}
.gd-root .grid-container{background:rgba(99,102,241,.06)}
.gd-root .grid-item{position:relative;z-index:1;opacity:.92;display:flex;flex-direction:column;gap:.2rem;min-width:0;overflow:hidden}
.gd-pos{font-weight:500;font-size:11px;opacity:.85}
.gd-overlay{z-index:0}
.gd-cell{border:1px dashed rgba(99,102,241,.55);border-radius:4px;font:500 10px/1 var(--font-mono);color:var(--text-mute);padding:3px;overflow:hidden}
.gd-cell.gd-implicit{background:rgba(217,154,43,.14);border-color:rgba(217,154,43,.6)}
.gd-tpl{font-family:var(--font-mono);font-size:var(--fs-xs);word-break:break-all;color:var(--text)}
.gd-tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s-2)}
.gd-tracks .field{margin:0}
.gd-tracks label{font-size:var(--fs-xs)}
.gd-tracks .input{width:100%;padding:.4rem .5rem;font-size:var(--fs-sm);font-family:var(--font-mono)}
/* palette */
.cp-bar{display:flex;height:44px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);margin-top:var(--s-3)}
.cp-bar span{display:block;min-width:4px}
.cp-list{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:var(--s-3)}
.cp-swatch{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg-sunken);min-width:0}
.cp-chip{flex:none;width:48px;height:48px;border-radius:10px;border:1px solid var(--border-strong)}
.cp-info{flex:1;min-width:0;font-size:var(--fs-xs);color:var(--text-soft);font-family:var(--font-mono)}
.cp-info div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-info b{display:block;font-size:var(--fs-sm);color:var(--text)}
.cp-info span{color:var(--text-mute)}
.cp-thumb canvas{display:block;max-width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--border)}
/* ASCII art */
.aa-out{margin:var(--s-3) 0 0;padding:var(--s-4);min-height:140px;max-height:560px;overflow:auto;background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--r-md);font:13px/1.2 var(--font-mono);white-space:pre;color:var(--text);tab-size:4}
/* HTML to Markdown */
.h2m-warn{margin:var(--s-3) 0 0;padding:var(--s-3) var(--s-4) var(--s-3) var(--s-6);border:1px solid #d99a2b;border-radius:var(--r-md);background:rgba(217,154,43,.1);color:#a9730f;font-size:var(--fs-sm)}
:root[data-theme="dark"] .h2m-warn{color:#f0b450}
.h2m-warn li{margin:.15rem 0}
/* duplicate detector */
.fd-table{min-width:860px}
.fd-table td{vertical-align:top;word-break:normal;overflow-wrap:break-word}
.fd-hash{font-family:var(--font-mono);font-size:var(--fs-xs);word-break:break-all !important;min-width:200px}
.fd-dup.fd-g1 td{background:rgba(217,154,43,.08)}
.fd-dup.fd-g0 td{background:rgba(99,102,241,.07)}
.fd-name{width:220px;min-width:160px;max-width:340px;font-weight:600}
.ct-err{color:#c2304a}
.ct-warn{color:#a9730f}
:root[data-theme="dark"] .ct-err{color:#ff8ba0}
:root[data-theme="dark"] .ct-warn{color:#f0b450}
.tool-app .btn[hidden]{display:none}