/* lacinka — стылі старонкі.
   Токены ўзятыя з дызайн-сістэмы «Bare Metal» (tokens/*.css) без зменаў;
   Google Fonts не падключаем — IBM3270 ляжыць побач у fonts/. */

/* ---------- fonts ---------- */
@font-face{font-family:"IBM3270";font-style:normal;font-weight:400;font-display:swap;src:local("IBM 3270"),url("fonts/IBM3270.woff") format("woff")}

/* ---------- tokens/colors.css ---------- */
:root{
/* base greys — the whole page lives here */
--grey-100:#f0f0f0;--grey-200:#e8e8e8;--grey-300:#dcdcdc;--grey-400:#d4d4d4;--grey-500:#c0c0c0;--grey-600:#a9a9a9;--grey-700:#808080;--grey-800:#696969;--grey-900:#4a4a4a;
--white:#ffffff;--black:#000000;
/* terminal — the only saturated colour in the system */
--green-500:#00ff00;--green-600:#00cc00;--green-700:#009900;--green-900:#003300;
/* borrowed-from-the-era accents, used sparingly for state */
--amber-500:#ffb000;--red-500:#aa0000;--blue-700:#0000ee;--purple-700:#551a8b;

/* semantic */
--surface-page:var(--grey-300);
--surface-panel:var(--grey-300);
--surface-sunken:var(--grey-400);
--surface-raised:var(--grey-200);
--surface-terminal:var(--black);
--text-body:var(--grey-800);
--text-heading:var(--grey-800);
--text-muted:var(--grey-700);
--text-emboss:var(--white);
--text-terminal:var(--green-500);
--link:var(--grey-800);
--link-visited:var(--grey-700);
--link-terminal:var(--green-500);
--border-hard:var(--grey-800);
--border-soft:var(--grey-600);
--border-terminal:var(--green-500);
--bevel-light:var(--white);
--bevel-dark:var(--grey-700);
--focus-ring:var(--green-500);
--chrome-fill:var(--grey-400);
--chrome-fill-hover:var(--grey-200);
--chrome-bevel:var(--grey-500);
--table-head:var(--grey-500);
--table-row-alt:var(--grey-400);
--titlebar-bg:var(--grey-700);
--titlebar-fg:var(--white);
--scrim:rgba(0,0,0,.35);
--status-ok:var(--green-700);
--status-warn:var(--amber-500);
--status-error:var(--red-500);
}

/* ---------- tokens/typography.css ---------- */
:root{
--font-ui:"Tahoma","Verdana","Arial",sans-serif;
--font-mono:"IBM3270","IBM Plex Mono","Courier New",Courier,monospace;

/* sized for reading long text; --font-size-body-lg is the oversized intro/hero size */
--font-size-body-lg:26px;
--font-size-body:20px;
--font-size-body-sm:17px;
--font-size-h1:34px;
--font-size-h2:27px;
--font-size-h3:22px;
--font-size-ui:16px;      /* controls, terminal, code */
--font-size-ui-sm:13px;
--font-size-caption:15px;

--line-height-body:1.5;
--line-height-tight:1.2;
--line-height-mono:1.4;

--font-weight-normal:400;
--font-weight-bold:700;
--letter-spacing-mono:0.02em;
--letter-spacing-caps:0.08em;

/* the signature: 1px white emboss under every grey glyph */
--text-shadow-emboss:1px 1px 0 var(--white);
--text-shadow-none:none;
}

/* ---------- tokens/spacing.css ---------- */
:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-8:48px;--space-10:64px;
--content-max:1500px;   /* .centered */
--measure:34em;         /* comfortable text column */
--control-pad-y:5px;--control-pad-x:8px;
}

/* ---------- tokens/borders.css ---------- */
:root{
--radius-0:0px;--radius-1:2px;--radius-2:5px;   /* 5px: terminal controls, scrollbar thumb */
--border-width:1px;--border-width-2:2px;
--border-terminal-1:1px solid var(--green-500);
--border-hairline:1px solid var(--grey-600);
--border-rule:1px solid var(--grey-700);
--border-groove:2px groove var(--grey-500);
--border-inset:2px inset var(--grey-500);
--border-outset:2px outset var(--grey-500);
}

