/* ══════════════════════════════════════════════════════════════════════════════
   brand.css — PROSTO.FILM design layer for Generation Studio.
   SINGLE SOURCE OF BRAND TRUTH. Loaded FIRST on every page, before the page's
   own CSS, so existing rules can be migrated progressively.

   Canon: /data/MLav_Brain/02 Работа/Prosto.Film/BRANDBOOK.md (§1, §2, §5)
     · Ink #1A1714 background — NEVER pure #000
     · Panel #221F1B surfaces · Border #34302A
     · Paper #F4F1EA text — NEVER pure #FFF · Sand #C9C2B4 / Mut #9A938A secondary
     · Prosto Red #E30011 — micro-accent ONLY (wordmark colon, active-nav
       underline, error state). Never a primary button, never a toggle.
     · RAD = 0 — SQUARE CORNERS EVERYWHERE. Rounding exists only in the logo.
     · No shadows, no gradients, no grey fills.
     · Unbounded = headings / buttons / numbers · JetBrains Mono = body, captions,
       timecodes. Self-hosted — no Google Fonts in production.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted variable fonts ───────────────────────────────────────────── */

@font-face {
    font-family: 'Unbounded';
    src: url('/fonts/Unbounded.woff2') format('woff2'),
         url('/fonts/Unbounded.ttf') format('truetype');
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/JetBrainsMono.woff2') format('woff2'),
         url('/fonts/JetBrainsMono.ttf') format('truetype');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

/* ── Brand tokens ─────────────────────────────────────────────────────────── */

:root {
    /* Palette */
    --ink:        #1A1714;   /* body background — warm charcoal, never #000 */
    --ink-lift:   #1E1B17;   /* barely-lifted ink, for nested wells */
    --panel:      #221F1B;   /* surfaces: columns, cards, rows */
    --panel-2:    #2A2622;   /* elevated surface: thumbs, empty media boxes */
    --border:     #34302A;   /* hairlines */
    --border-2:   #4A443B;   /* hover / dashed / focus hairlines */
    --paper:      #F4F1EA;   /* primary text + primary "white" fills */
    --btn-light:  #E8E4DA;   /* light button face (primary action, Ink text) */
    --sand:       #C9C2B4;   /* secondary text */
    --mut:        #9A938A;   /* labels, captions, micro-copy */
    --dim:        #6E655A;   /* placeholders, disabled glyphs */
    --red:        #E30011;   /* MICRO-ACCENT ONLY: wordmark colon, active nav
                                underline, error state. ≤10% of the surface. */

    /* Type families */
    --font-display: 'Unbounded', 'Inter', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Type scale (px — the app chrome is a dense tool UI, mockup-exact) */
    --t-brand:  14px;    /* GENERATION:STUDIO wordmark */
    --t-title:  15px;    /* stage headline (Unbounded 700) */
    --t-head:   12.5px;  /* button / big number (Unbounded 700) */
    --t-body:   11.5px;  /* body, nav, chips, inputs (mono) */
    --t-label:  10.5px;  /* uppercase section labels, captions */
    --t-micro:  9.5px;   /* counters, badges */

    --ls-brand: 0.5px;
    --ls-nav:   1px;
    --ls-label: 1.4px;

    --lh-body:  1.6;
    --lh-tight: 1.45;

    /* Chrome geometry */
    --rad:        0;     /* RAD=0 — kept as a token so nothing re-invents radii */
    --hairline:   1px solid var(--border);
    --header-h:   56px;
}

/* ── RAD=0 reset — GLOBAL, no opt-in ──────────────────────────────────────── */
/* Every page, every element, including nodes that page JS injects with an
   inline style: an author !important declaration outranks a normal inline
   style, so `border-radius:12px` written by JS still lands square.
   The .brand-ui / .gs-header block below is kept for specificity headroom —
   it beats any stray `.foo { border-radius: Npx !important }` in page CSS. */

*,
*::before,
*::after {
    border-radius: 0 !important;
}

.brand-ui,
.brand-ui *,
.brand-ui *::before,
.brand-ui *::after,
.gs-header,
.gs-header *,
.gs-header *::before,
.gs-header *::after {
    border-radius: 0 !important;
}

/* ── Page shell for migrated pages ────────────────────────────────────────── */

body.brand-ui {
    /* Re-point the legacy font vars from style.css onto the brand families.
       Scoped to <body> so unmigrated pages are untouched. */
    --font-main:  var(--font-mono);
    --font-serif: var(--font-display);

    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--t-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}

body.brand-ui h1,
body.brand-ui h2,
body.brand-ui h3,
body.brand-ui h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
}

