/* ============================================================================
   kamenistiak.sk — Design system v2
   Locked 2026-05-25. Authoritative spec: vault/decisions/ui_design_decision_rules.md

   v2 (per Andrej, IMG_0366 wireframe + verbal spec):
   - Brand + username live as plain floating text, NOT in a panel.
   - Horizontal nav is ONE connected strip with a fade-from-top mask + only
     squircled bottom corners. No top edge. No surrounding panel.
   - Left rail items are independent, no panel; each fades from top, has only
     a bottom-right squircle, and extends off the left edge of the page.
   - APP NAME badge is LARGE and overlaps left of APP PLACE.
   - APP PLACE has a 2-3× right margin and ~2× top gap to the nav strip.
   - Bottom "Ask me anything" is narrower (~APP PLACE width), slimmer,
     fades from top (no edge).
   ============================================================================ */

:root {
    /* --- Fiery Ocean palette ------------------------------------------------ */
    --color-molten-lava:  #780000;
    --color-flag-red:     #c1121f;
    --color-papaya-whip:  #fdf0d5;
    --color-deep-space:   #003049;
    --color-steel-blue:   #669bbc;
    --color-white:        #ffffff;
    --color-black:        #0b0b0d;

    /* --- v9 single squircle radius — all corner curves use the SAME
       perceptual radius across the app (Andrej #2G). Apple-ish 22 px reads
       as cleanly-rounded on every surface from chip to canvas. */
    --r-corner:          22px;
    --r-xs:              22px;
    --r-s:               22px;
    --r-m:               22px;
    --r-l:               22px;
    --r-xl:              22px;
    --r-xxl:             22px;

    /* --- v9 blur ladder (Andrej #2B+C+D)
       - bg blur 50 % less (5 → 2 px)
       - button bottom band = full blur ("X") — heavy enough to soften but
         light enough that shapes are visible through the glass
       - button TOP edge fades to X-75 % (~ 25 % of X)
       - ::before extension above each button continues at the X-75 % level
         and dissipates into the bg-photo blur ("like smoke") */
    --blur-bg:           2px;       /* was 5; halved per Andrej */
    --blur-button-bot:   34px;      /* "X" — heavy on the bottom band */
    --blur-button-top:   9px;       /* X − 75 % — smoke into the void */
    --blur-button-hover: 44px;
    /* Legacy aliases so older selectors still resolve */
    --blur-panel:        var(--blur-button-bot);
    --blur-button:       var(--blur-button-bot);

    /* --- Typography -------------------------------------------------------- */
    --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
    --font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Inter, system-ui, sans-serif;
    --font-serif:   "New York", "Times New Roman", Georgia, serif;
    --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* --- Motion ------------------------------------------------------------- */
    --ease-apple: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast:   140ms;
    --dur:        220ms;

    /* --- Frame geometry (v5: nav -25% more, rail/app spacing fixed) --- */
    --brand-row-h:     76px;
    --brand-font:      32px;
    --nav-strip-h:     35px;       /* v5: -25% from 46 */
    --nav-gap:         60px;
    --frame-top-pad:   calc(var(--brand-row-h) + var(--nav-strip-h) + var(--nav-gap));

    --rail-w:          150px;
    /* v17 (Andrej): rail is position:fixed now — no need for the
       'offscreen' overhang trick. Set to 0 so the rail-item width is
       fully on-screen and labels can sit a fixed small number of px
       from viewport-left. */
    --rail-offscreen:  0px;
    /* v7: rail-gap now responsive (40 px + 5 vw) so APP PLACE's left edge
       sits ~5 % of viewport further right than before. */
    --rail-gap:        calc(20px + 2vw);    /* v18: smaller gap, APP PLACE extends ~50 px further left */
    --app-margin-r:    88px;
    --app-margin-l:    calc(var(--rail-w) + var(--rail-gap));

    --app-name-h:      56px;
    --app-name-overhang: 24px;     /* v6: less overhang so badge sits more to the right */

    /* v16 — Andrej still saw the agentic bar flush with viewport-bottom in
       the last screenshot. Lift hard, and pad the BODY itself so there's
       a guaranteed bottom gap regardless of content height. */
    --agentic-h:        26px;
    --agentic-gap:      14px;
    --agentic-bottom:   50px;        /* big clear gap to viewport-bottom */
    --agentic-margin-x: calc(var(--app-margin-l) + var(--agentic-gap));
    --agentic-margin-r: calc(var(--app-margin-r) + var(--agentic-gap));

    /* --- Edges (v5: stroked SVG outline drawn by squircle.js → black edge
       follows the actual squircle curve at corners, not a straight line). */
    --edge-color: rgba(0, 0, 0, 0.55);

    /* --- Surface tints (v4: ZERO tint — surfaces are transparent + blurred) */
    --tint-deep-strong:   rgba(0, 0, 0, 0);         /* fully transparent */
    --tint-deep-button:   rgba(0, 0, 0, 0);
    --tint-deep-hover:    rgba(255, 255, 255, 0.08);
    --tint-papaya-canvas: rgba(253, 240, 213, 0.83);   /* v6: −5 % more transparent */
    --color-app-text:     #000000;                     /* v9 #4: pure black per Andrej */

    /* --- Fade masks (v8: very sharp at top so the heavy → soft transition
       is unmistakable on any element height) --------------------------- */
    --fade-from-top:      linear-gradient(to bottom,
                            transparent 0%, transparent 4%,
                            rgba(0,0,0,0.45) 18%, rgba(0,0,0,0.85) 35%,
                            black 55%, black 100%);
    --fade-from-top-soft: linear-gradient(to bottom,
                            transparent 0%, transparent 6%,
                            rgba(0,0,0,0.40) 22%, rgba(0,0,0,0.80) 40%,
                            black 60%, black 100%);
}