/* ---------- tokens/effects.css ---------- */
:root{
/* no soft/blurred drop shadows anywhere — bevels do the work */
--bevel-out:inset -1px -1px 0 var(--bevel-dark), inset 1px 1px 0 var(--bevel-light);
--bevel-in:inset 1px 1px 0 var(--bevel-dark), inset -1px -1px 0 var(--bevel-light);
--glow-terminal:0 0 6px rgba(0,255,0,.45);
--scanline:repeating-linear-gradient(to bottom,rgba(0,255,0,.045) 0 1px,transparent 1px 3px);
--dither:repeating-linear-gradient(45deg,rgba(0,0,0,.03) 0 1px,transparent 1px 3px);
--duration-blink:0.7s;
--duration-fast:0ms;   /* the era had no transitions */
--easing-step:steps(1,end);
}
@keyframes blink{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

/* ---------- tokens/base.css ---------- */
body{background-color:var(--surface-page);color:var(--text-body);font-family:var(--font-ui);font-size:var(--font-size-body);line-height:var(--line-height-body);text-shadow:var(--text-shadow-emboss);margin:0}
h1,h2,h3,h4,h5,h6{color:var(--text-heading);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);margin:0 0 var(--space-4)}
h1{font-size:var(--font-size-h1)}h2{font-size:var(--font-size-h2)}h3{font-size:var(--font-size-h3)}
p{margin:0 0 var(--space-5);text-wrap:pretty}
a{color:var(--link);text-decoration:underline}
a:visited{color:var(--link-visited)}
a:hover{color:var(--text-heading);text-decoration:underline}
hr{border:0;border-top:var(--border-rule);margin:var(--space-5) 0}
code,pre,kbd,samp{font-family:var(--font-mono);font-size:var(--font-size-ui);text-shadow:none}
input,textarea,button,select{background-color:var(--surface-terminal);color:var(--text-terminal);font-family:var(--font-mono);font-size:var(--font-size-ui);border:var(--border-terminal-1);border-radius:var(--radius-2);padding:var(--control-pad-y) var(--control-pad-x);text-shadow:none}
input:focus,textarea:focus,button:focus,select:focus{outline:none;border-color:var(--green-500);box-shadow:var(--glow-terminal)}
button:hover{color:var(--green-600);border-color:var(--green-600)}
button:active{color:var(--green-700);border-color:var(--green-700)}
::-webkit-scrollbar{width:10px;background-color:var(--black)}
::-webkit-scrollbar-thumb{background-color:var(--green-500);border-radius:var(--radius-2)}
::-webkit-scrollbar-thumb:hover{background-color:var(--green-700)}
::selection{background:var(--green-500);color:var(--black);text-shadow:none}
.centered{max-width:var(--content-max);margin:0 auto}
.terminal-text:last-child:after{content:'_';display:inline-block;animation:blink var(--duration-blink) infinite}

/* ---------- tokens/theme-dark.css ---------- */
/* Dark theme — set data-theme="dark" on <html> or any wrapper.
   Only semantic aliases are re-pointed; base greys keep their values.
   The grey page inverts toward the terminal; the emboss flips from white to black. */
[data-theme="dark"]{
--surface-page:#121212;
--surface-panel:#1b1b1b;
--surface-sunken:#0d0d0d;
--surface-raised:#242424;
--surface-terminal:#000000;
--text-body:#9a9a9a;
--text-heading:#c0c0c0;
--text-muted:#6e6e6e;
--text-emboss:#000000;
--text-terminal:var(--green-500);
--link:#b0b0b0;
--link-visited:#8a8a8a;
--border-hard:#5a5a5a;
--border-soft:#3a3a3a;
--bevel-light:#3f3f3f;
--bevel-dark:#000000;
--chrome-fill:#242424;
--chrome-fill-hover:#2f2f2f;
--chrome-bevel:#3f3f3f;
--table-head:#2a2a2a;
--table-row-alt:#1b1b1b;
--titlebar-bg:#3a3a3a;
--titlebar-fg:#d0d0d0;
--scrim:rgba(0,0,0,.6);
--status-ok:var(--green-600);
--status-warn:var(--amber-500);
--status-error:#ff5555;
/* the signature emboss becomes a black underhang on dark grey */
--text-shadow-emboss:1px 1px 0 #000000;
/* bevel borders need the darker chrome greys */
--border-hairline:1px solid #3a3a3a;
--border-rule:1px solid #4a4a4a;
--border-groove:2px groove #3f3f3f;
--border-inset:2px inset #3f3f3f;
--border-outset:2px outset #3f3f3f;
--dither:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
}

/* =========================================================
   Кампаненты старонкі — перанос React-прымітываў DS у класы
   ========================================================= */

html{background:var(--surface-page);color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}

/* PageShell */
.shell{min-height:100vh;padding:var(--space-8);background:var(--surface-page)}
.shell__inner{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-6)}

/* NavBar */
.nav{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;border-bottom:var(--border-rule);padding-bottom:var(--space-3)}
.nav__brand{font-family:var(--font-mono);font-size:var(--font-size-h3);font-weight:700;color:var(--text-heading);text-decoration:none;text-shadow:var(--text-shadow-emboss)}
.nav__brand:hover{text-decoration:underline}
.nav__items{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap}
.nav__items a{font-size:var(--font-size-body-sm)}

