@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/InterVariable.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/fonts/InterVariable-Italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* SnapHop Maps management plane. One hand-authored stylesheet; the file reviewed is the file served.
   Three theming layers, matching the SnapHop operator console.
   1. RAMP    absolute palette values.
   2. ROLES   what a colour is for. A theme redeclares this layer and nothing else.
   3. THEMES  :root (light) · [data-theme="dark"] · [data-theme="auto"] · forced colours.
   A raw ramp reference inside a component rule is a colour that cannot be themed. */
:root {
    --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

    --blue-100: #e2eaf6; --blue-400: #5f88c4; --blue-500: #2959aa; --blue-600: #204a90; --blue-700: #0f4b6e;
    --ink-1000: #1a1b26; --ink-750: #363c4d; --ink-700: #414868; --ink-650: #4a5272; --ink-600: #565a6e; --ink-500: #7d7f8f; --ink-450: #8a8d9e; --ink-400: #979db8;
    --line-strong: #c1c2c7; --line-600: #c7c9d3; --line-450: #d2d4dd; --line-400: #d6d8df; --line-250: #e0e2e8; --line-200: #e1e2e8; --line-150: #e4e5eb; --line-100: #e6e7ed; --line-75: #eaebf0;
    --white: #fff; --grey-50: #f7f8fb; --grey-100: #f2f3f7; --grey-150: #eceef3; --grey-200: #e1e2e8; --grey-300: #d6d8df;
    --green-100: #e0ead2; --green-500: #4f7c17; --green-700: #385f0d;
    --amber-100: #f4e7cd; --amber-500: #a87016; --amber-700: #8f5e15;
    --red-100: #f0dada; --red-200: #e3c9c9; --red-600: #942f2f;

    --text-strong: var(--ink-1000); --text-body: var(--ink-750); --text-secondary: var(--ink-650); --text-detail: var(--ink-600);
    --text-muted: var(--ink-500); --text-faint: var(--ink-450); --text-separator: var(--line-600);
    --text-link: var(--blue-500); --text-link-hover: var(--blue-700); --text-on-accent: var(--white); --text-on-inverse: var(--white); --text-on-active: var(--blue-500);
    --surface-page: var(--grey-300); --surface-app: var(--line-100); --surface-card: var(--white); --surface-rail: var(--grey-100); --surface-subtle: var(--grey-50);
    --surface-hover: var(--grey-200); --surface-active: var(--blue-100); --surface-inverse: var(--ink-1000);
    --surface-control: var(--white); --surface-control-disabled: var(--grey-150); --surface-track: var(--grey-200);
    --border-card: var(--line-150); --border-frame: var(--line-400); --border-row: var(--line-75); --border-control: var(--line-250);
    --border-control-strong: var(--line-strong); --border-dashed: var(--line-450); --border-emphasis: var(--ink-1000); --border-danger: var(--red-200);
    --accent: var(--blue-500); --accent-hover: var(--blue-600); --accent-quiet: var(--blue-100); --accent-rule: var(--blue-400);
    --focus-ring: var(--blue-400); --focus-halo: var(--blue-100);
    --status-ok-bg: var(--green-100); --status-ok-fg: var(--green-700);
    --status-warn-bg: var(--amber-100); --status-warn-fg: var(--amber-700);
    --status-danger-bg: var(--red-100); --status-danger-fg: var(--red-600);
    --status-neutral-bg: var(--line-75); --status-neutral-fg: var(--ink-650);
    --shadow-frame: 0 1px 3px rgba(18,18,26,.06), 0 12px 32px -18px rgba(18,18,26,.18);
    --scrim: rgba(18,18,26,.34);

    --radius-control: 6px; --radius-input: 7px; --radius-card: 9px; --radius-frame: 12px; --radius-badge: 4px;
    --shadow-modal: 0 18px 48px -12px rgba(18,18,26,.35); --shadow-popover: 0 8px 24px -8px rgba(18,18,26,.28);
    --duration-fast: 120ms; --ease-standard: cubic-bezier(.2,0,.2,1); --transition-control: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

@media screen {
    [data-theme="dark"] {
        --text-strong: #c0caf5; --text-body: #a9b1d6; --text-secondary: #9ba3c6; --text-detail: #8e97bd;
        --text-muted: #737aa2; --text-faint: #6a7398; --text-separator: #414868;
        --text-link: #7aa2f7; --text-link-hover: #9ab8ff; --text-on-accent: #16161e; --text-on-inverse: #16161e; --text-on-active: #c0caf5;
        --surface-page: #16161e; --surface-app: #1a1b26; --surface-card: #1f2335; --surface-rail: #16161e; --surface-subtle: #24283b;
        --surface-hover: #292e42; --surface-active: #283457; --surface-inverse: #c0caf5;
        --surface-control: #1f2335; --surface-control-disabled: #22263a; --surface-track: #292e42;
        --border-card: #2b3049; --border-frame: #292e42; --border-row: #232739; --border-control: #343a54;
        --border-control-strong: #414868; --border-dashed: #3b4261; --border-emphasis: #c0caf5; --border-danger: #5c3140;
        --accent: #7aa2f7; --accent-hover: #9ab8ff; --accent-quiet: #283457; --accent-rule: #3d59a1;
        --focus-ring: #7aa2f7; --focus-halo: rgba(122,162,247,.28);
        --status-ok-bg: #22301f; --status-ok-fg: #9ece6a;
        --status-warn-bg: #322a1c; --status-warn-fg: #e0af68;
        --status-danger-bg: #331f26; --status-danger-fg: #f7768e;
        --status-neutral-bg: #292e42; --status-neutral-fg: #a9b1d6;
        --shadow-frame: 0 1px 3px rgba(0,0,0,.40), 0 12px 32px -18px rgba(0,0,0,.70);
        --scrim: rgba(0,0,0,.58);
    }

    [data-theme="auto"] { color-scheme: light dark; }
    @media (prefers-color-scheme: dark) {
        [data-theme="auto"] {
            --text-strong: #c0caf5; --text-body: #a9b1d6; --text-secondary: #9ba3c6; --text-detail: #8e97bd;
            --text-muted: #737aa2; --text-faint: #6a7398; --text-separator: #414868;
            --text-link: #7aa2f7; --text-link-hover: #9ab8ff; --text-on-accent: #16161e; --text-on-inverse: #16161e; --text-on-active: #c0caf5;
            --surface-page: #16161e; --surface-app: #1a1b26; --surface-card: #1f2335; --surface-rail: #16161e; --surface-subtle: #24283b;
            --surface-hover: #292e42; --surface-active: #283457; --surface-inverse: #c0caf5;
            --surface-control: #1f2335; --surface-control-disabled: #22263a; --surface-track: #292e42;
            --border-card: #2b3049; --border-frame: #292e42; --border-row: #232739; --border-control: #343a54;
            --border-control-strong: #414868; --border-dashed: #3b4261; --border-emphasis: #c0caf5; --border-danger: #5c3140;
            --accent: #7aa2f7; --accent-hover: #9ab8ff; --accent-quiet: #283457; --accent-rule: #3d59a1;
            --focus-ring: #7aa2f7; --focus-halo: rgba(122,162,247,.28);
            --status-ok-bg: #22301f; --status-ok-fg: #9ece6a;
            --status-warn-bg: #322a1c; --status-warn-fg: #e0af68;
            --status-danger-bg: #331f26; --status-danger-fg: #f7768e;
            --status-neutral-bg: #292e42; --status-neutral-fg: #a9b1d6;
            --shadow-frame: 0 1px 3px rgba(0,0,0,.40), 0 12px 32px -18px rgba(0,0,0,.70);
            --scrim: rgba(0,0,0,.58);
        }
    }
}

@media (forced-colors: active) {
    :root, [data-theme="dark"], [data-theme="auto"] {
        forced-color-adjust: none;
        --text-strong: CanvasText; --text-body: CanvasText; --text-secondary: CanvasText; --text-detail: CanvasText;
        --text-muted: CanvasText; --text-faint: GrayText; --text-separator: CanvasText;
        --text-link: LinkText; --text-link-hover: LinkText; --text-on-accent: HighlightText; --text-on-inverse: Canvas; --text-on-active: HighlightText;
        --surface-page: Canvas; --surface-app: Canvas; --surface-card: Canvas; --surface-rail: Canvas; --surface-subtle: Canvas;
        --surface-hover: Canvas; --surface-active: Highlight; --surface-inverse: CanvasText;
        --surface-control: Field; --surface-control-disabled: Canvas; --surface-track: Canvas;
        --border-card: CanvasText; --border-frame: CanvasText; --border-row: CanvasText; --border-control: CanvasText;
        --border-control-strong: CanvasText; --border-dashed: GrayText; --border-emphasis: CanvasText; --border-danger: CanvasText;
        --accent: Highlight; --accent-hover: Highlight; --accent-quiet: Canvas; --accent-rule: CanvasText;
        --focus-ring: Highlight; --focus-halo: transparent;
        --status-ok-bg: Canvas; --status-ok-fg: CanvasText;
        --status-warn-bg: Canvas; --status-warn-fg: CanvasText;
        --status-danger-bg: Canvas; --status-danger-fg: CanvasText;
        --status-neutral-bg: Canvas; --status-neutral-fg: CanvasText;
        --shadow-frame: none; --scrim: Canvas;
    }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { background: var(--surface-app); -webkit-text-size-adjust: 100%; font-family: var(--font-sans); line-height: 1.5; }
body { margin: 0; color: var(--text-body); font-family: var(--font-sans); font-size: 11.5px; font-weight: 450; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: transparent; border-radius: 0; }
button { appearance: button; }
::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
::selection { background: var(--surface-active); color: var(--text-strong); }
[hidden] { display: none !important; }
h1 { margin-bottom: 5px; color: var(--text-strong); font-size: 19px; line-height: 1.2; letter-spacing: -.025em; font-weight: 700; }
h2 { margin-bottom: 4px; color: var(--text-strong); font-size: 16px; line-height: 1.25; letter-spacing: -.015em; font-weight: 650; }
p { margin-top: 0; }


/* The map renderer brings its own control styles. Revert the reset inside it. */
.snaphop-maps-widget button,
.snaphop-maps-widget input { all: revert; }
.snaphop-maps-widget a { color: revert; text-decoration: revert; }

code, .mono { font: 10.5px/1.5 var(--font-mono); letter-spacing: .03em; }

/* Brand. The wordmark is lowercase, one word, JetBrains Mono 700; the product name is a separate
   Inter string behind a hairline rule. */
.brand-lockup { display: inline-flex; align-items: center; gap: 8px; color: var(--text-strong); }
.brand-lockup:hover { color: var(--text-strong); }
.wordmark { color: var(--text-strong); font: 700 15px/1 var(--font-mono); letter-spacing: 0; white-space: nowrap; }
.wordmark-accent { color: var(--text-link); }
.brand-divider { width: 1px; height: 13px; background: var(--border-frame); }
.product-name { color: var(--text-secondary); font-size: 12.5px; font-weight: 450; letter-spacing: -.01em; white-space: nowrap; }

.eyebrow { margin-bottom: 5px; color: var(--text-muted); font: 650 9.5px/1.2 var(--font-mono); letter-spacing: .12em; }
.supporting-copy, .page-head p { margin-bottom: 0; color: var(--text-secondary); font-size: 11.5px; font-weight: 450; }
.text-link { display: inline-block; margin-top: 14px; font-size: 11.5px; font-weight: 600; }
.supporting-copy .text-link { display: inline; margin-top: 0; font-size: inherit; }

/* Controls. At most one primary button per surface; danger is a hairline, never a red fill. A
   disabled control stays visible and says why nearby. */
.button { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-control); border-radius: var(--radius-control); padding: 5px 11px; background: var(--surface-card); color: var(--text-body); font-size: 11px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; cursor: pointer; transition: var(--transition-control); }
.button:not(:disabled):hover { border-color: var(--text-separator); background: var(--surface-subtle); }
.button:disabled { border-color: var(--border-dashed); border-style: dashed; background: var(--surface-control-disabled); color: var(--text-faint); cursor: not-allowed; }
.button-primary { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
.button-primary:not(:disabled):hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.button-danger { border-color: var(--border-danger); color: var(--status-danger-fg); }
.button-compact { min-height: 29px; padding: 5px 9px; font-size: 10.5px; font-weight: 650; letter-spacing: 0; }
.button-block { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; }
.button-row-spaced { margin-top: 12px; }

.field { display: grid; align-content: start; gap: 5px; color: var(--text-body); font-size: 11.5px; font-weight: 600; }
.field-help { color: var(--text-muted); font-size: 10.5px; font-weight: 400; }
.field-error { color: var(--status-danger-fg); font-size: 10.5px; font-weight: 450; }
.field-error:empty { display: none; }
input, select, textarea { min-width: 0; border: 1px solid var(--border-control); border-radius: var(--radius-input); padding: 8px 11px; background: var(--surface-control); color: var(--text-strong); letter-spacing: -.01em; }
input, select { height: 36px; }
input[type="checkbox"] { width: 15px; height: 15px; margin: 0; padding: 0; border: 0; border-radius: 0; accent-color: var(--accent); }
input[type="color"] { width: 44px; padding: 3px; }
textarea { min-height: 64px; font: inherit; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--border-control-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 3px solid var(--focus-halo); }
input[type="checkbox"]:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
[aria-invalid="true"] { border-color: var(--status-danger-fg); }
input:disabled, select:disabled, textarea:disabled { border-style: dashed; border-color: var(--border-dashed); background: var(--surface-control-disabled); color: var(--text-faint); }
.form-stack { display: grid; gap: 14px; margin-top: 18px; }
.form-stack-compact { gap: 10px; margin-top: 12px; }
.form-stack > .button:not(.button-block) { justify-self: start; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.form-grid .field-wide { grid-column: 1 / -1; }
.form-status { min-height: 18px; margin: 8px 0 0; color: var(--text-secondary); font-size: 11.5px; overflow-wrap: anywhere; }
.form-status:empty { display: none; }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 12px 0 0; }
.inline-form > .field { flex: 1 1 180px; }
.inline-form .button { flex: none; min-height: 36px; }
fieldset { display: grid; gap: 10px; min-width: 0; margin: 0 0 16px; }
legend { display: block; width: 100%; padding: 0; }
.choices { display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 8px; color: var(--text-body); font-size: 11.5px; font-weight: 600; }

/* Public and account pages stand alone: semantic forms, no application chrome. */
.public-page, .auth-page { min-height: 100vh; background: var(--surface-app); }
.public-header { height: 56px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-card); padding: 0 max(24px, calc((100vw - 1120px) / 2)); background: var(--surface-card); }
.public-layout { width: min(100% - 48px, 760px); min-height: calc(100vh - 56px); display: grid; align-content: center; margin: 0 auto; padding: 54px 0; }
.auth-layout { width: min(100% - 32px, 420px); min-height: 100vh; display: grid; align-content: center; gap: 16px; margin: 0 auto; padding: 40px 0; }
.auth-card { border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 26px; background: var(--surface-card); }
.auth-card h1 { font-size: 26px; letter-spacing: -.03em; }
.signup-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; align-items: start; }
.signup-column { min-width: 0; }
.account-help { min-width: 0; border-inline-start: 1px solid var(--border-card); padding-inline-start: 32px; }
.auth-card .help-title { margin-bottom: 2px; font-size: 12.5px; line-height: inherit; letter-spacing: 0; font-weight: 650; }
.guide { width: min(100% - 32px, 820px); margin: 0 auto; padding: 32px 0 48px; }
.guide h1 { font-size: 26px; letter-spacing: -.03em; }
.guide h2 { margin-top: 26px; }
.guide p, .guide li { color: var(--text-body); font-size: 12.5px; }
.guide ul { margin: 0 0 12px 18px; }
.guide pre { margin: 10px 0 14px; }

