/*! MainframeKit v1.0.1 · © 2026 Vidyut Saha. All rights reserved. https://mainframekit.com */
/* MainframeKit — look D "Fusion": light workspace, dark console panels, 3270 touches.
   Themes: light (default), dark, green (3270). Set on <html data-theme>. */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-800.woff2") format("woff2"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plex-mono-600.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

:root {
  /* page */
  --bg: #f5f6f3; --surface: #ffffff; --surface-2: #f2f4f0; --ink: #0b0f0c; --ink-2: #3a453e; --ink-3: #5c6961;
  --line: #dfe3dc; --line-2: #c7cec3; --accent: #0a7a55; --accent-ink: #ffffff; --accent-soft: #dff3ea;
  /* console (dark panels, header) */
  --con: #0c120e; --con-2: #0f1813; --con-head: #0b100d; --con-line: #1a2b21; --con-line-2: #23402f;
  --con-ink: #d8f5e4; --con-ink-2: #a9c9b7; --con-dim: #6fa58a; --con-faint: #4c6b5a; --phos: #4df0a0; --phos-ink: #062214;
  --amber: #ffb547; --amber-ink: #1a0f00; --amber-deep: #8a5a00; --amber-soft: #fff6e6;
  /* status */
  --err: #c9302c; --err-soft: #fde7e4; --err-con: #ff8a7a; --err-con-bg: #2a1110;
  --warn: #8a5a00; --warn-soft: #fff4d6; --warn-con-bg: #2a2008;
  --ok: #1d7a3e; --ok-soft: #e1f2e6; --info: #2f5f9e; --info-soft: #e3ecf8;
  /* field colours (blocks) and their console text colours */
  --f0: #3d7fe0; --f1: #1fb39b; --f2: #a07ae3; --f3: #e39a10; --f4: #e0559a; --f5: #6aa834; --f6: #607a6b; --f7: #2fa7c9; --f8: #c06a3a; --f9: #8a8f2a;
  --t0: #8db8ff; --t1: #5fe0c8; --t2: #c2a2f5; --t3: #ffb547; --t4: #f39bc4; --t5: #9ee07a; --t6: #a9c9b7; --t7: #7fd6f0; --t8: #f0a982; --t9: #d8dc7a;
  --radius: 14px; --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(11, 16, 13, .05), 0 10px 30px rgba(11, 16, 13, .07);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0a0e0b; --surface: #111814; --surface-2: #16201a; --ink: #e6f2ea; --ink-2: #b6c8bd; --ink-3: #8ea596;
  --line: #22322a; --line-2: #2f4538; --accent: #4df0a0; --accent-ink: #062214; --accent-soft: #11291d;
  --con: #070b08; --con-2: #0b120e; --con-head: #050806; --amber-soft: #2a2008;
  --err: #ff8a7a; --err-soft: #2a1110; --warn: #ffcf7a; --warn-soft: #2a2008; --ok: #6fe39d; --ok-soft: #10261a; --info: #8fb6ef; --info-soft: #132036;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
:root[data-theme="green"] {
  --bg: #050806; --surface: #08100b; --surface-2: #0c1610; --ink: #c9f7dc; --ink-2: #8fd3ad; --ink-3: #6fa58a;
  --line: #143321; --line-2: #1f5a39; --accent: #58f0a0; --accent-ink: #04120a; --accent-soft: #0d2016;
  --con: #030604; --con-2: #07100a; --con-head: #030604; --amber-soft: #1d1508;
  --err: #ff6b5e; --err-soft: #2a0d0a; --warn: #ffb347; --warn-soft: #231a08; --ok: #58f0a0; --ok-soft: #0d2016; --info: #7fd6f0; --info-soft: #0b1d22;
  --sans: "Plex Mono", ui-monospace, monospace;
  --shadow: 0 0 0 1px #0d2016, 0 0 40px rgba(88, 240, 160, .06);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); overflow-wrap: break-word; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5em; }
h3 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 1em; }
code, kbd, pre, .mono { font-family: var(--mono); font-size: .92em; }
code { background: var(--surface-2); padding: .1em .35em; border-radius: 5px; }
pre { background: var(--con); color: var(--con-ink); padding: 14px 16px; border-radius: var(--radius-sm); overflow-x: auto; line-height: 1.6; margin: 0 0 1em; }
pre code { background: none; padding: 0; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 24px; } }
.hidden { display: none !important; }
.muted { color: var(--ink-3); } .small { font-size: .88rem; }
.err-text { color: var(--err); }