/* Switch — DIP-пераключальнік ON|OFF */
.switch{display:inline-flex;align-items:center;gap:var(--space-3);cursor:pointer;font-size:var(--font-size-body-sm);color:var(--text-body);background:none;border:0;padding:0;text-shadow:var(--text-shadow-emboss);font-family:var(--font-ui)}
.switch:hover,.switch:active{color:var(--text-body);border:0}
.switch:focus{box-shadow:none}
.switch:focus-visible .switch__cells{box-shadow:var(--glow-terminal)}
.switch__cells{display:inline-flex;border:1px solid var(--green-500);border-radius:var(--radius-2);overflow:hidden}
.switch__cell{font-family:var(--font-mono);font-size:var(--font-size-ui-sm);letter-spacing:var(--letter-spacing-caps);padding:3px 8px;background:var(--surface-terminal);color:var(--grey-700);text-shadow:none}
.switch__cell.is-on{background:var(--green-500);color:var(--black)}

/* SectionHeading */
.heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);border-bottom:var(--border-rule);padding-bottom:var(--space-2);margin-bottom:var(--space-4)}
.heading h1{margin:0}
.heading__meta{font-family:var(--font-mono);font-size:var(--font-size-ui);color:var(--text-muted);text-shadow:none;white-space:nowrap}
.lead{font-size:var(--font-size-body-lg);line-height:1.45;max-width:var(--measure);margin:0}

/* Form: Textarea / Select / Button */
.form{display:flex;flex-direction:column;gap:var(--space-4)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field__label{font-size:var(--font-size-body-sm);color:var(--text-body);text-shadow:var(--text-shadow-emboss)}
.field textarea{width:100%;line-height:var(--line-height-mono);resize:vertical;min-height:8em}
textarea::placeholder{color:var(--green-700);opacity:1}
.hint{font-family:var(--font-mono);font-size:var(--font-size-ui-sm);color:var(--text-muted);text-shadow:none}
.controls{display:flex;align-items:flex-end;gap:var(--space-4);flex-wrap:wrap}
.controls .field{flex:1 1 220px}
.controls select{width:100%}
.btn{cursor:pointer;line-height:1.2;letter-spacing:var(--letter-spacing-mono);display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--control-pad-y) var(--control-pad-x)}
.btn:hover{color:var(--text-terminal);border-color:var(--green-500);box-shadow:var(--glow-terminal)}
.btn:active{color:var(--green-700);border-color:var(--green-700);box-shadow:none}
.btn:disabled{color:var(--grey-700);border-color:var(--grey-700);cursor:default;opacity:.7;box-shadow:none}
.btn--secondary{background:var(--chrome-fill);color:var(--text-body);border:var(--border-outset);border-radius:var(--radius-0);font-family:var(--font-ui);text-shadow:var(--text-shadow-emboss);letter-spacing:0}
.btn--secondary:hover{background:var(--chrome-fill-hover);color:var(--text-body);border:var(--border-outset);box-shadow:none}
.btn--secondary:active{border:var(--border-inset);color:var(--text-body)}
.btn--secondary:focus{box-shadow:var(--glow-terminal);border:var(--border-outset)}
.btn--secondary:disabled{color:var(--text-muted);border:var(--border-outset)}

/* Terminal */
.terminal{background:var(--surface-terminal);border:1px solid var(--green-500);border-radius:var(--radius-2);padding:var(--space-3);font-family:var(--font-mono);font-size:var(--font-size-ui);line-height:var(--line-height-mono);color:var(--text-terminal);text-shadow:none;position:relative;overflow:hidden}
.terminal__title{color:var(--green-700);border-bottom:1px dashed var(--green-700);padding-bottom:var(--space-2);margin-bottom:var(--space-2);white-space:pre-wrap;word-break:break-word}
.terminal__out{white-space:pre-wrap;word-break:break-word;color:var(--green-600);min-height:calc(var(--line-height-mono) * 3em)}
.terminal__out:empty::before{content:"";}
.caret{display:inline-block;color:var(--green-500);animation:blink var(--duration-blink) infinite}
.terminal__scan{position:absolute;inset:0;background:var(--scanline);pointer-events:none}

/* Статус + дзеянні пад тэрміналам */
.outbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.status{font-family:var(--font-mono);font-size:var(--font-size-ui-sm);letter-spacing:var(--letter-spacing-mono);color:var(--text-muted);text-shadow:none;min-height:1.4em}
.status.is-ok{color:var(--status-ok)}
.status.is-error{color:var(--status-error)}
.status.is-busy{color:var(--text-muted)}

