/*
 * Localmachine editorial theme
 * Shared visual layer for every product page. Loaded after tool styles so the
 * warm canvas, coral actions, serif headings, and dark code surfaces stay
 * consistent without coupling the tools' functional layouts.
 */
:root {
  --lm-coral: #cc785c;
  --lm-coral-active: #a9583e;
  --lm-ink: #141413;
  --lm-body: #3d3d3a;
  --lm-muted: #6c6a64;
  --lm-line: #e6dfd8;
  --lm-canvas: #faf9f5;
  --lm-soft: #f5f0e8;
  --lm-card: #efe9de;
  --lm-dark: #181715;
  --lm-dark-soft: #1f1e1b;
  --lm-dark-raised: #252320;
  --lm-on-dark: #faf9f5;
  --lm-on-dark-muted: #a09d96;
  --lm-teal: #5db8a6;
  --lm-amber: #e8a55a;
  --lm-success: #5db872;
  --lm-error: #c64545;
  --lm-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
}

html[data-theme="dark"] {
  --lm-ink: #f2eee6;
  --lm-body: #d2cbc1;
  --lm-muted: #a09a91;
  --lm-line: #3a3732;
  --lm-canvas: #181715;
  --lm-soft: #201f1c;
  --lm-card: #292621;
  --lm-dark: #0d0d0c;
  --lm-dark-soft: #171614;
  --lm-dark-raised: #302d28;
}

/* Normalize the variable dialects used by the different tools. */
.json-page,
.webhook-page {
  --bg: var(--lm-canvas);
  --panel: var(--lm-card);
  --raised: var(--lm-soft);
  --line: var(--lm-line);
  --text: var(--lm-ink);
  --muted: var(--lm-muted);
  --pink: var(--lm-coral);
  --violet: var(--lm-coral);
  --cyan: var(--lm-teal);
  --green: var(--lm-teal);
  --success: var(--lm-success);
  --orange: var(--lm-amber);
  --amber: var(--lm-amber);
  --red: var(--lm-error);
  --gradient: linear-gradient(135deg, var(--lm-coral), var(--lm-coral-active));
}

.documentation-theme,
.command-theme,
.mocker-theme,
.portal-page,
.auth-page {
  --aurora-bg: var(--lm-canvas);
  --aurora-bg-soft: var(--lm-soft);
  --aurora-panel: var(--lm-card);
  --aurora-panel-solid: var(--lm-card);
  --aurora-panel-raised: var(--lm-soft);
  --aurora-line: var(--lm-line);
  --aurora-line-strong: #d8d0c5;
  --aurora-text: var(--lm-ink);
  --aurora-muted: var(--lm-muted);
  --aurora-faint: #8e8b82;
  --aurora-violet: var(--lm-coral);
  --aurora-violet-bright: var(--lm-coral);
  --aurora-cyan: var(--lm-teal);
  --aurora-green: var(--lm-success);
  --aurora-orange: var(--lm-amber);
  --aurora-red: var(--lm-error);
  --aurora-gradient: linear-gradient(135deg, var(--lm-coral), var(--lm-coral-active));
  --ink: var(--lm-ink);
  --muted: var(--lm-muted);
  --line: var(--lm-line);
  --canvas: var(--lm-canvas);
  --paper: var(--lm-canvas);
  --card: var(--lm-card);
  --panel: var(--lm-card);
  --nav: var(--lm-dark);
  --purple: var(--lm-coral);
  --accent: var(--lm-coral);
  --green: var(--lm-success);
  --orange: var(--lm-amber);
  --red: var(--lm-error);
}

html[data-theme="dark"] .documentation-theme,
html[data-theme="dark"] .command-theme,
html[data-theme="dark"] .mocker-theme,
html[data-theme="dark"] .portal-page,
html[data-theme="dark"] .auth-page {
  --aurora-line-strong: #4a453e;
}

