/* ==========================================================================
   Glosperos · 00 tokens
   The ONLY CSS file a sister site changes (with inc/concept.php, the photos,
   the logo and style.css). Every colour of the design lives here; 01/02/03
   use these names only. Palette: deep teal-black night, coral signal, six line
   colours. A clone may pick any dark (or deep-tinted) family; keep the
   contrast notes below.
   ========================================================================== */

:root {
    /* ---- surfaces, darkest → lightest ---- */
    --deep-3: #030a09;      /* pass card back, magnetic stripe */
    --deep: #061110;        /* footer, departures board, console, signs */
    --deep-2: #081413;      /* the demo section band */
    --ink: #0a1716;         /* page background; also text ON --signal and line colours */
    --editor: #0d1d1b;      /* editor / snippet / demo input panel */
    --panel: #10221f;       /* cards, chips, panels */
    --panel-2: #16302b;     /* pressed / hover panel */
    --flap: #1a3631;        /* split-flap tile */
    --rail: #21403a;        /* hairlines, borders */
    --rail-2: #2e554d;      /* strong borders, signal post */
    --rail-3: #3f6d63;      /* input hover border */
    --lamp-off: #132925;    /* unlit signal lamp */
    --lamp-rim: #24433d;    /* signal lamp rim */
    --photo-bg: #0a1413;    /* behind photos while they load */

    /* ---- text (dim/faint must reach 4.5:1 on --ink and --panel) ---- */
    --text: #eaf5f1;
    --dim: #a6c2ba;
    --faint: #88a8a0;

    /* ---- accent: the signal ---- */
    --signal: #ff7a5c;      /* primary buttons, eyebrow dots, serif accents */
    --signal-2: #ff9a82;    /* hover */
    --signal-ink: #0a1716;  /* text on --signal (≥ 4.5:1) */

    /* ---- the lines: a clone may use 4–6; define all six anyway ----
       --line-ink must reach 4.5:1 on every one of them. */
    --l1: #ff7a5c;
    --l2: #4fd1b9;
    --l3: #ffd166;
    --l4: #7fa9ff;
    --l5: #c99bf0;
    --l6: #a3e06e;
    --line-ink: #0a1716;    /* text on a line colour (chips, codes, bullets) */

    /* ---- states ---- */
    --go: #3ddc97;          /* green signal, ok lamp, right answer */
    --go-soft: #a5f2cf;     /* green text on dark */
    --stop: #ff4f5e;        /* red signal, wrong answer */
    --stop-lamp: #ff5c68;   /* error lamp */
    --stop-edge: #ff6f78;   /* danger button border */
    --stop-soft: #ffa3a8;   /* red text on dark (errors, symptoms) */
    --go-wash: rgba(61, 220, 151, .12);
    --go-wash-2: rgba(61, 220, 151, .16);
    --stop-wash: rgba(255, 79, 94, .1);
    --stop-wash-2: rgba(255, 79, 94, .14);
    --stop-wash-3: rgba(255, 79, 94, .16);
    --stop-line: rgba(255, 79, 94, .5);
    --signal-wash: rgba(255, 122, 92, .16);

    /* ---- overlays and textures ---- */
    --shade: rgba(3, 10, 9, .82);         /* modal backdrop */
    --map-bg: rgba(10, 23, 22, .72);     /* map panel over the dotted hero */
    --dots: rgba(166, 194, 186, .13);    /* hero dot grid */
    --seam: rgba(0, 0, 0, .55);          /* split-flap seam (footer) */
    --seam-2: rgba(0, 0, 0, .7);         /* split-flap seam (board) */
    --sheen: rgba(234, 245, 241, .025);  /* brushed stripe */
    --btn-ring: rgba(10, 23, 22, .18);   /* button dot ring */

    /* ---- the paper ticket (terminus) and light frames ---- */
    --ticket: #e6f2ee;
    --ticket-ink: #0a1716;
    --ticket-ink-2: #26403a;
    --ticket-ink-3: #2f4a44;
    --ticket-k: #42605a;
    --ticket-perf: #86a39b;
    --frame-bg: #ffffff;    /* the code preview iframe */

    /* ---- CRM policy tables (light plugin markup) ---- */
    --doc-ink: #1c2b28;
    --doc-head: #10221f;
    --doc-head-ink: #ffffff;
    --doc-link: #0a1716;
    --doc-line: rgba(0, 0, 0, .08);
    --doc-edge: rgba(0, 0, 0, .14);

    /* ---- the inline logo mark (fallback when assets/images/logo.png is missing) ---- */
    --mark-tile: var(--panel);
    --mark-edge: var(--rail);
    --mark-a: var(--l1);
    --mark-b: var(--l2);
    --mark-ring: var(--text);
    --mark-core: var(--ink);

    /* ---- payment badges (brand colours, keep) ---- */
    --pay-card: #ffffff;
    --pay-visa: #634bf9;
    --pay-mc-1: #ed0006;
    --pay-mc-2: #f9a000;
    --pay-mc-3: #ff5e00;

    /* ---- invoice paper (the bundled CRM invoice body) ---- */
    --inv-accent: #007bff;
    --inv-accent-2: #0056b3;
    --inv-ink: #333333;
    --inv-ink-2: #666666;
    --inv-ink-3: #495057;
    --inv-ink-4: #555555;
    --inv-print: #000000;
    --inv-paper: #ffffff;
    --inv-soft: #f8f9fa;
    --inv-soft-2: #e9ecef;
    --inv-line: #dddddd;
    --inv-line-2: #eeeeee;
    --inv-line-3: #dee2e6;
    --inv-ok-bg: #d4edda;
    --inv-ok-ink: #155724;
    --inv-ok-line: #c3e6cb;
    --inv-warn-bg: #fff3cd;
    --inv-warn-ink: #856404;
    --inv-warn-line: #ffeaa7;
    --inv-bad-bg: #f8d7da;
    --inv-bad-ink: #721c24;
    --inv-bad-line: #f5c6cb;
    --inv-info-bg: #d1ecf1;
    --inv-info-ink: #0c5460;
    --inv-info-line: #bee5eb;
    --inv-danger: #dc3545;
    --inv-shadow: rgba(0, 0, 0, .1);
}
/* ==========================================================================
   Glostad Coding M2 · 01 base
   Tokens, type, layout with the left route rail, header rail / bar / route
   diagram menu, buttons, section heads, signs, modals, footer board.
   Hand-written. Animate transform / opacity / stroke-dashoffset only.
   ========================================================================== */

:root {
    --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
    --f-serif: "Instrument Serif", Georgia, serif;
    --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

    --rail-w: 92px;
    --bar-h: 64px;
    --wrap: 1280px;
    --gutter: clamp(16px, 4vw, 48px);
    --section: clamp(88px, 11vw, 160px);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --lc: var(--signal);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body.vc-body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--f-display);
    font-size: 17px;
    font-stretch: 100%;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.vc-body img { display: block; max-width: 100%; height: auto; }
.vc-body a { color: inherit; }
.vc-body button { font: inherit; color: inherit; }
.vc-body :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.vc-body ::selection { background: var(--signal); color: var(--signal-ink); }

.vc-main { display: block; overflow-x: clip; }

.vc-skip {
    position: fixed;
    left: 12px;
    top: 12px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--signal);
    color: var(--signal-ink) !important;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform .2s;
}
.vc-skip:focus { transform: none; }

.vc-sr, .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.vc-mono { font-family: var(--f-mono); font-stretch: 100%; }
.vc-body code, .vc-body pre, .vc-body textarea, .vc-mono, .vc-flap-c { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.vc-serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-stretch: 100%; letter-spacing: 0; }

.vc-wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.vc-wrap--text { max-width: calc(860px + var(--gutter) * 2); }

.vc-section { position: relative; padding: var(--section) 0; }
.vc-section--tight { padding: clamp(48px, 7vw, 96px) 0; }
.vc-section + .vc-section { border-top: 1px solid var(--rail); }

/* ---------- type ---------- */

.vc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--dim);
    font-family: var(--f-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.vc-eyebrow__dot {
    width: 12px;
    height: 12px;
    border: 3px solid var(--lc, var(--signal));
    border-radius: 50%;
    background: var(--ink);
}

.vc-title {
    margin: 0;
    font-family: var(--f-display);
    font-size: clamp(34px, 4.6vw, 64px);
    font-stretch: 125%;
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.vc-title .vc-serif { font-size: 1.12em; line-height: .9; color: var(--signal); }

.vc-lead { max-width: 56ch; margin: 0; color: var(--dim); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; }

.vc-head { margin-bottom: clamp(36px, 5vw, 64px); }
.vc-head .vc-lead { margin-top: 20px; }
.vc-head--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.vc-head--split > div { grid-column: 1 / span 7; }
.vc-head--split > .vc-lead { grid-column: 9 / -1; margin: 0; }

/* ---------- buttons: sharp blocks, signal dot, arrow ---------- */

.vc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 20px;
    border: 2px solid var(--signal);
    border-radius: 0;
    background: var(--signal);
    color: var(--signal-ink) !important;
    font-family: var(--f-display);
    font-size: 16px;
    font-stretch: 112%;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.vc-btn__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 3px var(--btn-ring);
}
.vc-btn__arrow { margin-left: auto; padding-left: 8px; font-family: var(--f-mono); transition: transform .25s var(--ease); }
.vc-btn:hover .vc-btn__arrow, .vc-btn:focus-visible .vc-btn__arrow { transform: translateX(5px); }
.vc-btn--signal:hover { background: var(--signal-2); border-color: var(--signal-2); }

.vc-btn--ghost { background: transparent; border-color: var(--rail-2); color: var(--text) !important; }
.vc-btn--ghost .vc-btn__dot { background: var(--signal); box-shadow: none; }
.vc-btn--ghost:hover { border-color: var(--signal); }

.vc-btn--link {
    min-height: 44px;
    padding: 8px 0 10px;
    border: 0;
    background: none;
    color: var(--text) !important;
}
.vc-btn--link .vc-btn__dot { width: 9px; height: 9px; background: var(--lc); box-shadow: none; }
.vc-btn--link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 4px;
    background: var(--lc);
    transform-origin: left;
    transition: transform .3s var(--ease);
}
.vc-btn--link:hover::after { transform: scaleX(.6); }

.vc-btn--full { display: flex; width: 100%; }
.vc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* ==========================================================================
   Header · the route rail (>= 1024px)
   ========================================================================== */

.vc-rail {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--rail-w);
    padding: 18px 0 16px;
    background: var(--ink);
    border-right: 1px solid var(--rail);
}
body.admin-bar .vc-rail { top: 32px; }

.vc-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.vc-logo .vc-mark { flex: 0 0 auto; display: block; }
.vc-mark__tile { fill: var(--mark-tile); stroke: var(--mark-edge); stroke-width: 3; }
.vc-mark__a, .vc-mark__b { fill: none; stroke-width: 7; stroke-linecap: square; stroke-linejoin: miter; }
.vc-mark__a { stroke: var(--mark-a); }
.vc-mark__b { stroke: var(--mark-b); }
.vc-mark__ring { fill: var(--mark-core); stroke: var(--mark-ring); stroke-width: 4; }
.vc-mark__l { fill: var(--mark-ring); font-family: var(--f-display); font-size: 21px; font-stretch: 112%; font-weight: 800; }
.vc-logo__img { display: block; width: auto; max-width: 100%; }
.vc-logo--rail .vc-logo__img { height: 52px; }
.vc-logo--bar .vc-logo__img, .vc-logo--menu .vc-logo__img { height: 40px; }
.vc-logo--footer .vc-logo__img { height: 48px; }
.vc-logo__word {
    font-family: var(--f-display);
    font-size: 21px;
    font-stretch: 125%;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1;
}

.vc-rail__nav { position: relative; flex: 1 1 auto; display: flex; width: 100%; margin: 26px 0 16px; overflow: hidden; }
.vc-rail__line {
    position: absolute;
    left: 50%;
    top: 8px;
    bottom: 8px;
    width: 4px;
    margin-left: -2px;
    background: var(--signal);
}