/* ============================================================================
   Reset + base
   ============================================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    /* v16: guarantee there's ALWAYS empty room below the last in-flow
       element, even when content is short and the agentic bar (fixed)
       would otherwise sit right under it. */
    padding-bottom: calc(var(--agentic-h) + var(--agentic-bottom) + 16px);
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-papaya-whip);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

caption, figcaption, time, code, kbd, samp,
.brief-body blockquote,
.muted {
    font-family: var(--font-serif);
    font-style: italic;
}

h1, h2, h3, h4, h5, h6,
.title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-papaya-whip);
    margin: 0;
}
h1, .title-xl { font-size: 32px; letter-spacing: -0.03em; }
h2, .title-l  { font-size: 22px; }
h3, .title-m  { font-size: 17px; }

a { color: inherit; text-decoration: none; }

/* ============================================================================
   Background — full-viewport blurred photograph, random per page load
   ============================================================================ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(135deg,
            var(--color-deep-space) 0%,
            var(--color-steel-blue) 28%,
            var(--color-papaya-whip) 55%,
            var(--color-flag-red) 80%,
            var(--color-molten-lava) 100%);
    background-size: cover;
    background-attachment: fixed;
}
.bg-photo {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(var(--blur-bg)) saturate(115%);
    transform: scale(1.06);
    opacity: 1;
}

/* ============================================================================
   Top tier — brand + username, NO panel, plain floating text
   ============================================================================ */
.brand-row {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--brand-row-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* v8: KAMENISTIAK at literal 0 left padding — flush with viewport edge. */
    padding: 0 18px 0 0;
    z-index: 110;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease-apple), transform var(--dur) var(--ease-apple);
}
/* v9 #1: KAMENISTIAK shifted right off the page edge */
.brand-row .brand { padding-left: 32px; margin-left: 0; }
.brand-row.is-collapsed {
    opacity: 0;
    transform: translateY(-100%);
}
.brand-row > * { pointer-events: auto; }

.brand,
.user-menu__trigger {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--brand-font);
    letter-spacing: 0.14em;
    color: var(--color-papaya-whip);
    text-decoration: none;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
}
.user-menu__trigger {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px -8px;
    color: var(--color-papaya-whip);
    transition: color var(--dur-fast) var(--ease-apple);
}
.user-menu__trigger:hover { color: var(--color-flag-red); }