/* An emphasis callout uses a 2px ink border rather than a coloured fill. */
.callout { margin: 14px 0 0; border: 2px solid var(--border-emphasis); border-radius: var(--radius-input); padding: 10px 12px; background: var(--surface-card); color: var(--text-body); }
.callout-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.callout-success { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.callout:empty { display: none; }

/* Application shell: a 236px text-only rail, a 46px top bar and a canvas inside a 1440px frame. */
.app-page { min-height: 100vh; padding: 18px; background: var(--surface-page); }
.app-frame { position: relative; width: min(100%, 1440px); min-height: calc(100vh - 36px); display: grid; grid-template-columns: 236px 1fr; margin: 0 auto; overflow: hidden; border: 1px solid var(--border-frame); border-radius: var(--radius-frame); background: var(--surface-app); box-shadow: var(--shadow-frame); }
.app-rail { min-height: 100%; display: flex; flex-direction: column; border-right: 1px solid var(--border-card); padding: 15px 12px 12px; background: var(--surface-rail); }
.rail-wordmark { padding: 0 8px 13px; }
.workspace { display: grid; gap: 6px; border: 1px solid var(--border-card); border-radius: var(--radius-input); padding: 9px; background: var(--surface-card); }
.workspace small { color: var(--text-faint); font: 600 8px var(--font-mono); letter-spacing: .08em; }
.workspace select { width: 100%; height: 32px; padding: 4px 8px; font-weight: 600; }
.rail-nav { display: grid; gap: 3px; margin-top: 16px; }
.rail-nav a { border-radius: var(--radius-control); padding: 8px 10px; color: var(--text-secondary); font-size: 11.5px; font-weight: 600; }
.rail-nav a:hover { background: var(--surface-hover); color: var(--text-strong); }
.rail-nav a[aria-current="page"] { background: var(--surface-active); color: var(--text-link); }
.rail-footer { display: grid; gap: 8px; margin-top: auto; border-top: 1px solid var(--border-card); padding-top: 12px; }
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--border-control); border-radius: var(--radius-control); background: var(--surface-card); }
.theme-switch button { min-height: 29px; border: 0; padding: 5px 4px; background: var(--surface-card); color: var(--text-secondary); font-size: 10.5px; font-weight: 600; cursor: pointer; transition: var(--transition-control); }
.theme-switch button + button { border-inline-start: 1px solid var(--border-control); }
.theme-switch button[aria-pressed="true"] { background: var(--surface-active); color: var(--text-on-active); }
.account-line { overflow: hidden; color: var(--text-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.app-main { min-width: 0; }
.topbar { height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-card); padding: 0 18px; background: var(--surface-card); }
.topbar p { margin: 0; font-size: 10.5px; }
.topbar span { color: var(--text-faint); }
.topbar b { padding: 0 7px; color: var(--text-separator); }
.topbar strong { color: var(--text-body); }
.topbar a { font-size: 11.5px; font-weight: 600; }
.canvas { padding: 16px 18px 20px; }
.page-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.page-head h1 { margin-bottom: 3px; }

.badge { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--border-control); border-radius: var(--radius-badge); padding: 3px 6px; color: var(--text-secondary); font: 650 9.5px var(--font-mono); letter-spacing: .04em; }
/* A status is never carried by colour alone: every dot and badge has its state written beside it. */
.status-dot { width: 6px; height: 6px; display: inline-block; flex: none; border-radius: 50%; background: currentColor; }
.state-badge { display: inline-flex; align-items: center; gap: 6px; justify-self: start; border-radius: var(--radius-badge); padding: 3px 7px; background: var(--status-neutral-bg); color: var(--status-neutral-fg); font: 650 9.5px var(--font-mono); letter-spacing: .04em; white-space: nowrap; }
.state-badge-ok { background: var(--status-ok-bg); color: var(--status-ok-fg); }
.state-badge-warn { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.state-badge-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }

/* Cards are flat: a 1px border, no shadow. A footnote is a full-sentence constraint strip. */
.card { min-width: 0; overflow: hidden; border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 13px 14px; background: var(--surface-card); }
.card + .card, .card + .table-card, .table-card + .card, .table-card + .table-card { margin-top: 12px; }
.card-head { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.card-head .button, .card-head .button-row { flex: none; }
.card-footnote { margin: 13px -14px -13px; border-top: 1px solid var(--border-card); padding: 9px 14px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 10.5px; }
.definition-list { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 7px 12px; margin: 0; }
.definition-list dt { align-self: center; color: var(--text-muted); font: 650 9.5px var(--font-mono); letter-spacing: .08em; }
.definition-list dd { margin: 0; color: var(--text-body); overflow-wrap: anywhere; }

.table-card { min-width: 0; overflow: hidden; border: 1px solid var(--border-card); border-radius: var(--radius-card); background: var(--surface-card); }
.table-head { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 13px 14px; }
.table-scroll { overflow-x: auto; border-top: 1px solid var(--border-card); }
table { width: 100%; border-collapse: collapse; }
th { padding: 7px 14px; border-bottom: 1px solid var(--border-card); background: var(--surface-subtle); color: var(--text-secondary); font: 650 9.5px var(--font-mono); letter-spacing: .08em; text-align: left; white-space: nowrap; }
td { padding: 10px 14px; border-top: 1px solid var(--border-row); vertical-align: middle; }
tr:first-child td { border-top: 0; }
.row-primary { margin: 0; color: var(--text-strong); font-size: 11.5px; font-weight: 650; overflow-wrap: anywhere; }
.row-secondary { margin: 2px 0 0; color: var(--text-muted); font: 10.5px/1.4 var(--font-mono); letter-spacing: .03em; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: end; }
.table-note { margin: 0; border-top: 1px solid var(--border-card); padding: 9px 14px; background: var(--surface-subtle); color: var(--text-secondary); font-size: 10.5px; }
.empty-state { margin: 0; padding: 14px; color: var(--text-secondary); font-size: 11.5px; }

/* The map editor: the draft on the left, a live preview on the right. */
.editor { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 12px; align-items: start; }
.editor-preview { position: sticky; top: 12px; display: grid; gap: 8px; }
.preview-shell { overflow: hidden; border: 1px solid var(--border-card); border-radius: var(--radius-card); background: var(--surface-subtle); }
.preview-map { width: 100%; height: 520px; }
.preview-note { margin: 0; color: var(--text-muted); font-size: 10.5px; }
.marker-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.marker-item { display: grid; gap: 8px; border: 1px solid var(--border-card); border-radius: var(--radius-input); padding: 10px; background: var(--surface-subtle); }
.marker-item .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.marker-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.embed { max-height: 240px; overflow: auto; margin: 0; border-radius: var(--radius-input); padding: 12px; background: var(--surface-subtle); color: var(--text-strong); }
.embed code { display: block; font: 11px/1.55 var(--font-mono); white-space: pre; }
.copy-row { display: grid; gap: 6px; margin-top: 12px; }
.copy-row:first-of-type { margin-top: 0; }

/* Dialogs state what will happen before offering the action. */
.dialog-layer { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; }
.dialog-scrim { position: absolute; inset: 0; background: var(--scrim); }
.dialog { position: relative; width: min(100%, 520px); max-height: calc(100vh - 80px); overflow-y: auto; border: 1px solid var(--border-card); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-modal); }
.dialog-body { padding: 16px 18px; }
.dialog-body h2 { margin-bottom: 8px; }
.dialog-body p:not(.eyebrow) { margin-bottom: 9px; color: var(--text-body); font-size: 11.5px; }
.dialog-actions { display: flex; justify-content: end; gap: 8px; border-top: 1px solid var(--border-card); padding: 11px 18px; background: var(--surface-subtle); }