.vc-route-menu { margin: 0; padding: 0; list-style: none; }
.vc-route-menu--rail { position: relative; display: flex; flex-direction: column; justify-content: space-evenly; width: 100%; }
.vc-route-menu--rail li { position: relative; display: flex; justify-content: center; }
.vc-route-menu--rail a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 6px 4px;
    color: var(--dim);
    text-decoration: none;
}
.vc-route-menu--rail .vc-stop__dot {
    width: 18px;
    height: 18px;
    border: 4px solid var(--signal);
    border-radius: 50%;
    background: var(--ink);
    transition: transform .2s var(--ease);
}
.vc-route-menu--rail .vc-stop__label {
    max-width: 84px;
    padding: 2px 4px;
    background: var(--ink);
    font-family: var(--f-mono);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.vc-route-menu--rail a:hover, .vc-route-menu--rail a:focus-visible { color: var(--text); }
.vc-route-menu--rail a:hover .vc-stop__dot, .vc-route-menu--rail a:focus-visible .vc-stop__dot { transform: scale(1.25); }
.vc-route-menu--rail .current-menu-item > a, .vc-route-menu--rail a[aria-current="page"] { color: var(--text); }
.vc-route-menu--rail .current-menu-item > a .vc-stop__dot,
.vc-route-menu--rail a[aria-current="page"] .vc-stop__dot { background: var(--signal); }
.vc-route-menu--rail .menu-badge { display: none; }

.vc-rail__foot { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 0 8px; }
.vc-rail__acct {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--dim);
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
}
.vc-rail__acct:hover { color: var(--text); }
.vc-rail__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 12px 4px 10px;
    background: var(--signal);
    color: var(--signal-ink) !important;
    font-size: 13px;
    font-stretch: 112%;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .03em;
    transition: background-color .2s;
}
.vc-rail__cta .vc-btn__dot { width: 8px; height: 8px; }
.vc-rail__cta:hover { background: var(--signal-2); }
.vc-rail__cta--out { background: transparent; color: var(--text) !important; border: 2px solid var(--rail-2); }
.vc-rail__cta--out .vc-btn__dot { background: var(--signal); box-shadow: none; }
.vc-rail__cta--out:hover { background: var(--panel); }

.vc-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid var(--rail-2);
    border-radius: 0;
    background: transparent;
    color: var(--dim);
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .06em;
    cursor: pointer;
}
.vc-lang:hover { border-color: var(--signal); color: var(--text); }

/* ---------- slim top bar (< 1024px) ---------- */

.vc-bar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--bar-h);
    padding: 0 16px;
    background: var(--ink);
    border-bottom: 1px solid var(--rail);
}
.vc-bar__actions { display: flex; align-items: center; gap: 10px; }
.vc-bar__lines {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    border: 2px solid var(--signal);
    background: transparent;
    color: var(--text);
    font-size: 15px;
    font-stretch: 112%;
    font-weight: 700;
    cursor: pointer;
}
.vc-bar__bars { display: grid; gap: 3px; width: 18px; }
.vc-bar__bars i { display: block; height: 3px; }
.vc-bar__bars i:nth-child(1) { background: var(--l1); }
.vc-bar__bars i:nth-child(2) { background: var(--l2); }
.vc-bar__bars i:nth-child(3) { background: var(--l3); }

/* ---------- full-screen route diagram menu ---------- */

.vc-diagram {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    padding: 0 16px 24px;
    overflow-y: auto;
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
}
.vc-diagram.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease); }
.vc-diagram__head { display: flex; align-items: center; justify-content: space-between; height: var(--bar-h); border-bottom: 1px solid var(--rail); }
.vc-diagram__close {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 2px solid var(--rail-2);
    background: transparent;
    cursor: pointer;
}
.vc-diagram__nav { position: relative; flex: 1 0 auto; padding: 28px 0 24px 6px; }
.vc-diagram__dest { margin: 0 0 18px 44px; color: var(--dim); font-size: 14px; }
.vc-diagram__dest .vc-mono { margin-right: 6px; color: var(--signal); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.vc-route-menu--diagram { position: relative; }
.vc-route-menu--diagram::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 22px;
    bottom: 22px;
    width: 6px;
    background: var(--signal);
}
.vc-route-menu--diagram a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 64px;
    color: var(--text);
    font-size: clamp(24px, 7vw, 34px);
    font-stretch: 125%;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
}
.vc-route-menu--diagram .vc-stop__dot {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 6px solid var(--signal);
    border-radius: 50%;
    background: var(--ink);
}
.vc-route-menu--diagram a:hover .vc-stop__dot, .vc-route-menu--diagram a:focus-visible .vc-stop__dot { background: var(--signal); }
.vc-route-menu--diagram .menu-badge { display: none; }
.vc-diagram__actions { display: grid; gap: 12px; }

/* ==========================================================================
   Signs (cookie + language modal) and modal shell
   ========================================================================== */

.vc-sign { background: var(--panel); border: 1px solid var(--rail); color: var(--text); }
.vc-sign__head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--ink); border-top: 6px solid var(--signal); border-bottom: 1px solid var(--rail); }
.vc-sign__plat {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    background: var(--signal);
    color: var(--signal-ink);
    font-family: var(--f-mono);
    font-size: 15px;
    font-weight: 700;
}
.vc-sign__title { flex: 1 1 auto; margin: 0; font-size: 19px; font-stretch: 118%; font-weight: 800; line-height: 1.15; }
.vc-sign__body { padding: 18px 16px 18px; }
.vc-sign__text { margin: 0 0 16px; color: var(--dim); font-size: 15px; }

.vc-modal {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: grid;
    place-items: center;
    padding: 16px;
    background: var(--shade);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, visibility 0s .25s;
}
.vc-modal.is-open { opacity: 1; visibility: visible; transition: opacity .25s; }
.vc-modal__card { width: min(440px, 100%); transform: translateY(14px); transition: transform .3s var(--ease); }
.vc-modal.is-open .vc-modal__card { transform: none; }
.vc-modal__x { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--rail-2); background: transparent; cursor: pointer; }
.vc-modal__x:hover { border-color: var(--signal); }
.vc-label { display: block; margin-bottom: 8px; color: var(--dim); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.vc-select {
    width: 100%;
    min-height: 50px;
    padding: 10px 14px;
    border: 2px solid var(--rail-2);
    border-radius: 0;
    background: var(--ink);
    color: var(--text);
    font: inherit;
}
.vc-select:focus { border-color: var(--signal); outline: none; }

/* ==========================================================================
   Footer · departure board
   ========================================================================== */

.vc-footer { position: relative; margin-top: 0; padding: 0 0 28px; background: var(--deep); border-top: 1px solid var(--rail); }
.vc-footer__route { position: relative; display: flex; justify-content: space-between; height: 8px; margin: 0 0 clamp(48px, 6vw, 80px); background: var(--signal); }
.vc-footer__route span {
    position: relative;
    top: -8px;
    width: 24px;
    height: 24px;
    border: 5px solid var(--lc);
    border-radius: 50%;
    background: var(--deep);
}
.vc-footer__route span:first-child { margin-left: clamp(16px, 4vw, 48px); }
.vc-footer__route span:last-child { margin-right: clamp(16px, 4vw, 48px); }

.vc-footer__board {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.1fr 1.2fr;
    gap: 0;
    border: 1px solid var(--rail);
    background: var(--ink);
}
.vc-footer__board > * { padding: 24px 22px 26px; border-right: 1px solid var(--rail); }
.vc-footer__board > *:last-child { border-right: 0; }
.vc-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.vc-footer__tag { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.55; }

.vc-footer__h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--rail);
    font-size: 13px;
    font-weight: 600;
}
.vc-footer__flap {
    display: inline-block;
    padding: 5px 8px 4px;
    background: var(--panel-2);
    color: var(--signal);
    font-family: var(--f-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background-image: linear-gradient(transparent calc(50% - .5px), var(--seam) calc(50% - .5px), var(--seam) calc(50% + .5px), transparent calc(50% + .5px));
}
.vc-footer__h-plat { color: var(--faint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.vc-footer .footer-menu-list { display: block; margin: 0; padding: 0; list-style: none; counter-reset: plat; align-items: stretch; text-align: left; }
.vc-footer .footer-menu-list li { counter-increment: plat; margin: 0; padding: 0; border-bottom: 1px dashed var(--rail); }
.vc-footer .footer-menu-list li:last-child { border-bottom: 0; }
.vc-footer .footer-menu-list a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.35;
    text-decoration: none;
    transition: color .2s;
}
.vc-footer .footer-menu-list a::after {
    content: counter(plat, decimal-leading-zero);
    flex: 0 0 auto;
    color: var(--signal);
    font-family: var(--f-mono);
    font-size: 12px;
}
.vc-footer .footer-menu-list a:hover { color: var(--signal); }

.vc-footer__rows { margin: 0; }
.vc-footer__rows > div { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--rail); }
.vc-footer__rows > div:last-child { border-bottom: 0; }
.vc-footer__rows dt { color: var(--faint); font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.9; }
.vc-footer__rows dd { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.vc-footer__rows a { text-decoration: none; border-bottom: 1px solid var(--rail-2); }
.vc-footer__rows a:hover { color: var(--signal); }

.vc-pay { display: flex; gap: 8px; }
.vc-pay svg { width: 50px; height: auto; }

.vc-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 22px; }
.vc-footer__copy { margin: 0; max-width: 90ch; color: var(--dim); font-size: 13.5px; line-height: 1.6; }
.vc-footer__end { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.vc-footer__end-dot { width: 14px; height: 14px; border: 4px solid var(--signal); border-radius: 50%; }
/* ==========================================================================
   Glostad Coding M2 · 02 sections
   Hero map, departures board, route strip, playground, signal check,
   terminus tickets, boarding sign, fare passes, announcements, about,
   contact, inner station-sign band, auth dock.
   ========================================================================== */

/* ---------- hero: network map ---------- */

.vc-hero {
    position: relative;
    padding: clamp(40px, 6vw, 84px) 0 clamp(64px, 8vw, 112px);
    background-color: var(--ink);
    background-image: radial-gradient(var(--dots) 1px, transparent 1.4px);
    background-size: 28px 28px;
}
.vc-hero__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 28px 32px;
    align-items: start;
}
.vc-hero__head { grid-column: 1 / -1; }
.vc-hero__title {
    max-width: 15ch;
    margin: 0;
    font-size: clamp(42px, 6.4vw, 104px);
    font-stretch: 125%;
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.03em;
}
.vc-hero__title .vc-serif { color: var(--signal); font-size: 1.14em; line-height: .8; padding-right: .04em; }
.vc-hero__copy { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 26px; padding-top: 6px; }
.vc-hero__copy .vc-lead { font-size: 18px; }
.vc-map { grid-column: 5 / -1; }

.vc-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.vc-legend__chip {
    display: grid;
    grid-template-columns: 20px auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 12px;
    border: 2px solid var(--rail);
    background: var(--panel);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s, background-color .2s;
}
.vc-legend__bar { height: 6px; background: var(--lc); }
.vc-legend__code { color: var(--lc); font-family: var(--f-mono); font-size: 13px; font-weight: 700; }
.vc-legend__chip:hover { border-color: var(--rail-2); }
.vc-legend__chip[aria-pressed="true"] { border-color: var(--lc); background: var(--panel-2); }

.vc-map { position: relative; margin: 0; border: 1px solid var(--rail); background: var(--map-bg); }
.vc-map__svg { display: block; width: 100%; height: auto; touch-action: manipulation; }

.vc-map__walk path { fill: none; stroke: var(--dim); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.vc-map__walk circle { fill: var(--signal); }
.vc-map__you { fill: var(--dim); font-family: var(--f-mono); font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }

.vc-map__line { cursor: pointer; transition: opacity .35s var(--ease); }
.vc-map__hit { fill: none; stroke: transparent; stroke-width: 30; pointer-events: stroke; }
.vc-map__track {
    fill: none;
    stroke: var(--lc);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
}
.vc-map__stn { fill: var(--ink); stroke: var(--text); stroke-width: 3.5; }
.vc-map__code {
    fill: var(--text);
    font-family: var(--f-mono);
    font-size: 15px;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--ink);
    stroke-width: 5px;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity .3s;
}
.vc-map__term circle { fill: var(--ink); stroke: var(--lc); stroke-width: 6; }
.vc-map__term .vc-map__term-core { fill: var(--lc); stroke: none; }
.vc-map__label {
    fill: var(--text);
    font-family: var(--f-display);
    font-size: 17px;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--ink);
    stroke-width: 6px;
    stroke-linejoin: round;
}
.vc-map__label-code { fill: var(--lc); font-family: var(--f-mono); font-size: 14px; }
.vc-map__hub rect { fill: var(--ink); stroke: var(--text); stroke-width: 5; }
.vc-map__hub-name { fill: var(--text); font-family: var(--f-display); font-size: 21px; font-stretch: 125%; font-weight: 800; }
.vc-map__hub-note { fill: var(--dim); font-family: var(--f-mono); font-size: 13px; }

.vc-map.has-active .vc-map__line { opacity: .14; }
.vc-map.has-active .vc-map__line.is-active { opacity: 1; }
.vc-map .vc-map__line.is-active .vc-map__code { opacity: 1; }
.vc-map .vc-map__line:hover .vc-map__track { stroke-width: 11; }

/* draw on load (js only; reduced motion shows everything still) */
.js .vc-map__track { stroke-dashoffset: 1; animation: vc-draw 1.5s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .14s + .15s); }
.js .vc-map__stn, .js .vc-map__term { opacity: 0; animation: vc-fade .4s ease forwards; animation-delay: calc(var(--i, 0) * .14s + 1.1s + var(--s, 0) * .05s); }
.js .vc-map__term { animation-delay: calc(var(--i, 0) * .14s + 1.55s); }
@keyframes vc-draw { to { stroke-dashoffset: 0; } }
@keyframes vc-fade { to { opacity: 1; } }