.user-menu { position: relative; }
.user-menu__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    padding: 8px;
    background: var(--tint-deep-strong);
    backdrop-filter: blur(var(--blur-panel)) saturate(170%);
    -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(170%);
    display: none;
    z-index: 200;
}
.user-menu.is-open .user-menu__dropdown { display: block; }
.user-menu__dropdown a {
    display: block;
    padding: 8px 14px;
    color: var(--color-papaya-whip);
    font-family: var(--font-text);
    font-size: 14px;
    letter-spacing: 0.04em;
    transition: background var(--dur-fast) var(--ease-apple), color var(--dur-fast) var(--ease-apple);
}
.user-menu__dropdown a:hover {
    background: rgba(193, 18, 31, 0.18);
    color: var(--color-flag-red);
}

/* ============================================================================
   Horizontal nav v4:
   - Strip sits OVER the APP PLACE column (left=app-margin-l, right=app-margin-r).
   - Each button is fully transparent with HEAVY backdrop-filter blur.
   - Thin black edge ONLY on bottom + left + right (no top edge — the blur
     transition is the wavy red line).
   - Mask-image fades the top so the borders fade with it.
   - On scroll-down the brand row collapses, and the strip slides UP to top:8px
     via `body.is-scrolled` so it docks at the page edge.
   ============================================================================ */
.nav-strip {
    position: fixed;
    top: var(--brand-row-h);
    /* v8: full viewport width per Andrej (#4). Was constrained to APP PLACE
       column; now spans edge-to-edge. */
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--nav-strip-h);
    display: flex;
    align-items: stretch;
    gap: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: top var(--dur) var(--ease-apple);
}
body.is-scrolled .nav-strip { top: 0; }

/* v9 #2B/C/D — REAL gradient blur on every button.
   - .nav-strip__btn IS the bottom band (heavy backdrop blur = X = 34 px).
   - mask-image fades it from solid-at-bottom to nearly-transparent-at-top,
     so the top edge of the button is barely there.
   - ::before is the "smoke" — sits ABOVE the button, blurred at X−75 %
     (≈ 9 px), fading to transparent at the top. Continuous gradient from
     heavy → light → bg.
   Result: real backdrop-filter (shapes show through), no fake hard edge,
   smoke continues into the empty space above. */
.nav-strip__btn {
    flex: 1;
    height: 100%;
    padding: 14px 14px 9px;
    background: transparent;
    backdrop-filter: blur(var(--blur-button-bot)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-button-bot)) saturate(150%);
    /* Gradient mask: bottom 20 % is solid, top 80 % fades. Andrej's spec:
       "at 80 % height, button starts to transition from X down". */
    mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.30) 22%,
        rgba(0, 0, 0, 0.65) 50%,
        rgba(0, 0, 0, 0.92) 80%,
        black 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.10) 0%,
        rgba(0, 0, 0, 0.30) 22%,
        rgba(0, 0, 0, 0.65) 50%,
        rgba(0, 0, 0, 0.92) 80%,
        black 100%);
    border: 0;
    border-radius: 0;
    color: var(--color-papaya-whip);
    font-family: var(--font-text);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    /* v12: same readability technique as KAMENISTIAK title */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.5);
    transition: color var(--dur-fast) var(--ease-apple);
    position: relative;
}
/* The "smoke" extension above the button */
.nav-strip__btn::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0; right: 0;
    height: 70%;
    backdrop-filter: blur(var(--blur-button-top)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--blur-button-top)) saturate(130%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    pointer-events: none;
}
.nav-strip__btn:first-child { border-bottom-left-radius:  var(--r-l); }
.nav-strip__btn:last-child  { border-bottom-right-radius: var(--r-l); }
.nav-strip__btn:hover { color: var(--color-papaya-whip); }
.nav-strip__btn.is-active {
    color: var(--color-flag-red);
    text-shadow: 0 1px 8px rgba(193, 18, 31, 0.45);
}

/* ============================================================================
   Layout — rail column extends past the page-left edge
   ============================================================================ */
.layout {
    display: grid;
    grid-template-columns: var(--rail-w) 1fr;
    column-gap: var(--rail-gap);
    padding: var(--frame-top-pad) var(--app-margin-r) calc(var(--agentic-h) + 32px) 0;
    min-height: 100vh;
    position: relative;
}
/* v5: no-rail layouts keep the SAME left padding so APP PLACE width never
   changes when you flip between top-tier apps. The rail column is just
   empty space when not present. */