body.json-page,
body.webhook-page,
body.documentation-theme,
body.command-theme,
body.mocker-theme,
body.portal-page,
body.auth-page,
html[data-theme="light"] body.json-page,
html[data-theme="light"] body.webhook-page,
html[data-theme="light"] body.documentation-theme,
html[data-theme="light"] body.command-theme,
html[data-theme="light"] body.mocker-theme,
html[data-theme="light"] body.portal-page,
html[data-theme="light"] body.auth-page {
  color: var(--lm-ink);
  background: var(--lm-canvas);
  background-image: none;
}

/* Editorial type hierarchy. UI labels and data stay sans/mono. */
.json-page .hero h1,
.json-page .panel-header h2,
.webhook-page .product-strip h1,
.webhook-page .landing-hero h1,
.webhook-page .explainer-heading h2,
.webhook-page .panel-heading h2,
.documentation-theme .welcome h1,
.documentation-theme .welcome h2,
.documentation-theme .section-heading h2,
.mocker-theme .intro h1,
.mocker-theme .panel-title h2,
.portal-page .portal-hero h1,
.portal-page .section-heading h2,
.portal-page .guide-grid h3,
.command-theme .welcome h1,
.command-theme .card-head h2,
.command-theme .repo-identity h1,
.command-theme .detail-card h2,
.auth-page .auth-card h1 {
  font-family: var(--lm-display);
  font-weight: 500;
  letter-spacing: -.025em;
}

.json-page .eyebrow,
.webhook-page .eyebrow,
.documentation-theme .eyebrow,
.mocker-theme .eyebrow,
.portal-page .eyebrow,
.command-theme .eyebrow,
.auth-page .eyebrow {
  color: var(--lm-coral);
}