.vc-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 14px 28px;
    padding: 20px 22px 22px;
    border-top: 1px solid var(--rail);
    background: var(--panel);
    --lc: var(--signal);
}
.vc-card__head { display: flex; align-items: center; gap: 14px; }
.vc-card__bullet { flex: 0 0 auto; width: 26px; height: 26px; border: 6px solid var(--lc); border-radius: 50%; background: var(--ink); }
.vc-card__plat { margin: 0; color: var(--lc); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.vc-card__title { margin: 2px 0 0; font-size: 24px; font-stretch: 118%; font-weight: 800; line-height: 1.1; }
.vc-card__text { grid-column: 1; margin: 0; color: var(--dim); font-size: 15px; line-height: 1.55; }
.vc-card__stops {
    grid-column: 2;
    grid-row: 1 / span 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 18px;
    margin: 0;
    padding: 0 0 0 18px;
    border-left: 4px solid var(--lc);
    list-style: none;
    font-size: 14.5px;
}
.vc-card__stops li { display: flex; gap: 8px; line-height: 1.35; }
.vc-card__stops b { flex: 0 0 auto; min-width: 34px; color: var(--lc); font-family: var(--f-mono); font-size: 12.5px; font-weight: 700; line-height: 1.6; }
.vc-card__term { grid-column: 1; margin: 0; padding: 8px 10px; background: var(--ink); border-left: 6px solid var(--lc); font-size: 14.5px; }
.vc-card__term b { color: var(--lc); font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; }
.vc-card [hidden] { display: none !important; }

/* ---------- departures: split-flap board ---------- */

.vc-board { padding: 10px; background: var(--deep); border: 1px solid var(--rail); }
.vc-board__cols, .vc-board__row {
    display: grid;
    grid-template-columns: 64px minmax(0, 2.3fr) minmax(0, 1.3fr) minmax(0, 1.5fr) 72px 34px;
    gap: 18px;
    align-items: center;
}
.vc-board__cols {
    padding: 8px 16px 12px;
    color: var(--faint);
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.vc-board__cols span:nth-child(5) { text-align: center; }
.vc-board__rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.vc-board__row {
    width: 100%;
    min-height: 70px;
    padding: 12px 16px;
    border: 0;
    border-left: 6px solid var(--lc);
    background: var(--panel);
    text-align: left;
    cursor: pointer;
    transition: background-color .2s;
}
.vc-board__row:hover, .vc-board__row[aria-pressed="true"] { background: var(--panel-2); }
.vc-board__chip {
    display: grid;
    place-items: center;
    height: 38px;
    background: var(--lc);
    color: var(--line-ink);
    font-family: var(--f-mono);
    font-size: 15px;
    font-weight: 700;
}
.vc-board__name { color: var(--text); font-family: var(--f-mono); font-size: 17px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1.5; }
.vc-board__first, .vc-board__dest { color: var(--dim); font-size: 15px; line-height: 1.35; }
.vc-board__k { display: none; }
.vc-board__plat {
    display: grid;
    place-items: center;
    height: 44px;
    border: 2px solid var(--rail-2);
    color: var(--signal);
    font-family: var(--f-mono);
    font-size: 22px;
    font-weight: 700;
}
.vc-board__go { color: var(--lc); font-family: var(--f-mono); font-size: 20px; transition: transform .25s var(--ease); }
.vc-board__row:hover .vc-board__go, .vc-board__row:focus-visible .vc-board__go { transform: translateX(5px); }

/* split-flap tiles (built by scripts.js) */
.vc-flap-w { display: inline-block; white-space: nowrap; margin-right: .5em; }
.vc-flap-w:last-child { margin-right: 0; }
.vc-flap-c {
    display: inline-block;
    min-width: .9em;
    margin: 0 1px 2px 0;
    padding: 0 .08em;
    background-color: var(--flap);
    background-image: linear-gradient(transparent calc(50% - .5px), var(--seam-2) calc(50% - .5px), var(--seam-2) calc(50% + .5px), transparent calc(50% + .5px));
    text-align: center;
    transform-origin: 50% 50%;
}
.vc-flap-c.is-flip { animation: vc-flip .09s linear; }
@keyframes vc-flip {
    0% { transform: scaleY(1); }
    50% { transform: scaleY(.1); }
    100% { transform: scaleY(1); }
}

/* ---------- the route: tabs + horizontal station strip ---------- */

.vc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.vc-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 8px 16px;
    border: 2px solid var(--rail);
    background: transparent;
    color: var(--dim);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, color .2s, background-color .2s;
}
.vc-tabs__bar { width: 18px; height: 6px; background: var(--lc); }
.vc-tabs__tab:hover { color: var(--text); border-color: var(--rail-2); }
.vc-tabs__tab[aria-selected="true"] { border-color: var(--lc); background: var(--panel); color: var(--text); }

.vc-route__panel[hidden] { display: none; }
.vc-route__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 40px;
    align-items: end;
    margin-bottom: 36px;
}
.vc-route__plat { grid-column: 1; margin: 0; color: var(--lc); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.vc-route__name { grid-column: 1; margin: 0; font-size: clamp(28px, 3.2vw, 44px); font-stretch: 125%; font-weight: 800; line-height: 1.05; }
.vc-route__sum { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--dim); font-size: 17px; }
.vc-route__tools { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vc-route__tools li { padding: 3px 9px; border: 1px solid var(--rail-2); color: var(--text); font-family: var(--f-mono); font-size: 12.5px; }

.vc-strip { position: relative; }
.vc-strip__list {
    display: flex;
    margin: 0;
    padding: 0 0 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--rail-2) transparent;
    list-style: none;
}
.vc-strip__list:focus-visible { outline-offset: 6px; }
.vc-stn { position: relative; flex: 0 0 min(300px, 78vw); padding: 66px 28px 8px 0; scroll-snap-align: start; }
.vc-stn::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 8px; background: var(--lc); }
.vc-stn::after { content: ""; position: absolute; left: 13px; top: 40px; width: 2px; height: 16px; background: var(--rail-2); }
.vc-stn__dot {
    position: absolute;
    left: 0;
    top: 6px;
    width: 28px;
    height: 28px;
    border: 5px solid var(--text);
    border-radius: 50%;
    background: var(--ink);
}
.vc-stn__code { margin: 0 0 6px; color: var(--lc); font-family: var(--f-mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.vc-stn__title { margin: 0 0 8px; font-size: 21px; font-stretch: 110%; font-weight: 800; line-height: 1.2; }
.vc-stn__text { margin: 0; color: var(--dim); font-size: 15.5px; line-height: 1.55; }
.vc-stn--term { flex-basis: min(340px, 82vw); padding-right: 0; }
.vc-stn--term::before { right: auto; width: 14px; }
.vc-stn--term .vc-stn__dot { width: 34px; height: 34px; top: 3px; border-color: var(--lc); background: var(--lc); }
.vc-stn--term .vc-stn__code { color: var(--text); }
.vc-stn--term .vc-stn__title, .vc-stn--term .vc-stn__text { padding-left: 14px; border-left: 4px solid var(--lc); }
.vc-stn--term .vc-stn__code { padding-left: 18px; }

.vc-strip__nav { display: flex; gap: 8px; margin-top: 18px; }
.vc-strip__btn { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--rail-2); background: transparent; cursor: pointer; }
.vc-strip__btn:hover { border-color: var(--lc); }

/* ---------- playground ---------- */

.vc-play { background: var(--deep-2); }
.vc-play__ex { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-play__pick {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 16px 8px 8px;
    border: 2px solid var(--rail);
    background: var(--panel);
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}
.vc-play__pick-code { display: grid; place-items: center; width: 36px; height: 30px; background: var(--lc); color: var(--line-ink); font-family: var(--f-mono); font-size: 13px; }
.vc-play__pick[aria-pressed="true"] { border-color: var(--lc); background: var(--panel-2); }
.vc-play__pick:hover { border-color: var(--rail-2); }
.vc-play__task { max-width: 72ch; margin: 18px 0 22px; color: var(--dim); }

.vc-play__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border: 1px solid var(--rail); }
.vc-editor { display: flex; flex-direction: column; min-width: 0; background: var(--editor); border-right: 1px solid var(--rail); }
.vc-editor__bar, .vc-preview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 0 10px 0 0;
    background: var(--ink);
    border-bottom: 1px solid var(--rail);
}
.vc-editor__tabs { display: flex; align-self: stretch; }
.vc-editor__tab {
    position: relative;
    min-width: 66px;
    padding: 0 16px;
    border: 0;
    border-right: 1px solid var(--rail);
    background: transparent;
    color: var(--dim);
    font-family: var(--f-mono);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.vc-editor__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--signal); transform: scaleX(0); transition: transform .2s var(--ease); }
.vc-editor__tab[aria-selected="true"] { color: var(--text); background: var(--editor); }
.vc-editor__tab[aria-selected="true"]::after { transform: none; }
.vc-editor__tools { display: flex; align-items: center; gap: 8px; }
.vc-editor__reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 6px 12px;
    border: 1px solid var(--rail-2);
    background: transparent;
    color: var(--dim);
    font-size: 14px;
    cursor: pointer;
}
.vc-editor__reset:hover { color: var(--text); border-color: var(--text); }
.vc-editor__run { min-height: 42px; padding: 8px 14px; font-size: 15px; }

.vc-editor__pane { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; height: 380px; overflow: auto; }
.vc-editor__pane[hidden] { display: none; }
.vc-editor__gutter, .vc-editor__code { margin: 0; font-family: var(--f-mono); font-size: 14px; line-height: 1.7; }
.vc-editor__gutter {
    min-height: 100%;
    padding: 16px 12px 16px 0;
    overflow: visible;
    background: var(--ink);
    border-right: 1px solid var(--rail);
    color: var(--faint);
    text-align: right;
    user-select: none;
}
.vc-editor__code {
    width: 100%;
    height: 100%;
    padding: 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    caret-color: var(--signal);
    white-space: pre;
    overflow-x: auto;
    overflow-y: hidden;
    resize: none;
    tab-size: 2;
    outline: none;
}
.vc-editor__code:focus-visible { box-shadow: inset 0 0 0 2px var(--signal); }
.vc-editor__hint { margin: 0; padding: 10px 16px; border-top: 1px solid var(--rail); color: var(--faint); font-size: 12px; }

.vc-preview { display: flex; flex-direction: column; min-width: 0; background: var(--panel); }
.vc-preview__bar { justify-content: flex-start; padding: 0 16px; color: var(--dim); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.vc-preview__lamp { width: 12px; height: 12px; border-radius: 50%; background: var(--rail-2); }
.vc-preview__lamp.is-ok { background: var(--go); }
.vc-preview__lamp.is-err { background: var(--stop-lamp); }
.vc-preview__status { margin-left: auto; color: var(--faint); text-transform: none; letter-spacing: 0; }
.vc-preview__frame { flex: 1 1 auto; width: 100%; min-height: 290px; border: 0; background: var(--frame-bg); }
.vc-console { border-top: 1px solid var(--rail); background: var(--deep); }
.vc-console__title { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--rail); color: var(--faint); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.vc-console__out { min-height: 74px; max-height: 150px; margin: 0; padding: 8px 16px 12px; overflow: auto; list-style: none; font-family: var(--f-mono); font-size: 13px; line-height: 1.6; }
.vc-console__out li { color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.vc-console__out li::before { content: "› "; color: var(--signal); }
.vc-console__out li.is-err { color: var(--stop-soft); }
.vc-console__out li.is-note { color: var(--faint); }

/* ---------- demo engines (sheet | budget | session | basket | checkin) ---------- */

.vc-editor__name { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0 16px; color: var(--text); font-size: 14px; font-weight: 700; letter-spacing: .04em; }
.vc-editor__name-dot { width: 12px; height: 12px; border: 3px solid var(--signal); border-radius: 50%; }
.vc-editor__body { display: flex; flex-direction: column; gap: 18px; min-height: 380px; max-height: 560px; padding: 18px 16px; overflow: auto; }
.vc-preview__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 18px; min-height: 290px; max-height: 640px; padding: 18px 18px 20px; overflow: auto; }

.vc-eng__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.vc-eng__k { display: block; margin: 0 0 10px; padding: 0; color: var(--dim); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.vc-eng__field { display: grid; gap: 0; min-width: 0; }
.vc-eng__in {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 2px solid var(--rail-2);
    border-radius: 0;
    background: var(--ink);
    color: var(--text);
    font-size: 15px;
}
.vc-eng__in:hover { border-color: var(--rail-3); }
.vc-eng__in:focus-visible { outline: none; border-color: var(--signal); }
.vc-eng__select { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; cursor: pointer; }
.vc-eng__note { min-height: 64px; resize: vertical; font-family: var(--f-display); line-height: 1.5; }
.vc-eng__note::placeholder { color: var(--faint); }
.vc-eng__table { width: 100%; border-collapse: collapse; font-size: 15px; }
.vc-eng__table th, .vc-eng__table td { padding: 6px 8px 6px 0; text-align: left; vertical-align: middle; }
.vc-eng__table thead th { color: var(--dim); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.vc-eng__table tbody th { position: relative; padding-left: 14px; font-weight: 700; }
.vc-eng__table tbody th::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; background: var(--lc, var(--signal)); }
.vc-eng__table .vc-eng__in { min-width: 90px; }
.vc-eng__note[hidden], .vc-out__empty[hidden] { display: none; }
p.vc-eng__note { min-height: 0; margin: 0; color: var(--stop-soft); font-size: 14px; }
.vc-out__empty { margin: 0; color: var(--faint); font-size: 15px; }
.vc-out__sum { margin: 0; color: var(--dim); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }

.vc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 12px;
    border: 2px solid var(--rail-2);
    background: var(--panel);
    color: var(--dim);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}
.vc-chip:hover { border-color: var(--rail-3); color: var(--text); }
.vc-chip[aria-pressed="true"] { border-color: var(--lc, var(--signal)); background: var(--panel-2); color: var(--text); }
.vc-chip:not(.vc-chip--badge)[aria-pressed="true"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lc, var(--signal)); }
.vc-chip__badge { display: grid; place-items: center; width: 24px; height: 24px; background: var(--lc); color: var(--line-ink); font-size: 12px; font-weight: 700; }