.layout--no-rail {
    grid-template-columns: var(--rail-w) 1fr;
}
.layout--no-rail .rail { visibility: hidden; }

@media (max-width: 880px) {
    .layout {
        grid-template-columns: 1fr;
        padding: var(--frame-top-pad) 16px calc(var(--agentic-h) + 32px) 16px;
    }
    .rail { display: none; }
}

/* ============================================================================
   Left rail — NO panel; each item is a free-floating fade-from-top rectangle
   that extends past the page-left edge. Only bottom-right corner is squircled.
   ============================================================================ */
/* v13/v14: position: fixed — rail doesn't move on scroll. v14: height auto
   (just hugs the 10 buttons) so the rail doesn't sit on top of the site
   footer at the bottom of the page. */
.rail {
    position: fixed;
    top: var(--frame-top-pad);
    left: 0;
    width: calc(var(--rail-w) + var(--rail-offscreen));
    max-height: calc(100vh - var(--frame-top-pad) - var(--agentic-h) - 24px);
    display: flex;
    flex-direction: column;
    gap: 10px;                       /* v15 (Andrej): a little more air between buttons */
    background: transparent;
    padding: 0;
    overflow: visible;
    z-index: 40;
}
/* v19 (Andrej "zarovnat podla laveho okraja"): rail labels really flush
   at the screen edge — padding-left 14 → 4 px. The label inside the
   flex container is first child + text-align:left so every label starts
   at x = 4 px from the viewport-left, perfectly aligned vertically. */
.rail__item {
    width: calc(var(--rail-w) + var(--rail-offscreen));
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 8px 0 4px;
    border-bottom-right-radius: var(--r-corner);
    background: transparent;
    backdrop-filter: blur(var(--blur-button-bot)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-button-bot)) saturate(150%);
    /* v12: solid by 30 % so the visual centre of the button IS solid
       and centred content reads as truly centred (was 55 %). */
    mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.40) 12%,
        black 30%,
        black 100%);
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.40) 12%,
        black 30%,
        black 100%);
    border: 0;
    color: var(--color-papaya-whip);
    font-family: var(--font-text);
    /* v17 — typography mirrors .nav-strip__btn so vertical + horizontal
       buttons read as one family. */
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-apple);
    position: relative;
    line-height: 1;
}
.rail__item .label { line-height: 1; }
.rail__item .icon, .rail__item .icon--img { display: block; }
/* v9 #2D: smoke extension ABOVE each rail item — lighter blur, fades out. */
.rail__item::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0; right: 0;
    height: 70%;
    backdrop-filter: blur(var(--blur-button-top)) saturate(130%);
    -webkit-backdrop-filter: blur(var(--blur-button-top)) saturate(130%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    pointer-events: none;
    position: relative;
}
.rail__item .label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    /* v12: same readability technique as KAMENISTIAK title */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* v18: icons recentred in the PNGs themselves (see scripts/recenter_rail_icons.py)
   so we can drop the optical-centring hacks. Pure geometric centring now. */
.rail__item .icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
    display: block;
    align-self: center;
}
.rail__item .icon--img {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
    display: block;
    align-self: center;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
.rail__item:hover { color: var(--color-flag-red); }
.rail__item.is-active {
    color: var(--color-flag-red);
    text-shadow: 0 1px 8px rgba(193, 18, 31, 0.45);
}

/* ============================================================================
   APP PLACE — the canvas. Larger right margin (set in .layout).
   APP NAME badge is sibling of .app-place (avoids clip-path clipping) and
   hangs left over the APP PLACE / rail boundary.
   ============================================================================ */
.app-pane {
    grid-column: 2;
    position: relative;
}
.app-place {
    background: var(--tint-papaya-canvas);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--color-app-text);
    /* v11: smaller top padding because the badge now lives inside the
       canvas at top:22 — content starts below it. */
    padding: 68px 44px 44px;
    min-height: calc(100vh - var(--frame-top-pad) - var(--agentic-h) - 24px);
}
/* v6: inside APP PLACE → always dark text for readability */
.app-place h1, .app-place h2, .app-place h3, .app-place h4, .app-place h5, .app-place h6,
.app-place .title,
.app-place p, .app-place li, .app-place td, .app-place span, .app-place label {
    color: var(--color-app-text);
}

