@charset "UTF-8";
/* Tundra brass restyle — RESTYLE-2026-09-07-v3 (inline-style purge).
 *
 * Loaded AFTER css/style.css so declarations win via source-order for
 * everything reachable through the cascade. The extra `!important`
 * rules below are only there for widgets whose colours settings.js
 * sets via `element.style.cssText = "…"` — inline styles cannot be
 * beaten by specificity alone, only by `!important`. Wherever a
 * cascade-only rule is enough, we do NOT add `!important` (keeps the
 * override auditable).
 *
 * Scope of v3 (over v2):
 *   - Full palette re-map to brass primary (`--accent*`, grounds, text).
 *   - Purge of every literal cyan / turquoise value that bypassed the
 *     `--accent` var: checkbox switches, active tool buttons, PMC status
 *     pill, floor switcher active, meta level, primary-button text.
 *   - Settings drawer tabs (inline-styled in settings.js) — active tab
 *     underline + text are forced brass; inactive tabs muted-warm.
 *   - Feedback form widgets (also inline-styled) — inputs, select,
 *     textarea, submit button all shifted onto the brand palette.
 *   - Semantic status colours (`--ok`/`--warn`/`--err`) kept in their
 *     roles but toned to sage / brass-shifted amber / brick so LIVE
 *     pills and error tags don't shout louder than the brass CTA.
 *
 * External CSS gotcha: nginx nosniff drops rules from stylesheets that
 * lack an explicit @charset when the first byte is not ASCII, so keep
 * the @charset line above ([[feedback-css-link-needs-charset]]).
 */

:root {
    /* Grounds (dark ladder — near-black to elevated card).
     * Ported 1:1 from loader theme.h and pingmap setup.html so the three
     * surfaces read as one product family. */
    --bg-0:        #0A0E14;
    --bg-1:        #0F1319;
    --bg-2:        #141921;
    --border:      #252B36;
    --border-2:    #313847;

    /* Warm off-white text on cold-blue ground — the offset that stops the
     * UI reading as "another dark SaaS". Pure white reserved for the
     * strongest emphasis only. */
    --text:         #E4E1D9;
    --text-strong:  #FFFFFF;
    --muted:        #A5A79E;
    --muted-2:      #7A7F8A;

    /* Brass primary — replaces the cyan-forward accent. `--accent-2` is
     * the hover / active tint. The glow rgba matches the accent so no
     * secondary cyan bleeds into shadows. */
    --accent:       #B5945A;
    --accent-2:     #D0AC6E;
    --accent-glow:  rgba(181, 148, 90, 0.22);

    /* Status trio — muted, not siren. Sage / brass-shifted amber / brick.
     * Deliberately kept in the same enum names so every consumer keeps
     * working; only the colour ramps down a notch so the row no longer
     * competes with the accent. */
    --ok:   #8AA97F;
    --warn: #C8A961;
    --err:  #B85450;

    /* Sharp corners — loader/precheck_gui uses 0–3 px rounded rectangles.
     * Was 6/10/14 (SaaS-ish soft). Flattens buttons, drawer, badges, chips. */
    --r-sm: 2px;
    --r-md: 2px;
    --r-lg: 3px;
}

/* ---------- Literal cyan sweep (cascade wins) -------------------------
 * These rules bypass `--accent` with hard-coded rgba(125, 211, 252, ...)
 * or #7dd3fc / #4ec9b0. Restated below in brass so nothing has to change
 * in the source stylesheet. rgba stops match the alpha of the original
 * so the visual weight is preserved. */

#topbar .brand .brand-mark {
    box-shadow: 0 0 0 1px rgba(181, 148, 90, 0.35),
                0 0 12px var(--accent-glow);
}

.settings-row input[type="checkbox"]:checked {
    background:   rgba(181, 148, 90, 0.18);
    border-color: rgba(181, 148, 90, 0.5);
}

.tool-btn[data-active="true"] {
    background:   rgba(181, 148, 90, 0.12);
    color:        var(--accent);
    border-color: rgba(181, 148, 90, 0.35);
}

.st-pmc {
    background: rgba(181, 148, 90, 0.12);
    color:      var(--accent);
}

.floor-switcher .floor-btn:focus-visible {
    outline: 2px solid var(--accent);
}
.floor-switcher .floor-btn.active {
    background:  rgba(181, 148, 90, 0.18);
    color:       var(--accent);
    box-shadow:  inset 0 0 0 1px rgba(181, 148, 90, 0.4);
}

.player-meta .meta-lvl { color: var(--accent); }

.btn-primary { color: var(--bg-0); }

/* ---------- Inline-styled widgets (need !important) -------------------
 * settings.js renders the tabs strip and feedback form with
 * `element.style.cssText = "…"`. Inline styles win over any cascade
 * rule by specificity, so brass overrides here MUST be `!important`.
 * Only visual properties are forced — nothing structural.
 *
 * The active tab is recognised by its inline `background:#1e293b`;
 * every other button in `.settings-tabs` renders `background:transparent`.
 * Attribute-substring selectors let us style each state without touching
 * the JS that paints them. */

