/* ════════════════════════════════════════════════════════════════════
   LemanProSail — Canonical Design Tokens
   Source of truth for livetrack.html and manage.html.
   Derived from: design-bundle/lemanprosail-design-system/project/colors_and_type.css
   NO CDN fonts — all @font-face rules reference local /static/fonts/ files.
   ════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted Roboto (latin variable font subset, v51) ── */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/Roboto-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/static/fonts/Roboto-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/static/fonts/Roboto-Bold.woff2') format('woff2');
}

/* ── Self-hosted Roboto Mono (latin subset, v31) ── */
@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/static/fonts/RobotoMono-Regular.woff2') format('woff2');
}

/* ════════════════════════════════════════════════════════════════════
   Design Tokens — :root
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Brand surfaces — "Abyss Glass" ────────────────────────── */
    --bg-dark:           #04132F;
    --bg-panel:          rgba(13, 28, 50, 0.20);
    --bg-panel-strong:   rgba(13, 28, 50, 0.45);
    --bg-panel-solid:    #0D1C3A;
    --bg-elevated:       #1A253D;
    --bg-elevated-2:     #1E2D46;
    --bg-input:          rgba(255, 255, 255, 0.08);

    /* ── Text ─────────────────────────────────────────────────── */
    --text-primary:      #d6e3ff;
    --text-secondary:    #c5c6cd;
    --text-muted:        #8f9097;
    --text-faint:        #6a8aaa;

    /* ── Brand accents ────────────────────────────────────────── */
    --accent:            #3cd7ff;
    --accent-dim:        #008eab;
    --accent-soft:       rgba(60, 215, 255, 0.10);
    --accent-glow:       rgba(60, 215, 255, 0.30);

    --brand-yellow:      #ffce61;
    --brand-yellow-dim:  #b88e2a;

    --brand-orange:      #ff8b3d;
    --buoy-orange:       #ff8800;

    /* ── Semantic ─────────────────────────────────────────────── */
    --success:           #34d399;
    --success-dim:       #2ecc71;
    --info:              #3cd7ff;
    --warning:           #fb923c;
    --danger:            #f87171;
    --danger-strong:     #ef4444;

    /* ── Waypoint / buoy palette (WP-1..WP-5) ────────────────── */
    --wp-1:              #34d399;   /* emerald  */
    --wp-2:              #facc15;   /* yellow   */
    --wp-3:              #fb923c;   /* orange   */
    --wp-4:              #f87171;   /* coral    */
    --wp-5:              #c084fc;   /* purple   */

    /* ── Status / data-viz channel colors ────────────────────── */
    --color-twa:         #fb923c;
    --color-awa:         #facc15;
    --color-tws:         #3cd7ff;
    --color-vmg:         #3cd7ff;
    --color-sog:         #4ade80;
    --color-hdg:         #e2e8f0;
    --color-eta:         #c084fc;
    --color-live-pill:   #ff3b6b;

    /* ── TCF class colors (SRS+ five-band palette) ───────────── */
    --tcf-1:             #ffffff;   /* white  */
    --tcf-2:             #3b82f6;   /* blue   */
    --tcf-3:             #34d399;   /* green  */
    --tcf-4:             #facc15;   /* yellow */
    --tcf-x:             #0f172a;   /* near-black */

    /* ── Borders / dividers ───────────────────────────────────── */
    --border:            rgba(255, 255, 255, 0.10);
    --border-strong:     rgba(255, 255, 255, 0.18);
    --border-faint:      rgba(68, 71, 77, 0.15);

    /* ── Radii ────────────────────────────────────────────────── */
    --radius-xs:         4px;
    --radius-sm:         6px;
    --radius-md:         8px;
    --radius-lg:         12px;
    --radius-xl:         16px;
    --radius-2xl:        20px;
    --radius-pill:       999px;

    /* ── Shadows / elevation ──────────────────────────────────── */
    --shadow-glass:      0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-card:       0 10px 20px rgba(0, 0, 0, 0.5);
    --shadow-modal:      0 24px 48px rgba(0, 0, 0, 0.8);
    --shadow-sheet:      0 -8px 32px rgba(4, 19, 41, 0.6);
    --shadow-glow-cyan:  0 0 12px rgba(60, 215, 255, 0.30);
    --shadow-glow-soft:  0 0 8px rgba(60, 215, 255, 0.15);

    /* ── Backdrop / blur ──────────────────────────────────────── */
    --blur-glass:        blur(6px);

    /* ── Spacing scale ────────────────────────────────────────── */
    --space-1:  2px;
    --space-2:  4px;
    --space-3:  6px;
    --space-4:  8px;
    --space-5:  10px;
    --space-6:  12px;
    --space-7:  16px;
    --space-8:  20px;
    --space-9:  24px;
    --space-10: 32px;
    --space-11: 40px;

    /* ── Typography ───────────────────────────────────────────── */
    --font-display: 'Roboto', system-ui, -apple-system, sans-serif;
    --font-heading: 'Roboto', system-ui, -apple-system, sans-serif;
    --font-body:    'Roboto', system-ui, -apple-system, sans-serif;
    --font-mono:    'Roboto Mono', ui-monospace, monospace;

    /* type scale */
    --fs-9:   9px;
    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 13px;
    --fs-14: 14px;
    --fs-15: 15px;
    --fs-18: 18px;
    --fs-22: 22px;
    --fs-28: 28px;
    --fs-44: 44px;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-black:   900;
}

/* ════════════════════════════════════════════════════════════════════
   Fleet class chip — used in Tabulator cell formatters and boat rows.
   Color dot driven by --c CSS var: set via subclass (tcf-1…) or
   inline style="--c:#hex" for organiser-defined free class names.
   ════════════════════════════════════════════════════════════════════ */
.tcf {
    --c: #888;   /* fallback dot color when no subclass / inline var */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 5px 1px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.07);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 9px;
    color: var(--text-secondary);
}
.tcf::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.tcf-1 { --c: #ffffff; }
.tcf-2 { --c: #3b82f6; }
.tcf-3 { --c: #34d399; }
.tcf-4 { --c: #facc15; }
.tcf-x { --c: #0f172a; }

/* ════════════════════════════════════════════════════════════════════
   Class manager autocomplete (manage.html Details tab)
   ════════════════════════════════════════════════════════════════════ */
#cls-autocomplete .cls-ac-item:last-child {
    border-bottom: none;
}
#cls-autocomplete .cls-ac-item:hover {
    background: var(--bg-hover, rgba(255,255,255,0.06));
}

/* ════════════════════════════════════════════════════════════════════
   Class picker pill — top-strip filter for fleet view by class
   ════════════════════════════════════════════════════════════════════ */
.class-picker {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding: 3px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 18px;  /* less pill-y so wrapped rows still look intentional */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 100%;
}
.class-picker button {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    border-radius: 999px;
    color: #f4f8ff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    transition: all 120ms;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.class-picker button:hover {
    color: #ffffff;
    background: rgba(60, 215, 255, 0.15);
}
.class-picker button.on {
    background: #3cd7ff;
    color: #041329;
    text-shadow: none;
    box-shadow: 0 0 12px rgba(60, 215, 255, 0.3);
}