/* v11 (Andrej image copy 17) — badge sits INSIDE the papaya canvas in the
   top-left, like a section title. Dark text on the papaya surface; no
   backdrop blur (the canvas already has one); no extra background. */
.app-name-badge {
    position: absolute;
    top: 22px;
    left: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    min-width: 0;
    height: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--color-app-text);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -0.015em;
    text-shadow: none;
    z-index: 5;
}

/* ============================================================================
   Site footer — full-width horizontal section that sits ABOVE the agentic
   bar with symmetric margins (same px on left / right / bottom relative
   to APP PLACE) and a big gap above so it feels separate from the canvas.
   ============================================================================ */
.site-footer {
    /* v18 (Andrej): footer's left + right tied to APP PLACE bounds so the
       disclosure strip lines up exactly under the canvas (no overshoot,
       no undershoot). Bottom still clears the agentic bar by 80 px. */
    margin: 80px var(--app-margin-r) calc(80px + var(--agentic-h) + var(--agentic-bottom)) var(--app-margin-l);
    /* 3× taller than v13. */
    min-height: 180px;
    padding: 60px 36px 32px;
    background: transparent;
    backdrop-filter: blur(var(--blur-panel)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(150%);
    /* OPEN superellipse: top corners SHARP, bottom corners squircled. */
    border-radius: 0 0 var(--r-corner) var(--r-corner);
    /* Top edge fades into the background (no visible top line). */
    mask-image: var(--fade-from-top);
    -webkit-mask-image: var(--fade-from-top);
    color: var(--color-papaya-whip);
    font-family: var(--font-text);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: space-between;
    align-items: flex-end;   /* content sits in the bottom solid band of the fade */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.5);
}
.site-footer a { color: var(--color-papaya-whip); text-decoration: none; transition: color var(--dur-fast) var(--ease-apple); }
.site-footer a:hover { color: var(--color-flag-red); }
.site-footer__group { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer .muted { color: rgba(253, 240, 213, 0.5); font-family: var(--font-serif); font-style: italic; text-transform: none; letter-spacing: 0.02em; }

/* ============================================================================
   Agentic bottom bar
   ============================================================================ */
.agentic {
    position: fixed;
    bottom: 0;
    left: var(--agentic-margin-x);
    right: var(--agentic-margin-r);
    z-index: 100;
    pointer-events: none;
}
.agentic__inner {
    margin: 0 0 var(--agentic-bottom) 0;
    min-height: var(--agentic-h);
    display: flex;
    flex-direction: column;
    gap: 0;
    pointer-events: auto;
    transition: min-height var(--dur) var(--ease-apple);
}
.agentic__inner.is-expanded { min-height: calc(var(--agentic-h) * 4); }
.agentic__row {
    display: flex;
    align-items: stretch;
    gap: var(--agentic-gap);
    height: var(--agentic-h);
}
.agentic__field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    background: transparent;
    backdrop-filter: blur(var(--blur-panel)) saturate(170%);
    -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(170%);
    mask-image: var(--fade-from-top-soft);
    -webkit-mask-image: var(--fade-from-top-soft);
    border: 0;
    /* v13: border-radius (NOT clip-path) — clip-path was producing a thin
       black anti-aliasing edge on the agentic bar. */
    border-radius: 0 0 var(--r-corner) var(--r-corner);
}
.agentic__context {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11px;
    color: rgba(253, 240, 213, 0.65);
    margin-right: 2px;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.agentic__input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--color-papaya-whip);
    font-family: var(--font-text);
    font-size: 13px;
    padding: 0;
    height: 100%;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);    /* v12: KAMENISTIAK-style readability */
}
.agentic__input::placeholder {
    color: rgba(253, 240, 213, 0.55);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.agentic__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    background: transparent;
    backdrop-filter: blur(var(--blur-panel)) saturate(170%);
    -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(170%);
    mask-image: var(--fade-from-top-soft);
    -webkit-mask-image: var(--fade-from-top-soft);
    border: 0;
    border-radius: 0 0 var(--r-corner) var(--r-corner);
}
.agentic__icon-btn {
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--color-papaya-whip);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-apple);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.agentic__icon-btn:hover { color: var(--color-flag-red); }
.agentic__icon-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* Conversation thread (visible only when bar is expanded) */
.agentic__thread {
    display: none;
    flex: 1;
    padding: 14px 22px 12px;
    overflow-y: auto;
    color: var(--color-papaya-whip);
    background: transparent;
    backdrop-filter: blur(var(--blur-panel)) saturate(170%);
    -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(170%);
    mask-image: var(--fade-from-top-soft);
    -webkit-mask-image: var(--fade-from-top-soft);
    border-bottom: 0;
    /* edge by squircle.js */
    /* edge by squircle.js */
    border-top: 0;
    font-size: 13.5px;
    line-height: 1.55;
}
.agentic__inner.is-expanded .agentic__thread { display: block; }
.agentic__thread .msg { margin: 4px 0; }
.agentic__thread .msg--user { color: rgba(253, 240, 213, 0.85); }
.agentic__thread .msg--bot  { color: var(--color-papaya-whip); font-family: var(--font-serif); font-style: italic; }
.agentic__thread .open-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--color-flag-red);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ============================================================================
   Brief body, card grid, login — kept from v1 (re-themed to design tokens)
   ============================================================================ */