/* ---------- header (always console-dark) ---------- */
.site-head { background: var(--con-head); color: var(--con-ink); position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--con-line); }
.site-head .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #f2fff7; text-decoration: none; font: 700 18px var(--sans); letter-spacing: -.01em; }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; background: #132019; border: 1px solid var(--con-line-2); display: grid; place-items: center; }
.brand .cur { color: var(--phos); font-family: var(--mono); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .brand .cur, .hero .cursor { animation: none; } }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { color: var(--con-ink-2); text-decoration: none; padding: 7px 10px; border-radius: 8px; font-size: .93rem; }
.nav a b { color: var(--phos); font-family: var(--mono); font-weight: 600; margin-right: 5px; }
.nav a:hover, .nav a[aria-current="page"] { background: #132019; color: #f2fff7; }
.cmd { margin-left: auto; display: flex; align-items: center; border: 1px solid var(--con-line-2); border-radius: 10px; background: var(--con-2); min-width: 300px; flex: 0 1 380px; }
.cmd:focus-within { border-color: var(--phos); }
.cmd label { padding: 0 6px 0 10px; font: 500 12.5px var(--mono); color: var(--con-dim); white-space: nowrap; }
.cmd input, .cmd input[type="search"] { flex: 1; width: auto; border-radius: 0; box-shadow: none !important; min-width: 0; min-height: 40px; border: 0; background: transparent; color: var(--amber); font: 600 15px var(--mono); padding: 0 6px; outline: none; }
.cmd input::placeholder { color: var(--con-faint); font-weight: 400; }
.cmd kbd { margin-right: 8px; font: 500 11px var(--mono); color: var(--con-dim); border: 1px solid var(--con-line-2); border-radius: 5px; padding: 1px 6px; }
.theme-btn { width: 40px; height: 40px; border: 1px solid var(--con-line-2); border-radius: 10px; background: var(--con-2); color: var(--con-ink-2); display: grid; place-items: center; cursor: pointer; font: 600 11px var(--mono); }
.theme-btn:hover { border-color: var(--phos); color: var(--phos); }
@media (max-width: 760px) { .cmd { order: 5; flex: 1 1 100%; min-width: 0; margin-left: 0; } .cmd kbd { display: none; } .nav a { padding: 6px 7px; font-size: .88rem; } }

/* tool title band */
.band { background: var(--con-head); color: var(--con-ink); border-bottom: 1px solid var(--con-line); }
.band .wrap { padding-top: 22px; padding-bottom: 26px; }
.band .crumbs { font: 500 12.5px var(--mono); color: var(--con-dim); margin-bottom: 10px; letter-spacing: .02em; }
.band .crumbs a { color: var(--con-dim); text-decoration: none; }
.band .crumbs a:hover { color: var(--phos); }
.band h1 { color: #f2fff7; margin: 0; }
.band .lead { color: var(--con-ink-2); margin: 8px 0 0; font-size: 1.05rem; max-width: 760px; }
.band-row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; }
.badge { display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--mono); color: var(--phos); border: 1px solid var(--con-line-2); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--phos); }
.tag { display: inline-block; font: 600 .72rem/1.6 var(--mono); padding: 0 7px; border-radius: 5px; background: var(--surface-2); color: var(--ink-2); letter-spacing: .02em; }

main { padding: 22px 0 56px; }
main.flush { padding-top: 0; }

