/* ASCII art page. Colors, radius and spacing come from the shared tokens in tools-base.css; one column at the shared page width. */
.asc-tool{display:grid;gap:12px}
.asc-source{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
/* The file field stays focusable but invisible; its label is the button people see. Same visually-hidden shape as .vh (1px + clip-path inset 50%) — the old opacity-only 1px box overflowed and read as clipped text in the B-REFRESH gate. */
.asc-file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;opacity:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.asc-choose{display:inline-flex;align-items:center;min-height:48px;cursor:pointer}
.asc-file:focus-visible+.asc-choose{outline:3px solid var(--focus-ring);outline-offset:2px}
.asc-file:disabled+.asc-choose{opacity:.55;cursor:default}
.asc-thumb{width:48px;height:48px;object-fit:cover;border:1px solid var(--line);border-radius:8px}
.asc-source-name{font-size:14px;color:var(--mut);overflow-wrap:anywhere;min-width:0}
.asc-settings{display:grid;gap:8px}
.asc-settings[hidden]{display:none}
.asc-text-in label{display:block;font-size:14px;margin-bottom:4px}
.asc-text-in input{width:100%;min-height:48px;box-sizing:border-box;font-size:18px}
.asc-text-in .error{white-space:pre-line}
.asc-field{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.asc-field label{display:inline;margin:0;font-size:14px}
.asc-field output{font-size:14px;font-weight:700}
.asc-field input[type=range]{display:block;flex:1 1 100%;width:100%;min-height:44px;margin:0}
.asc-group{border:0;margin:0;padding:0}
.asc-group legend{font-size:14px;margin-bottom:4px;padding:0}
.asc-chips{display:flex;flex-wrap:wrap;gap:8px}
.asc-chip{position:relative;display:inline-flex}
.asc-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.asc-chip>span{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px}
.asc-chip input:checked+span{border-color:var(--b);box-shadow:inset 0 0 0 1px var(--b);font-weight:700}
.asc-chip input:checked+span::before{content:"✓ ";content:"✓ " / ""}
.asc-chip input:focus-visible+span{outline:3px solid var(--focus-ring);outline-offset:2px}
.asc-chip input:disabled+span{opacity:.55}
.asc-ramp{font-family:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono","Courier New",monospace;font-size:13px;white-space:pre}
.asc-head{margin:0 0 6px;font-size:14px}
/* The art always sits on white with dark characters, as it will look in the saved PNG. */
.asc-frame{container-type:inline-size;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:#fff;padding:8px;overflow-x:auto}
.asc-out{width:max-content;margin:0 auto;font-family:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono","Courier New",monospace;font-size:min(11.4px,calc(100cqi / 48.5));line-height:1.2;color:#111;background:#fff;white-space:pre;letter-spacing:0;forced-color-adjust:none}
.asc-actions{display:flex;flex-wrap:wrap;gap:8px}
.asc-actions .btn{min-height:48px;flex:1 1 auto}
.asc-rules h2{font-size:16px}
/* Status lines take no space until they have something to say (they stay in the page as live regions). */
.asc-statuses .status:empty{min-height:0;margin:0}