.brief-body { color: var(--color-deep-space); font-size: 0.95rem; line-height: 1.65; }
.brief-body h1 { font-family: var(--font-display); font-size: 1.6rem; color: var(--color-deep-space); margin: 1.2em 0 0.5em; letter-spacing: -0.02em; }
.brief-body h2 { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-deep-space); margin: 1.2em 0 0.5em; padding-bottom: 0.3em; border-bottom: 1px solid rgba(0, 48, 73, 0.18); }
.brief-body h3 { font-family: var(--font-display); font-size: 1.05rem; color: var(--color-deep-space); margin: 1em 0 0.4em; }
.brief-body p  { margin: 0.6em 0; }
.brief-body ul, .brief-body ol { margin: 0.4em 0 0.8em 1.4em; }
.brief-body ul { list-style: disc; }
.brief-body ol { list-style: decimal; }
.brief-body li { margin: 0.2em 0; }
.brief-body code { font-family: var(--font-mono); background: rgba(0, 48, 73, 0.08); color: var(--color-molten-lava); padding: 1px 6px; border-radius: 4px; font-size: 0.88em; }
.brief-body pre  { background: rgba(0, 48, 73, 0.08); border: 1px solid rgba(0, 48, 73, 0.15); padding: 12px; overflow-x: auto; margin: 0.8em 0; font-family: var(--font-mono); }
.brief-body pre code { background: transparent; color: var(--color-deep-space); padding: 0; }
.brief-body blockquote { border-left: 3px solid var(--color-steel-blue); padding-left: 14px; color: rgba(0, 48, 73, 0.7); font-family: var(--font-serif); font-style: italic; margin: 0.8em 0; }
.brief-body table { width: 100%; border-collapse: collapse; margin: 0.8em 0; font-size: 0.92rem; }
.brief-body th, .brief-body td { border: 1px solid rgba(0, 48, 73, 0.16); padding: 8px 12px; text-align: left; }
.brief-body th { background: rgba(0, 48, 73, 0.06); color: var(--color-deep-space); font-weight: 700; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; font-family: var(--font-text); }
.brief-body a { color: var(--color-molten-lava); }
.brief-body a:hover { color: var(--color-flag-red); }
.brief-body hr { border: 0; border-top: 1px solid rgba(0, 48, 73, 0.15); margin: 1.5em 0; }
.brief-body strong { color: var(--color-deep-space); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.card {
    display: block;
    padding: 18px;
    background: rgba(0, 48, 73, 0.04);
    border: 1px solid rgba(0, 48, 73, 0.12);
    color: var(--color-deep-space);
    text-decoration: none;
    transition:
        transform var(--dur) var(--ease-apple),
        background var(--dur) var(--ease-apple),
        border-color var(--dur) var(--ease-apple);
}
.card:hover {
    background: rgba(0, 48, 73, 0.08);
    border-color: rgba(0, 48, 73, 0.30);
    transform: translateY(-2px);
}
.card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 8px;
}
.card__order {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    color: rgba(0, 48, 73, 0.5);
}
.card__name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--color-deep-space);
    margin: 2px 0 0;
}
.card__badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border: 1px solid;
}
.badge--live          { color: var(--color-deep-space); border-color: var(--color-deep-space); background: rgba(0, 48, 73, 0.10); }
.badge--vision-data   { color: var(--color-molten-lava); border-color: var(--color-molten-lava); background: rgba(120, 0, 0, 0.08); }
.badge--vision        { color: var(--color-steel-blue); border-color: var(--color-steel-blue); background: rgba(102, 155, 188, 0.10); }