.settings-tabs {
    border-bottom-color: var(--border) !important;
}
.settings-tabs button {
    color: var(--muted) !important;
    border-bottom-color: transparent !important;
    background: transparent !important;
    letter-spacing: 0.06em;
}
.settings-tabs button:hover {
    color: var(--text) !important;
}
/* Active tab — inline JS marks it with `background:#1e293b`.
 * Match on that substring so the highlight follows the current tab. */
.settings-tabs button[style*="1e293b"] {
    color: var(--accent) !important;
    background: rgba(181, 148, 90, 0.08) !important;
    border-bottom-color: var(--accent) !important;
}

/* Feedback form — the entire form is inline-styled with slate/cyan tones
 * (#1e293b bg, #475569 border, #94a3b8 muted, #e2e8f0 text, #0891b2 CTA).
 * Force brand palette on every widget without editing settings.js. */
#fb-category,
#fb-title,
#fb-body {
    background:   var(--bg-2) !important;
    color:        var(--text) !important;
    border-color: var(--border-2) !important;
    border-radius: 4px !important;
}
#fb-category:focus,
#fb-title:focus,
#fb-body:focus {
    border-color: var(--accent) !important;
    outline: none !important;
}
#fb-submit {
    background: var(--accent) !important;
    color:      var(--bg-0) !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}
#fb-submit:hover  { background: var(--accent-2) !important; }
#fb-submit:disabled { background: var(--border-2) !important; color: var(--muted) !important; }

/* ---------- Loader-style typographic accents --------------------------
 * Section titles and small uppercase labels pick up subtle tracking so
 * the drawer reads like the precheck_gui hero copy (0.12–0.18em). */
.settings-section-title {
    letter-spacing: 0.08em;
}
.side-label {
    letter-spacing: 0.14em;
}

/* ---------- Drawer horizontal-scroll fix ------------------------------
 * `.drawer-body` and `.drawer-foot` set `min-width: 360px` (comment in
 * style.css: "keep inner width while parent animates"). The parent
 * `.settings-drawer` is `width: 360px; max-width: 100%`, so on any
 * viewport narrower than 360 px the drawer itself shrinks correctly but
 * its inner blocks overflow → the whole panel gains a horizontal
 * scrollbar and content gets clipped. Dropping the min-width lets flex
 * cascade the true width down without regressing the slide-in animation
 * (`transform: translateX` works fine either way — the min-width was
 * belt-and-suspenders that isn't earning its keep). */
.drawer-body,
.drawer-foot {
    min-width: 0 !important;
}
/* Two-column settings grid also needs an explicit `min-width: 0` on the
 * row inside so long labels can wrap instead of forcing the row wider
 * than the column track. Just `min-width: 0` — do NOT set overflow-wrap
 * to anywhere/break-word here or Cyrillic labels wrap between characters
 * instead of at word boundaries (v4 regressed on "Радиус ИИ (м, 0=∞)"). */
.settings-grid > .settings-row { min-width: 0; }
.settings-row .lbl { min-width: 0; }

/* ---------- Loader-look style pass ------------------------------------
 * Radii, weights, tracking, glyphs shifted to match precheck_gui:
 *   - Chips/buttons/drawer/rows: sharp corners.
 *   - Toggles: square rockers with a small brass square inside when on.
 *   - Section eyebrows: uppercase with wide tracking, brass on hover.
 *   - Preset selector + primary button: uppercase display type.
 *   - Brand mark: replaced with the 4-point compass (same shape as loader). */

/* Brand mark — was gradient hex square, now a brass compass SVG so the
 * three surfaces (loader chrome, setup page topbar, radar topbar) share
 * one logo. Inline SVG data-URI keeps zero extra HTTP requests. */
#topbar .brand .brand-mark {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B5945A'><path d='M12 0 L13 12 L12 24 L11 12 Z'/><path d='M1 12 L12 12.7 L23 12 L12 11.3 Z'/><circle cx='12' cy='12' r='1.4' fill='none' stroke='%23B5945A' stroke-width='0.7'/></svg>") center/contain no-repeat !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 18px !important;
    height: 18px !important;
}
@media (max-width: 900px) {
    #topbar .brand .brand-mark { width: 14px !important; height: 14px !important; }
}

/* Brand-name letterspacing — matches loader banner wordmark. */
.brand-name    { letter-spacing: 0.18em !important; font-weight: 700 !important; }
.brand-sep     { color: var(--border-2) !important; }
.brand-sub     { letter-spacing: 0.28em !important; }