/* sheet */
.vc-fx { display: grid; grid-template-columns: auto minmax(0, 1fr); border: 2px solid var(--rail-2); background: var(--ink); }
.vc-fx:focus-within { border-color: var(--signal); }
.vc-fx__k { display: grid; place-items: center; padding: 0 12px; border-right: 2px solid var(--rail-2); color: var(--signal); font-size: 14px; font-style: italic; font-weight: 700; }
.vc-fx__in { width: 100%; min-height: 46px; padding: 8px 12px; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: 15px; outline: none; }
.vc-fx__fns { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-fx__fn { min-height: 34px; padding: 4px 10px; border: 1px solid var(--rail-2); background: transparent; color: var(--dim); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.vc-fx__fn:hover { border-color: var(--signal); color: var(--text); }
.vc-sheet-wrap { overflow-x: auto; border: 1px solid var(--rail); }
.vc-sheet { width: 100%; border-collapse: collapse; font-size: 14px; }
.vc-sheet th, .vc-sheet td { padding: 0; border: 1px solid var(--rail); }
.vc-sheet thead th, .vc-sheet__no { background: var(--ink); color: var(--faint); font-size: 12px; font-weight: 500; text-align: center; }
.vc-sheet__corner { width: 36px; }
.vc-sheet__no { width: 36px; }
.vc-sheet__col, .vc-sheet__cell { display: block; width: 100%; min-height: 34px; padding: 6px 10px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; white-space: nowrap; cursor: pointer; }
.vc-sheet__col { text-align: center; }
.vc-sheet__col:hover, .vc-sheet__cell:hover { background: var(--panel-2); }
.vc-sheet td { color: var(--text); }
.vc-sheet td.is-num .vc-sheet__cell { font-family: var(--f-mono); text-align: right; }
.vc-sheet tr.is-head td { color: var(--dim); font-weight: 700; }
.vc-sheet td.is-in { background: var(--signal-wash); box-shadow: inset 0 0 0 1px var(--signal); }

.vc-result { padding: 18px 18px 20px; border: 1px solid var(--rail); border-left: 6px solid var(--signal); background: var(--ink); }
.vc-result.is-ok { border-left-color: var(--go); }
.vc-result.is-err { border-left-color: var(--stop); }
.vc-result__k { margin: 0; color: var(--dim); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.vc-result__v { margin: 6px 0 4px; font-size: clamp(34px, 4vw, 48px); font-stretch: 112%; font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; }
.vc-result.is-err .vc-result__v { color: var(--stop-soft); }
.vc-result__f { margin: 0; color: var(--faint); font-size: 13px; overflow-wrap: anywhere; }
.vc-result__s { margin: 10px 0 0; color: var(--text); font-size: 15px; }
.vc-result.is-ok .vc-result__s { color: var(--go-soft); }
.vc-result.is-err .vc-result__s { color: var(--stop-soft); }

/* burn bars (budget, mood counts) */
.vc-bars { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.vc-bars__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; font-size: 15px; }
.vc-bars__name { font-weight: 700; }
.vc-bars__val { color: var(--dim); font-size: 13px; }
.vc-bars__track { position: relative; height: 10px; overflow: hidden; background: var(--rail); }
.vc-bars__track i { position: absolute; inset: 0; background: var(--lc, var(--signal)); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.vc-bars__row.is-near .vc-bars__val { color: var(--signal); }
.vc-bars__row.is-over .vc-bars__val { color: var(--stop-soft); }
.vc-bars__row.is-over .vc-bars__track { box-shadow: inset 0 0 0 2px var(--stop); }
.vc-bars__row.is-over .vc-bars__track i { background: var(--stop); }
.vc-bars--mini { gap: 10px; }
.vc-bars--mini .vc-bars__top { font-size: 14px; margin-bottom: 4px; }
.vc-bars--mini .vc-bars__track { height: 8px; }

/* session: routine */
.vc-routine { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.vc-move { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 12px 12px 0; border: 1px solid var(--rail); border-left: 6px solid var(--lc); background: var(--ink); }
.vc-move__badge { display: grid; place-items: center; width: 34px; height: 34px; margin-left: 10px; background: var(--lc); color: var(--line-ink); font-size: 15px; font-weight: 700; }
.vc-move__main { min-width: 0; }
.vc-move__name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.vc-move__meta { margin: 2px 0 10px; color: var(--faint); font-size: 12.5px; }
.vc-move__sets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vc-move__sets-k { margin-right: 4px; color: var(--dim); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.vc-set { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid var(--rail-2); background: transparent; color: var(--dim); font-size: 13px; cursor: pointer; }
.vc-set:hover { border-color: var(--lc); }
.vc-set[aria-pressed="true"] { border-color: var(--lc); background: var(--lc); color: var(--line-ink); }
.vc-move__tools { display: flex; flex-direction: column; gap: 6px; }
.vc-move__btn { min-height: 34px; padding: 4px 10px; border: 1px solid var(--rail-2); background: transparent; color: var(--dim); font-size: 13px; cursor: pointer; }
.vc-move__btn:hover { border-color: var(--text); color: var(--text); }
.vc-move__btn--rm:hover { border-color: var(--stop-edge); color: var(--stop-soft); }

/* basket: week plan + shopping list */
.vc-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.vc-week__row { padding-left: 10px; border-left: 5px solid var(--lc); }
.vc-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vc-tick__row { display: grid; grid-template-columns: 22px minmax(64px, auto) minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--rail); border-left: 5px solid var(--lc); background: var(--ink); cursor: pointer; }
.vc-tick__cb { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vc-tick__box { grid-row: 1 / span 2; width: 22px; height: 22px; border: 2px solid var(--rail-3); }
.vc-tick__cb:focus-visible + .vc-tick__box { outline: 2px solid var(--signal); outline-offset: 2px; }
.vc-tick__cb:checked + .vc-tick__box { border-color: var(--go); background: var(--go); box-shadow: inset 0 0 0 4px var(--ink); }
.vc-tick__q { color: var(--signal); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.vc-tick__n { font-weight: 600; }
.vc-tick__for { grid-column: 2 / -1; color: var(--faint); font-size: 12px; }
.vc-tick.is-done .vc-tick__n, .vc-tick.is-done .vc-tick__q { color: var(--faint); text-decoration: line-through; }

/* checkin: moods, week strip, counts */
.vc-moods { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.vc-mood { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 76px; padding: 12px 8px; border: 2px solid var(--rail-2); background: var(--panel); color: var(--dim); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .15s, background-color .15s; }
.vc-mood:hover { border-color: var(--lc); color: var(--text); }
.vc-mood__dot { width: 22px; height: 22px; border: 5px solid var(--lc); border-radius: 50%; background: var(--ink); transition: transform .2s var(--ease); }
.vc-mood[aria-pressed="true"] { border-color: var(--lc); background: var(--panel-2); color: var(--text); }
.vc-mood[aria-pressed="true"] .vc-mood__dot { background: var(--lc); transform: scale(1.15); }
.vc-weekstrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.vc-wday { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 10px 4px 12px; border: 1px solid var(--rail); border-top: 5px solid var(--lc, var(--rail-2)); background: var(--ink); text-align: center; }
.vc-wday.is-day { border-color: var(--signal); border-top-color: var(--lc, var(--signal)); }
.vc-wday__d { color: var(--dim); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.vc-wday__dot { width: 20px; height: 20px; border: 4px solid var(--lc, var(--rail-2)); border-radius: 50%; background: var(--lc, transparent); }
.vc-wday.is-empty { --lc: var(--rail-2); }
.vc-wday.is-empty .vc-wday__dot { background: transparent; border-style: dashed; }
.vc-wday__m { max-width: 100%; color: var(--text); font-size: 12.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.vc-wday.is-empty .vc-wday__m { color: var(--faint); }
.vc-counts .vc-eng__k { margin-top: 4px; }
.vc-tagcount { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vc-tagcount li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border: 1px solid var(--rail-2); font-size: 13.5px; }
.vc-tagcount b { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; background: var(--signal); color: var(--signal-ink); font-size: 12px; }
.vc-tagcount li.is-zero { color: var(--faint); }
.vc-tagcount li.is-zero b { background: var(--rail); color: var(--dim); }

/* quiz in plain-text mode */
.vc-signal--plain .vc-snippet__txt { font-size: 16px; line-height: 1.45; white-space: normal; }
.vc-signal--plain .vc-snippet__ln { min-height: 48px; padding-top: 8px; padding-bottom: 8px; }

/* ---------- signal check ---------- */

.vc-signal__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: start; }
.vc-signal__side { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 24px; align-items: start; }
.vc-signal__picks { grid-column: 2; grid-row: 1; display: grid; gap: 8px; }
.vc-signal__pick {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 56px;
    padding: 10px 14px;
    border: 2px solid var(--rail);
    border-left: 6px solid var(--lc);
    background: var(--panel);
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}
.vc-signal__pick .vc-mono { color: var(--lc); font-size: 13px; }
.vc-signal__pick:hover { border-color: var(--rail-2); border-left-color: var(--lc); }
.vc-signal__pick[aria-pressed="true"] { border-color: var(--lc); background: var(--panel-2); }

.vc-lights { grid-column: 1; grid-row: 1; position: relative; display: grid; justify-items: center; gap: 12px; width: 100px; padding: 16px 0 18px; background: var(--deep); border: 2px solid var(--rail-2); }
.vc-lights__lamp { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--lamp-off); border: 3px solid var(--lamp-rim); }
.vc-lights__lamp::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; opacity: 0; transition: opacity .25s; }
.vc-lights__lamp--red::after { background: var(--stop); }
.vc-lights__lamp--amber::after { background: var(--signal); }
.vc-lights__lamp--green::after { background: var(--go); }
.vc-lights[data-state="wait"] .vc-lights__lamp--amber::after,
.vc-lights[data-state="red"] .vc-lights__lamp--red::after,
.vc-lights[data-state="green"] .vc-lights__lamp--green::after { opacity: 1; }
.vc-lights__post { position: absolute; left: 50%; top: 100%; width: 12px; height: 70px; margin-left: -6px; background: var(--rail-2); }

.vc-snippet { border: 1px solid var(--rail); background: var(--editor); }
.vc-snippet__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; padding: 12px 16px; background: var(--ink); border-bottom: 1px solid var(--rail); color: var(--dim); font-size: 14px; }
.vc-snippet__bar .vc-mono { color: var(--text); font-size: 13px; }
.vc-snippet__sym { color: var(--stop-soft); font-family: var(--f-mono); font-size: 13px; }
.vc-snippet__lines { margin: 0; padding: 8px 0; list-style: none; }
.vc-snippet__ln {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 4px 16px 4px 0;
    border: 0;
    border-left: 4px solid transparent;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: background-color .15s;
}
.vc-snippet__ln:hover, .vc-snippet__ln:focus-visible { background: var(--panel-2); }
.vc-snippet__no { color: var(--faint); font-family: var(--f-mono); font-size: 13px; text-align: right; padding-right: 14px; }
.vc-snippet__ln code { font-family: var(--f-mono); font-size: 15px; white-space: pre; overflow-x: auto; }
.vc-snippet__ln.is-wrong { border-left-color: var(--stop); background: var(--stop-wash); }
.vc-snippet__ln.is-right { border-left-color: var(--go); background: var(--go-wash); }
.vc-verdict { margin-top: 14px; padding: 16px 18px; border: 1px solid var(--rail); border-left: 6px solid var(--signal); background: var(--panel); }
.vc-verdict[data-state="red"] { border-left-color: var(--stop); }
.vc-verdict[data-state="green"] { border-left-color: var(--go); }
.vc-verdict__state { margin: 0; color: var(--text); font-size: 14px; }
.vc-verdict__text { margin: 8px 0 0; color: var(--dim); font-size: 16px; }
.vc-verdict__text:empty { display: none; }
.vc-verdict .vc-btn { margin-top: 14px; }

/* ---------- terminus tickets ---------- */

.vc-tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.vc-ticket { position: relative; display: flex; flex-direction: column; background: var(--ticket); color: var(--ticket-ink); }
.vc-ticket__photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--photo-bg); }
.vc-ticket__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.vc-ticket:hover .vc-ticket__photo img { transform: scale(1.04); }
.vc-ticket__stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 16px; background: var(--lc); }
.vc-ticket__body { flex: 1 1 auto; padding: 20px 22px 22px; }
.vc-ticket__code { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ticket-ink-2); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vc-ticket__code::before { content: ""; width: 12px; height: 12px; background: var(--lc); }
.vc-ticket__title { margin: 0 0 8px; font-size: 23px; font-stretch: 118%; font-weight: 800; line-height: 1.15; }
.vc-ticket__text { margin: 0; color: var(--ticket-ink-3); font-size: 15.5px; line-height: 1.55; }
.vc-ticket__stub {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 16px;
    padding: 14px 22px 16px;
    border-top: 2px dashed var(--ticket-perf);
    font-size: 13.5px;
    font-weight: 600;
}
.vc-ticket__stub::before, .vc-ticket__stub::after {
    content: "";
    position: absolute;
    top: -12px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ink);
}
.vc-ticket__stub::before { left: -11px; }
.vc-ticket__stub::after { right: -11px; }
.vc-ticket__k { display: block; color: var(--ticket-k); font-family: var(--f-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- boarding from zero ---------- */

.vc-boarding__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.vc-boarding__photo { position: relative; grid-column: 1 / span 5; margin: 0; min-height: 420px; overflow: hidden; background: var(--photo-bg); }
.vc-boarding__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-boarding__bands { position: absolute; left: 0; right: 0; bottom: 0; display: grid; }
.vc-boarding__bands i { display: block; height: 7px; }
.vc-boarding__bands i { background: var(--lc); }

.vc-platsign { grid-column: 6 / -1; display: flex; flex-direction: column; background: var(--deep); border: 1px solid var(--rail); border-top: 10px solid var(--signal); }
.vc-platsign__head { display: flex; align-items: center; gap: 22px; padding: 24px 28px; border-bottom: 1px solid var(--rail); }
.vc-platsign__num { display: grid; place-items: center; flex: 0 0 auto; width: 84px; height: 84px; background: var(--signal); color: var(--signal-ink); font-family: var(--f-mono); font-size: 48px; font-weight: 700; }
.vc-platsign__k { margin: 0 0 6px; color: var(--dim); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.vc-platsign__title { margin: 0; font-family: var(--f-mono); font-size: clamp(22px, 2.6vw, 34px); font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.vc-platsign__list { flex: 1 1 auto; margin: 0; padding: 8px 28px; list-style: none; }
.vc-platsign__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px dashed var(--rail); }
.vc-platsign__list li:last-child { border-bottom: 0; }
.vc-platsign__no { color: var(--signal); font-size: 15px; font-weight: 700; line-height: 1.75; }
.vc-platsign__list p { margin: 0; font-size: 18px; line-height: 1.55; }
.vc-platsign__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 28px 24px; border-top: 1px solid var(--rail); }
.vc-platsign__note { margin: 0; color: var(--dim); font-size: 24px; line-height: 1.2; }

/* ---------- fares: transit passes ---------- */

.vc-passes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; align-items: start; }
.vc-pass { display: flex; flex-direction: column; gap: 22px; }
.vc-pass__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 250px;
    padding: 20px 22px 70px 44px;
    overflow: hidden;
    background: var(--panel-2);
    border: 1px solid var(--rail-2);
    border-radius: 12px;
}
.vc-pass.is-featured .vc-pass__card { border: 2px solid var(--signal); }
.vc-pass__band { position: absolute; left: 0; top: 0; bottom: 0; width: 20px; background: var(--lc); }
.vc-pass__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vc-pass__k { margin: 0; color: var(--dim); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.vc-pass__flag { margin: 0; padding: 3px 8px; background: var(--signal); color: var(--signal-ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.vc-pass__name { margin: 0; font-size: 22px; font-stretch: 118%; font-weight: 800; line-height: 1.15; }
.vc-pass__price { margin: 6px 0 0; font-size: clamp(36px, 3.4vw, 46px); font-stretch: 125%; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.vc-pass__int { margin: 6px 0 0; color: var(--dim); font-size: 12.5px; }
.vc-pass__stripe {
    position: absolute;
    left: 20px;
    right: 0;
    bottom: 34px;
    height: 26px;
    background: var(--deep-3);
    background-image: repeating-linear-gradient(90deg, var(--sheen) 0 2px, transparent 2px 7px);
}
.vc-pass__trial { position: absolute; left: 44px; right: 22px; bottom: 8px; margin: 0; color: var(--signal); font-size: 12.5px; font-weight: 700; }
.vc-pass__list { margin: 0 0 0 10px; padding: 4px 0 4px 22px; border-left: 4px solid var(--lc); list-style: none; }
.vc-pass__list li { position: relative; padding: 6px 0; color: var(--text); font-size: 15.5px; line-height: 1.45; }
.vc-pass__list li::before { content: ""; position: absolute; left: -33px; top: 10px; width: 14px; height: 14px; border: 3px solid var(--text); border-radius: 50%; background: var(--ink); }

/* ---------- announcements (FAQ) ---------- */

.vc-faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
.vc-faq__head { grid-column: 1 / span 4; position: sticky; top: 40px; margin: 0; }
.vc-faq__head .vc-btn { margin-top: 22px; }
.vc-faq__list { grid-column: 6 / -1; border-top: 1px solid var(--rail); }
.vc-ann { border-bottom: 1px solid var(--rail); }
.vc-ann summary {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    grid-template-areas: "chime no sign" ". q sign";
    gap: 4px 14px;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
}
.vc-ann summary::-webkit-details-marker { display: none; }
.vc-ann__chime { grid-area: chime; color: var(--faint); }
.vc-ann__no { grid-area: no; color: var(--faint); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.vc-ann__q { grid-area: q; font-size: 20px; font-weight: 700; line-height: 1.3; }
.vc-ann__sign { grid-area: sign; position: relative; width: 30px; height: 30px; border: 2px solid var(--rail-2); }
.vc-ann__sign::before, .vc-ann__sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--text); transition: transform .25s var(--ease); }
.vc-ann__sign::after { transform: rotate(90deg); }
.vc-ann[open] .vc-ann__sign { border-color: var(--signal); }
.vc-ann[open] .vc-ann__sign::after { transform: rotate(0); }
.vc-ann[open] .vc-ann__chime, .vc-ann[open] .vc-ann__no { color: var(--signal); }
.vc-ann summary:hover .vc-ann__q { color: var(--signal); }
.vc-ann__a { margin: 0; padding: 0 44px 22px 44px; color: var(--dim); font-size: 17px; }

/* ---------- about ---------- */

.vc-about__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; }
.vc-about__photo { grid-column: 1 / span 5; margin: 0; }
.vc-about__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-left: 14px solid var(--signal); }
.vc-about__photo figcaption { margin-top: 10px; color: var(--faint); font-size: 12.5px; }
.vc-about__copy { grid-column: 7 / -1; }
.vc-about__text { margin: 26px 0 32px; color: var(--dim); font-size: 18px; }
.vc-about__text p { margin: 0 0 1em; }
.vc-index { margin: 0 0 26px; padding: 0; list-style: none; border-top: 1px solid var(--rail); }
.vc-index li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--rail); }
.vc-index__chip { display: grid; place-items: center; height: 30px; background: var(--lc); color: var(--line-ink); font-size: 13px; font-weight: 700; }
.vc-index__name { font-weight: 700; }
.vc-index__end { color: var(--dim); font-size: 12.5px; text-align: right; }

/* ---------- inner pages: station-sign band ---------- */

.vc-sign-band { padding: clamp(40px, 6vw, 80px) 0 0; border-bottom: 1px solid var(--rail); }
.vc-plate { display: inline-flex; align-items: stretch; max-width: 100%; background: var(--deep); border: 1px solid var(--rail); border-top: 8px solid var(--lc); }
.vc-plate__bullet { display: grid; place-items: center; flex: 0 0 auto; width: clamp(64px, 8vw, 96px); background: var(--lc); color: var(--line-ink); font-size: clamp(18px, 2vw, 26px); font-weight: 700; }
.vc-plate__body { min-width: 0; padding: 16px clamp(18px, 3vw, 34px) 20px; }
.vc-plate__k { margin: 0 0 4px; color: var(--dim); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vc-plate__title { margin: 0; font-size: clamp(30px, 5vw, 68px); font-stretch: 125%; font-weight: 900; line-height: 1.02; letter-spacing: -.02em; overflow-wrap: anywhere; }
.vc-plate__title .vc-serif { color: var(--lc); font-size: 1.1em; }
.vc-sign-band__text { max-width: 60ch; margin: 22px 0 0; color: var(--dim); font-size: 18px; }
.vc-sign-band__route { display: flex; justify-content: space-around; height: 8px; margin-top: clamp(40px, 5vw, 64px); background: var(--lc); }
.vc-sign-band__route span { position: relative; top: -8px; width: 24px; height: 24px; border: 5px solid var(--text); border-radius: 50%; background: var(--ink); }

.vc-panel { padding: clamp(22px, 3vw, 34px); background: var(--panel); border: 1px solid var(--rail); }
.vc-panel__title { margin: 0 0 20px; font-size: 22px; font-stretch: 118%; font-weight: 800; }
.vc-panel--lines { border-top: 0; background-image: var(--lines, linear-gradient(90deg, var(--signal), var(--signal))); background-size: 100% 6px; background-repeat: no-repeat; background-color: var(--panel); }
.vc-panel__buttons { display: grid; gap: 10px; }
.vc-profile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.vc-profile__side { display: grid; gap: 28px; }

/* ---------- contact ---------- */

.vc-contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px; align-items: start; }
.vc-contact__info { grid-column: 1 / span 5; }
.vc-contact .vc-panel { grid-column: 7 / -1; border-top: 6px solid var(--signal); }
.vc-contact__h { margin: 0 0 10px; font-size: 26px; font-stretch: 118%; font-weight: 800; }
.vc-contact__p { margin: 0 0 24px; color: var(--dim); }
.vc-desk { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rail); }
.vc-desk li { display: grid; grid-template-columns: 26px 118px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed var(--rail); }
.vc-desk__ico { color: var(--signal); transform: translateY(3px); }
.vc-desk__k { color: var(--faint); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.vc-desk__v { overflow-wrap: anywhere; }
.vc-desk__v a { text-decoration: none; border-bottom: 2px solid var(--signal); }
.vc-contact__op { margin: 20px 0 0; color: var(--faint); font-size: 12.5px; }

/* ---------- auth dock ---------- */

.vc-auth { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 540px); min-height: max(720px, 100vh); }
.vc-auth__photo { position: relative; grid-column: 1 / -1; grid-row: 1; margin: 0; overflow: hidden; background: var(--photo-bg); }
.vc-auth__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-auth__mark { position: absolute; left: 24px; bottom: 24px; padding: 7px 12px; background: var(--ink); border-left: 6px solid var(--lc); color: var(--text); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vc-auth__panel {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 4vw, 60px) clamp(24px, 4vw, 56px);
    background: var(--panel);
    border-left: 1px solid var(--rail);
    border-top: 12px solid var(--lc);
}
.vc-auth__sign { display: inline-flex; align-items: stretch; align-self: flex-start; margin-bottom: 26px; background: var(--ink); border: 1px solid var(--rail); }
.vc-auth__bullet { display: grid; place-items: center; width: 46px; background: var(--lc); color: var(--line-ink); font-size: 14px; font-weight: 700; }
.vc-auth__plat { margin: 0; padding: 10px 16px; font-size: 18px; font-stretch: 112%; font-weight: 800; }
.vc-auth__plat .vc-mono { color: var(--dim); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.vc-auth__title { margin: 0; font-size: clamp(32px, 3.2vw, 46px); font-stretch: 125%; font-weight: 900; line-height: 1.04; letter-spacing: -.02em; }
.vc-auth__text { margin: 14px 0 28px; color: var(--dim); font-size: 17px; }
.vc-auth__actions { margin-top: 4px; }
.vc-auth__links { display: grid; gap: 8px; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--rail); list-style: none; }
.vc-auth__links a { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--lc); }
.vc-auth__links a:hover { color: var(--lc); }