.card__desc { font-size: 13.5px; line-height: 1.45; color: rgba(0, 48, 73, 0.75); margin: 0 0 12px; }
.card__cta  { font-size: 12px; color: var(--color-flag-red); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.card:hover .card__cta { color: var(--color-molten-lava); }

/* ============================================================================
   Tailwind overrides — scoped to APP PLACE for legacy templates
   ============================================================================ */
.app-place {
    --legacy-surface:  rgba(0, 48, 73, 0.06);
    --legacy-border:   rgba(0, 48, 73, 0.18);
    --legacy-text:     var(--color-deep-space);
    --legacy-muted:    rgba(0, 48, 73, 0.62);
    --legacy-primary:  var(--color-flag-red);
}
.app-place [class*="bg-gray-9"],
.app-place [class*="bg-gray-8"],
.app-place [class*="bg-gray-7"] { background-color: var(--legacy-surface) !important; }
.app-place [class*="bg-gray-100"],
.app-place [class*="bg-white"]  { background-color: rgba(255, 255, 255, 0.7) !important; }
.app-place [class*="text-gray-1"],
.app-place [class*="text-gray-2"],
.app-place [class*="text-gray-3"],
.app-place [class*="text-white"] { color: var(--legacy-text) !important; }
.app-place [class*="text-gray-4"],
.app-place [class*="text-gray-5"],
.app-place [class*="text-gray-6"] { color: var(--legacy-muted) !important; }
.app-place [class*="border-gray"] { border-color: var(--legacy-border) !important; }
.app-place [class*="bg-blue-"]    { background-color: var(--legacy-primary) !important; color: var(--color-papaya-whip) !important; }
.app-place [class*="bg-amber-"],
.app-place [class*="bg-green-"]   { background-color: rgba(0, 48, 73, 0.10) !important; }
.app-place [class*="text-amber-"],
.app-place [class*="text-green-"],
.app-place [class*="text-blue-"]  { color: var(--color-molten-lava) !important; }
.app-place [class*="text-red-"]   { color: var(--color-flag-red) !important; }
.app-place input,
.app-place select,
.app-place textarea {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--legacy-text) !important;
    border: 1px solid var(--legacy-border) !important;
}
.app-place input::placeholder { color: var(--legacy-muted) !important; }
.app-place table { background: rgba(255, 255, 255, 0.55); }
.app-place th { background: rgba(0, 48, 73, 0.08) !important; color: var(--legacy-text) !important; }
.app-place td { color: var(--legacy-text) !important; border-color: var(--legacy-border) !important; }

/* ============================================================================
   Accessibility — reduced motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
    .bg-photo { transform: none; }
}

/* ============================================================================
   Login page
   ============================================================================ */
.login-card {
    margin: 12vh auto;
    padding: 32px;
    max-width: 360px;
    background: var(--tint-deep-strong);
    backdrop-filter: blur(var(--blur-panel)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--blur-panel)) saturate(160%);
    color: var(--color-papaya-whip);
}
.login-card h1 { font-size: 22px; margin-bottom: 18px; }
.login-card input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--color-papaya-whip);
    font-family: var(--font-text);
    font-size: 15px;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-apple);
}
.login-card input:focus { border-color: var(--color-steel-blue); }
.login-card button { width: 100%; height: 44px; cursor: pointer; background: var(--color-flag-red); color: var(--color-papaya-whip); border: 0; font-weight: 700; }
.login-card .err { color: var(--color-flag-red); font-size: 13px; margin-bottom: 12px; }