/* No shadows, no gradients anywhere in migrated chrome. */
body.brand-ui *,
.gs-header * {
    text-shadow: none;
}

/* Headings are Unbounded everywhere, not only on migrated pages. No
   !important — a page that deliberately sets its own family still wins. */
h1, h2, h3, h4 {
    font-family: var(--font-display);
}

/* ── Shared brand primitives ──────────────────────────────────────────────── */

/* Uppercase mono section label — the workhorse caption of the whole UI. */
.brand-label {
    font-family: var(--font-mono);
    font-size: var(--t-label);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--mut);
}

/* Status dot: white = ok, red = error only. Square, 7px. */
.brand-dot {
    width: 7px;
    height: 7px;
    display: inline-block;
    background: var(--mut);
    flex: 0 0 auto;
}

.brand-dot.ok    { background: var(--paper); }
.brand-dot.error { background: var(--red); }


/* ══════════════════════════════════════════════════════════════════════════
   UNIFIED CHROME — one look for the primitives that repeat on every page.
   These rules carry !important on VISUAL properties only (colour, hairline,
   family, caret). Geometry — width, height, padding, flex — is left to each
   page, so nothing re-flows; only the finish is made identical.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Scrollbars ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}
::-webkit-scrollbar-track {
    background: transparent !important;
}
::-webkit-scrollbar-thumb {
    background: var(--border) !important;
    border: none !important;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--border-2) !important;
}
::-webkit-scrollbar-corner {
    background: transparent !important;
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* ── Text selection ───────────────────────────────────────────────────────── */
::selection {
    background: var(--paper);
    color: var(--ink);
}

/* ── Text fields, textareas, selects ──────────────────────────────────────── */
/* Colour + typeface are forced (this is what "нифига не видно" was about).
   Background and border are only a fallback, so inline-editable cells and the
   bare chat/prompt textareas keep their intentionally frameless look. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
textarea,
select {
    color: var(--paper) !important;
    caret-color: var(--paper) !important;
    font-family: var(--font-mono) !important;
    outline: none !important;
    background: var(--ink);
    border: 1px solid var(--border);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
textarea:focus,
select:focus {
    border-color: var(--border-2);
}

input:disabled,
textarea:disabled,
select:disabled {
    color: var(--dim) !important;
}

/* Hints stay dim so they do not read as entered text. */
::placeholder            { color: var(--dim) !important; opacity: 1 !important; }
::-webkit-input-placeholder { color: var(--dim) !important; opacity: 1 !important; }

[data-placeholder]:empty::before { color: var(--dim) !important; }

/* Native select popup — same panel as everything else, never system grey. */
option,
optgroup {
    background: var(--panel);
    color: var(--paper);
}

/* Chrome autofill paints its own pale-yellow field — override it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--paper) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--ink) inset !important;
    caret-color: var(--paper) !important;
}

/* Some pages ship an editable field with no explicit border — never a bare
   transparent box, always the hairline. */
input[readonly],
textarea[readonly] {
    color: var(--sand) !important;
}

/* ── Checkboxes / radios / toggles — SMALL, WHITE, SQUARE. Never red. ─────── */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--paper) !important;
    width: 13px;
    height: 13px;
    cursor: pointer;
}

/* Custom (appearance:none) switches: keep the Paper-on-Ink language. */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    color: var(--ink);
}

/* ── Range sliders — hairline track, square Paper thumb ───────────────────── */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: var(--slider-track-h, 4px);
    background: var(--border);
    border: none;
    outline: none !important;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--paper);
    border: none;
    cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: var(--paper);
    border: none;
    cursor: pointer;
}

/* ── Keyboard focus — a hairline, never a glow ────────────────────────────── */
/* Mariya: never a double frame — the ring is drawn inside the element's own frame, in its text colour:
   light on dark controls, dark on light ones. */
:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: -1px;
}

/* ── Buttons: the interface font, never a system stack ────────────────────── */
button,
[role="button"] {
    font-family: var(--font-mono);
    cursor: pointer;
}
button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

/* ── Tables — hairline grid, mono uppercase head ──────────────────────────── */
table {
    border-collapse: collapse;
}
th {
    font-family: var(--font-mono);
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--mut);
}
td {
    color: var(--sand);
}

/* ── Anything that is still a "no data" line reads as Mut, not near-black ─── */
.empty,
.empty-state,
.brand-empty {
    color: var(--mut);
    font-family: var(--font-mono);
    font-size: var(--t-body);
}

/* Generation stays hidden until the fresh /me navigation policy is known. */
.gs-nav-link[hidden] { display: none; }