.vc-dashboard { min-height: 60vh; }
/* ==========================================================================
   Glostad Coding M2 · 03 forms, tables, prose, cookie, responsive, reduced motion
   The CRM plugin and the parent render their own markup; .vc-form, .vc-table
   and .vc-prose restyle all of it for the dark ground. Square fields, amber
   focus, signal-dot submit blocks.
   ========================================================================== */

[hidden] { display: none !important; }

/* ---------- forms ---------- */

.vc-form form { display: flex; flex-direction: column; gap: 16px; width: 100%; text-align: left; }
.vc-form p { margin: 0; }
.vc-form label { display: block; margin-bottom: 8px; color: var(--text); font-size: 14px; font-weight: 600; }

.vc-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.vc-form select,
.vc-form textarea {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    border: 2px solid var(--rail-2);
    border-radius: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--f-display);
    font-size: 16px;
    outline: none;
    box-shadow: none;
    transition: border-color .2s;
}
.vc-form input:hover, .vc-form select:hover, .vc-form textarea:hover { border-color: var(--rail-3); }
.vc-form input:focus, .vc-form select:focus, .vc-form textarea:focus { border-color: var(--signal); }
.vc-form input[disabled], .vc-form input[readonly] { opacity: .75; }
.vc-form textarea { min-height: 140px; resize: vertical; }
.vc-form input::placeholder, .vc-form textarea::placeholder { color: var(--faint); opacity: 1; }
.vc-form input[type="checkbox"], .vc-form input[type="radio"] { width: 18px; height: 18px; accent-color: var(--signal); }