/* ---------- home ---------- */
.hero { background: linear-gradient(var(--con-head) 0 270px, var(--bg) 270px); }
.hero-grid { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-end; padding-top: 52px; }
.hero-copy { flex: 1 1 440px; color: #f2fff7; padding-bottom: 92px; }
.hero-copy .kicker { font: 600 13px var(--mono); color: var(--phos); letter-spacing: .06em; margin: 0 0 14px; }
.hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); line-height: 1.02; letter-spacing: -.035em; margin: 0; color: #f2fff7; }
.hero .cursor { display: inline-block; width: .42em; height: .85em; background: var(--phos); margin-left: .18em; vertical-align: -.06em; animation: blink 1.1s steps(1) infinite; }
.hero-console { flex: 1 1 520px; min-width: 0; }
.hero-sub { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding-top: 26px; }
.hero-sub p { flex: 1 1 440px; margin: 0; font-size: 1.15rem; color: var(--ink-2); }
@media (max-width: 760px) { .hero { background: linear-gradient(var(--con-head) 0 320px, var(--bg) 320px); } .hero-copy { padding-bottom: 0; } .hero-grid { padding-top: 32px; } }
.btn-con { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 10px; background: var(--con-head); color: var(--phos); font: 700 15px var(--mono); text-decoration: none; border: 1px solid var(--con-line-2); }
.btn-con:hover { color: #a6ffcc; }
.btn-out { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 10px; border: 1.5px solid var(--ink); color: var(--ink); font-weight: 600; text-decoration: none; }
.stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 34px; }
.stats-strip > div { background: var(--con-head); color: var(--con-ink-2); border-radius: var(--radius); padding: 16px 20px; font-size: .9rem; }
.stats-strip b { display: block; font: 700 30px/1.2 var(--mono); color: var(--phos); }
.stats-strip > div:nth-child(2) b { color: var(--amber); } .stats-strip > div:nth-child(3) b { color: var(--t0); }
.stats-strip > .dashed { background: var(--surface); border: 1.5px dashed var(--accent); color: var(--ink-2); }
.stats-strip > .dashed b { color: var(--accent); }
.section-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 42px 0 14px; }
.section-title h2 { margin: 0; font-size: 1.6rem; }
.section-title .hint { font: 500 13px var(--mono); color: var(--ink-3); }
.section-title .more { margin-left: auto; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; position: relative; }
a.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.card h3 .opt { font: 700 13px var(--mono); color: var(--accent); margin-right: 8px; }
.card p { margin: 0; color: var(--ink-3); font-size: .93rem; }
.card .mini { background: var(--con); border-radius: 9px; padding: 10px; margin-bottom: 14px; height: 46px; display: flex; gap: 3px; align-items: center; font: 600 13px var(--mono); overflow: hidden; }
.card .mini span { display: block; border-radius: 3px; height: 22px; }
.card .pin { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; width: 32px; height: 32px; border-radius: 8px; font-size: 16px; }
.card .pin:hover, .card .pin[aria-pressed="true"] { color: var(--amber-deep); background: var(--amber-soft); }
.codes-band { background: var(--con-head); border-radius: 16px; padding: 18px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.codes-band a { display: block; text-decoration: none; border: 1px solid var(--con-line-2); border-radius: 12px; padding: 14px; color: var(--con-ink); }
.codes-band a:hover { border-color: var(--phos); }
.codes-band .codes { margin: 0 0 8px; font: 600 13px var(--mono); }
.codes-band b { display: block; }
.codes-band small { color: var(--con-ink-2); }
.fam-abend { color: var(--err-con); } .fam-sqlcode { color: var(--t0); } .fam-cics { color: var(--t2); } .fam-mq { color: var(--t5); }
.privacy-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.privacy-row div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.privacy-row b { display: block; margin-bottom: 4px; }
.privacy-row p { margin: 0; color: var(--ink-3); font-size: .93rem; }

/* ---------- console panels (dark data areas, every theme) ---------- */
.console { background: var(--con); color: var(--con-ink); border: 1px solid var(--con-line-2); border-radius: 16px; overflow: hidden; min-width: 0; box-shadow: var(--shadow); }
.con-head { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--con-line); font: 500 12px var(--mono); color: var(--con-dim); flex-wrap: wrap; letter-spacing: .02em; }
.con-head .live { color: var(--phos); }
.con-head .right { margin-left: auto; }
.con-body { padding: 16px; }
.con-foot { display: flex; gap: 18px; flex-wrap: wrap; padding: 9px 16px; border-top: 1px solid var(--con-line); background: var(--con-2); font: 600 12px var(--mono); color: var(--phos); }
.con-foot .right { margin-left: auto; color: var(--con-dim); font-weight: 500; }
.console .k { color: var(--con-dim); } .console .v { color: var(--con-ink); }
.console a { color: var(--phos); }
.console textarea, .console input[type="text"], .console select { background: var(--con-2); color: var(--con-ink); border-color: var(--con-line-2); }
.console textarea:focus { border-color: var(--phos); box-shadow: 0 0 0 3px rgba(77, 240, 160, .15); }
.console .msg.error { background: var(--err-con-bg); color: #ffd9d3; border-color: var(--err-con); }
.console .msg.warning { background: var(--warn-con-bg); color: #ffe2b8; border-color: var(--amber); }
.console .msg.ok { background: #10261a; color: #c6f5da; border-color: var(--phos); }
.console .msg.info { background: #0b1d22; color: #c8eef8; border-color: var(--t7); }

/* ---------- tool workspace ---------- */
.workspace { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.workspace > .side { flex: 1 1 300px; max-width: 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.workspace > .side.wide { max-width: 560px; flex-basis: 380px; }
.workspace > .main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; min-width: 0; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.label { font: 600 12px var(--mono); color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; margin: 0 0 8px; display: block; }
.row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
.row > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > span, .field > label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.field small { color: var(--ink-3); font-size: .8rem; }
input, select, textarea, button { font: inherit; color: inherit; }
input[type="text"], input[type="number"], input[type="search"], select, textarea { width: 100%; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 8px 10px; min-height: 42px; }
textarea { font: 400 13.5px/1.6 var(--mono); resize: vertical; min-height: 240px; white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 4; }
textarea.short { min-height: 110px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mono-input { font-family: var(--mono) !important; }
.big-input { min-height: 54px !important; font: 600 20px var(--mono) !important; border: 1.5px solid var(--accent) !important; border-radius: 12px !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; min-height: 40px; font-weight: 600; font-size: .92rem; text-decoration: none; }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.phos { background: var(--phos); border-color: var(--phos); color: var(--phos-ink); font-family: var(--mono); }
.btn.con { background: var(--con-2); border-color: var(--con-line-2); color: var(--con-ink); font: 600 12.5px var(--mono); }
.btn.con:hover { border-color: var(--phos); color: var(--phos); }
.btn.small { padding: 4px 11px; min-height: 34px; font-size: .86rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; background: var(--surface); padding: 8px 14px; cursor: pointer; border-right: 1px solid var(--line); min-height: 40px; font-weight: 600; font-size: .9rem; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--con-head); color: var(--phos); }
.check { display: inline-flex; gap: 8px; align-items: center; font-size: .92rem; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tiles button { text-align: left; min-height: 62px; border-radius: 11px; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; font-size: .93rem; color: var(--ink); }
.tiles button small { display: block; font: 500 11.5px var(--mono); color: var(--ink-3); margin-top: 2px; }
.tiles button[aria-pressed="true"] { background: var(--con-head); color: var(--phos); border-color: var(--con-head); }
.tiles button[aria-pressed="true"] small { color: var(--con-ink-2); }
.drop { display: block; border: 1.5px dashed var(--line-2); border-radius: var(--radius); padding: 18px; text-align: center; color: var(--ink-2); background: var(--surface-2); cursor: pointer; }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop input { display: none; }

/* tables */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 11px; max-height: 70vh; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface-2); font: 600 11.5px var(--mono); color: var(--ink-3); position: sticky; top: 0; z-index: 1; white-space: nowrap; letter-spacing: .03em; text-transform: uppercase; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--mono); font-size: .86rem; white-space: pre; }
td .small { white-space: normal; min-width: 180px; }
tr.group td { background: var(--surface-2); font-weight: 700; }
tr.redef td { color: var(--ink-3); }
tr.bad td { background: var(--err-soft); }
tr.sel td { background: var(--amber-soft); }
tr[data-f] { cursor: pointer; }
tr[data-f]:hover td { background: var(--surface-2); }
.indent-1 { padding-left: 24px !important; } .indent-2 { padding-left: 40px !important; } .indent-3 { padding-left: 56px !important; } .indent-4 { padding-left: 72px !important; } .indent-5 { padding-left: 88px !important; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; flex: none; }
.hex { font-family: var(--mono); color: var(--amber-deep); word-break: break-all; }
.console .hex { color: var(--amber); }
.bad-pill { background: var(--err); color: #fff; border-radius: 5px; padding: 1px 7px; font: 600 12px var(--mono); }

.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.stat { background: var(--surface-2); border-radius: 11px; padding: 10px 14px; min-width: 120px; }
.stat b { display: block; font: 700 22px/1.2 var(--mono); }
.stat span { font-size: .8rem; color: var(--ink-3); }
.stat.dark { background: var(--con-head); } .stat.dark b { color: var(--phos); } .stat.dark span { color: var(--con-ink-2); }
.stat.red b { color: var(--err); } .stat.amber b { color: var(--amber-deep); }
.msgs { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.msg { padding: 9px 12px; border-radius: 10px; font-size: .92rem; border-left: 4px solid; display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.msg .where { font: 600 .78rem var(--mono); opacity: .85; min-width: 54px; padding-top: 2px; }
.msg .text { flex: 1; min-width: 200px; }
.msg.error { background: var(--err-soft); border-color: var(--err); }
.msg.warning { background: var(--warn-soft); border-color: var(--amber); }
.msg.info { background: var(--info-soft); border-color: var(--info); }
.msg.ok { background: var(--ok-soft); border-color: var(--ok); }
.kv { display: grid; grid-template-columns: minmax(130px, max-content) 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--ink-3); font-size: .88rem; }
.kv dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.big-out { font: 700 1.5rem/1.3 var(--mono); color: var(--amber-deep); word-break: break-all; margin: 4px 0 8px; }
.console .big-out { color: var(--amber); }
.huge { font: 800 clamp(1.7rem, 3.6vw, 2.7rem)/1.15 var(--sans); letter-spacing: -.03em; color: #f2fff7; margin: 14px 0 0; }
.note { font-size: .86rem; color: var(--ink-3); margin-top: 10px; }
.console .note { color: var(--con-ink-2); }

/* byte map and hex */
.bytemap { display: flex; height: 48px; gap: 2px; border-radius: 8px; overflow: hidden; }
.bytemap div { min-width: 2px; color: #fff; font: 600 11px var(--mono); padding: 4px 5px; overflow: hidden; white-space: nowrap; text-overflow: clip; cursor: pointer; transition: opacity .15s; }
.bytemap.has-sel div { opacity: .38; }
.bytemap.has-sel div.sel { opacity: 1; outline: 3px solid var(--ink); outline-offset: -3px; }
.console .bytemap.has-sel div.sel { outline-color: #f2fff7; }
.bytemap div.bad { background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(201, 48, 44, .9) 6px 12px) !important; opacity: 1 !important; }
.ruler { display: flex; justify-content: space-between; font: 400 11px var(--mono); color: var(--ink-3); margin-top: 4px; }
.console .ruler { color: var(--con-dim); }
.legend { display: flex; flex-direction: column; gap: 2px; font: 400 13px var(--mono); }
.legend button { display: flex; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 8px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--ink); width: 100%; }
.legend button:hover { background: var(--surface-2); }
.legend button.sel { background: var(--con-head); color: var(--amber); }
.legend button.bad { color: var(--err); }
.legend button .pos { margin-left: auto; color: var(--ink-3); }
.legend button.sel .pos { color: var(--amber); }
.hexview { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(120px, 190px); gap: 2px 14px; font: 400 14px/1.95 var(--mono); }
.hexview .off { color: var(--con-faint); }
.hexview .chars { color: var(--con-ink-2); white-space: pre; overflow: hidden; }
.hexview .bytes span { cursor: pointer; border-radius: 3px; padding: 1px 0; }
.hexview .bytes span.sel { background: var(--amber); color: var(--amber-ink) !important; }
.hexview .bytes span.badb { background: var(--err-con-bg); color: var(--err-con) !important; }
@media (max-width: 640px) { .hexview { grid-template-columns: 44px minmax(0, 1fr); } .hexview .chars { display: none; } }
.alert-con { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; background: #1d1206; border-top: 1px solid #3a2810; color: #ffe2b8; font-size: .93rem; }
.alert-con .pill { font: 700 12px var(--mono); color: var(--amber-ink); background: var(--amber); border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.fieldcard { padding: 11px 14px; border-bottom: 1px solid var(--line); border-left: 4px solid var(--line); }
.fieldcard:last-child { border-bottom: 0; }
.fieldcard .fk { font: 500 12px var(--mono); color: var(--ink-3); margin: 0; }
.fieldcard .fv { font: 600 16px var(--mono); margin: 2px 0 0; overflow-wrap: anywhere; }
.fieldcard.bad { background: var(--err-soft); }

/* JCL annotated view */
.jclview { font: 400 14px/2.05 var(--mono); padding: 8px 0; overflow-x: auto; }
.jclview .ln { display: flex; white-space: pre; min-width: max-content; }
.jclview .no { width: 46px; text-align: right; padding-right: 10px; color: var(--con-faint); flex: none; user-select: none; }
.jclview .gut { width: 20px; flex: none; text-align: center; }
.jclview .ln.e { background: var(--err-con-bg); } .jclview .ln.e .gut { color: var(--err-con); }
.jclview .ln.w { background: var(--warn-con-bg); } .jclview .ln.w .gut { color: var(--amber); }
.jclview .ln.c .src { color: var(--con-faint); }
.jclview .ln.d .src { color: var(--con-ink-2); }
.jclview .op { color: var(--phos); } .jclview .nm { color: var(--t0); }
.jclview u { text-decoration: none; border-bottom: 2px solid var(--t2); }
.jclview u.bad { border-color: var(--err-con); color: var(--err-con); }
.jclview u.warn { border-color: var(--amber); color: #ffd28a; }
.fixes { padding: 10px 16px; border-top: 1px solid var(--con-line); background: var(--con-2); display: grid; gap: 8px; }
.fixes .fx { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .92rem; color: #f2fff7; }
.fixes .fx .where { font: 600 12px var(--mono); min-width: 64px; }
.fixes .fx.error .where { color: var(--err-con); } .fixes .fx.warning .where { color: var(--amber); } .fixes .fx.info .where { color: var(--t7); }
.fixes .fx .text { flex: 1; min-width: 220px; }
.fixes .fx button { border: 1px solid var(--phos); color: var(--phos); background: transparent; border-radius: 7px; font: 600 12px var(--mono); padding: 4px 10px; min-height: 32px; cursor: pointer; }
.flow { display: flex; flex-direction: column; gap: 14px; font-size: .86rem; }
.flow .stp { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flow .node { border-radius: 9px; padding: 7px 11px; font-family: var(--mono); line-height: 1.35; }
.flow .node small { display: block; font-family: var(--sans); font-size: .78rem; opacity: .85; }
.flow .ds { border: 1.5px solid var(--f2); background: var(--surface); }
.flow .ds.new { border-color: var(--f3); background: var(--amber-soft); }
.flow .ds.bad { border-color: var(--err); background: var(--err-soft); }
.flow .ds.out { border-color: var(--line-2); border-style: dashed; }
.flow .pg { background: var(--con-head); color: var(--phos); }
.flow .pg.bypass { color: var(--amber); outline: 2px dashed var(--amber); outline-offset: 3px; }
.flow .arr { color: var(--ink-3); font-family: var(--mono); }

/* calculators */
.nibbles { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.nib { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nib .pair { display: flex; border: 1.5px solid var(--line-2); border-radius: 8px; overflow: hidden; font: 700 24px var(--mono); }
.nib .pair span { padding: 7px 11px; background: var(--amber-soft); color: var(--amber-deep); }
.nib .pair span.sign { background: var(--err-soft); color: var(--err); }
.nib .pair span.bad { background: var(--err); color: #fff; }
.nib .pair span.zone { background: var(--surface-2); color: var(--ink-3); }
.nib small { font-size: .76rem; color: var(--ink-3); }
.track { display: flex; height: 38px; gap: 2px; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; background: var(--surface-2); padding: 0 1px; }
.track span { display: block; background: var(--f1); min-width: 1px; }
.track span.gap { background: transparent; }
.track.alt span { background: var(--f3); }
.track-label { font: 600 13px var(--mono); margin: 12px 0 6px; }
.yearbar { display: flex; gap: 2px; height: 32px; border-radius: 6px; overflow: hidden; }
.yearbar div { font: 600 11px var(--mono); padding: 4px 6px; background: var(--line); color: var(--ink-3); overflow: hidden; }
.yearbar div.past { background: var(--accent); color: #fff; }
.yearbar div.now { background: var(--amber); color: var(--amber-ink); }
.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.tilegrid div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.tilegrid dt { font: 600 11px var(--mono); color: var(--ink-3); margin: 0; }
.tilegrid dd { font: 700 17px var(--mono); margin: 2px 0 0; overflow-wrap: anywhere; }
.bits { display: flex; gap: 2px; height: 30px; border-radius: 6px; overflow: hidden; font: 600 12px var(--mono); }
.bits div { display: flex; align-items: center; padding: 0 10px; }
.pairs { display: flex; flex-wrap: wrap; gap: 6px; }
.pairs div { display: flex; flex-direction: column; align-items: center; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); min-width: 42px; }
.pairs b { padding: 5px 8px; font: 700 18px var(--mono); background: var(--surface); }
.pairs i { font: 600 12.5px var(--mono); font-style: normal; background: var(--con); color: var(--amber); width: 100%; text-align: center; padding: 3px 6px; }
.pairs div.miss i { color: var(--err-con); }
.chart { display: grid; grid-template-columns: 40px repeat(16, minmax(30px, 1fr)); gap: 3px; font: 500 13px var(--mono); min-width: 640px; }
.chart div { text-align: center; padding: 7px 0; border-radius: 5px; background: #132019; color: var(--con-ink); }
.chart .h { background: transparent; color: var(--con-dim); }
.chart .c { color: #2f4a3a; }
.chart .lit { background: var(--phos); color: var(--phos-ink); }

/* DFSORT */
.stage-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stage-cards > div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.stage-cards .label { margin-bottom: 6px; }
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--con-line); }
.stages > div { background: var(--con); padding: 14px; font: 400 13.5px/1.85 var(--mono); white-space: pre; overflow-x: auto; }
.stages .label { color: var(--con-dim); }
.stages s { color: #3a5546; }
.stages .s1 .label { color: var(--phos); } .stages .s2 .label { color: var(--t0); } .stages .s3 .label { color: var(--t4); } .stages .s4 .label { color: var(--amber); }

/* code pages */
.code-band .wrap { padding-top: 22px; padding-bottom: 46px; }
.code-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.code-title h1 { font: 700 clamp(2.4rem, 6vw, 4rem)/1 var(--mono); margin: 0; letter-spacing: -.02em; }
.code-title .name { font-size: 1.5rem; font-weight: 800; color: #f2fff7; }
.code-title .kind { font: 600 12px var(--mono); border: 1px solid var(--con-line-2); border-radius: 6px; padding: 3px 8px; color: var(--con-ink-2); }
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: -26px; position: relative; }
.glance > * { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 16px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.glance .label { margin-bottom: 6px; }
.glance p { margin: 0; font-weight: 600; }
.glance a.try { background: var(--con-head); color: var(--con-ink); border-color: var(--con-head); }
.glance a.try .label { color: var(--phos); }
.code-body { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px; align-items: flex-start; }
.code-body article { flex: 999 1 600px; min-width: 0; }
.code-body aside { flex: 1 1 280px; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.code-body article h2:first-child { margin-top: 0; }
.steps { list-style: none; margin: 0 0 1.2em; padding: 0; display: grid; gap: 8px; counter-reset: s; }
.steps li { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); font: 700 13px var(--mono); color: var(--accent); padding-top: 2px; }
.causes { padding-left: 1.2em; margin: 0 0 1.2em; } .causes li { margin-bottom: .4em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips a { text-decoration: none; background: var(--con-head); border-radius: 6px; padding: 5px 9px; font: 600 13px var(--mono); }
.learn-card { background: var(--phos); color: var(--phos-ink); border-radius: 14px; padding: 16px; }
.learn-card b { display: block; margin-bottom: 4px; font-size: 1.05rem; }
.learn-card p { margin: 0 0 12px; font-size: .93rem; }
.learn-card a { display: inline-flex; min-height: 38px; align-items: center; padding: 0 14px; border-radius: 8px; background: var(--con-head); color: var(--phos); font: 700 13px var(--mono); text-decoration: none; }
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.filterbar button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--con-line-2); background: transparent; color: var(--con-ink-2); font: 600 13px var(--mono); cursor: pointer; }
.filterbar button[aria-pressed="true"] { background: var(--phos); color: var(--phos-ink); border-color: var(--phos); }
.code-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.code-cards a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; }
.code-cards a:hover { border-color: var(--accent); }
.code-cards .c { font: 700 20px var(--mono); }
.code-cards .k { font: 600 11px var(--mono); color: var(--ink-3); margin-left: 8px; }
.code-cards .n { font-weight: 700; }
.code-cards .s { font-size: .88rem; color: var(--ink-3); }
.c-abend { color: var(--err); } .c-sqlcode { color: #2f6fd1; } .c-cics { color: #7a4fc4; } .c-mq { color: #4d8f22; }
:root[data-theme="dark"] .c-sqlcode, :root[data-theme="green"] .c-sqlcode { color: var(--t0); }
:root[data-theme="dark"] .c-cics, :root[data-theme="green"] .c-cics { color: var(--t2); }
:root[data-theme="dark"] .c-mq, :root[data-theme="green"] .c-mq { color: var(--t5); }

/* assistant */
.ask-box { display: flex; align-items: center; border: 1.5px solid var(--phos); border-radius: 14px; background: var(--con-2); overflow: hidden; max-width: 860px; }
.ask-box span { padding: 0 12px; font: 600 14px var(--mono); color: var(--phos); }
.ask-box input { flex: 1; min-width: 0; min-height: 58px; border: 0; background: transparent; color: #f2fff7; font: 500 18px var(--sans); outline: none; }
.ask-box button { margin-right: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--phos); color: var(--phos-ink); font: 700 14px var(--mono); cursor: pointer; }
.tries { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; font: 500 13px var(--mono); color: var(--con-dim); }
.tries button { background: none; border: 0; color: var(--con-ink-2); cursor: pointer; text-decoration: underline; font: inherit; padding: 0; }
.answers { display: grid; gap: 12px; max-width: 980px; }
.answer { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; }
.answer.best { border: 1.5px solid var(--ink); }
.answer h3 { margin: 0 0 4px; }
.answer p { margin: 0; color: var(--ink-2); }
.answer .best-tag { font: 700 11.5px var(--mono); color: var(--phos-ink); background: var(--phos); border-radius: 999px; padding: 2px 9px; margin-right: 8px; }

/* footer */
.site-foot { background: var(--con-head); color: var(--con-ink-2); padding: 30px 0 36px; font-size: .88rem; margin-top: 30px; }
.site-foot .cols { display: grid; gap: 20px; }
@media (min-width: 820px) { .site-foot .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot h4 { margin: 0 0 8px; font: 600 12px var(--mono); color: var(--phos); letter-spacing: .05em; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.site-foot a { color: var(--con-ink); }
.site-foot .legal { margin-top: 18px; font-size: .78rem; color: var(--con-dim); }
.prose { max-width: 760px; }
.prose li { margin-bottom: .4em; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--phos); color: var(--phos-ink); padding: 8px 16px; border-radius: 999px; font: 600 .9rem var(--mono); z-index: 60; }
.code-list { columns: 3 240px; column-gap: 24px; padding: 0; list-style: none; }

/* mini visuals on tool cards, hero byte map */
.b0 { background: var(--f0); } .b1 { background: var(--f1); } .b2 { background: var(--f2); } .b3 { background: var(--f3); } .b4 { background: var(--f4); } .b5 { background: var(--f5); } .b6 { background: var(--f6); } .b7 { background: var(--f7); } .b8 { background: var(--f8); } .b9 { background: var(--f9); }
.g1 { flex: 1; } .g2 { flex: 2; } .g3 { flex: 3; } .g4 { flex: 4; } .g5 { flex: 5; } .g6 { flex: 6; } .g8 { flex: 8; } .g9 { flex: 9; } .g10 { flex: 10; } .g30 { flex: 30; }
.tx0 { color: var(--t0); } .tx1 { color: var(--t1); } .tx2 { color: var(--t2); } .tx3 { color: var(--t3); } .tx4 { color: var(--t4); } .tx5 { color: var(--t5); } .tx6 { color: var(--t6); } .tx7 { color: var(--t7); } .tx8 { color: var(--t8); } .tx9 { color: var(--t9); }
.txp { color: var(--phos); } .txd { color: var(--con-ink-2); } .txe { color: var(--err-con); }
.card .mini span.gap { background: transparent; }
.card .mini span[class*="tx"] { height: auto; white-space: pre; }
.hero-console .bytemap div { cursor: default; }
.hero-lines { font: 400 14.5px/1.95 var(--mono); margin-top: 14px; }
.hero-lines .flag { color: var(--amber); font-weight: 600; }
.band .cmd.find { margin: 18px 0 0; max-width: 640px; min-width: 0; }
.band .cmd.find input { min-height: 50px; font-size: 19px; }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.code-band .lead { color: var(--con-ink-2); max-width: 820px; margin-top: 12px; font-size: 1.08rem; }
.code-band h1.fam-abend { color: var(--err-con); } .code-band h1.fam-sqlcode { color: var(--t0); } .code-band h1.fam-cics { color: var(--t2); } .code-band h1.fam-mq { color: var(--t5); }
.console textarea.bare { border: 0; border-radius: 0; background: var(--con); color: var(--con-ink); min-height: 440px; display: block; padding: 14px 16px; box-shadow: none; }
.console textarea.bare.short { min-height: 150px; }
.console textarea.bare::placeholder { color: var(--con-faint); }
.hexwrap { margin-top: 16px; overflow-x: auto; }
.sel-line { margin: 12px 0 0; font: 400 13.5px/1.7 var(--mono); color: var(--con-ink-2); }
.sel-line .v { color: #f2fff7; }
.fieldcard.bl0 { border-left-color: var(--f0); } .fieldcard.bl1 { border-left-color: var(--f1); } .fieldcard.bl2 { border-left-color: var(--f2); } .fieldcard.bl3 { border-left-color: var(--f3); } .fieldcard.bl4 { border-left-color: var(--f4); }
.fieldcard.bl5 { border-left-color: var(--f5); } .fieldcard.bl7 { border-left-color: var(--f7); } .fieldcard.bl8 { border-left-color: var(--f8); } .fieldcard.bl9 { border-left-color: var(--f9); }
.btn:disabled { opacity: .4; cursor: default; }
.alert-con p { margin: 0; } .alert-con a { color: var(--amber); }
.panes.two { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.panes.two > * { flex: 1 1 420px; min-width: 0; }
.ask-band .wrap { max-width: 1020px; padding-bottom: 34px; }
.ask-band h1 { margin-bottom: 4px; }
.ask-band .lead { margin-bottom: 18px; }
main .answers { margin: 0 auto; }
:root .ask-band + main .wrap { max-width: 1020px; }
.console .nib .pair { border-color: var(--con-line-2); }
.console .nib .pair span { background: #132019; color: var(--amber); }
.console .nib .pair span.sign { background: #1d2a3d; color: var(--t0); }
.console .nib .pair span.zone { background: var(--con-2); color: var(--con-dim); }
.console .nib .pair span.bad { background: var(--err-con-bg); color: var(--err-con); box-shadow: inset 0 0 0 2px var(--err-con); }
.console .nib small { color: var(--con-dim); }
.console .big-out.txe { color: var(--err-con); }
.console .nibbles { margin: 6px 0 12px; }
.console .track { background: var(--con-2); border-color: var(--con-line-2); }
.con-stats { margin-top: 14px; } .con-stats .stat.dark { background: var(--con-2); }
.console .yearbar div { background: #132019; color: var(--con-dim); }
.console .yearbar div.past { background: var(--accent); color: #eafff3; }
:root[data-theme] .console .yearbar div.past { background: #1f6b4a; }
.console .yearbar div.now { background: var(--amber); color: var(--amber-ink); }
.console .tilegrid { margin: 16px 0 0; }
.console .tilegrid div { background: var(--con-2); border: 1px solid var(--con-line); }
.console .tilegrid dt { color: var(--con-dim); } .console .tilegrid dd { color: var(--amber); }
.bits { margin: 10px 0; } .bits div { color: #fff; white-space: nowrap; overflow: hidden; }
.console .track-label { margin-top: 14px; }
.huge { overflow-wrap: anywhere; }
.track span.gap { background: transparent !important; }
.gen-out { margin: 0; border-radius: 0; background: var(--con); font-size: 14px; line-height: 1.85; padding: 16px; }
.gen-out .cmt { color: var(--con-faint); }
.pill-ok { font: 600 12px var(--mono); color: var(--phos-ink); background: var(--phos); border-radius: 999px; padding: 3px 10px; }
.pill-bad { font: 600 12px var(--mono); color: #fff; background: var(--err); border-radius: 999px; padding: 3px 10px; }
#jg-msgs .small { color: var(--err-con); }
.gen-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.gen-fields .field:first-child, .gen-fields .field:has(textarea), .gen-fields .check { grid-column: 1 / -1; }
details summary { cursor: pointer; margin: 4px 0 10px; }
.stage-cards { margin-bottom: 20px; }
.stage-cards p { margin: 0; font-size: .95rem; }
.stage-cards .label.c1 { color: var(--accent); } .stage-cards .label.c2 { color: var(--f0); } .stage-cards .label.c3 { color: var(--amber-deep); }
.stage-cards pre.card-code { margin: 0; border-radius: 14px; color: var(--amber); font-size: 13px; white-space: pre-wrap; word-break: break-all; }
.stages .s-note { grid-column: 1 / -1; white-space: normal; }
.stages .s-note .note { margin: 0; }
.explain-card { margin-bottom: 12px; }
.btn-row .label { margin: 0; }
.right-auto { margin-left: auto; }
.ans-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ans-head h3 { margin: 0; font-size: 1.15rem; } .ans-head h3 a { color: var(--ink); text-decoration: none; }
.ans-code { font: 700 20px var(--mono); }
.c-tool { color: var(--accent); }
.ans-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 4px; }
.answer.best p:not(.label) { margin-bottom: 12px; }
.small-con { min-height: 40px; font-size: 13px; padding: 0 14px; }
.row-ans { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--ink); }
.row-ans:hover { border-color: var(--accent); }
.row-ans .ans-code { font-size: 16px; min-width: 76px; }
.row-ans b { display: block; } .row-ans small { color: var(--ink-3); font-size: .88rem; }
.filterbar button[data-fam="abend"] { color: var(--err-con); } .filterbar button[data-fam="sqlcode"] { color: var(--t0); } .filterbar button[data-fam="cics"] { color: var(--t2); } .filterbar button[data-fam="mq"] { color: var(--t5); }
.filterbar button[aria-pressed="true"] { color: var(--phos-ink) !important; }
.code-cards a > span:first-child { display: flex; align-items: baseline; }
.ask-box input[type="search"], .cmd input[type="search"] { background: transparent; border: 0; border-radius: 0; box-shadow: none; width: auto; padding: 0 6px; }
.ask-box input[type="search"] { color: #f2fff7; font: 500 18px var(--sans); min-height: 58px; }
.band .cmd.find input[type="search"] { min-height: 50px; font-size: 19px; }
#ds-keys .row, #ds-conds .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 0 8px; align-items: end; border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
#ds-keys .field, #ds-conds .field { margin-bottom: 8px; }
.card-wrap { position: relative; }
.card-wrap .card { height: 100%; }
.card-wrap .pin { position: absolute; top: 22px; right: 22px; border: 0; background: var(--con-2); color: var(--con-ink-2); cursor: pointer; width: 30px; height: 30px; border-radius: 8px; font-size: 15px; line-height: 1; }
.card-wrap .pin:hover, .card-wrap .pin[aria-pressed="true"] { color: var(--amber); }
.card-wrap .mini { padding-right: 44px; }
.vs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 1em; }
.vs > div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.vs .note { margin: 8px 0 0; }
@media (max-width: 760px) {
  .site-head .wrap { gap: 10px 14px; }
  .theme-btn { order: 2; margin-left: auto; }
  .nav { order: 3; flex: 1 1 100%; }
  .stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-strip b { font-size: 24px; }
  #dc-legend-wrap { display: none; }
  .fixes .fx .text { min-width: 0; flex: 1 1 180px; }
  .hero-console .con-head .right { margin-left: 0; }
}
.code-title { min-width: 0; } .code-title .name, .code-cards .n, .ans-head h3, .row-ans b { overflow-wrap: anywhere; min-width: 0; }
.code-title > * { max-width: 100%; }
.steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); overflow-wrap: anywhere; } .causes li, .code-body article p { overflow-wrap: anywhere; }