.toast { position: fixed; inset-block-end: 18px; inset-inline-end: calc(max(18px, (100% - 1440px) / 2) + 18px); z-index: 70; width: min(100% - 36px, 360px); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 11px 13px; background: var(--surface-card); box-shadow: var(--shadow-popover); }
.toast p:first-child { margin: 0; color: var(--text-strong); font-size: 11.5px; font-weight: 650; }
.toast p + p { margin: 3px 0 0; color: var(--text-secondary); font-size: 10.5px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[data-route] h1[tabindex="-1"]:focus { outline: none; }

@media (max-width: 1100px) {
    .editor { grid-template-columns: 1fr; }
    .editor-preview { position: static; }
}
@media (max-width: 900px) {
    .app-page { padding: 0; }
    .app-frame { grid-template-columns: 1fr; min-height: 100vh; border: 0; border-radius: 0; }
    .app-rail { min-height: auto; border-right: 0; border-bottom: 1px solid var(--border-card); }
    .rail-wordmark { display: none; }
    .rail-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
    .rail-nav { display: flex; margin: 12px 0 0; overflow-x: auto; }
    .topbar p { display: none; }
}
@media (max-width: 700px) {
    .signup-grid, .form-grid, .marker-item .form-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
    .account-help { border-inline-start: 0; padding-inline-start: 0; border-top: 1px solid var(--border-card); padding-top: 14px; }
    .canvas { padding: 14px 10px 18px; }
    .page-head { display: grid; }
    .preview-map { height: 380px; }
}