/* flowmap.: the brand layer on top of the editor's own styles, matching
   chafaijawad.com — white, black and one blue, Geist for text, Outfit for the wordmark. */
@import url(../fonts/fonts.css);

:root, :root.geSystemColors {
    --ge-panel-color: #ffffff;
    --toolbar-color: #ffffff;
    --workspace-color: #ffffff;
    --inactive-color: #f4f4f5;
    --active-color: #e4e4e7;
    --primary-color: #09090b;
    --primary-hover-color: #27272a;
    --accent-color: #eaf1ff;
    --accent-hover-color: #dce8ff;
    --accent-text-color: #0052d4;
    --border-color: #e4e4e7;
    --highlight-color: #ececee;
    --text-color: #3f3f46;
    --dialog-color: #ffffff;
    --strong-text-color: #09090b;
    --secondary-text-color: #52525b;
    --faint-text-color: #71717a;
    --field-color: #ffffff;
    --field-border-color: #e4e4e7;
    --strong-border-color: #d4d4d8;
    --soft-color: #f4f4f5;
    --soft-hover-color: #ececee;
    --card-color: #ffffff;
    --focus-color: #0062fb;
    --selected-color: #eaf1ff;
    --selected-hover-color: #dce8ff;
    --scrollbar-color: #e4e4e7;
    --scrollbar-hover-color: #a1a1aa;
    --mention-color: #0052d4;
    --mention-background-color: #eaf1ff;
    --pm-ink: #09090b;
    --pm-red: #e5262f;
    --pm-blue: #0062fb;
    --pm-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -8px rgba(0, 0, 0, 0.12);
}

/* Type */
.geEditor, .geDialog, .mxPopupMenu, .mxWindow, .geSidebarTooltip, .geToolbarContainer, .geMenubarContainer,
.geEditor input, .geEditor select, .geEditor button, .geDialog input, .geDialog select, .geDialog button, .geDialog textarea {
    font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
}
.geEditor { -webkit-font-smoothing: antialiased; }

/* Splash while loading */
#geInfo { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:16px 16px 10vh; text-align:center; min-height:100vh; box-sizing:border-box; font-family:'Geist',system-ui,sans-serif; background:#fff; }
#geInfo noscript { max-width:600px; color:#52525b; }
#geStatus:empty { display:none; }
#geStatus a { text-decoration:underline; cursor:pointer; }
.pmWordmark { font:700 40px/1 'Outfit', 'Geist', sans-serif; letter-spacing:-0.04em; color:var(--pm-ink); animation:pmPulse 1.2s ease-in-out infinite alternate; }
.pmWordmark span, .pmDotRed { color:var(--pm-red); }
#geInfo:has(#geStatus:not(:empty)) .pmWordmark { animation:none; }
@media (prefers-reduced-motion: reduce) { .pmWordmark { animation:none; } }
@keyframes pmPulse { from { opacity:1; } to { opacity:.45; } }