/* Notice — памылка API */
.notice{display:flex;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--status-error);background:var(--chrome-fill);color:var(--status-error);text-shadow:var(--text-shadow-emboss);font-size:var(--font-size-body-sm)}
.notice__glyph{font-family:var(--font-mono);font-size:var(--font-size-ui);text-shadow:none;white-space:nowrap}
.notice[hidden]{display:none}

/* Footer */
.footer{border-top:var(--border-rule);padding-top:var(--space-4);margin-top:var(--space-4);display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;font-family:var(--font-mono);font-size:var(--font-size-ui);color:var(--text-muted);text-shadow:none}
.footer a{color:var(--text-muted)}

@media (max-width:640px){
  .shell{padding:var(--space-4)}
  .shell__inner{gap:var(--space-5)}
  .lead{font-size:var(--font-size-body)}
  .heading{flex-direction:column;align-items:flex-start;gap:var(--space-1)}
  .heading__meta{white-space:normal}
  .controls .btn{flex:1 1 auto;justify-content:center}
}

/* =========================================================
   Кантэнт пад інструментам: Prose, DataTable, CodeBlock, FAQ
   ========================================================= */
.lang{display:inline-flex;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--font-size-ui);text-shadow:none}
.lang a{color:var(--text-muted);text-decoration:none}
.lang a:hover{text-decoration:underline}
.lang a.is-active{color:var(--text-heading);font-weight:700;text-decoration:underline}
.lang span{color:var(--text-muted)}

.doc{display:flex;flex-direction:column;gap:var(--space-8);margin-top:var(--space-4)}
.doc section>h2{font-size:var(--font-size-h2);border-bottom:var(--border-rule);padding-bottom:var(--space-2);margin-bottom:var(--space-5)}
.doc section>h3{font-size:var(--font-size-h3);margin:var(--space-5) 0 var(--space-3)}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 var(--space-4)}
.prose p:last-child{margin-bottom:0}
.prose ul{margin:0 0 var(--space-4);padding-left:1.2em}
.prose li{margin-bottom:var(--space-2)}
.prose code,.prose kbd{font-family:var(--font-mono);font-size:0.9em;background:var(--surface-sunken);color:var(--text-heading);border:var(--border-hairline);padding:0 4px;text-shadow:none;white-space:nowrap}

/* DataTable */
.table-wrap{overflow-x:auto;border:var(--border-hairline);background:var(--surface-panel)}
table.dt{border-collapse:collapse;width:100%;font-size:var(--font-size-body-sm);text-shadow:var(--text-shadow-emboss)}
table.dt th{font-family:var(--font-mono);font-size:var(--font-size-ui-sm);letter-spacing:var(--letter-spacing-caps);text-transform:uppercase;font-weight:400;text-align:left;background:var(--table-head);color:var(--text-heading);text-shadow:none;padding:var(--space-2) var(--space-3);border-bottom:var(--border-rule);white-space:nowrap}
table.dt td{padding:var(--space-2) var(--space-3);border-bottom:var(--border-hairline);vertical-align:top}
table.dt tbody tr:nth-child(even) td{background:var(--table-row-alt)}
table.dt tbody tr:last-child td{border-bottom:0}
table.dt td.m,table.dt th.m{font-family:var(--font-mono);font-size:var(--font-size-ui);text-shadow:none;white-space:nowrap}
table.dt td.cy{font-weight:700}
table.dt td.note{color:var(--text-muted);font-size:var(--font-size-caption)}

/* CodeBlock */
pre.code{background:var(--surface-terminal);color:var(--text-terminal);border:1px solid var(--green-500);border-radius:var(--radius-2);padding:var(--space-3);margin:0 0 var(--space-4);font-family:var(--font-mono);font-size:var(--font-size-ui);line-height:var(--line-height-mono);text-shadow:none;overflow-x:auto;white-space:pre}
pre.code .c{color:var(--green-700)}
pre.code .o{color:var(--green-600)}

/* FAQ */
.faq{max-width:var(--measure);margin:0}
.faq dt{font-weight:700;color:var(--text-heading);margin:0 0 var(--space-2)}
.faq dt::before{content:"> ";font-family:var(--font-mono);color:var(--text-muted);text-shadow:none}
.faq dd{margin:0 0 var(--space-5)}
.faq dd:last-child{margin-bottom:0}

/* Prose Tag row (як у DS Tag) */
.tags{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}
.tag{font-family:var(--font-mono);font-size:var(--font-size-ui-sm);background:var(--surface-sunken);border:var(--border-hairline);padding:2px 6px;color:var(--text-body);text-shadow:none;text-decoration:none}
.tag::before{content:"["}.tag::after{content:"]"}
.tag:hover{background:var(--chrome-fill-hover)}