/* Autofill keeps the dark field (the :not() chain above out-specifies plain selectors). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--ink) inset !important;
    box-shadow: 0 0 0 1000px var(--ink) inset !important;
    caret-color: var(--text);
    transition: background-color 600000s 0s, color 600000s 0s;
}
input:autofill, textarea:autofill, select:autofill { -webkit-text-fill-color: var(--text) !important; }

.vc-form input[type="submit"],
.vc-form button[type="submit"],
.vc-form button.button,
.vc-form button.btn,
.vc-form .crm-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 12px 22px;
    border: 2px solid var(--signal);
    border-radius: 0;
    background: var(--signal);
    color: var(--signal-ink);
    font-family: var(--f-display);
    font-size: 16px;
    font-stretch: 112%;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .2s, border-color .2s;
}
.vc-form button[type="submit"]::before,
.vc-form .crm-btn-primary::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.vc-form button[type="submit"]::after,
.vc-form .crm-btn-primary::after { content: "→"; font-family: var(--f-mono); }
.vc-form input[type="submit"]:hover,
.vc-form button[type="submit"]:hover,
.vc-form .crm-btn-primary:hover { background: var(--signal-2); border-color: var(--signal-2); }

.vc-form--stop button[type="submit"],
.vc-form--stop input[type="submit"] { background: transparent; color: var(--text); border-color: var(--stop-edge); }
.vc-form--stop button[type="submit"]:hover,
.vc-form--stop input[type="submit"]:hover { background: var(--stop-wash-2); border-color: var(--stop-edge); }

.vc-form a { color: var(--text); text-decoration-color: var(--signal); text-underline-offset: 3px; }
.vc-form a:hover { color: var(--signal); }
.vc-form h1, .vc-form h2, .vc-form h3, .vc-form h4 { color: var(--text); font-family: var(--f-display); font-weight: 800; }

.vc-form .wpcf7-not-valid-tip, .vc-form .error, .vc-form .crm-error { color: var(--stop-soft); font-size: 14px; }
.vc-form .crm-error { padding: 12px 14px; border: 1px solid var(--stop-line); background: var(--stop-wash); }
.vc-form .wpcf7-response-output,
.vc-form .crm-message,
.vc-form .crm-auth-messages:not(:empty) { margin: 0; padding: 12px 14px; border: 1px solid var(--rail-2); color: var(--text); }
.vc-form .crm-auth-messages:empty { display: none; }
.vc-form .crm-button-loading { display: none; }

/* Contact Form 7 (contact + unsubscribe): match the parent's `.wpcf7 form.contact-form …` specificity. */
.vc-form .wpcf7 form.contact-form,
.vc-form .wpcf7 form.unsubscribe-form { max-width: none; margin: 0; font-family: inherit; }
.vc-form .wpcf7 form.contact-form label,
.vc-form .wpcf7 form.unsubscribe-form label { display: block; margin-bottom: 8px; color: var(--text) !important; font-size: 14px; font-weight: 600; }
.vc-form .wpcf7 form.contact-form input[type="text"],
.vc-form .wpcf7 form.contact-form input[type="email"],
.vc-form .wpcf7 form.contact-form input[type="tel"],
.vc-form .wpcf7 form.contact-form input[type="number"],
.vc-form .wpcf7 form.contact-form input[type="url"],
.vc-form .wpcf7 form.contact-form input[type="password"],
.vc-form .wpcf7 form.contact-form input[type="search"],
.vc-form .wpcf7 form.contact-form input[type="date"],
.vc-form .wpcf7 form.contact-form textarea,
.vc-form .wpcf7 form.contact-form select,
.vc-form .wpcf7 form.unsubscribe-form input[type="text"],
.vc-form .wpcf7 form.unsubscribe-form input[type="email"],
.vc-form .wpcf7 form.unsubscribe-form input[type="tel"],
.vc-form .wpcf7 form.unsubscribe-form textarea,
.vc-form .wpcf7 form.unsubscribe-form select {
    width: 100%;
    padding: 13px 15px;
    background: var(--ink) !important;
    border: 2px solid var(--rail-2) !important;
    border-radius: 0 !important;
    color: var(--text) !important;
    font-family: inherit;
    font-size: 16px;
}
.vc-form .wpcf7 form.contact-form input::placeholder,
.vc-form .wpcf7 form.contact-form textarea::placeholder,
.vc-form .wpcf7 form.unsubscribe-form input::placeholder { color: var(--faint) !important; }
.vc-form .wpcf7 form.contact-form input:focus,
.vc-form .wpcf7 form.contact-form textarea:focus,
.vc-form .wpcf7 form.contact-form select:focus,
.vc-form .wpcf7 form.unsubscribe-form input:focus,
.vc-form .wpcf7 form.unsubscribe-form textarea:focus { border-color: var(--signal) !important; box-shadow: none !important; outline: none; }
.vc-form .wpcf7 form.contact-form textarea,
.vc-form .wpcf7 form.unsubscribe-form textarea { min-height: 140px; }
.vc-form .wpcf7 form.contact-form input[type="submit"],
.vc-form .wpcf7 form.unsubscribe-form input[type="submit"] {
    display: block;
    width: 100%;
    min-height: 54px;
    padding: 12px 22px;
    background: var(--signal) !important;
    border: 2px solid var(--signal) !important;
    border-radius: 0 !important;
    color: var(--signal-ink) !important;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}
.vc-form .wpcf7 form.contact-form input[type="submit"]:hover,
.vc-form .wpcf7 form.unsubscribe-form input[type="submit"]:hover { background: var(--signal-2) !important; }
.vc-form--stop .wpcf7 form.unsubscribe-form input[type="submit"] { background: transparent !important; border-color: var(--stop-edge) !important; color: var(--text) !important; }
.vc-form--stop .wpcf7 form.unsubscribe-form input[type="submit"]:hover { background: var(--stop-wash-2) !important; }
.vc-form .wpcf7 form.contact-form .wpcf7-not-valid-tip,
.vc-form .wpcf7 form.unsubscribe-form .wpcf7-not-valid-tip { color: var(--stop-soft) !important; font-size: 13px; }
.vc-form .wpcf7 form.contact-form .wpcf7-response-output,
.vc-form .wpcf7 form.unsubscribe-form .wpcf7-response-output { margin: 4px 0 0 !important; border: 1px solid var(--rail-2) !important; border-radius: 0 !important; background: var(--ink) !important; color: var(--text) !important; }
.vc-form .wpcf7 form.contact-form .wpcf7-mail-sent-ok,
.vc-form .wpcf7 form.unsubscribe-form .wpcf7-mail-sent-ok { border-color: var(--go) !important; color: var(--go-soft) !important; }
.vc-form .wpcf7 form.contact-form .wpcf7-validation-errors,
.vc-form .wpcf7 form.unsubscribe-form .wpcf7-validation-errors { border-color: var(--stop-edge) !important; color: var(--stop-soft) !important; }

.vc-form fieldset.hidden-fields-container { margin: 0; padding: 0; border: 0; }
.vc-form .wpcf7 form .wpcf7-response-output:empty { display: none; }
.vc-form .captcha-cf7-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.vc-form .captcha-cf7-wrap > p { flex: 0 0 100%; margin: 0; }
.vc-form .captcha-cf7-wrap > p:empty { display: none; }
.vc-form .captcha-cf7-wrap .main-cf7-captcha { flex: 1 1 160px; }
.vc-form .captcha-cf7-wrap .main-cf7-captcha .wpcf7-form-control-wrap { display: block; }
.vc-form .wpcf7 form.contact-form #input-captcha-cf7 { margin: 0 !important; }
.vc-form .captcha-image-container { flex: 0 0 auto; margin: 0; gap: 10px; }
.vc-form .captcha-image-container img#captcha-image { height: 52px; width: auto; border: 2px solid var(--rail-2) !important; border-radius: 0 !important; }
.vc-form a#reload_captcha { width: 52px !important; height: 52px !important; background: var(--panel-2) !important; border: 2px solid var(--rail-2) !important; border-radius: 0 !important; color: var(--signal) !important; }
.vc-form a#reload_captcha:hover { border-color: var(--signal) !important; }
.vc-form a#reload_captcha img.emoji { width: 20px; height: 20px; }
.vc-form .wpcf7-spinner { margin: 0 auto; }
.page-unsubscribe .unsubscribe-form label { color: var(--text) !important; }

/* CRM plugin forms: login, forgot / change password, profile, subscription.
   The plugin ships a white 400px card; the theme provides the panel, so flatten it. */
.vc-form .crm-login-form,
.vc-form .crm-forgot-password-form,
.vc-form .crm-change-password-form,
.vc-form .crm-user-dashboard,
.vc-form .crm-user-profile-edit { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.vc-form--auth .crm-login-title,
.vc-form--auth .crm-forgot-password-title,
.vc-form--auth .crm-change-password-title { display: none; }
.vc-form .crm-field-group label,
.vc-form .crm-form-group label { color: var(--text); font-size: 14px; font-weight: 600; }
.vc-form .crm-field-group,
.vc-form .crm-form-group { display: flex; flex-direction: column; width: 100%; margin-bottom: 0; }
.vc-form .crm-login-title,
.vc-form .crm-forgot-password-title,
.vc-form .crm-change-password-title { margin: 0; color: var(--text); font-size: 26px; font-weight: 800; line-height: 1.1; }
.vc-form .crm-forgot-password-description,
.vc-form .crm-change-password-description { margin: -4px 0 0; color: var(--dim); font-size: 15px; line-height: 1.6; }
.vc-form .crm-field-hint { display: block; margin-top: 6px; color: var(--faint); font-size: 13px; }
.vc-form .login-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.vc-form .login-actions .form-input-wrapper { margin: 0; }
.vc-form label.inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--dim); font-weight: 500; cursor: pointer; }
.vc-form label.inline input[type="checkbox"] { margin: 0; flex-shrink: 0; }

/* "I forgot my password" ships as a.button: keep it a link, not a second CTA. */
.vc-form a.button,
.vc-form a.btn,
.vc-form .crm-back-to-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    min-height: 0;
    padding: 0 0 2px;
    border: 0;
    border-bottom: 2px solid var(--lc, var(--signal));
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.vc-form a.button:hover, .vc-form a.btn:hover, .vc-form .crm-back-to-login:hover { color: var(--signal); background: none; }
.vc-form .crm-forgot-password-footer { margin-top: 4px; text-align: center; }

.vc-form .crm-btn-secondary,
.vc-form .crm-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 10px 22px;
    border-radius: 0;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.vc-form .crm-btn-secondary { border: 2px solid var(--rail-2); background: transparent; color: var(--text); }
.vc-form .crm-btn-secondary:hover { border-color: var(--signal); }
.vc-form .crm-btn-danger { border: 2px solid var(--stop-edge); background: transparent; color: var(--text); }
.vc-form .crm-btn-danger:hover { background: var(--stop-wash-2); }

.vc-form button:disabled,
.vc-form input[type="submit"]:disabled,
.vc-form .crm-login-button:disabled,
.vc-form .crm-reset-password-button:disabled,
.vc-form .crm-change-password-button:disabled { background: var(--panel-2); border-color: var(--rail-2); color: var(--dim); cursor: not-allowed; }