/* Drawer + rows: flatten radii, sharpen edges. */
.settings-drawer,
.drawer-head,
.drawer-body,
.drawer-foot,
.settings-section,
.settings-row { border-radius: 0 !important; }
.drawer-close { border-radius: 2px !important; }

/* Section eyebrow — like loader hero eyebrows. */
.settings-section-title {
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    font-weight: 600 !important;
    color: var(--muted) !important;
    font-size: 11px !important;
}
.settings-section-title:hover { color: var(--accent) !important; }

/* Sidebar labels (КАРТА / КОМАНДЫ). */
.side-label {
    letter-spacing: 0.22em !important;
    color: var(--muted-2) !important;
    font-weight: 600 !important;
}

/* Settings tabs — uppercase display type, brass on active (rules from v3
 * still apply for colour; here we add tracking + weight). */
.settings-tabs button {
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
    font-weight: 700 !important;
}

/* Toggle switch — pill (r 10) → square rocker (r 2), brass square knob.
 * The whole element keeps the same 32×18 hit-rect for touch. */
.settings-row input[type="checkbox"] {
    border-radius: 2px !important;
    background: var(--bg-0) !important;
    border-color: var(--border) !important;
}
.settings-row input[type="checkbox"]::after {
    border-radius: 1px !important;
    background: var(--muted-2) !important;
}
.settings-row input[type="checkbox"]:checked {
    background: var(--bg-2) !important;
    border-color: var(--accent) !important;
}
.settings-row input[type="checkbox"]:checked::after {
    background: var(--accent) !important;
}

/* Buttons — sharp corners, uppercase, tactical weight. */
.btn-primary, .btn-ghost {
    border-radius: 2px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    font-weight: 700 !important;
}
.btn-primary { background: var(--accent) !important; }
.btn-primary:hover { background: var(--accent-2) !important; filter: none !important; }

/* Preset selector input (the "Medium" box). */
select, input[type="text"], input[type="search"] {
    border-radius: 2px !important;
}

/* Tool buttons in topbar — sharpen. */
.tool-btn { border-radius: 2px !important; }

/* Team status thin bar under each PMC card — brass rule, not cyan. */
.team-hp-bar,
.team-status-line { background: var(--border) !important; }

/* Slider thumb — keep circle (universal control), but stroke it brass. */
.settings-row input[type="range"]::-webkit-slider-thumb {
    background: var(--accent) !important;
    border-color: var(--bg-0) !important;
    box-shadow: 0 0 0 1px var(--accent) !important;
}

/* Feedback form widgets — apply the sharp radius too (they were already
 * repainted in v3, this just flattens the corners). */
#fb-category, #fb-title, #fb-body, #fb-submit { border-radius: 2px !important; }

/* Floor switcher — was pill, flatten. */
.floor-switcher { border-radius: 4px !important; }
.floor-switcher .floor-btn { border-radius: 2px !important; }

/* Topbar carries the hamburger — raise it above the overlay layer so
 * the toggle stays reachable through any overlay. Applies everywhere;
 * cheap belt-and-suspenders. */
#topbar { position: relative !important; z-index: 250 !important; }

/* ---------- Desktop-only overlay + panel-shift block -----------------
 * At <=900 px style.css already promotes the sidebar to `position: absolute`,
 * sets responsive widths (280/260/235/220 px per breakpoint) and forces the
 * settings drawer to `width: 100vw` — so on mobile the overlay behaviour is
 * already correct and the floating panels are already hidden by the full-
 * width drawer. All the block below applies only above 900 px where the
 * original layout was "flex push" (sidebar took a 260 px flex track and
 * renderer.js repainted the map at a different scale on every toggle).
 *
 * Nothing inside this @media touches width / height on the sidebar so
 * style.css's mobile widths (235-280 px) remain the source of truth for
 * every phone breakpoint. */
@media (min-width: 901px) {
    .side-panel {
        position: absolute !important;
        top: 48px !important;
        bottom: 0; left: 0;
        height: auto !important;
        z-index: 200;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.55);
        flex: 0 0 0 !important;
        width: 260px;
        transform: translateX(-100%);
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .side-panel:not(.collapsed) { transform: translateX(0) !important; }
    .side-panel.collapsed        { transform: translateX(-100%) !important; }

    /* Canvas-wrap always fills the flex-track — sidebar no longer competes. */
    .canvas-wrap {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Slide floating panels out from under overlay drawers. `:has()` reacts
     * to overlay state without JS. Baseline in Chrome 105 / Safari 15.4 /
     * Firefox 121 — safe for the browser matrix radar users are on. */
    .closest-loot,
    .floating-tools,
    .floating-zoom,
    .event-feed {
        transition: left 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                    right 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    #app:has(.side-panel:not(.collapsed)) .closest-loot { left: 280px; }
    #app:has(.settings-drawer.open) .floating-tools,
    #app:has(.settings-drawer.open) .floating-zoom,
    #app:has(.settings-drawer.open) .event-feed { right: 380px; }
}