/* texttoolsbase shared tools CSS: tool workspaces, panels, previews, result areas, grids/cards. */

main.tool{max-width:1180px;margin:1rem auto 0;padding:0 1.75rem;display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}

.big{display:flex;align-items:baseline;gap:.55rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line)}

.big .n{font-family:var(--mono);font-weight:600;font-size:3.4rem;line-height:.9;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.04em}

.big .u{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--faint)}

main.typewrap{max-width:860px;margin:1.4rem auto 0;padding:0 1.75rem;display:flex;flex-direction:column;gap:1rem}

.tstat .big{font-family:var(--mono);font-weight:600;font-size:1.7rem;color:var(--accent);font-variant-numeric:tabular-nums}

main.wgwrap{max-width:920px;margin:1.4rem auto 0;padding:0 1.75rem;display:flex;flex-direction:column;gap:.9rem}

.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}

.ebar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--line);background:var(--panel-2);border-radius:var(--r) var(--r) 0 0}

.ebar .lbl{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--faint)}

.ebar .acts{display:flex;gap:.25rem}

main.xform{max-width:1180px;margin:1rem auto 0;padding:0 1.75rem;display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}

.io{display:flex;flex-direction:column;min-height:420px;overflow:hidden}

.io:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.io pre{white-space:pre-wrap;word-break:break-word;overflow:auto;font-family:var(--mono);font-size:.92rem}

.iometa{padding:.55rem 1rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.66rem;color:var(--faint);background:var(--panel-2)}

.iometa.stat{color:var(--accent);border-top:1px solid var(--line)}

.readout{position:sticky;top:5rem;padding:1.4rem 1.4rem 1.5rem}

.cell{padding:.85rem .2rem;border-bottom:1px solid var(--line)}

.cell:nth-child(odd){border-right:1px solid var(--line);padding-right:.9rem}

.cell:nth-child(even){padding-left:.9rem}

.cell .n{font-family:var(--mono);font-weight:500;font-size:1.3rem;color:var(--ink);font-variant-numeric:tabular-nums}

.cell .l{font-family:var(--mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin-top:.2rem}

.result{max-width:1000px;margin:1rem auto 0;padding:0 1.75rem}

.editor{display:flex;flex-direction:column;min-height:460px;overflow:hidden}

.editor:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

main.solo .io{min-height:420px}

.grid{display:grid;grid-template-columns:1fr 1fr}

main.fancy{max-width:980px;margin:1.4rem auto 0;padding:0 1.75rem;display:flex;flex-direction:column;gap:1.25rem}

main.xform.cmp{grid-template-columns:1fr 1fr}

.sbs .cell{padding:.05rem .8rem;white-space:pre-wrap;word-break:break-word;min-height:1.45em;border-left:1px solid var(--line)}

.sbs .cell:first-child{border-left:0}

.sbs .cell.del{background:rgba(192,57,43,.10);color:#a5281b}

.sbs .cell.ins{background:rgba(31,143,78,.12);color:#1c6e3f}

.sbs .cell.eq{color:var(--muted)}

.gauge{margin:.9rem 0 .2rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}

.gauge .fill{height:100%;width:0;background:var(--accent);transition:width .2s}

.gauge .meta{display:flex;justify-content:space-between;margin-top:.45rem;font-family:var(--mono);font-size:.68rem;color:var(--muted)}

.gauge.over .fill{background:var(--warn)}

.gauge .track{height:6px;background:var(--panel-2);border-radius:4px;overflow:hidden}

.gauge.over .rem{color:var(--warn)}

.toolctrls{display:flex;flex-wrap:wrap;gap:.85rem;align-items:flex-end;padding:.85rem 1rem;border-top:1px solid var(--line);background:var(--panel-2);border-radius:0 0 var(--r) var(--r)}

.editor-area{display:block;width:100%;min-height:440px;resize:vertical;border:1px solid var(--line);border-radius:0 0 var(--r) var(--r);outline:0;background:var(--panel);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.7;padding:1.2rem 1.3rem}

.editor-area:focus{border-color:var(--accent)}

.editor-area.nowrap{white-space:pre;overflow-x:auto}

.editor-area.fs-s{font-size:.9rem}

.editor-area.fs-m{font-size:1.02rem}

.editor-area.fs-l{font-size:1.18rem}

.statline .big{display:flex;align-items:baseline;gap:.5rem}

.statline .big .n{font-family:var(--mono);font-weight:600;font-size:2.6rem;color:var(--accent);font-variant-numeric:tabular-nums}

.statline .big .u{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--faint)}

.genwrap pre#out{min-height:220px}

.toolctrls.only{border-top:0;border-radius:var(--r);padding:1.3rem 1.1rem;min-height:200px;align-content:flex-start}

.codewrap .editor-area{border:0!important;border-radius:0!important;box-shadow:none!important;min-height:440px;flex:1;font-family:var(--mono);font-size:.95rem;line-height:1.7;white-space:pre;overflow:auto}

/* Pass 4 tool layout safety */
.workspace,.panel,.output,.preview-grid,.grid,.card,main.tool,main.xform{min-width:0}
pre,code,.out,.io pre{max-width:100%;overflow-wrap:anywhere}
@media (max-width:920px){main.tool{grid-template-columns:1fr}.readout{position:static}ul.related{grid-template-columns:1fr}}