.vc-form .crm-form-actions,
.vc-form .crm-subscription-actions,
.vc-form .crm-dashboard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.vc-form .crm-form-actions > *, .vc-form .crm-subscription-actions > * { flex: 1 1 auto; }
.vc-form .crm-profile-field,
.vc-form .crm-subscription-field { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px dashed var(--rail); }
.vc-form .crm-profile-field:last-child, .vc-form .crm-subscription-field:last-child { border-bottom: 0; }
.vc-form .crm-profile-field label, .vc-form .crm-subscription-field label { margin: 0; color: var(--faint); font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.vc-form .crm-profile-field span, .vc-form .crm-subscription-field span { color: var(--text); font-size: 15px; font-weight: 600; text-align: right; word-break: break-word; }
.vc-form .crm-user-info-section,
.vc-form .crm-subscription-section,
.vc-form .crm-dashboard-header,
.vc-form .crm-info-item { margin-bottom: 8px; padding: 0; border: 0; background: transparent; }
.vc-form .crm-user-info-section h4,
.vc-form .crm-subscription-section h4,
.vc-form .crm-dashboard-header h3 { color: var(--text); }
.vc-form .crm-info-item label { color: var(--faint); }
.vc-form .crm-info-item span { color: var(--text); }
.vc-form .crm-access-badge { background: var(--panel-2); color: var(--signal); }
.vc-form .crm-subscription-item { padding: 18px; border: 1px solid var(--rail); border-left: 6px solid var(--signal); background: var(--ink); }
.vc-form .crm-subscription-item + .crm-subscription-item { margin-top: 14px; }
.vc-form .crm-subscription-name { margin: 0 0 6px; color: var(--text); font-size: 21px; font-weight: 800; }
.vc-form .crm-subscription-field span.crm-status { display: inline-flex; align-items: center; padding: 3px 10px; background: var(--panel-2); font-family: var(--f-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.vc-form .crm-subscription-field span.crm-status-active { background: var(--go-wash-2); color: var(--go-soft); }
.vc-form .crm-subscription-field span.crm-status-cancelled,
.vc-form .crm-subscription-field span.crm-status-canceled,
.vc-form .crm-subscription-field span.crm-status-expired,
.vc-form .crm-subscription-field span.crm-status-inactive { background: var(--stop-wash-3); color: var(--stop-soft); }
.vc-form .crm-subscription-field span.crm-status-pending,
.vc-form .crm-subscription-field span.crm-status-trial { background: var(--signal-wash); color: var(--signal); }
.vc-form .crm-login-required,
.vc-form .crm-no-access,
.vc-form .crm-logged-in-message,
.vc-form .crm-subscription-message,
.vc-form .crm-info { padding: 18px; border: 1px solid var(--rail); background: var(--ink); color: var(--dim); text-align: center; }
.vc-form .crm-login-required p, .vc-form .crm-no-access p { margin: 0 0 12px; }
.vc-form .crm-auth-message { margin: 0; }
.vc-form .crm-auth-warning { color: var(--signal); }
.vc-form .crm-auth-info { color: var(--go-soft); }

/* ---------- orders / invoice tables ---------- */

.vc-table { overflow-x: auto; border: 1px solid var(--rail); background: var(--panel); }
.vc-table table { width: 100%; margin: 0; font-size: 15px; text-align: left; border-collapse: collapse; }
.vc-table thead tr, .vc-table table tr:first-child th { background: var(--ink); color: var(--text); }
.vc-table th { padding: 14px 20px; color: var(--faint); font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid var(--signal); }
.vc-table td { padding: 15px 20px; color: var(--text); border-bottom: 1px dashed var(--rail); }
.vc-table tbody tr:hover { background: var(--panel-2); }
.vc-table .profile-orders { color: var(--text); }
.vc-table .orders-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.vc-table .orders-header h2, .vc-table .orders-header h3 { margin: 0; color: var(--text); font-size: 22px; font-weight: 800; }
.vc-table .orders-table-container { overflow-x: auto; }
.vc-table .orders-empty, .vc-table .crm-orders-empty { padding: 32px 20px; color: var(--dim); text-align: center; }
.vc-table .order-invoice { font-family: var(--f-mono); font-weight: 700; white-space: nowrap; }
.vc-table .order-date { white-space: nowrap; color: var(--dim); }
.vc-table .order-actions { white-space: nowrap; }
.vc-table a, .vc-table button { color: var(--text); font-weight: 700; background: transparent; border: 0; border-bottom: 2px solid var(--signal); cursor: pointer; text-decoration: none; }
.vc-table a:hover, .vc-table button:hover { color: var(--signal); }
.vc-table .invoice-detail, .vc-table .invoice-container { padding: 24px; color: var(--text); }

/* ---------- policy prose (CRM HTML authored for a light page) ---------- */

.vc-prose, .vc-prose p, .vc-prose li, .vc-prose td, .vc-prose th { color: var(--dim); font-size: 17px; line-height: 1.75; }
.vc-prose h1, .vc-prose h2, .vc-prose h3, .vc-prose h4 { margin: 1.7em 0 .6em; color: var(--text); font-family: var(--f-display); font-weight: 800; line-height: 1.15; }
.vc-prose > :first-child, .vc-prose > div > :first-child { margin-top: 0; }
.vc-prose h1 { font-size: 34px; font-stretch: 118%; }
.vc-prose h2 { font-size: 27px; font-stretch: 118%; }
.vc-prose h3 { font-size: 21px; }
.vc-prose p { margin: 0 0 1em; }
.vc-prose ul, .vc-prose ol { margin: 0 0 1em 1.25em; padding: 0; list-style: revert; }
.vc-prose li::marker { color: var(--signal); }
.vc-prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--signal); }
.vc-prose table { width: 100%; margin: 0 0 1em; border-collapse: collapse; }
.vc-prose td, .vc-prose th { padding: 8px 12px; border: 1px solid var(--rail); }
.vc-prose [style*="color"], .vc-prose [style*="COLOR"], .vc-prose font, .vc-prose span, .vc-prose section, .vc-prose article { color: inherit !important; }
.vc-prose [style*="background"], .vc-prose [style*="BACKGROUND"] { background: transparent !important; background-color: transparent !important; }
.vc-prose h1[style], .vc-prose h2[style], .vc-prose h3[style], .vc-prose h4[style], .vc-prose h5[style], .vc-prose h6[style],
.vc-prose h1 span, .vc-prose h2 span, .vc-prose h3 span, .vc-prose h4 span, .vc-prose h5 span, .vc-prose h6 span,
.vc-prose h1 font, .vc-prose h2 font, .vc-prose h3 font, .vc-prose h4 font, .vc-prose h5 font, .vc-prose h6 font { color: var(--text) !important; }
.vc-prose strong, .vc-prose b { color: var(--text); font-weight: 700; }
.vc-prose a, .vc-prose a[style], .vc-prose a span, .vc-prose a font { color: var(--text) !important; }
.vc-prose .crm-privacy-policy, .vc-prose .crm-cookie-policy, .vc-prose .crm-subscription-policy, .vc-prose .crm-terms-of-service { max-width: none; color: var(--dim); background: transparent; }

/* The CRM pricing table forces a white ground with !important inline styles,
   so it is styled as a deliberate light island. */
.vc-prose div.dataTables_wrapper { margin: 0 0 1.5em; padding: 18px !important; overflow-x: auto; border: 1px solid var(--doc-edge) !important; font: inherit !important; }
.vc-prose div.dataTables_wrapper, .vc-prose div.dataTables_wrapper p, .vc-prose div.dataTables_wrapper li, .vc-prose div.dataTables_wrapper span, .vc-prose div.dataTables_wrapper div { color: var(--doc-ink) !important; line-height: 1.6; }
.vc-prose div.dataTables_wrapper .product_name { margin: 0 0 14px; font-size: 20px; font-weight: 700; line-height: 1.3; }
.vc-prose div.dataTables_wrapper table { width: 100% !important; min-width: 560px; margin: 0 !important; border: 0 !important; border-collapse: collapse !important; }
.vc-prose div.dataTables_wrapper table th { padding: 11px 14px !important; border: 0 !important; background-color: var(--doc-head) !important; color: var(--doc-head-ink) !important; font-weight: 700 !important; text-align: left !important; white-space: nowrap; width: auto !important; }
.vc-prose div.dataTables_wrapper table td { padding: 11px 14px !important; border: 0 !important; border-bottom: 1px solid var(--doc-line) !important; color: var(--doc-ink) !important; }
.vc-prose div.dataTables_wrapper table tbody tr, .vc-prose div.dataTables_wrapper table tbody tr td { background: transparent !important; }
.vc-prose div.dataTables_wrapper table a { color: var(--doc-link) !important; }

/* ---------- cookie notice (platform sign) ---------- */

#cookie-modal.vc-cookie { position: fixed; left: 16px; bottom: 16px; z-index: 90; width: min(460px, calc(100vw - 32px)); }
body.vc-body #cookie-modal.vc-cookie { left: calc(var(--rail-offset, 0px) + 16px); }
#cookie-modal.hide-cookie { display: none; }
#cookie-modal .cookie-title { font-size: 18px; }
#cookie-modal p { margin: 0 0 14px; color: var(--dim); font-size: 14.5px; line-height: 1.55; }
#cookie-modal a { color: var(--text); text-decoration-color: var(--signal); }
#cookie-modal .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#cookie-modal .cookie-actions .vc-btn { flex: 1 1 auto; justify-content: center; min-height: 46px; padding: 10px 16px; font-size: 15px; }
.js #cookie-modal:not(.hide-cookie) { animation: vc-rise .35s var(--ease) both; }
@keyframes vc-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- admin-only notice ---------- */

.admin-notice { max-width: 900px; margin: 0 0 28px; padding: 14px 18px; border: 1px solid var(--rail-2); border-left: 6px solid var(--signal); background: var(--panel); color: var(--text); font-size: 14px; }
.admin-notice a { color: var(--signal); }

.vc-entry + .vc-entry { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--rail); }
.vc-prose .nav-links { display: flex; gap: 12px; margin-top: 30px; }
.vc-prose .page-numbers { padding: 6px 12px; border: 1px solid var(--rail-2); color: var(--text); text-decoration: none; }
.vc-prose .page-numbers.current { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 1024px) {
    body.vc-body { padding-left: var(--rail-w); --rail-offset: var(--rail-w); }
}

@media (max-height: 760px) and (min-width: 1024px) {
    .vc-route-menu--rail .vc-stop__label { font-size: 9.5px; }
    .vc-rail__nav { margin: 16px 0 10px; }
    .vc-rail .vc-logo .vc-mark { width: 44px; height: 44px; }
}

@media (max-width: 1023px) {
    .vc-rail { display: none; }
    .vc-bar { display: flex; }
    body.admin-bar .vc-bar { top: 46px; }
    .vc-footer__board { grid-template-columns: 1fr 1fr; }
    .vc-footer__board > * { border-right: 0; border-bottom: 1px solid var(--rail); }
    .vc-footer__board > *:nth-child(odd) { border-right: 1px solid var(--rail); }
    .vc-footer__board > *:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 1180px) {
    .vc-tickets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-hero__copy { grid-column: 1 / span 5; }
    .vc-map { grid-column: 6 / -1; }
    .vc-card { grid-template-columns: 1fr; }
    .vc-card__stops { grid-column: 1; grid-row: auto; }
}