.json-page .hero h1 em,
.webhook-page .landing-hero h1 em,
.documentation-theme .welcome h1 em,
.portal-page .portal-hero h1 em {
  color: var(--lm-coral);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* One header treatment everywhere. */
.json-page .topbar,
.webhook-page .topbar,
.documentation-theme .topbar,
.mocker-theme .topbar,
.portal-page .portal-header,
.command-theme .topbar,
.command-theme .repo-topbar,
html[data-theme="light"] .json-page .topbar,
html[data-theme="light"] .webhook-page .topbar,
html[data-theme="light"] .documentation-theme .topbar,
html[data-theme="light"] .mocker-theme .topbar,
html[data-theme="light"] .portal-page .portal-header,
html[data-theme="light"] .command-theme .topbar,
html[data-theme="light"] .command-theme .repo-topbar {
  color: var(--lm-ink);
  border-color: var(--lm-line);
  background: color-mix(in srgb, var(--lm-canvas) 92%, transparent);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(120%);
}

.json-page .product-brand,
.webhook-page .product-brand,
.documentation-theme .product-brand,
.mocker-theme .product-brand,
.portal-page .product-brand,
.command-theme .product-brand,
.auth-page .product-brand { color: var(--lm-ink); }

.json-page .product-brand strong,
.webhook-page .product-brand strong,
.documentation-theme .product-brand strong,
.mocker-theme .product-brand strong,
.portal-page .product-brand strong,
.command-theme .product-brand strong,
.auth-page .product-brand strong { color: var(--lm-ink); }

.json-page .product-brand .product-brand-mark,
.webhook-page .product-brand .product-brand-mark,
.documentation-theme .product-brand .product-brand-mark,
.mocker-theme .product-brand .product-brand-mark,
.portal-page .product-brand .product-brand-mark,
.command-theme .product-brand .product-brand-mark,
.auth-page .product-brand .product-brand-mark {
  color: var(--lm-canvas);
  border-radius: 8px;
  background: var(--lm-ink);
  box-shadow: none;
}

.json-page .topbar .product-brand .product-brand-mark,
.webhook-page .topbar .product-brand .product-brand-mark,
.documentation-theme .topbar .product-brand .product-brand-mark,
.mocker-theme .topbar .product-brand .product-brand-mark,
.portal-page .portal-header .product-brand .product-brand-mark {
  color: var(--lm-canvas);
  background: var(--lm-ink);
  box-shadow: none;
}

.json-page .product-brand strong em,
.webhook-page .product-brand strong em,
.documentation-theme .product-brand strong em,
.mocker-theme .product-brand strong em,
.portal-page .product-brand strong em,
.command-theme .product-brand strong em,
.auth-page .product-brand strong em { color: var(--lm-coral); }
.json-page .topbar .product-brand strong em,
.webhook-page .topbar .product-brand strong em,
.documentation-theme .topbar .product-brand strong em,
.mocker-theme .topbar .product-brand strong em,
.portal-page .portal-header .product-brand strong em { color: var(--lm-coral); }

.json-page .global-tool-nav,
.json-page .global-auth-actions,
.webhook-page .global-tool-nav,
.webhook-page .global-auth-actions,
.documentation-theme .global-tool-nav,
.documentation-theme .global-auth-actions,
.mocker-theme .global-tool-nav,
.mocker-theme .global-auth-actions,
.portal-page .global-tool-nav,
.portal-page .global-auth-actions,
.command-theme .global-tool-nav,
.command-theme .global-auth-actions {
  --header-ink: var(--lm-ink);
  --header-muted: var(--lm-muted);
  --header-surface: var(--lm-soft);
  --header-active-ink: #fff;
  --header-line: var(--lm-line);
  --header-accent: var(--lm-coral);
}

/* Coral actions, warm controls, restrained elevation. */
.json-page .actions .primary,
.webhook-page .primary,
.webhook-page .primary-link,
.documentation-theme .button-primary,
.mocker-theme .primary,
.mocker-theme .save-button,
.portal-page .create-tunnel-card button,
.portal-page .tunnel-landing-primary,
.auth-page .auth-form button {
  color: #fff;
  border-color: var(--lm-coral);
  background: var(--lm-coral);
  box-shadow: none;
}

.json-page button,
.json-page input,
.webhook-page button,
.webhook-page input,
.webhook-page select,
.documentation-theme button,
.documentation-theme input,
.documentation-theme select,
.mocker-theme button,
.mocker-theme input,
.mocker-theme select,
.mocker-theme textarea,
.portal-page button,
.portal-page input,
.portal-page select,
.auth-page input {
  border-radius: 8px;
}

.json-page button:hover,
.webhook-page button:hover,
.documentation-theme button:hover,
.mocker-theme button:hover,
.portal-page button:hover { border-color: var(--lm-coral); }

/* JSON: warm workspace chrome with dark, high-contrast data surfaces. */
html[data-theme="light"] .json-page .panel,
.json-page .panel {
  color: var(--lm-ink);
  border-color: var(--lm-line);
  background: var(--lm-card);
  box-shadow: none;
}
.json-page .step { color: var(--lm-coral); border-color: color-mix(in srgb, var(--lm-coral) 28%, transparent); background: color-mix(in srgb, var(--lm-coral) 9%, transparent); }
.json-page .actions button,
.json-page .selected-path button { color: var(--lm-ink); background: var(--lm-canvas); }
.json-page .editor-wrap,
html[data-theme="light"] .json-page .editor-wrap,
.json-page .editor-panel.is-maximized .editor-wrap,
html[data-theme="light"] .json-page .editor-panel.is-maximized .editor-wrap {
  color: var(--lm-on-dark);
  background: var(--lm-dark);
}
.json-page #editor-line-numbers,
html[data-theme="light"] .json-page #editor-line-numbers { color: #77736d; background: var(--lm-dark-soft); }
.json-page #highlight-layer,
html[data-theme="light"] .json-page #highlight-layer { color: #d0cbc3; }
.json-page #json-input,
html[data-theme="light"] .json-page #json-input { caret-color: var(--lm-on-dark); }
.json-page .token-key { color: #78b7c5 !important; }
.json-page .token-string { color: #e8a55a !important; }
.json-page .token-number { color: #b79ae8 !important; }
.json-page .token-boolean { color: #cc785c !important; }
.json-page .token-null { color: #a09d96 !important; }
.json-page .tree-key { color: #8e4b35 !important; }
.json-page .tree-string { color: #276b58 !important; }
.json-page .tree-number { color: #985819 !important; }
.json-page .tree-boolean { color: #286b76 !important; }
.json-page .tree-null { color: #72559b !important; }
html[data-theme="dark"] .json-page .tree-key { color: #e9a98f !important; }
html[data-theme="dark"] .json-page .tree-string { color: #89c8ad !important; }
html[data-theme="dark"] .json-page .tree-number { color: #e8b675 !important; }
html[data-theme="dark"] .json-page .tree-boolean { color: #82cbd2 !important; }
html[data-theme="dark"] .json-page .tree-null { color: #b9a3d9 !important; }
.json-page .path-finder input,
html[data-theme="light"] .json-page .path-finder input { color: var(--lm-ink); background: var(--lm-canvas); }
.json-page .status-card { border-color: color-mix(in srgb, var(--lm-success) 35%, transparent); background: color-mix(in srgb, var(--lm-success) 9%, transparent); }

/* Webhooks: cream controls surrounding a dark request-inspector surface. */
.webhook-page .app-flow-guide,
.webhook-page .capture-bar { color: var(--lm-ink); border-color: var(--lm-line); background: var(--lm-card); }
.webhook-page .app-flow-node,
.webhook-page .app-flow-destinations { background: var(--lm-canvas); }
.webhook-page .app-flow-link::before { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--lm-coral) 55%, transparent) 0 5px, transparent 5px 10px); }
.webhook-page .app-flow-link i { background: var(--lm-coral); box-shadow: 0 0 0 4px rgba(204,120,92,.1), 0 0 14px rgba(204,120,92,.5); }
.webhook-page .capture-url,
.webhook-page .event-filter input,
.webhook-page .replay-form input,
.webhook-page .replay-form select,
.webhook-page .replay-result,
.webhook-page .inbox-dialog input { color: var(--lm-ink); background: var(--lm-canvas); }
.webhook-page .workbench { color: var(--lm-on-dark); border-color: #38342f; box-shadow: none; }
.webhook-page .workbench .panel { background: var(--lm-dark); }
.webhook-page .workbench .panel + .panel,
.webhook-page .workbench .panel-heading,
.webhook-page .workbench .event-filter,
.webhook-page .workbench .request-heading,
.webhook-page .workbench .request-meta,
.webhook-page .workbench .inspector-tabs,
.webhook-page .workbench .replay-form { border-color: #38342f; }
.webhook-page .workbench button,
.webhook-page .workbench input,
.webhook-page .workbench select,
.webhook-page .workbench .replay-result { color: var(--lm-on-dark); border-color: #454039; background: var(--lm-dark-raised); }
.webhook-page .workbench .tab-content { background: var(--lm-dark-soft); }
.webhook-page .workbench .token-key { color: #78b7c5; }
.webhook-page .workbench .token-string { color: #e8a55a; }
.webhook-page .workbench .token-number { color: #b79ae8; }
.webhook-page .workbench .token-boolean { color: #cc785c; }
.webhook-page .workbench .key-value strong { color: #e9a98f; }
.webhook-page .workbench .key-value span { color: #d0cbc3; }
.webhook-page .inbox-dialog { color: var(--lm-ink); background: var(--lm-card); }

/* Documentation, mocker, tunnels, command center: warm cards and coral focus. */
html[data-theme="light"] .documentation-theme .open-card,
html[data-theme="light"] .documentation-theme .welcome-card,
html[data-theme="light"] .mocker-theme .panel,
html[data-theme="light"] .portal-page .create-tunnel-card,
html[data-theme="light"] .portal-page .guide-grid article,
html[data-theme="light"] .command-theme .card,
html[data-theme="light"] .command-theme .metrics article,
html[data-theme="light"] .command-theme .updated,
html[data-theme="light"] .command-theme .repo-metrics article,
html[data-theme="light"] .command-theme .period-card,
html[data-theme="light"] .command-theme .detail-card {
  color: var(--lm-ink);
  border-color: var(--lm-line);
  background: var(--lm-card);
  box-shadow: none;
}
.documentation-theme .open-card,
.mocker-theme .panel,
.portal-page .create-tunnel-card,
.portal-page .guide-grid article,
.command-theme .card,
.command-theme .metrics article,
.command-theme .updated,
.command-theme .repo-metrics article,
.command-theme .period-card,
.command-theme .detail-card { box-shadow: none; }

.documentation-theme input,
.documentation-theme select,
.mocker-theme input,
.mocker-theme select,
.mocker-theme textarea,
.portal-page input,
.portal-page select,
.command-theme input,
.command-theme select,
.command-theme textarea {
  color: var(--lm-ink);
  border-color: var(--lm-line);
  background: var(--lm-canvas);
}

.documentation-theme input:focus,
.documentation-theme select:focus,
.mocker-theme input:focus,
.mocker-theme select:focus,
.mocker-theme textarea:focus,
.portal-page input:focus,
.command-theme input:focus,
.command-theme select:focus,
.command-theme textarea:focus {
  border-color: var(--lm-coral);
  box-shadow: 0 0 0 3px rgba(204,120,92,.13);
}

.documentation-theme .editor-pane,
.documentation-theme .source-pane,
.mocker-theme .response-editor,
.mocker-theme .body-editor,
.portal-page code,
.portal-page pre {
  border-color: #39352f;
  background: var(--lm-dark);
  color: var(--lm-on-dark);
}

.portal-page .guide-grid article code,
.portal-page .agent-command,
.portal-page .command-block { color: var(--lm-on-dark); background: var(--lm-dark); }
.portal-page .guide-grid article > span,
.portal-page .section-heading .eyebrow { color: var(--lm-coral); }
.portal-page .tunnel-landing-card p { color: var(--lm-body); }
.portal-page .tunnel-landing-card code { color: var(--lm-ink); }
.portal-page .tunnel-landing-secondary { color: var(--lm-ink); border-color: var(--lm-muted); }

html[data-theme="light"] .mocker-theme .collection-tools,
html[data-theme="light"] .mocker-theme .mock-search-wrap,
html[data-theme="light"] .mocker-theme .history-toolbar,
html[data-theme="light"] .mocker-theme .collection-form,
html[data-theme="light"] .mocker-theme .inspector-heading { background: var(--lm-soft); }
html[data-theme="light"] .mocker-theme .intro > code { color: var(--lm-ink); border-color: var(--lm-line); background: var(--lm-canvas); box-shadow: none; }
html[data-theme="light"] .mocker-theme input,
html[data-theme="light"] .mocker-theme select,
html[data-theme="light"] .mocker-theme textarea,
html[data-theme="light"] .mocker-theme .search-field input[type="search"] { color: var(--lm-ink); border-color: var(--lm-line); background-color: var(--lm-canvas); }
html[data-theme="light"] .mocker-theme pre,
html[data-theme="light"] .mocker-theme .preview-body { color: var(--lm-on-dark); border-color: #39352f; background: var(--lm-dark); }
.mocker-theme .response-json-editor,
html[data-theme="light"] .mocker-theme .response-json-editor {
  color: var(--lm-on-dark);
  caret-color: var(--lm-on-dark);
  border-color: #39352f;
  background: var(--lm-dark) !important;
}
.mocker-theme .json-highlight .json-key { color: #78b7c5; }
.mocker-theme .json-highlight .json-string { color: #e8a55a; }
.mocker-theme .json-highlight .json-number { color: #b79ae8; }
.mocker-theme .json-highlight .json-boolean { color: #cc785c; }
.mocker-theme .json-highlight .json-null { color: #a09d96; }

.command-theme .sidebar { color: var(--lm-on-dark); border-color: #39352f; background: var(--lm-dark); }
.command-theme .sidebar .product-brand,
.command-theme .sidebar .product-brand strong { color: var(--lm-on-dark); }
.command-theme .sidebar .product-brand .product-brand-mark { color: var(--lm-dark); background: var(--lm-coral); }
.command-theme .nav-item { color: var(--lm-on-dark-muted); }
.command-theme .nav-item:hover { color: var(--lm-on-dark); background: var(--lm-dark-raised); }
.command-theme .nav-item.active { color: var(--lm-on-dark); background: var(--lm-dark-raised); box-shadow: inset 3px 0 var(--lm-coral); }
.command-theme .metric-icon.purple,
.command-theme .repo-monogram,
.command-theme .quick-links a > span { color: var(--lm-coral); background: rgba(204,120,92,.12); }
.command-theme .metric-icon.orange { color: #a96325; background: rgba(232,165,90,.14); }
.command-theme .metric-icon.green { color: #397d51; background: rgba(93,184,114,.13); }
.command-theme .metric-icon.blue { color: #347d79; background: rgba(93,184,166,.13); }
.command-theme .repo-hero { color: var(--lm-on-dark); background: var(--lm-dark); box-shadow: none; }
.command-theme .repo-hero-mark { background: var(--lm-coral); box-shadow: none; }
.command-theme .open-local-repo { color: var(--lm-ink); background: var(--lm-canvas); }

/* Account pages read like a compact editorial card, not a separate product. */
.auth-page .auth-card,
html[data-theme="light"] .auth-page .auth-card {
  color: var(--lm-ink);
  border-color: var(--lm-line);
  background: var(--lm-card);
  box-shadow: none;
}
.auth-page .auth-brand .product-brand-mark { color: var(--lm-canvas); background: var(--lm-ink); }
.auth-page .auth-corner-link { color: #fff; border-color: var(--lm-coral); background: var(--lm-coral); background-image: none; box-shadow: none; }
.auth-page .auth-switch a,
.auth-page .auth-recovery a { color: var(--lm-coral); }
.auth-page .auth-form button span { color: #fff; }
.auth-page .theme-toggle { color: var(--lm-ink); border-color: var(--lm-line); background: var(--lm-soft); }
.auth-page .auth-form input,
html[data-theme="light"] .auth-page .auth-form input { color: var(--lm-ink); border-color: var(--lm-line); background: var(--lm-canvas); }

/* SEO content inherits the same editorial voice on tool landing pages. */
.json-page .seo-content,
.webhook-page .seo-content,
.documentation-theme .seo-content,
.mocker-theme .seo-content,
.portal-page .seo-content { color: var(--lm-ink); }
.json-page .seo-content h2,
.webhook-page .seo-content h2,
.documentation-theme .seo-content h2,
.mocker-theme .seo-content h2,
.portal-page .seo-content h2 { color: var(--lm-ink); font-family: var(--lm-display); font-weight: 500; letter-spacing: -.035em; }
.json-page .seo-content .seo-kicker,
.webhook-page .seo-content .seo-kicker,
.documentation-theme .seo-content .seo-kicker,
.mocker-theme .seo-content .seo-kicker,
.portal-page .seo-content .seo-kicker,
.json-page .seo-content a,
.webhook-page .seo-content a,
.documentation-theme .seo-content a,
.mocker-theme .seo-content a,
.portal-page .seo-content a { color: var(--lm-coral); }
.json-page .seo-card,
.webhook-page .seo-card,
.documentation-theme .seo-card,
.mocker-theme .seo-card,
.portal-page .seo-card,
html[data-theme="light"] .json-page .seo-card,
html[data-theme="light"] .webhook-page .seo-card,
html[data-theme="light"] .documentation-theme .seo-card,
html[data-theme="light"] .mocker-theme .seo-card,
html[data-theme="light"] .portal-page .seo-card { border-color: var(--lm-line); background: var(--lm-soft); }

@media (max-width: 760px) {
  .json-page .hero h1,
  .webhook-page .landing-hero h1,
  .documentation-theme .welcome h1,
  .portal-page .portal-hero h1 { letter-spacing: -.035em; }
}