/* Header: the flowmap. wordmark in place of the square app icon */
html body .geAppIcon {
    background: none !important;
    width: auto !important;
    min-width: 104px;
    height: 32px !important;
    top: 15px !important;
    left: 18px !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    color: var(--pm-ink) !important;
    font: 700 24px/32px 'Outfit', 'Geist', sans-serif !important;
    letter-spacing: -0.04em;
    text-decoration: none;
    white-space: nowrap;
    filter: none !important;
}
html body .geAppIcon::before { content: 'flowmap'; }
html body .geAppIcon::after { content: '.'; color: var(--pm-red); }
html body .geAppIcon:hover { opacity: .75 !important; }
html body .geMenubarContainer .geMenubar { padding-left: 128px !important; }
html body .geMenubarContainer .geFilenameContainer { left: 132px !important; }
.geMenubarContainer { border-bottom: 1px solid var(--border-color); }
.geFilename { font-weight: 500; letter-spacing: -0.01em; color: var(--pm-ink); }
.geMenubar .geItem { color: #52525b; font-size: 14px; border-radius: 8px; }
.geMenubar .geItem:hover { color: var(--pm-ink); background: #f4f4f5 !important; }
/* The page tabs link to the editor's source repository; the About dialog credits it instead */
.geTabContainer a:has(img[src*="github-logo"]) { display: none !important; }

/* Buttons: black pill for the main action, hairline for the rest */
html body.geEditor .gePrimaryBtn, html body .geDialog .gePrimaryBtn, .gePrimaryBtn {
    background-color: var(--pm-ink) !important;
    color: #fff !important;
    border: 1px solid var(--pm-ink) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
.gePrimaryBtn * { color: #fff !important; }
.gePrimaryBtn img, .gePrimaryBtn .geAdaptiveAsset, .gePrimaryBtn .geButton { filter: invert(1) brightness(2) !important; }
/* The Share button's icon and label sit inside one inverted element, so its text is set dark to come out white */
.gePrimaryBtn .geButton, .gePrimaryBtn .geButton * { color: #000 !important; }
.geEditor input[type=checkbox], .geDialog input[type=checkbox], .geEditor input[type=radio] { accent-color: #0062fb; }
html body.geEditor .gePrimaryBtn:hover:not([disabled]), html body .geDialog .gePrimaryBtn:hover:not([disabled]) {
    background-color: #27272a !important;
    border-color: #27272a !important;
}
.gePrimaryBtn[disabled] { opacity: .4; }
.geBtn { border-radius: 999px !important; font-weight: 500 !important; padding: 0 14px !important; }
.geBtn:not(.gePrimaryBtn) { background: #fff !important; border: 1px solid #e4e4e7 !important; color: var(--pm-ink) !important; box-shadow: none !important; }
.geBtn:not(.gePrimaryBtn):hover:not([disabled]) { background: #f4f4f5 !important; }
.geButtonContainer .gePrimaryBtn:not(.geEmbedBtn) { padding: 0 14px 0 12px; }

/* Toolbar and panels */
.geToolbarContainer { border-bottom: 1px solid var(--border-color); }
.geToolbar .geButton, .geToolbar .geLabel { border-radius: 8px; }
.geSidebarContainer, .geFormatContainer { border-color: var(--border-color) !important; }
.geSidebarContainer .geTitle { color: var(--pm-ink); font-weight: 500; }
.geSidebar .geItem { border-radius: 8px; }
.geFormatContainer .geFormatTitle { font-weight: 500; }
.geSearchSidebar input, .geEditor input[type=text], .geEditor input[type=search], .geDialog input[type=text], .geDialog select, .geEditor select {
    border-radius: 8px !important;
}
.geTempDlgCreateBtn, .geTempDlgOpenBtn { border-radius: 999px !important; }

/* Dialogs and menus */
.geDialog { border-radius: 16px !important; border: 1px solid rgba(0,0,0,.08) !important; box-shadow: var(--pm-shadow) !important; background: #fff !important; }
.geDialog .geTitle { font-weight: 600; letter-spacing: -0.02em; }
.geBackground { background: rgba(10,10,10,.28) !important; }

/* Process analysis and other flowmap panels */
.pmPanel { font:13.5px/1.5 'Geist', system-ui, sans-serif; color:#09090b; }
.pmPanel h2 { font-size:18px; font-weight:600; letter-spacing:-0.025em; margin:0 0 2px; }
.pmPanel .pmSub { color:#71717a; margin:0 0 16px; }
.pmGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.pmStat { border:1px solid rgba(0,0,0,.09); border-radius:12px; padding:10px 12px; background:#fff; }
.pmStat b { display:block; font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.03em; }
.pmStat span { color:#71717a; font-size:12px; }
.pmStat.pmKey { background:#eaf1ff; border-color:transparent; }
.pmStat.pmKey b { color:#0052d4; }
.pmSection { font-weight:500; margin:16px 0 6px; }
.pmList { list-style:none; margin:0; padding:0; }
.pmList li { display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:10px; cursor:pointer; }
.pmList li:hover { background:#f4f4f5; }
.pmDot { flex:none; width:8px; height:8px; border-radius:50%; margin-top:7px; background:#a1a1aa; }
.pmDot.high { background:#dc2626; } .pmDot.medium { background:#b45309; } .pmDot.low { background:#0062fb; } .pmDot.ok { background:#16a34a; }
.pmMuted { color:#71717a; }
.pmBar { display:flex; height:8px; border-radius:4px; overflow:hidden; background:#ececee; margin:6px 0 6px; }
.pmBar i { display:block; height:100%; }
.pmLegend { display:flex; flex-wrap:wrap; gap:14px; color:#52525b; font-size:12px; }
.pmLegend span::before { content:""; display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; background:var(--c); }
.pmForm label { display:block; font-weight:500; margin:12px 0 5px; }
.pmForm input, .pmForm select { width:100%; box-sizing:border-box; height:36px; border:1px solid #e4e4e7; border-radius:10px; padding:0 10px; font:inherit; background:#fff; }
.pmForm input:focus, .pmForm select:focus { outline:none; border-color:#0062fb; box-shadow:0 0 0 3px rgba(0,98,251,.15); }
.pmForm .pmRow { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pmHint { color:#71717a; font-size:12px; margin-top:5px; }
.pmAbout { text-align:center; }
.pmAbout .pmWordmark { font-size:34px; animation:none; margin:8px 0 6px; }
.pmAbout a { color:#0052d4; }

html.dark .pmPanel, .geDarkMode .pmPanel { color:#e5e5e7; }
html.dark .pmStat, .geDarkMode .pmStat { border-color:rgba(255,255,255,.12); background:transparent; }
html.dark .pmStat.pmKey, .geDarkMode .pmStat.pmKey { background:rgba(0,98,251,.18); }
html.dark .pmStat.pmKey b, .geDarkMode .pmStat.pmKey b { color:#7fb0ff; }
html.dark .pmList li:hover, .geDarkMode .pmList li:hover { background:rgba(255,255,255,.06); }
.geDarkMode .geAppIcon { color:#fff !important; }

/* ------------------------------------------------------------------ */
/* Cards, popups and hover cards                                       */
/* Signature: the red dot from the wordmark marks what is selected.    */
/* ------------------------------------------------------------------ */

/* Shared card surface: white, hairline, the site's soft shadow, 12px corners */
.geSidebarTooltip, .geTemplate, .mxPopupMenu, .geDialog, .mxWindow { --pm-card-border: rgba(0,0,0,.08); }

/* Hover card for shapes in the library */
html body .geSidebarTooltip {
    background: #fff !important;
    border: 1px solid var(--pm-card-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--pm-shadow) !important;
}
.geSidebarTooltip > div:last-of-type:not([style*="display: none"]) { font-size: 12.5px; color: #52525b; }

/* Menus: one 32px row rhythm, a 28px icon column for ticks, shortcuts muted
   and right-aligned, 8px rounded hover, hairline dividers inset 8px */
html body div.mxPopupMenu, html body table.mxPopupMenu {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -8px rgba(0,0,0,.14) !important;
    padding: 4px !important;
}
html body table.mxPopupMenu { border-collapse: separate !important; border-spacing: 0 !important; min-width: 232px; }
html body table.mxPopupMenu tr:is(.mxPopupMenuItem, .mxPopupMenuItemHover) td {
    height: 32px; padding-top: 0 !important; padding-bottom: 0 !important;
    font-size: 13px !important; line-height: 32px; color: #09090b !important; background: transparent;
    white-space: nowrap; vertical-align: middle;
}
html body table.mxPopupMenu td.mxPopupMenuIcon {
    width: 28px !important; min-width: 28px; padding: 0 !important; text-align: center;
    border-radius: 8px 0 0 8px;
}
html body table.mxPopupMenu td.mxPopupMenuIcon img { width: 16px; height: 16px; vertical-align: middle; opacity: .75; }
html body table.mxPopupMenu tr:is(.mxPopupMenuItem, .mxPopupMenuItemHover) td.mxPopupMenuItem { padding-left: 0 !important; padding-right: 12px !important; }
html body table.mxPopupMenu tr:is(.mxPopupMenuItem, .mxPopupMenuItemHover) td:last-child { border-radius: 0 8px 8px 0; padding-right: 10px !important; }
html body table.mxPopupMenu tr.mxPopupMenuItemHover td { background: #f4f4f5 !important; }
html body table.mxPopupMenu tr.mxDisabled td,
html body table.mxPopupMenu tr[aria-disabled="true"] td { color: #a1a1aa !important; }
/* Ticks: the editor floats a 22px image inside the label; it moves into the icon column at 14px */
html body table.mxPopupMenu tr[aria-checked] td.mxPopupMenuItem > div[style*="absolute"] { display: none !important; }
html body table.mxPopupMenu tr[aria-checked="true"] td.mxPopupMenuIcon {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
}
html body table.mxPopupMenu tr[aria-checked="true"].mxPopupMenuItemHover td.mxPopupMenuIcon {
    background: #f4f4f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
}
html body .geMenuShortcut { font-family: 'Geist', system-ui, sans-serif !important; font-size: 12px !important; font-variant-numeric: tabular-nums; color: #a1a1aa !important; letter-spacing: 0; padding-left: 24px; }
html body table.mxPopupMenu tr:not(.mxPopupMenuItem):not(.mxPopupMenuItemHover) td { padding: 0 !important; height: 9px; }
html body table.mxPopupMenu hr { border: 0 !important; height: 1px !important; background: #ececee !important; margin: 4px 8px !important; }
html body table.mxPopupMenu tr:is(.mxPopupMenuItem, .mxPopupMenuItemHover) td:last-child img, html body table.mxPopupMenu .mxPopupMenuArrow { opacity: .5; }
html body table.mxPopupMenu tr:is(.mxPopupMenuItem, .mxPopupMenuItemHover) td[style*="color: rgb(255, 0, 0)"], html body table.mxPopupMenu td.geDeleteItem { color: #dc2626 !important; }


/* File > New: template cards with the name under the thumbnail */
html body .geEditor .geTemplate, html body .geDialog .geTemplate {
    border: 1px solid #e4e4e7 !important;
    border-radius: 12px !important;
    background: #fff !important;
    overflow: hidden;
    margin: 6px !important;
    transition: border-color .15s cubic-bezier(.22,1,.36,1), box-shadow .15s cubic-bezier(.22,1,.36,1);
}
html body .geTemplate:hover { border-color: #d4d4d8 !important; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 16px -8px rgba(0,0,0,.12); }
html body .geTemplate .geTemplatePreview { opacity: 1 !important; inset: 0 0 32px 0; height: auto !important; padding: 10px !important; }
html body .geTemplate:has(.geTemplatePreview) span {
    position: absolute; left: 0; right: 0; bottom: 0; display: block !important;
    max-width: none; border-radius: 0; background: #f4f4f5; border-top: 1px solid #ececee;
    padding: 7px 10px; font-size: 12px; font-weight: 500; line-height: 18px; color: #09090b;
    text-align: left; white-space: nowrap;
}
html body .geTemplate:not(:has(.geTemplatePreview)) span { background: none; font-size: 13px; font-weight: 500; color: #09090b; }
html body .geTemplate.geTemplateSelected { border-color: #09090b !important; box-shadow: 0 0 0 1px #09090b !important; }
html body .geTemplate.geTemplateSelected::after {
    content: ''; position: absolute; top: 9px; left: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--pm-red);
}
html body .geTemplate .geButton.geRoundButton { opacity: 0; border: 1px solid #e4e4e7; border-radius: 999px; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: opacity .15s; }
html body .geTemplate:hover .geButton.geRoundButton { opacity: 1; }
.geDialog img[src*="osa_drive-harddisk"], .geDialog img[src*="osa_database"] { display: none !important; }
.geTempTree, .geTempTree + * , .geDialog ul.geTempTree li { font-size: 13px; }
.geDialog div:has(> ul.geTempTree) { border-color: #e4e4e7 !important; }
.geDialog [class*="geTempDlg"] { font-size: 13px; }

/* Format panel: underline tabs, quiet section titles, outline buttons */
html body .geFormatTitleContainer { border-bottom: 1px solid var(--border-color); }
html body .geFormatTitle {
    background: #fff !important; border: 0 !important; color: #71717a !important;
    font-size: 13px; font-weight: 500; transition: color .15s;
}
html body .geFormatTitle:hover { color: #09090b !important; }
html body .geFormatTitle.geActiveFormatTitle { color: #09090b !important; box-shadow: inset 0 -2px 0 #09090b; }
html body .geFormatSection { border-bottom: 1px solid #ececee !important; }
html body .geCollapsibleTitle, html body .geFormatSectionTitle { font-size: 13px; font-weight: 500; color: #09090b; }
html body .geFormatContainer button:not(.geColorBtn):not(.geStyleButton),
html body .geFormatContainer a.geStyleBtn,
html body .geFormatContainer select {
    border-radius: 8px !important; border: 1px solid #e4e4e7 !important; background-color: #fff !important;
    color: #09090b !important; font-size: 13px !important; box-shadow: none !important;
}
html body .geFormatContainer button:not(.geColorBtn):not(.geStyleButton):hover:not([disabled]),
html body .geFormatContainer a.geStyleBtn:hover { background-color: #f4f4f5 !important; }
html body .geFormatContainer .geColorBtn { border-radius: 6px !important; border: 1px solid #e4e4e7 !important; }
html body .geFormatContainer .geStyleButton { border-radius: 8px !important; }
html body .geFormatContainer .geSwitcherDot { border-radius: 50%; }
html body .geFormatContainer input[type=text], html body .geFormatContainer input:not([type]) { border-radius: 6px !important; border: 1px solid #e4e4e7 !important; }
html body table.geProperties { border-collapse: separate; border-spacing: 0; border: 1px solid #e4e4e7; border-radius: 10px; overflow: hidden; }
html body table.geProperties .gePropHeaderCell { background: #f4f4f5 !important; color: #71717a !important; font-weight: 500; font-size: 12px; border: 0 !important; }
html body table.geProperties tr.gePropNonHeaderRow td { background: #fff !important; border-top: 1px solid #ececee; font-size: 12.5px; }

/* Library sidebar: section headers in the Linear/Figma pattern — a small muted
   chevron, a medium label, a rounded hover — and soft hover tiles for shapes */
html body .geSidebarContainer .geTitle {
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    background-position: 12px center !important;
    background-color: transparent;
    height: 32px !important; line-height: 32px !important;
    padding: 0 8px 0 34px !important; margin: 2px 8px !important;
    border-radius: 8px; font-size: 13px !important; font-weight: 500; color: #09090b !important;
    transition: background-color .15s cubic-bezier(.22,1,.36,1);
}
html body .geSidebarContainer .geTitle:hover { background-color: #f4f4f5 !important; }
html body .geSidebar a.geItem { border-radius: 8px !important; border: 1px solid transparent !important; transition: background-color .15s, border-color .15s; }
html body .geSidebar a.geItem:hover { background-color: #f4f4f5 !important; border-color: #e4e4e7 !important; }
html body .geSidebarContainer .geDropTarget { border: 1px dashed #d4d4d8 !important; border-radius: 10px !important; color: #71717a !important; font-size: 12.5px; }
html body .geSidebarContainer .geSearchSidebar input { height: 34px !important; border-radius: 10px !important; border: 1px solid #e4e4e7 !important; background-color: #f4f4f5 !important; font-size: 13px !important; padding-left: 12px !important; }
html body .geSidebarContainer .geSearchSidebar input:focus { background-color: #fff !important; }


/* Toolbar buttons and page tabs */
html body .geToolbar .geButton:hover:not([disabled]) { background-color: #f4f4f5 !important; }
html body div.geActivePage { background: #fff !important; color: #09090b !important; box-shadow: inset 0 2px 0 #09090b; font-weight: 500; }
html body .gePageTab:not(.geActivePage):hover { background: #f4f4f5 !important; }

/* Selecting on the canvas */
html body .mxRubberband { background: rgba(0,98,251,.06) !important; border: 1px solid #0062fb !important; }

/* The board: a soft off-white so white shapes stand out on it */
html body .geDiagramContainer { background-color: #ffffff !important; }

/* Dialogs: one form system — 36px fields with a focus ring, muted labels,
   36px buttons, room above the actions; small form dialogs size to their content */
html body .geDialog:has(> div > div[style*="display: grid"]) { height: auto !important; padding-top: 52px !important; }
html body .geDialog > div > div[style*="display: grid"] { gap: 12px 12px !important; padding: 4px 0 0 !important; }
html body .geDialog > div > div[style*="display: grid"] > div[align="right"] { padding-top: 12px !important; gap: 8px; }
html body .geDialog > div > div[style*="display: grid"] > div > div,
html body .geDialog > div > div[style*="display: grid"] > div[style*="font-size: 10pt"] { font-size: 13px !important; color: #52525b; }
html body .geDialog input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
html body .geDialog select, html body .geDialog textarea {
    min-height: 36px; box-sizing: border-box; border: 1px solid #e4e4e7 !important; border-radius: 8px !important;
    padding: 0 10px !important; font-size: 13px !important; color: #09090b; background-color: #fff !important; box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s;
}
html body .geDialog textarea { padding: 8px 10px !important; }
html body .geDialog input:not([type=checkbox]):not([type=radio]):focus, html body .geDialog select:focus, html body .geDialog textarea:focus {
    outline: none !important; border-color: #0062fb !important; box-shadow: 0 0 0 3px rgba(0,98,251,.15) !important;
}
html body .geDialog .geBtn { height: 36px !important; min-width: 84px; font-size: 13.5px !important; margin: 0 0 0 8px; }
html body .geDialog > .geButton[title="Close"] { top: 14px !important; right: 14px !important; width: 28px; height: 28px; border-radius: 8px; background-size: 16px !important; opacity: .6; }
html body .geDialog > .geButton[title="Close"]:hover { opacity: 1; background-color: #f4f4f5; }

/* ------------------------------------------------------------------ */
/* App shell. The editor is a CSS grid: menubar / toolbar / panels /   */
/* page tabs. Each panel gets real margins, so the grid sizes around   */
/* them and everything inside stays aligned.                           */
/*   gutter 8 · card padding 12 · radius 16 (cards) 10 (controls)       */
/*   zinc ramp: app #ededee · card #fff · sunken #f4f4f5 · line #e4e4e7 */
/* ------------------------------------------------------------------ */
:root, :root.geSystemColors {
    --pm-app: #ededee; --pm-card: #ffffff; --pm-sunken: #f4f4f5; --pm-line: #e4e4e7;
    --pm-text: #09090b; --pm-text-2: #52525b; --pm-text-3: #a1a1aa;
    --ge-panel-color: #ffffff; --toolbar-color: #ffffff; --workspace-color: #ffffff;
    --border-color: #e4e4e7; --text-color: #3f3f46; --strong-text-color: #09090b; --secondary-text-color: #52525b; --faint-text-color: #a1a1aa;
}
html body.geEditor, html body .geEditor { background: var(--pm-app) !important; }

/* Row 1: header on the app background. Wordmark lines up with the sidebar content (8 + 12) */
html body .geMenubarContainer { background: transparent !important; border: 0 !important; padding: 0 !important; }
html body .geAppIcon { left: 20px !important; }
html body .geMenubarContainer .geButtonContainer { right: 8px !important; padding-right: 0 !important; }

/* Row 2: toolbar card */
html body .geToolbarContainer {
    margin: 0 8px 8px; width: auto !important; height: 44px !important; box-sizing: border-box;
    background: var(--pm-card) !important; border: 0 !important; border-radius: 14px;
    padding: 0 6px 0 12px !important; align-items: center;
}
html body .geToolbarContainer .geToolbar { padding: 0 !important; border: 0 !important; background: transparent !important; align-items: center; }
html body .geToolbar .geButton, html body .geToolbar .geLabel { height: 32px !important; min-width: 32px; border-radius: 8px !important; }
html body .geToolbar .geSeparator { background: var(--pm-line) !important; height: 20px !important; width: 1px !important; margin: 0 6px !important; }

/* Row 3: sidebar card · 8px splitter · board card · format card */
html body .geSidebarContainer:not(.geFormatContainer) {
    margin: 0 0 8px 8px; border-radius: 16px; overflow: hidden;
    background: var(--pm-card) !important; border: 0 !important;
}
html body .geHsplit { width: 8px !important; background: transparent !important; border: 0 !important; }
html body .geHsplit:hover { background: linear-gradient(var(--pm-line), var(--pm-line)) center / 2px 40px no-repeat !important; }
html .geEditor > .geDiagramContainer { margin: 0 0 8px 0 !important; border-radius: 16px; border: 0 !important; background-color: var(--pm-card) !important; }
html body .geFormatContainer {
    margin: 0 8px 8px 8px; border-radius: 16px; overflow: hidden auto;
    background: var(--pm-card) !important; border: 0 !important;
}

/* Sidebar contents on a 12px inset: search, headers, tiles, footer */
html body .geSidebarContainer .geSidebar.geSearchSidebar { padding: 12px 12px 8px !important; box-sizing: border-box; width: 100% !important; }
html body .geSidebarContainer .geSearchSidebar > div, html body .geSidebarContainer .geSearchSidebar form { width: 100% !important; margin: 0 !important; position: relative; }
html body .geSidebarContainer .geSearchSidebar input {
    width: 100% !important; height: 36px !important; box-sizing: border-box; margin: 0 !important;
    border: 1px solid transparent !important; border-radius: 10px !important; background-color: var(--pm-sunken) !important;
    padding: 0 36px 0 12px !important; font-size: 13px !important; color: var(--pm-text) !important; box-shadow: none !important;
}
html body .geSidebarContainer .geSearchSidebar input:focus { background-color: #fff !important; border-color: #0062fb !important; box-shadow: 0 0 0 3px rgba(0,98,251,.15) !important; outline: none; }
html body .geSidebarContainer .geSearchSidebar > div:first-child > img { display: none !important; }
html body .geSidebarContainer .geSearchSidebar input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 12px center !important; background-size: 15px 15px !important; padding-left: 36px !important; padding-right: 12px !important; }
html body .geSidebarContainer .geTitle { margin: 0 12px !important; padding-left: 34px !important; background-position: 12px center !important; }
html body .geSidebarContainer .geSidebar { padding: 4px 12px 12px !important; box-sizing: border-box; }
html body .geSidebarContainer .geDropTarget { margin: 4px 0 8px !important; }
html body .geSidebarFooter { width: 100% !important; box-sizing: border-box; border-top: 1px solid var(--pm-line) !important; background: var(--pm-card) !important; display: flex; align-items: center; justify-content: center; }
html body .geSidebarFooter .gePrimaryBtn { height: 32px !important; padding: 0 14px !important; font-size: 13px !important; }

/* Format panel contents on a 16px inset */
html body .geFormatContainer .geFormatTitleContainer { margin: 0 !important; padding: 0 8px; height: 44px !important; border-bottom: 1px solid var(--pm-line); }
html body .geFormatContainer .geFormatTitle { height: 44px !important; line-height: 44px; }
html body .geFormatContainer .geFormatContent { margin: 0 !important; padding: 0 16px; }
html body .geFormatContainer .geFormatSection { padding-left: 0 !important; padding-right: 0 !important; border-color: var(--pm-line) !important; }

/* Row 4: page tabs on the app background, aligned to the 20px content line */
html body .geTabContainer { background: transparent !important; border: 0 !important; padding-left: 12px !important; }
html body .geTabContainer .gePageTab, html body .geTabContainer .geControlTab { background: transparent !important; border: 0 !important; border-radius: 8px; }
html body div.geActivePage { background: var(--pm-card) !important; box-shadow: none !important; border-radius: 8px; color: var(--pm-text) !important; font-weight: 500; }


/* Figures in Geist Mono, like the site's numbers */
.pmStat b, .pmMono { font-family: 'Geist Mono', ui-monospace, monospace !important; letter-spacing: -0.04em; font-weight: 500 !important; }

/* Analysis cards: grey cards on the white panel, label top left, figure below */
.pmGrid { gap: 10px !important; }
.pmStat { background: #f4f4f5 !important; border: 0 !important; border-radius: 14px !important; padding: 14px 16px !important; }
.pmStat span { display: block; margin-top: 6px; }
.pmStat b { font-size: 24px !important; }
.pmStat.pmKey { background: #09090b !important; }
.pmStat.pmKey b { color: #fff !important; }
.pmStat.pmKey span { color: #a1a1aa !important; }
.pmBar { gap: 4px; background: none !important; height: 8px !important; }
.pmBar i { border-radius: 4px; }
.pmList li { background: #f4f4f5; margin-bottom: 6px; padding: 12px 14px !important; border-radius: 12px !important; }
.pmList li:hover { background: #ececee !important; }
.pmStat { display: flex; flex-direction: column; gap: 10px; min-height: 92px; box-sizing: border-box; }
.pmStat span.pmStatLabel { margin-top: 0 !important; font-size: 12.5px; color: #71717a; line-height: 16px; }
.pmStat b { font-size: 26px !important; line-height: 30px; white-space: nowrap; margin-top: auto; }
.pmStat b small { font-family: 'Geist', system-ui, sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0; color: #71717a; margin-left: 5px; }
.pmStat.pmKey b small { color: #a1a1aa; }