@media (max-width: 900px) {
    .vc-hero__grid, .vc-head--split, .vc-boarding__grid, .vc-faq__grid, .vc-about__grid, .vc-contact__grid { grid-template-columns: minmax(0, 1fr); }
    .vc-hero__copy, .vc-map { grid-column: 1 / -1; }
    .vc-hero__copy { order: 2; }
    .vc-map { order: 1; }
    .vc-hero__head { order: 0; }
    .vc-head--split > div, .vc-head--split > .vc-lead { grid-column: 1 / -1; }
    .vc-route__intro { grid-template-columns: 1fr; }
    .vc-route__sum, .vc-route__tools { grid-column: 1; grid-row: auto; }
    .vc-play__grid { grid-template-columns: 1fr; }
    .vc-editor { border-right: 0; border-bottom: 1px solid var(--rail); }
    .vc-signal__grid { grid-template-columns: 1fr; }
    .vc-signal__side { grid-template-columns: 1fr; }
    .vc-signal__picks { grid-column: 1; grid-row: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vc-lights { grid-column: 1; grid-row: 2; grid-template-columns: repeat(3, 44px); width: auto; justify-self: start; padding: 12px 16px; gap: 14px; }
    .vc-lights__lamp { width: 40px; height: 40px; }
    .vc-lights__post { display: none; }
    .vc-boarding__photo, .vc-platsign { grid-column: 1 / -1; }
    .vc-boarding__photo { min-height: 0; aspect-ratio: 16 / 10; }
    .vc-faq__head, .vc-faq__list { grid-column: 1 / -1; position: static; }
    .vc-about__photo, .vc-about__copy, .vc-contact__info, .vc-contact .vc-panel { grid-column: 1 / -1; }
    .vc-about__photo img { aspect-ratio: 16 / 11; }
    .vc-profile { grid-template-columns: 1fr; }
    .vc-auth { grid-template-columns: 1fr; min-height: 0; }
    .vc-auth__photo { grid-column: 1; grid-row: 1; height: 36vh; min-height: 240px; }
    .vc-auth__panel { grid-column: 1; grid-row: 2; border-left: 0; }
}

@media (max-width: 760px) {
    .vc-board { padding: 6px; }
    .vc-board__cols { display: none; }
    .vc-board__row {
        grid-template-columns: 52px minmax(0, 1fr) 48px;
        grid-template-areas: "chip name plat" ". first first" ". dest dest";
        gap: 6px 14px;
        padding: 14px 12px;
    }
    .vc-board__chip { grid-area: chip; height: 34px; font-size: 14px; }
    .vc-board__name { grid-area: name; font-size: 14.5px; }
    .vc-board__first { grid-area: first; font-size: 14px; }
    .vc-board__dest { grid-area: dest; font-size: 14px; }
    .vc-board__k { display: inline; margin-right: 8px; color: var(--faint); font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
    .vc-board__plat { grid-area: plat; height: 38px; font-size: 18px; }
    .vc-board__go { display: none; }
    .vc-tickets { grid-template-columns: 1fr; }
    .vc-footer__board { grid-template-columns: 1fr; }
    .vc-footer__board > *, .vc-footer__board > *:nth-child(odd) { border-right: 0; border-bottom: 1px solid var(--rail); }
    .vc-footer__board > *:last-child { border-bottom: 0; }
    .vc-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vc-legend__chip { gap: 8px; padding: 8px 10px; font-size: 14px; }
    .vc-card__stops { grid-template-columns: 1fr; }
    .vc-signal__picks { grid-template-columns: 1fr; }
    .vc-editor__pane { height: 300px; }
    .vc-editor__body { min-height: 0; max-height: none; }
    .vc-move { grid-template-columns: 40px minmax(0, 1fr); }
    .vc-move__tools { grid-column: 2; flex-direction: row; }
    .vc-weekstrip { gap: 4px; }
    .vc-wday { padding: 8px 2px 10px; }
    .vc-wday__m { font-size: 11px; }
    .vc-eng__table .vc-eng__in { min-width: 70px; }
    .vc-snippet__ln code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
    .vc-editor__bar { flex-wrap: wrap; padding: 0; }
    .vc-editor__tools { padding: 8px; margin-left: auto; }
    .vc-platsign__head { padding: 18px; gap: 14px; }
    .vc-platsign__num { width: 60px; height: 60px; font-size: 34px; }
    .vc-platsign__list { padding: 4px 18px; }
    .vc-platsign__list li { grid-template-columns: 36px minmax(0, 1fr); }
    .vc-platsign__list p { font-size: 16.5px; }
    .vc-platsign__foot { padding: 18px; }
    .vc-ann summary { grid-template-columns: 24px minmax(0, 1fr) 30px; gap: 4px 10px; }
    .vc-ann__q { font-size: 18px; }
    .vc-ann__a { padding: 0 0 20px 34px; }
    .vc-desk li { grid-template-columns: 22px minmax(0, 1fr); }
    .vc-desk__v { grid-column: 2; }
    .vc-index li { grid-template-columns: 44px minmax(0, 1fr); }
    .vc-index__end { grid-column: 2; text-align: left; }
    .vc-actions .vc-btn--signal { flex: 1 1 100%; }
    .vc-footer__route span { width: 20px; height: 20px; top: -6px; border-width: 4px; }
    .vc-sign-band__route span:nth-child(n+4) { display: none; }
    .vc-stn { padding-right: 20px; }
}

@media (max-width: 640px) {
    .vc-map__label, .vc-map__you, .vc-map__hub-note, .vc-map__code { display: none; }
    .vc-map__hub-name { font-size: 25px; }
    .vc-map__track { stroke-width: 12; }
}

@media (max-width: 420px) {
    .vc-logo--bar .vc-logo__word { font-size: 18px; }
    .vc-logo--bar .vc-logo__img, .vc-logo--menu .vc-logo__img { height: 34px; }
    .vc-bar__lines { padding: 8px 12px; }
    .vc-pass__card { padding-left: 38px; }
    .vc-pass__trial { left: 38px; }
}

/* ==========================================================================
   Reduced motion: everything visible and still.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
    }
    .js .vc-map__track { stroke-dashoffset: 0; animation: none; }
    .js .vc-map__stn, .js .vc-map__term { opacity: 1; animation: none; }
    .vc-flap-c.is-flip { animation: none; }
}

/* ---------- invoice body (bundled from the webshop parent; colours are --inv-* tokens) ---------- */

/* Professional Invoice Styles */
.invoice-detail {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: var(--inv-paper);
    font-family: 'Arial', 'Helvetica', sans-serif;
    color: var(--inv-ink);
    line-height: 1.4;
}

.invoice-actions {
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.back-btn, .print-btn {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    border: 1px solid;
}

.back-btn {
    background: var(--inv-soft);
    color: var(--inv-ink-3);
    border-color: var(--inv-line-3);
}

.back-btn:hover {
    background: var(--inv-soft-2);
    color: var(--inv-ink-3);
    text-decoration: none;
}

.print-btn {
    background: var(--inv-accent);
    color: white;
    border-color: var(--inv-accent);
    cursor: pointer;
}

.print-btn:hover {
    background: var(--inv-accent-2);
    border-color: var(--inv-accent-2);
}

.invoice-container {
    border: 1px solid var(--inv-line);
    background: var(--inv-paper);
    box-shadow: 0 0 10px var(--inv-shadow);
}

/* Invoice Header */
.invoice-header {
    padding: 30px;
    border-bottom: 2px solid var(--inv-accent);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.company-info {
    flex: 1;
}

.company-name {
    margin: 0 0 10px 0;
    font-size: 24px;
    font-weight: bold;
    color: var(--inv-ink);
}

.company-details p {
    margin: 2px 0;
    color: var(--inv-ink-2);
    font-size: 14px;
}

.invoice-title-section {
    text-align: right;
    flex: 1;
}

.invoice-title {
    margin: 0 0 20px 0;
    font-size: 28px;
    font-weight: bold;
    color: var(--inv-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.invoice-meta {
    font-size: 14px;
    color: var(--inv-ink-2);
}

.invoice-meta > div {
    margin-bottom: 5px;
}

.invoice-number, .invoice-date, .invoice-status {
    display: block;
    margin-bottom: 8px;
}

.invoice-status {
    margin-top: 10px;
}

/* Bill To Section */
.bill-to-section {
    padding: 20px 30px;
    border-bottom: 1px solid var(--inv-line);
    background: var(--inv-soft);
}

.bill-to-header h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: bold;
    color: var(--inv-ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bill-to-details p {
    margin: 3px 0;
    color: var(--inv-ink-4);
    font-size: 14px;
}

.customer-name {
    font-weight: bold;
    color: var(--inv-ink) !important;
    font-size: 16px !important;
}

.customer-email {
    color: var(--inv-accent) !important;
}

.customer-id {
    color: var(--inv-ink-2) !important;
    font-size: 12px !important;
}

/* Invoice Items Table */
.invoice-items-section {
    padding: 0;
}

.invoice-items-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 14px;
}

.invoice-items-table thead {
    background: var(--inv-accent);
    color: white;
}

.invoice-items-table th {
    padding: 12px 15px;
    text-align: left;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
    border: none;
}

.invoice-items-table td {
    padding: 15px;
    border-bottom: 1px solid var(--inv-line);
    vertical-align: top;
}

.invoice-items-table tbody tr:nth-child(even) {
    background: var(--inv-soft);
}

.invoice-items-table tbody tr:hover {
    background: var(--inv-soft-2);
}

.item-description {
    width: 40%;
    font-weight: bold;
}

.item-type {
    width: 15%;
    text-align: center;
}

.item-qty {
    width: 10%;
    text-align: center;
}

.item-rate {
    width: 15%;
    text-align: right;
}

.item-amount {
    width: 20%;
    text-align: right;
    font-weight: bold;
}

/* Invoice Totals */
.invoice-totals-section {
    padding: 30px;
    background: var(--inv-soft);
}

.totals-container {
    display: flex;
    justify-content: flex-end;
}

.totals-table {
    width: 300px;
    border-collapse: collapse;
    background: white;
    border: 1px solid var(--inv-line);
}

.totals-table td {
    padding: 8px 15px;
    border-bottom: 1px solid var(--inv-line-2);
    font-size: 14px;
}

.total-label {
    text-align: right;
    color: var(--inv-ink-2);
    font-weight: normal;
}

.total-value {
    text-align: right;
    color: var(--inv-ink);
    font-weight: bold;
}

.total-row-final {
    background: var(--inv-accent);
    color: white;
    font-weight: bold;
    font-size: 16px;
}

.total-row-final .total-label-final {
    color: white;
    font-weight: bold;
}

.total-row-final .total-value-final {
    color: white;
    font-weight: bold;
    font-size: 18px;
}

/* Invoice Footer */
.invoice-footer-section {
    padding: 30px;
    background: white;
    border-top: 1px solid var(--inv-line);
}

.invoice-notes h3, .invoice-contact h3 {
    margin: 0 0 10px 0;
    color: var(--inv-ink);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.invoice-notes p, .invoice-contact p {
    margin: 0;
    color: var(--inv-ink-2);
    font-size: 13px;
    line-height: 1.4;
}

/* Status and Type Badges */
.status-badge, .type-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge {
    background: var(--inv-ok-bg);
    color: var(--inv-ok-ink);
    border: 1px solid var(--inv-ok-line);
}

.status-badge.completed {
    background: var(--inv-ok-bg);
    color: var(--inv-ok-ink);
    border-color: var(--inv-ok-line);
}

.status-badge.pending {
    background: var(--inv-warn-bg);
    color: var(--inv-warn-ink);
    border-color: var(--inv-warn-line);
}

.status-badge.cancelled {
    background: var(--inv-bad-bg);
    color: var(--inv-bad-ink);
    border-color: var(--inv-bad-line);
}

.type-badge {
    background: var(--inv-info-bg);
    color: var(--inv-info-ink);
    border: 1px solid var(--inv-info-line);
}

.type-badge.subscription {
    background: var(--inv-ok-bg);
    color: var(--inv-ok-ink);
    border-color: var(--inv-ok-line);
}

.type-badge.one-time {
    background: var(--inv-info-bg);
    color: var(--inv-info-ink);
    border-color: var(--inv-info-line);
}

/* Error States */
.invoice-error {
    max-width: 600px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
    background: white;
    border: 1px solid var(--inv-line);
    border-radius: 4px;
}

.invoice-error h2 {
    color: var(--inv-danger);
    margin-bottom: 20px;
    font-size: 24px;
}

.invoice-error p {
    color: var(--inv-ink-2);
    margin-bottom: 30px;
    font-size: 16px;
}

/* Print Styles */
@media print {
    .invoice-actions {
        display: none;
    }
    
    .invoice-container {
        border: none;
        box-shadow: none;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    
    .back-btn, .print-btn {
        display: none;
    }
    
    .invoice-detail {
        max-width: none;
        margin: 0;
        padding: 0;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
        color: var(--inv-print);
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        color: var(--inv-print);
    }
    
    .invoice-container {
        page-break-inside: avoid;
    }
    
    .invoice-items-table {
        page-break-inside: avoid;
    }
    
    .totals-table {
        page-break-inside: avoid;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .invoice-detail {
        padding: 10px;
    }
    
    .invoice-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 20px;
    }
    
    .company-name {
        font-size: 20px;
    }
    
    .invoice-title {
        font-size: 24px;
    }
    
    .invoice-meta {
        text-align: center;
    }
    
    .bill-to-section {
        padding: 15px 20px;
    }
    
    .invoice-items-table {
        font-size: 12px;
    }
    
    .invoice-items-table th,
    .invoice-items-table td {
        padding: 8px 5px;
    }
    
    .item-description {
        width: 35%;
    }
    
    .item-type {
        width: 20%;
    }
    
    .item-qty {
        width: 10%;
    }
    
    .item-rate {
        width: 15%;
    }
    
    .item-amount {
        width: 20%;
    }
    
    .totals-container {
        justify-content: center;
    }
    
    .totals-table {
        width: 100%;
        max-width: 300px;
    }
    
    .invoice-footer-section {
        padding: 20px;
    }
    
    .invoice-actions {
        flex-direction: column;
        gap: 10px;
    }
    
    .back-btn, .print-btn {
        width: 100%;
        text-align: center;
    }
}