/* OBSCURA OS: Umbra, the code editor.

   One window: the top bar, then a rail of side panels (Files, Search,
   Source control), the side panel, and the work: tabs and the editor with
   the output panel (Console, Preview, Problems) below it or beside it. A
   status line across the foot. On a phone the rail goes, the side panel is
   a drawer over the code and the output panel a sheet under it, and every
   control is at least 44px.

   Every colour, size, corner and duration is a theme.css token, so Umbra
   follows the site's colourways, its dark mode and its motion setting. The
   syntax colours are the --um-* variables below: the site's own text
   tokens (--good, --warn, --accent, --danger, --ink-faint), each already at
   least 4.5:1 on the paper, and three hues of Umbra's own at the same
   contrast. */

.um {
  --um-editor-bg: var(--paper-raised);
  --um-kw: hsl(var(--um-hue) 55% 45%);
  --um-str: var(--good);
  --um-num: var(--warn);
  --um-fn: var(--accent);
  --um-type: hsl(185 75% 27%);
  --um-com: var(--ink-faint);
  --um-prop: hsl(28 70% 34%);
  --um-tag: var(--danger);
  --um-meta: var(--ink-soft);
  --um-selection: color-mix(in srgb, var(--accent) 22%, transparent);
  --um-active-line: color-mix(in srgb, var(--ink) 4%, transparent);
  --um-bracket: color-mix(in srgb, var(--accent) 16%, transparent);
  --um-match: color-mix(in srgb, var(--warn) 28%, transparent);
  --um-match-current: color-mix(in srgb, var(--warn) 55%, transparent);
  --um-on-hue: hsl(0 0% 100%);
  --um-hue: 270;
  --um-side-w: 264px;
  --um-panel-h: 260px;
  --um-panel-w: 480px;
}
:root[data-theme="dark"] .um {
  --um-kw: hsl(var(--um-hue) 90% 80%);
  --um-type: hsl(185 60% 65%);
  --um-prop: hsl(35 70% 70%);
}
/* Brackets by depth: three of the syntax colours, in turn. */
.um { --um-br0: var(--um-fn); --um-br1: var(--um-kw); --um-br2: var(--um-type); }

/* The other colours of the code (Settings, Colours of the code). Graphite
   is the ink alone, with the accent for what is called; High contrast
   takes every colour further from the paper. */
.um.um-theme-graphite {
  --um-kw: var(--ink); --um-str: var(--ink-soft); --um-num: var(--ink); --um-fn: var(--accent-strong); --um-type: var(--ink);
  --um-com: var(--ink-faint); --um-prop: var(--ink-soft); --um-tag: var(--ink); --um-meta: var(--ink-faint);
  --um-br0: var(--ink-soft); --um-br1: var(--ink-faint); --um-br2: var(--ink-soft);
}
.um.um-theme-contrast {
  --um-editor-bg: var(--paper);
  --um-kw: hsl(var(--um-hue) 80% 32%); --um-str: hsl(140 80% 22%); --um-num: hsl(28 95% 30%); --um-fn: hsl(220 85% 35%);
  --um-type: hsl(185 90% 20%); --um-com: hsl(0 0% 34%); --um-prop: hsl(15 80% 30%); --um-tag: hsl(355 80% 36%); --um-meta: var(--ink);
  --um-selection: color-mix(in srgb, var(--accent) 34%, transparent);
}
:root[data-theme="dark"] .um.um-theme-contrast {
  --um-kw: hsl(var(--um-hue) 100% 85%); --um-str: hsl(120 70% 72%); --um-num: hsl(40 100% 70%); --um-fn: hsl(205 100% 78%);
  --um-type: hsl(180 80% 70%); --um-com: hsl(0 0% 72%); --um-prop: hsl(25 100% 76%); --um-tag: hsl(355 100% 78%); --um-meta: var(--ink);
}

body.um-app { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; background: var(--paper); color: var(--ink); font: var(--text-sm)/var(--leading-ui) var(--font-sans); }
.um *, .um *::before, .um *::after { box-sizing: border-box; }
:where(.um) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.um-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.um svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.um-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.um-grow { flex: 1; }
.um code, .um kbd { font: var(--text-xs) var(--font-mono); padding: 1px var(--space-1); border-radius: var(--radius-sm); background: var(--paper-inset); }
.um kbd { border: 1px solid var(--rule); border-bottom-width: 2px; }
.um-hint, .um-side-note { margin: var(--space-2) 0; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-faint); }
.um-empty { margin: var(--space-4); color: var(--ink-faint); list-style: none; }
.um-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--paper-inset); font-size: var(--text-2xs); font-weight: 600; color: var(--ink-soft); }
.um-count[hidden] { display: none; }

.um { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

/* ---------------------------------------------------------------- buttons */

.um-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 5px 12px; border: 1px solid var(--rule-strong); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.um-btn:hover:not(:disabled) { background: var(--paper-inset); }
.um-btn:active:not(:disabled) { transform: translateY(1px); }
.um-btn:disabled { opacity: .5; cursor: default; }
.um-btn svg { width: 16px; height: 16px; }
.um-btn-main { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.um-btn-main:hover:not(:disabled) { background: var(--accent-strong); }
.um-btn-danger { border-color: var(--danger); background: var(--danger); color: var(--on-danger, var(--on-accent)); }
.um-btn-danger:hover:not(:disabled) { background: var(--danger); filter: brightness(.92); }
.um-btn-main svg { fill: currentColor; }
.um-btn-sm { min-height: 28px; padding: 2px 10px; font-size: var(--text-xs); }
.um-wide { width: 100%; }
.um-icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-soft); cursor: pointer; }
.um-icon-btn:hover { background: var(--paper-inset); color: var(--ink); }
.um-link { min-height: 28px; padding: 0; border: 0; background: none; color: var(--accent-strong); font-weight: 600; cursor: pointer; }
.um-link:hover { text-decoration: underline; }
.um :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* ---------------------------------------------------------------- top bar */

.um-top { display: flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 6px 10px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.um-home { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-md); color: var(--ink-soft); }
.um-home:hover { background: var(--paper-inset); color: var(--ink); }
.um-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: var(--radius-md); background: hsl(var(--um-hue) 55% 42%); color: var(--um-on-hue); }
:root[data-theme="dark"] .um-mark { background: hsl(var(--um-hue) 45% 36%); }
.um-mark svg { width: 20px; height: 20px; stroke-width: 1.5; }
.um-brand { margin: 0 var(--space-1) 0 0; font-size: var(--text-md); font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.um-projpick { position: relative; min-width: 0; }
.um-project { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 280px; min-height: 34px; padding: 5px 10px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper); cursor: pointer; }
.um-project:hover, .um-project[aria-expanded="true"] { border-color: var(--rule-strong); background: var(--paper-inset); }
.um-project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.um-project svg { width: 16px; height: 16px; color: var(--ink-faint); }
.um-menu { position: absolute; z-index: 60; top: calc(100% + var(--space-1)); left: 0; min-width: 240px; max-width: min(340px, calc(100vw - 20px)); padding: 6px; border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule), 0 14px 36px rgba(16, 16, 24, .18); animation: um-pop var(--dur-3) var(--ease-standard); }
.um-menu[hidden] { display: none; }
.um-menu button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-height: 34px; padding: var(--space-2) 11px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; cursor: pointer; }
.um-menu button:hover, .um-menu button:focus-visible { background: var(--paper-inset); outline: none; }
.um-menu button kbd { font: inherit; font-size: var(--text-2xs); color: var(--ink-faint); }
.um-helppick { position: relative; display: inline-flex; flex: none; }
.um-helppick .um-menu { left: auto; right: 0; }
.um-menu hr { margin: 6px var(--space-1); border: 0; border-top: 1px solid var(--rule); }
.um-node-menu { position: fixed; top: 0; left: 0; }
@keyframes um-pop { from { opacity: 0; transform: translateY(-4px); } }
.um-state { margin: 0; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--ink-faint); }
.um-top .um-drawer-btn { display: none; }

/* ------------------------------------------------------------------ body */

.um-body { display: grid; grid-template-columns: 48px var(--um-side-w) 5px minmax(0, 1fr); min-height: 0; }
.um[data-side-open="false"] .um-body { grid-template-columns: 48px minmax(0, 1fr); }
.um[data-side-open="false"] .um-side, .um[data-side-open="false"] .um-split-side { display: none; }
.um-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-2) 0; background: var(--paper-inset); border-right: 1px solid var(--rule); }
.um-rail-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-faint); cursor: pointer; }
.um-rail-btn svg { width: 22px; height: 22px; }
.um-rail-btn:hover { color: var(--ink); }
.um-rail-btn[aria-pressed="true"] { color: var(--ink); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); }
.um-rail-btn[aria-pressed="true"]::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; border-radius: var(--radius-sm); background: hsl(var(--um-hue) 60% 55%); }

.um-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--paper-raised); }
.um-side.is-drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
.um-side-sec { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.um-side-sec[hidden] { display: none; }
.um-side-head { display: flex; align-items: center; gap: 2px; min-height: 40px; padding: 4px 6px 4px 14px; border-bottom: 1px solid var(--rule); }
.um-side-head h2 { flex: 1; margin: 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.um-side-head .um-icon-btn { width: 28px; height: 28px; }
.um-side-head .um-icon-btn svg { width: 16px; height: 16px; }
.um-side-x { display: none; }

.um-split { background: transparent; touch-action: none; }
.um-split:hover, .um-split:focus-visible { background: var(--accent-border); }
.um-split-side { cursor: col-resize; border-left: 1px solid var(--rule); }
.um-split-panel { cursor: row-resize; border-top: 1px solid var(--rule); }
.um-split-panelx { cursor: col-resize; border-left: 1px solid var(--rule); }

/* ---------------------------------------------------------------- the tree */

.um-tree { flex: 1; min-height: 0; margin: 0; padding: 4px 0 24px; overflow: auto; list-style: none; }
.um-node { display: flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 8px 0 calc(8px + var(--lvl) * 14px); font-size: var(--text-sm); white-space: nowrap; cursor: pointer; user-select: none; }
.um-node:hover { background: var(--paper-inset); }
.um-node.is-sel { background: var(--accent-soft); }
.um-node.is-active .um-node-name { font-weight: 600; }
.um-node:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.um-twist { display: inline-flex; width: 16px; color: var(--ink-faint); }
.um-twist svg { width: 14px; height: 14px; }
.um-ficon { display: inline-flex; color: var(--ink-faint); }
.um-ficon svg { width: 16px; height: 16px; }
.um-f-dir { color: hsl(var(--um-hue) 40% 55%); }
.um-f-javascript, .um-f-jsx { color: hsl(45 100% 32%); }
.um-f-typescript, .um-f-tsx { color: hsl(211 61% 47%); }
.um-f-python { color: hsl(208 49% 44%); }
.um-f-html { color: hsl(15 64% 50%); }
.um-f-css { color: hsl(266 56% 52%); }
.um-f-json, .um-f-yaml { color: hsl(44 64% 33%); }
.um-f-markdown { color: var(--ink-soft); }
.um-node-name { overflow: hidden; text-overflow: ellipsis; }
.um-node.is-drop { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-border); }

/* Focus on the code: the tabs and the code, nothing else. */
.um[data-focus="true"] .um-body { grid-template-columns: minmax(0, 1fr); }
.um[data-focus="true"] :is(.um-rail, .um-side, .um-split-side, .um-crumbs, .um-split-panel, .um-split-panelx, .um-panel) { display: none !important; }
.um[data-focus="true"] .um-work { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------- search */

.um-search { display: grid; gap: 6px; padding: 10px; border-bottom: 1px solid var(--rule); }
.um-search-row { display: flex; gap: 4px; }
.um-search input, .um-vcs textarea, .um-vcs select, .um-field input, .um-field select, .um-stdin textarea, .um-pick input { width: 100%; min-height: 32px; padding: 4px 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-size: var(--text-sm); }
.um-search input:focus, .um-vcs textarea:focus, .um-field input:focus, .um-stdin textarea:focus, .um-pick input:focus { border-color: var(--accent); outline: 2px solid var(--accent-border); outline-offset: 0; }
.um-tog { flex: none; min-width: 32px; min-height: 32px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink-soft); font: 600 var(--text-xs) var(--font-mono); cursor: pointer; }
.um-tog[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.um-sr-list { flex: 1; min-height: 0; margin: 0; padding: 0 0 24px; overflow: auto; list-style: none; }
.um-sr-list ul { margin: 0; padding: 0; list-style: none; }
.um-sr-path { display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px 4px; font-size: var(--text-xs); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.um-sr-path svg { width: 14px; height: 14px; color: var(--ink-faint); }
.um-sr-hit { display: block; width: 100%; min-height: 26px; padding: 3px 10px 3px 18px; border: 0; background: none; text-align: left; font: var(--text-xs)/1.5 var(--font-mono); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.um-sr-hit:hover { background: var(--paper-inset); }
.um-sr-hit mark { background: var(--um-match-current); color: var(--ink); border-radius: var(--radius-sm); }
.um-sr-ln { display: inline-block; min-width: 3.5ch; margin-right: 6px; color: var(--ink-faint); }

/* --------------------------------------------------------- source control */

.um-vcs { flex: 1; min-height: 0; overflow: auto; padding: 10px 10px 24px; }
.um-vcs textarea { resize: vertical; font-family: var(--font-sans); }
.um-vcs-branch { display: flex; gap: 4px; margin-bottom: 8px; }
.um-vcs-author { margin: 4px 0 8px; font-size: var(--text-xs); color: var(--ink-faint); }
.um-vcs-h { display: flex; align-items: center; gap: 6px; margin: 16px 0 4px; }
.um-vcs-h h3 { margin: 0; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.um-vcs-h .um-icon-btn { margin-left: auto; width: 28px; height: 28px; }
.um-chgs { margin: 0; padding: 0; list-style: none; }
.um-chg { display: flex; align-items: center; }
.um-chg .um-icon-btn { width: 28px; height: 28px; }
.um-chg .um-icon-btn svg { width: 15px; height: 15px; }
.um-chg-open { display: flex; flex: 1; min-width: 0; align-items: baseline; gap: 6px; min-height: 28px; padding: 3px 4px; border: 0; border-radius: var(--radius-sm); background: none; text-align: left; cursor: pointer; }
.um-chg-open:hover { background: var(--paper-inset); }
.um-chg-l { flex: none; width: 16px; font: 700 var(--text-2xs) var(--font-mono); text-align: center; }
.um-chg-added, .um-chg-untracked { color: var(--good); }
.um-chg-modified { color: var(--warn); }
.um-chg-deleted { color: var(--danger); }
.um-chg-name { white-space: nowrap; }
.um-chg-dir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-2xs); color: var(--ink-faint); }
.um-log { margin: 0; padding: 0; list-style: none; }
.um-log li { border-bottom: 1px solid var(--rule); }
.um-log li.um-side-note { padding: 6px 4px; }
.um-log-open { display: grid; gap: 1px; width: 100%; min-height: 36px; padding: 6px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.um-log-open:hover { background: var(--paper-inset); }
.um-log-open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.um-log-msg { font-weight: 600; overflow-wrap: anywhere; }
.um-log-meta { font-size: var(--text-2xs); color: var(--ink-faint); }
.um-vcs-note { margin-top: 18px; }

/* ------------------------------------------------- outline, extensions */

.um-side-find { padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.um-side-find input, .um-bar-q { width: 100%; min-height: 32px; padding: 4px 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-size: var(--text-sm); }
.um-side-find input:focus, .um-bar-q:focus { border-color: var(--accent); outline: 2px solid var(--accent-border); outline-offset: 0; }
.um-bar-q { width: min(260px, 40%); min-height: 28px; font-size: var(--text-xs); }
.um-outline { flex: 1; min-height: 0; margin: 0; padding: 4px 0 24px; overflow: auto; list-style: none; }
.um-ol { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 26px; padding: 0 10px 0 calc(10px + var(--lvl) * 14px); border: 0; background: none; text-align: left; font-size: var(--text-sm); cursor: pointer; }
.um-ol:hover { background: var(--paper-inset); }
.um-ol.is-here { background: var(--accent-soft); }
.um-ol-k { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; border-radius: var(--radius-sm); background: var(--paper-inset); font: 700 var(--text-2xs)/1 var(--font-mono); color: var(--um-kw); }
.um-ol-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-ol-l { margin-left: auto; font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.um-exts { flex: 1; min-height: 0; margin: 0; padding: 0 0 12px; overflow: auto; list-style: none; }
.um-ext-h h3 { margin: 14px 12px 4px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.um-ext { padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.um-ext.is-off .um-ext-name, .um-ext.is-off .um-ext-desc { color: var(--ink-faint); }
.um-ext-head { display: flex; align-items: baseline; gap: 8px; }
.um-ext-name { font-weight: 600; overflow-wrap: anywhere; }
.um-ext-ver { font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); }
.um-ext-desc { margin: 2px 0 0; font-size: var(--text-xs); line-height: 1.45; color: var(--ink-soft); }
.um-ext-adds { margin: 4px 0 0; font: var(--text-2xs)/1.5 var(--font-mono); color: var(--ink-faint); overflow-wrap: anywhere; }
.um-ext-err { margin: 4px 0 0; font-size: var(--text-xs); color: var(--danger); }
.um-ext-act { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.um-ext-on { min-height: 28px; font-size: var(--text-xs); }
.um-ext-on input { width: 16px; height: 16px; }
.um-ext-act .um-icon-btn { width: 28px; height: 28px; margin-left: auto; }
.um-ext-act .um-icon-btn svg { width: 15px; height: 15px; }
.um-ext-note { margin: 0; padding: 6px 12px; border-bottom: 1px solid var(--rule); }

/* The breadcrumbs above the code. */
.um-crumbs { display: flex; align-items: center; gap: 2px; min-height: 26px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; background: var(--um-editor-bg); border-bottom: 1px solid var(--rule); font-size: var(--text-xs); white-space: nowrap; }
.um-crumbs[hidden] { display: none; }
.um-crumb { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 0 4px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-soft); cursor: pointer; }
.um-crumb:hover { background: var(--paper-inset); color: var(--ink); }
.um-crumb svg { width: 13px; height: 13px; color: var(--ink-faint); }
.um-crumb .um-ol-k { width: 14px; height: 14px; }
.um-crumb-sep { color: var(--ink-faint); }

/* A snippet's places while it is being filled in. */
.um-snip { outline: 1px dashed var(--rule-strong); outline-offset: 0; border-radius: var(--radius-sm); }
.um-snip-on { outline: 1px solid var(--accent-border); background: var(--um-bracket); border-radius: var(--radius-sm); }
.um-code-area { width: 100%; min-height: 240px; padding: 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: var(--text-xs)/1.5 var(--font-mono); resize: vertical; }
.um-code-area:focus { border-color: var(--accent); outline: 2px solid var(--accent-border); outline-offset: 0; }
.um-prob-file > ul { margin: 0; padding: 0; list-style: none; }
.um-prob-file .um-prob { padding-left: 24px; }
.um-prob-info .um-prob-sev { color: var(--accent-strong); }

/* ------------------------------------------------------------------ main */

.um-main { position: relative; min-height: 0; min-width: 0; overflow: hidden; background: var(--paper); }
.um-boot { margin: var(--space-6); color: var(--ink-faint); }
.um-start { height: 100%; overflow-y: auto; padding: var(--space-6) max(var(--space-5), calc((100% - 1040px) / 2)) var(--space-7); animation: um-arrive var(--dur-4) var(--ease-standard); }
@keyframes um-arrive { from { opacity: 0; transform: translateY(6px); } }
.um-h { margin: 0 0 var(--space-2); font: 650 var(--text-2xl)/1.15 var(--font-headline); letter-spacing: -.01em; }
.um-h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-md); }
.um-lead { max-width: var(--measure); margin: 0 0 var(--space-5); font-size: var(--text-md); line-height: var(--leading-prose); color: var(--ink-soft); }
.um-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
.um-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: 0 0 0 1px var(--rule); }
.um-card h3 { margin: 0; font-size: var(--text-md); }
.um-card p { margin: 0 0 var(--space-2); color: var(--ink-soft); line-height: 1.5; }
.um-card .um-btn { margin-top: auto; }
.um-recent { margin: 0; padding: 0; list-style: none; max-width: 720px; }
.um-recent li { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--rule); }
.um-recent-open { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border: 0; background: none; text-align: left; cursor: pointer; }
.um-recent-open:hover { background: var(--paper-inset); }
.um-recent-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-recent-kind { margin-left: auto; font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; }

.um-work { display: grid; height: 100%; grid-template-rows: minmax(0, 1fr) 5px var(--um-panel-h); grid-template-columns: minmax(0, 1fr); }
.um-work > .um-groups > .um-code { min-height: 0; }
.um-work[hidden] { display: none; }
.um[data-layout="below"] .um-split-panelx { display: none; }
.um[data-layout="right"] .um-work { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 5px var(--um-panel-w); }
.um[data-layout="right"] .um-split-panel { display: none; }
.um-work:has(.um-panel[data-open="false"]) { grid-template-rows: minmax(0, 1fr) 0 auto; }
.um[data-layout="right"] .um-work:has(.um-panel[data-open="false"]) { grid-template-columns: minmax(0, 1fr) 0 auto; }
.um-panel[data-open="false"] .um-panel-body { display: none; }
.um[data-layout="right"] .um-panel[data-open="false"] .um-panel-tabs { writing-mode: vertical-rl; }

.um-code { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; min-width: 0; }
/* Each part in its own row, so the code keeps the room left when the
   breadcrumbs are hidden. */
.um-code > .um-tabs { grid-row: 1; }
.um-code > .um-crumbs { grid-row: 2; }
.um-code > .um-edit { grid-row: 3; }
.um-tabs { display: flex; min-height: 36px; overflow-x: auto; scrollbar-width: thin; background: var(--paper-inset); border-bottom: 1px solid var(--rule); }
.um-tab { position: relative; display: flex; flex: none; align-items: center; max-width: 220px; border-right: 1px solid var(--rule); }
.um-tab.is-on { background: var(--um-editor-bg); }
.um-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: hsl(var(--um-hue) 60% 55%); }
.um-tab-open { display: flex; align-items: center; min-width: 0; min-height: 36px; padding: 0 4px 0 12px; border: 0; background: none; color: var(--ink-soft); font-size: var(--text-xs); cursor: pointer; }
.um-tab.is-on .um-tab-open { color: var(--ink); }
.um-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-tab-x { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 4px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink-faint); cursor: pointer; }
.um-tab-x svg { width: 14px; height: 14px; }
.um-tab-x:hover { background: var(--paper-inset); color: var(--ink); }
.um-dot { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); }
.um-tab.is-dirty .um-tab-x:not(:hover):not(:focus-visible) svg { display: none; }
.um-tab.is-dirty .um-tab-x:not(:hover):not(:focus-visible) .um-dot { display: block; }

.um-edit { position: relative; min-height: 0; min-width: 0; background: var(--um-editor-bg); }

/* The editor split in two: the right side has a title of its own. */
.um-groups { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; }
.um-groups.is-split { grid-template-columns: minmax(0, 1fr) 5px minmax(240px, var(--um-group2-w, 1fr)); }
.um-split-group { cursor: col-resize; border-left: 1px solid var(--rule); }
.um-split-group[hidden], .um-code2[hidden] { display: none; }
.um-code2 { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; min-width: 0; }
.um-tabs2 { align-items: center; }
.um-tab2 { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: 70%; min-height: 36px; padding: 0 12px; border: 0; border-right: 1px solid var(--rule); background: var(--um-editor-bg); color: var(--ink); font-size: var(--text-xs); cursor: pointer; }
.um-tab2::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: hsl(var(--um-hue) 60% 55%); opacity: .5; }
.um-code2:focus-within .um-tab2::after { opacity: 1; }
.um-code2.is-dirty .um-tab2 .um-dot { display: block; }
.um-tabs2 .um-icon-btn { width: 30px; height: 30px; margin-right: 4px; }
.um-tabs2 .um-icon-btn svg { width: 15px; height: 15px; }
#umEditor2 .cm-editor { height: 100%; }
#umEditor2 .cm-editor.cm-focused { outline: none; }
.um-editor, .um-binary, .um-diffview, .um-welcome { position: absolute; inset: 0; }
.um-editor[hidden], .um-binary[hidden], .um-diffview[hidden], .um-welcome[hidden] { display: none; }
.um-editor .cm-editor { height: 100%; }
.um-editor .cm-editor.cm-focused { outline: none; }
.um-binary { display: grid; place-items: center; overflow: auto; padding: var(--space-5); color: var(--ink-soft); }
.um-binary-in { text-align: center; }
.um-binary img { max-width: min(100%, 720px); max-height: 60vh; border: 1px solid var(--rule); background: repeating-conic-gradient(var(--paper-inset) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.um-welcome { display: grid; place-items: center; overflow: auto; padding: var(--space-5); }
.um-welcome-in { width: min(420px, 100%); }
.um-welcome-h { margin: 0 0 var(--space-4); font: 650 var(--text-xl)/1.2 var(--font-headline); color: var(--ink-soft); }
.um-keys { display: grid; gap: 6px; margin: 0; }
.um-keys div { display: flex; justify-content: space-between; gap: var(--space-4); }
.um-keys dt { color: var(--ink-soft); }
.um-keys dd { margin: 0; white-space: nowrap; }

.um-diffview { overflow: auto; }
.um-diff-head { position: sticky; top: 0; display: flex; align-items: center; gap: var(--space-2); padding: 8px 12px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.um-diff-head h2 { margin: 0; font: 600 var(--text-sm) var(--font-mono); overflow-wrap: anywhere; }
.um-diff-sum { font: var(--text-xs) var(--font-mono); color: var(--ink-faint); }
.um-commit { padding: 12px; border-bottom: 1px solid var(--rule); }
.um-commit-meta { display: grid; gap: 2px; margin: 0; font-size: var(--text-xs); }
.um-commit-meta div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: var(--space-2); }
.um-commit-meta dt { color: var(--ink-faint); }
.um-commit-meta dd { margin: 0; overflow-wrap: anywhere; }
.um-commit-meta code { font-family: var(--font-mono); }
.um-commit-body { margin: 10px 0 0; padding: 8px 10px; border-left: 2px solid var(--rule-strong); font: var(--text-xs)/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft); }
.um-commit-sum { margin: 10px 0 6px; font: var(--text-xs) var(--font-mono); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.um-commit-files { margin: 0; padding: 0; list-style: none; font: var(--text-xs) var(--font-mono); }
.um-commit-files a { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 4px; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.um-commit-files a:hover { background: var(--paper-inset); }
.um-commit-path { overflow-wrap: anywhere; }
.um-commit-file h3 { position: sticky; top: 45px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); border-top: 1px solid var(--rule); font: 600 var(--text-xs) var(--font-mono); overflow-wrap: anywhere; }
.um-diff { width: 100%; border-collapse: collapse; font: var(--text-xs)/1.6 var(--font-mono); }
.um-diff td { padding: 0 8px; vertical-align: top; }
.um-d-n { width: 1%; min-width: 4ch; text-align: right; color: var(--ink-faint); user-select: none; }
.um-d-t { white-space: pre-wrap; overflow-wrap: anywhere; }
.um-d-s { display: inline-block; width: 2ch; color: var(--ink-faint); user-select: none; }
.um-d-add { background: color-mix(in srgb, var(--good) 14%, transparent); }
.um-d-del { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.um-d-add .um-d-s { color: var(--good); }
.um-d-del .um-d-s { color: var(--danger); }
.um-d-hunk td { padding: 3px 8px; background: var(--paper-inset); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.um-d-hunk td { position: sticky; top: 45px; z-index: 1; }
.um-d-at { font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); }
.um-d-acts { display: inline-flex; gap: 4px; float: right; }
.um-d-acts .um-btn-sm { min-height: 24px; padding: 0 8px; }
.um-diff { table-layout: fixed; }
.um-d-cn { width: 6ch; }
.um-diff-side td.um-d-add, .um-diff-side td.um-d-del { background: none; }
.um-diff-side td.um-d-add { background: color-mix(in srgb, var(--good) 14%, transparent); }
.um-diff-side td.um-d-del { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.um-diff-side td.um-d-none { background: var(--paper-inset); }
.um-diff-side .um-d-t + .um-d-n { border-left: 1px solid var(--rule); }

/* What changed since the last commit, beside the line numbers. */
.um-git-gutter { width: 4px; margin-right: 2px; }
.um-git-gutter .cm-gutterElement { padding: 0 !important; }
.um-gm { display: block; width: 3px; height: 100%; }
.um-gm-added { background: var(--good); }
.um-gm-changed { background: var(--accent); }
.um-gm-deleted { height: 0; border-left: 4px solid var(--danger); border-top: 4px solid transparent; border-bottom: 4px solid transparent; width: 0; margin-top: -4px; }

/* ------------------------------------------------------------ the panel */

.um-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--paper-raised); }
.um-panel-head { display: flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 6px; border-bottom: 1px solid var(--rule); }
.um-panel-tabs { display: flex; gap: 2px; }
.um-panel-tabs button { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 0; background: none; color: var(--ink-faint); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.um-panel-tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px hsl(var(--um-hue) 60% 55%); }
.um-panel-tabs button.has-news::after { content: ""; position: absolute; top: 7px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); }
.um-run-state { font-size: var(--text-xs); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28ch; }
html[data-umbra-run="running"] .um-run-state { color: var(--accent-strong); }
.um-panel-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.um-panel-body[hidden] { display: none; }
.um-console-bar, .um-preview-bar { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-bottom: 1px solid var(--rule); }
.um-console-bar svg, .um-preview-bar svg { width: 14px; height: 14px; }
.um-stdin { display: grid; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--rule); font-size: var(--text-xs); color: var(--ink-soft); }
.um-stdin[hidden] { display: none; }
.um-stdin textarea { font-family: var(--font-mono); resize: vertical; }
.um-console { flex: 1; min-height: 0; overflow: auto; padding: 4px 0 12px; background: var(--um-editor-bg); font: var(--text-xs)/1.4 var(--font-mono); }
.um-line { padding: 1px 12px; white-space: pre-wrap; overflow-wrap: anywhere; border-bottom: 1px solid transparent; }
.um-line.um-pre { white-space: pre; overflow-wrap: normal; width: max-content; min-width: 100%; }
.um-warn { background: var(--warn-soft); color: var(--ink); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.um-error { background: var(--danger-soft); color: var(--ink); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.um-info, .um-debug { color: var(--ink-soft); }
.um-meta { color: var(--ink-faint); font-family: var(--font-sans); padding-top: 4px; }
.um-repl { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; padding: 0 10px; }
.um-repl-p { flex: none; padding-top: 5px; font: 700 var(--text-sm) var(--font-mono); color: hsl(var(--um-hue) 60% 55%); cursor: text; }
.um-repl textarea { flex: 1; min-height: 30px; max-height: 160px; padding: 5px 0; border: 0; background: transparent; color: var(--ink); font: var(--text-xs)/1.5 var(--font-mono); resize: none; overflow: auto; }
.um .um-repl textarea:focus-visible, .um .um-repl textarea:focus { outline: none; }
.um-repl:focus-within { box-shadow: inset 2px 0 var(--focus); }
.um-at { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--accent-strong); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.um-preview-host { position: relative; flex: 1; min-height: 0; background: white; }
.um-preview-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: white; }
.um-run-host { display: none; }
.um-problems { flex: 1; min-height: 0; margin: 0; padding: 4px 0; overflow: auto; list-style: none; }
.um-prob { display: block; width: 100%; min-height: 28px; padding: 4px 12px; border: 0; background: none; text-align: left; font-size: var(--text-xs); cursor: pointer; }
.um-prob:hover { background: var(--paper-inset); }
.um-prob-sev { font-weight: 700; }
.um-prob-error .um-prob-sev { color: var(--danger); }
.um-prob-warning .um-prob-sev { color: var(--warn); }
.um-prob-at { color: var(--ink-faint); font-family: var(--font-mono); }

/* ------------------------------------------------------------ status */

.um-status { display: flex; align-items: center; gap: 14px; min-height: 26px; padding: 0 10px; overflow: hidden; background: hsl(var(--um-hue) 40% 32%); color: hsl(var(--um-hue) 60% 95%); font-size: var(--text-2xs); white-space: nowrap; }
:root[data-theme="dark"] .um-status { background: hsl(var(--um-hue) 28% 22%); }
.um-status span:empty, .um-status .um-st:empty { display: none; }
.um-st { min-height: 22px; padding: 0 6px; margin: 0 -6px; border: 0; border-radius: var(--radius-sm); background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
.um-st:hover { background: color-mix(in srgb, currentColor 14%, transparent); }

/* ------------------------------------------------------------ dialogs */

.um-dialog { width: min(480px, calc(100vw - 24px)); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--paper-raised); color: var(--ink); box-shadow: 0 0 0 1px var(--rule), 0 24px 60px rgba(0, 0, 0, .3); }
.um-dialog::backdrop { background: rgba(10, 10, 16, .4); }
.um-dlg { display: grid; gap: var(--space-3); padding: var(--space-5); }
.um-dlg-h { margin: 0; font-size: var(--text-lg); }
.um-dlg-body p { margin: 0 0 var(--space-2); color: var(--ink-soft); line-height: 1.5; }
.um-dlg-body .um-keys { max-height: 50vh; overflow: auto; font-size: var(--text-xs); }
.um-dlg-err { margin: 0; min-height: 1em; color: var(--danger); font-size: var(--text-xs); }
.um-dlg-err:empty { display: none; }
.um-dlg-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.um-field { display: grid; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.um-check { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--text-sm); }
.um-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.um-set { display: grid; gap: var(--space-2); }
.um-picker { width: min(620px, calc(100vw - 24px)); margin-top: 12vh; }
.um-pick { display: grid; }
.um-pick input { min-height: 44px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 0 16px; font-size: var(--text-md); }
.um-pick ul { max-height: 50vh; margin: 0; padding: 6px; overflow: auto; list-style: none; }
.um-pick li[role="option"] { display: flex; justify-content: space-between; gap: 12px; min-height: 32px; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.um-pick li[aria-selected="true"] { background: var(--accent-soft); }
.um-pick-hint { font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); white-space: nowrap; }
.um-pick-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-pick-l b { font-weight: 700; color: var(--accent-strong); }
.um-pick-note { margin-left: 8px; font-size: var(--text-2xs); color: var(--ink-faint); }

/* The wider dialogs: settings, keyboard shortcuts. */
.um-dialog:has(.um-dlg-wide) { width: min(760px, calc(100vw - 24px)); }
.um-dlg-wide { max-height: min(86vh, 860px); grid-template-rows: auto auto minmax(0, 1fr) auto; }
.um-dlg-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.um-set-q, .um-keys-find input { width: 100%; min-height: 36px; padding: 4px 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.um-set-q:focus, .um-keys-find input:focus { border-color: var(--accent); outline: 2px solid var(--accent-border); outline-offset: 0; }
.um-set-list { min-height: 0; overflow: auto; margin: 0 calc(-1 * var(--space-5)); padding: 0 var(--space-5); }
.um-set-sec[hidden], .um-set-row[hidden] { display: none; }
.um-set-sec h3 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.um-set-row { padding: 6px 0; border-bottom: 1px solid var(--rule); }
.um-set-row .um-hint { margin: 0 0 2px 26px; }
.um-field-row { grid-template-columns: minmax(0, 1fr) minmax(140px, 220px); align-items: center; font-size: var(--text-sm); font-weight: 400; color: var(--ink); }
.um-keys-find { display: flex; gap: 6px; }
.um-tog-wide { padding: 0 10px; font-family: var(--font-sans); white-space: nowrap; }
.um-keytab-wrap { min-height: 0; overflow: auto; border-top: 1px solid var(--rule); }
.um-keytab { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.um-keytab thead th { position: sticky; top: 0; z-index: 1; padding: 6px 8px; background: var(--paper-raised); border-bottom: 1px solid var(--rule); text-align: left; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.um-keytab tbody th, .um-keytab td { padding: 4px 8px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; font-weight: 400; }
.um-keytab tbody th { width: 45%; color: var(--ink); }
.um-keytab tr.is-changed th { font-weight: 600; }
.um-key-src { margin-left: 8px; font-size: var(--text-2xs); color: var(--ink-faint); }
.um-key-or { color: var(--ink-faint); }
.um-key-none { color: var(--ink-faint); }
.um-key-rec { color: var(--accent-strong); font-weight: 600; }
.um-key-clash { display: block; margin-top: 2px; font-size: var(--text-2xs); color: var(--warn); }
.um-key-act { white-space: nowrap; text-align: right !important; }
.um-key-act .um-icon-btn { width: 28px; height: 28px; vertical-align: middle; }
.um-key-act .um-icon-btn svg { width: 15px; height: 15px; }
.um-dlg-row-split { justify-content: flex-start; }

/* ------------------------------------------------- the language service */

/* The hover and the parameters: one box, the editor's tooltip, wide
   enough for a signature, scrolling past a screenful of documentation. */
.um .um-ts-tip { position: absolute; z-index: 120; max-width: min(560px, calc(100% - 16px)); max-height: 320px; overflow: auto; padding: 6px 10px; font: var(--text-xs)/1.5 var(--font-ui); }
.um .um-ts-tip[hidden] { display: none; }
.um-ts-sig { margin: 0; white-space: pre-wrap; word-break: break-word; font: var(--text-xs)/1.5 var(--font-mono); color: var(--ink); }
.um-ts-sig b { color: var(--accent-strong); font-weight: 700; }
.um-ts-doc { margin: 6px 0 0; color: var(--ink-soft); }
.um-ts-tags { margin: 6px 0 0; font: var(--text-2xs)/1.5 var(--font-mono); color: var(--ink-faint); }
.um-ts-prob { margin: 0 0 6px; padding-left: 8px; border-left: 2px solid var(--warn); color: var(--ink); }
.um-ts-prob-error { border-left-color: var(--danger); }
.um-ts-code { font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); }
.um-ts-act { margin: 4px 0 0; }
.um-ts-info { max-width: 420px; padding: 6px 10px; font: var(--text-xs)/1.5 var(--font-ui); }
.um-hl { background: var(--um-match); }
.um-hl-w { box-shadow: inset 0 -1px var(--ink-faint); }
.um .um-unused { opacity: .55; }
.um .um-deprecated, .um .cm-completionLabel.um-deprecated { text-decoration: line-through; }
.um-lens { padding: 0 0 0 2px; line-height: 1.3; }
.um-lens-btn { min-height: 18px; padding: 0 4px; border: 0; border-radius: var(--radius-sm); background: none; font: var(--text-2xs)/1.3 var(--font-ui); color: var(--ink-faint); cursor: pointer; }
.um-lens-btn:hover { color: var(--accent-strong); text-decoration: underline; }
.um-inlay { margin: 0 1px; padding: 0 4px; border-radius: var(--radius-sm); background: var(--paper-inset); font-size: .86em; color: var(--ink-faint); }
.um-ref-kind { margin-left: 6px; font: var(--text-2xs) var(--font-ui); color: var(--ink-faint); }
.um-lib-line { margin: 12px 16px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--paper-inset); white-space: pre-wrap; font: var(--text-sm)/1.5 var(--font-mono); }

/* ------------------------------------------------------------ debugger */

.um-bp-gutter .cm-gutterElement { display: flex; align-items: center; justify-content: center; width: 16px; padding: 0 0 0 4px; cursor: pointer; }
.um-bp-gutter .cm-gutterElement:hover::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); opacity: .3; }
.um-bp-gutter .cm-gutterElement:has(.um-bp-dot):hover::after, .um-bp-gutter .cm-gutterElement:has(.um-bp-here):hover::after { content: none; }
.um-bp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.um-bp-here { display: inline-block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid var(--warn); }
.um-bp-gutter .cm-gutterElement:has(.um-bp-dot) .um-bp-here { margin-left: -12px; }
.um .cm-line.um-dbg-line { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.um .cm-line.um-dbg-frame { background: color-mix(in srgb, var(--good) 16%, transparent); }
.um-debug { flex: 1; min-height: 0; overflow: auto; padding: 0 0 24px; }
.um-dbg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 1px; padding: 8px 8px 4px; }
.um-dbg-bar .um-btn-main { width: 100%; justify-content: center; }
.um-dbg-bar .um-icon-btn { width: 28px; height: 30px; }
.um-dbg-bar .um-icon-btn svg { width: 17px; height: 17px; }
.um-dbg-said { margin: 4px 14px 6px; }
.um-debug > .um-side-note { margin: 4px 14px 8px; }
.um-dbg-scrub { display: block; width: calc(100% - 28px); margin: 0 14px 8px; accent-color: var(--accent); }
.um-dbg-sec { border-top: 1px solid var(--rule); }
.um-dbg-sec h3, .um-dbg-h h3 { margin: 0; padding: 8px 14px 4px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.um-dbg-h { display: flex; align-items: center; justify-content: space-between; padding-right: 10px; }
.um-dbg-h .um-link { font-size: var(--text-xs); }
.um-dbg-tree, .um-dbg-tree ul, .um-dbg-stack, .um-dbg-bps { margin: 0; padding: 0 0 6px; list-style: none; }
.um-dbg-tree ul { padding: 0 0 0 14px; }
.um-dbg-tree li { display: flex; flex-wrap: wrap; align-items: center; min-height: 24px; padding: 0 6px 0 8px; font: var(--text-xs)/1.5 var(--font-mono); }
.um-dbg-tree li > ul { flex-basis: 100%; }
.um-dbg-tree li.is-changed > .um-dv { background: var(--accent-soft); border-radius: var(--radius-sm); }
.um-dbg-scope { display: block !important; padding: 0 !important; }
.um-dbg-sh { margin: 4px 14px 2px; font: 600 var(--text-2xs)/1.5 var(--font-ui); color: var(--ink-faint); }
.um-dbg-tw { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; padding: 0; border: 0; background: none; color: var(--ink-faint); cursor: pointer; }
.um-dbg-tw svg { width: 12px; height: 12px; }
.um-dbg-n { color: var(--um-prop); }
.um-dbg-c { color: var(--ink-faint); white-space: pre; }
.um-dv { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.um-dv-string { color: var(--um-str); }
.um-dv-number, .um-dv-bigint, .um-dv-boolean { color: var(--um-num); }
.um-dv-null, .um-dv-undefined, .um-dv-unset, .um-dv-more { color: var(--ink-faint); }
.um-dv-function { color: var(--um-fn); }
.um-dv-error { color: var(--ink-faint); font-style: italic; }
.um-dbg-x { margin-left: auto; width: 26px !important; height: 26px !important; }
.um-dbg-x svg { width: 13px; height: 13px; }
.um-dbg-add { padding: 2px 10px 8px; }
.um-dbg-add input { width: 100%; min-height: 30px; padding: 2px 8px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font: var(--text-xs) var(--font-mono); }
.um-dbg-fr, .um-dbg-bp { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 26px; padding: 2px 14px; border: 0; background: none; text-align: left; font: var(--text-xs)/1.4 var(--font-mono); color: var(--ink); cursor: pointer; }
.um-dbg-fr:hover, .um-dbg-bp:hover { background: var(--paper-inset); }
.um-dbg-fr.is-on { background: var(--accent-soft); }
.um-dbg-fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-dbg-at { margin-left: auto; flex: none; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.um-dbg-bps li { display: flex; align-items: center; padding-right: 6px; }
.um-dbg-bps .um-bp-dot { flex: none; }
.um-debug kbd { font: var(--text-2xs) var(--font-mono); padding: 0 4px; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
html[data-umbra-debug="recording"] .um-dbg-said { color: var(--ink-soft); }

/* ------------------------------------------------------------- testing */

.um-tests { flex: 1; min-height: 0; margin: 0; padding: 2px 0 24px; overflow: auto; list-style: none; }
.um-tests > .um-empty { padding: 8px 14px; }
#umTestSaid { margin: 4px 14px; }
.um-test { display: flex; align-items: center; gap: 2px; min-height: 28px; padding: 0 4px 0 calc(6px + var(--lvl) * 14px); }
.um-test:hover { background: var(--paper-inset); }
.um-test-tw { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 24px; padding: 0; border: 0; background: none; color: var(--ink-faint); cursor: pointer; }
.um-test-tw svg { width: 12px; height: 12px; }
.um-test-st { display: inline-flex; flex: none; width: 16px; height: 16px; color: var(--ink-faint); }
.um-test-st svg { width: 16px; height: 16px; }
.um-test-pass .um-test-st { color: var(--good); }
.um-test-fail .um-test-st { color: var(--danger); }
.um-test-name { flex: 1; min-width: 0; min-height: 26px; padding: 0 6px; border: 0; background: none; text-align: left; font-size: var(--text-sm); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.um-test-ms, .um-test-mod { font: var(--text-2xs) var(--font-mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.um-test-run { width: 26px !important; height: 26px !important; opacity: 0; }
.um-test:hover .um-test-run, .um-test-run:focus-visible { opacity: 1; }
.um-test-run svg { width: 13px; height: 13px; }
.um-test-why { padding: 0 10px 4px calc(42px + var(--lvl) * 14px); font: var(--text-2xs)/1.5 var(--font-mono); color: var(--danger); overflow-wrap: anywhere; }
.um-test-mark { margin-left: 14px; font: var(--text-2xs) var(--font-ui); color: var(--ink-faint); white-space: nowrap; }
.um-test-mark-pass { color: var(--good); }
.um-test-mark-fail { color: var(--danger); }

/* --------------------------------------------------- search, timeline */

.um-search #umSearchEx { margin-top: 6px; }
.um-sr-list li { position: relative; }
.um-sr-list li > .um-sr-rep { position: absolute; right: 2px; top: 0; width: 26px; height: 26px; }
.um-sr-path .um-sr-rep { margin-left: auto; width: 26px; height: 26px; }
.um-sr-rep svg { width: 13px; height: 13px; }
.is-replacing .um-sr-hit { padding-right: 32px; }
.um-sr-hit del { background: var(--danger-soft); color: var(--ink); text-decoration: line-through; }
.um-sr-hit ins { background: color-mix(in srgb, var(--good) 22%, transparent); color: var(--ink); text-decoration: none; }
.um-side-head2 { border-top: 1px solid var(--rule); }
.um-timeline { flex: 0 1 40%; min-height: 0; margin: 0; padding: 4px 0 16px; overflow: auto; list-style: none; }
.um-timeline .um-empty { padding: 6px 14px; }
.um-tl { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 0 8px; width: 100%; padding: 4px 14px; border: 0; background: none; text-align: left; cursor: pointer; }
.um-tl:hover { background: var(--paper-inset); }
.um-tl-k { grid-row: span 2; width: 8px; height: 8px; margin: 6px 0 0 3px; border-radius: 50%; border: 2px solid var(--ink-faint); }
.um-tl-commit { border-color: var(--accent); }
.um-tl-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--ink); }
.um-tl-meta { font-size: var(--text-2xs); color: var(--ink-faint); }

/* --------------------------------------------------------------- polish */

.um .um-sticky { position: absolute; z-index: 5; top: 0; left: 0; overflow: hidden; background: var(--um-editor-bg); border-bottom: 1px solid var(--rule-strong); font-family: var(--font-mono); font-size: var(--um-font-size, 14px); }
.um .um-sticky[hidden] { display: none; }
.um-sticky-l { display: flex; align-items: center; white-space: pre; cursor: pointer; color: var(--ink-soft); }
.um-sticky-l:hover { background: var(--um-active-line); color: var(--ink); }
.um-sticky-n { flex: none; box-sizing: border-box; padding-right: 26px; text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.um-sticky-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; }
.um-swatch { display: inline-block; width: 11px; height: 11px; margin: 0 4px 0 1px; vertical-align: -1px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; background: var(--paper); }
.um-swatch > span { display: block; width: 100%; height: 100%; }
.um-colour-in { position: fixed; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.um .um-pair { position: absolute; width: 0; border-left: 1px solid var(--accent); opacity: .55; pointer-events: none; }
.um .um-pair[hidden] { display: none; }
#umBoxMode[hidden] { display: none; }

/* ------------------------------------------------------------ notebooks */

.um-nb { padding: 12px 16px 40px; max-width: 1100px; }
.um-nb-cell { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.um-nb-cell.is-running .um-nb-n { color: var(--accent); }
.um-nb-gut { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.um-nb-n { font: var(--text-xs) var(--font-mono); color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: 6px; }
.um-nb-gut .um-icon-btn, .um-nb-tools .um-icon-btn { width: 28px; height: 28px; }
.um-nb-tools { display: flex; flex-direction: column; gap: 2px; }
.um-nb-up svg { transform: rotate(180deg); }
.um-nb-src { display: block; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink); font: var(--text-sm)/1.5 var(--font-mono); tab-size: 4; resize: vertical; }
.um-nb-src:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.um-nb-md { padding: 4px 2px; line-height: 1.55; overflow-wrap: anywhere; }
.um-nb-md:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.um-nb-md img { max-width: 100%; height: auto; }
.um-nb-outs:empty { display: none; }
.um-nb-out { margin: 6px 0 0; padding: 6px 10px; border-left: 2px solid var(--rule-strong); font: var(--text-xs)/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); max-height: 480px; overflow: auto; }
.um-nb-out.is-err { border-left-color: var(--danger); color: var(--danger); }
.um-nb-out img { display: block; max-width: 100%; height: auto; background: var(--paper); }
.um-nb-html { font-family: var(--font-sans); white-space: normal; }
.um-nb-html table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.um-nb-html th, .um-nb-html td { padding: 3px 8px; border-bottom: 1px solid var(--rule); text-align: right; }
.um-nb-add { display: flex; gap: 8px; padding: 12px 0 0 72px; }
.um-nb-head .um-btn svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------ blame, stash and merging */

.um-blame-wrap { overflow: auto; }
.um-blame { width: 100%; border-collapse: collapse; font: var(--text-xs)/1.5 var(--font-mono); }
.um-blame td { padding: 0 8px; vertical-align: top; white-space: pre; }
.um-blame tr.is-first td { border-top: 1px solid var(--rule); }
.um-blame-who { width: 1%; font-family: var(--font-sans); color: var(--ink-soft); }
.um-blame-who .um-link { white-space: nowrap; }
.um-blame-new { color: var(--warn); }
.um-blame-n { width: 1%; text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; user-select: none; }
.um-st-blame { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The authorship record (umbra-authorship.js): a dot while it records. */
.um-st-auth::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border: 1.5px solid currentColor; border-radius: 50%; vertical-align: 0; }
.um-st-auth.is-on::before { border-color: var(--danger); background: var(--danger); }
.um-vcs-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.um-stash { margin: 8px 0 0; padding: 0; list-style: none; }
.um-stash li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 4px; border-bottom: 1px solid var(--rule); font-size: var(--text-xs); }
.um-stash-msg { min-width: 0; overflow-wrap: anywhere; }
.um-stash-acts { display: flex; gap: 8px; }
.um-vcs-merge { margin: 12px 0 0; padding: 8px 10px; border-left: 3px solid var(--warn); background: var(--paper-inset); font-size: var(--text-xs); }
.um-vcs-merge p { margin: 0 0 6px; }
.um-vcs-merge .um-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.um-merge { padding: 12px 16px 40px; display: grid; gap: 16px; }
.um-mg h3 { margin: 0 0 6px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.um-mg-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.um-mg-side { min-width: 0; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.um-mg-label { margin: 0; padding: 4px 8px; border-bottom: 1px solid var(--rule); font-size: var(--text-2xs); font-weight: 650; color: var(--ink-soft); }
.um-mg-code { margin: 0; padding: 6px 8px; font: var(--text-xs)/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.um-mg-empty { color: var(--ink-faint); font-family: var(--font-sans); }
.um-mg-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.um-mg-acts .um-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.um-mg-result { display: grid; gap: 4px; }
.um-mg-result span { font-size: var(--text-xs); font-weight: 650; }
.um-mg-result textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper-inset); color: var(--ink); font: var(--text-xs)/1.5 var(--font-mono); }

/* ------------------------------------------------------------ phones */

@media (max-width: 760px) {
  .um-body { grid-template-columns: minmax(0, 1fr) !important; }
  .um-rail, .um-split-side, .um-hide-sm, .um-brand, .um-state { display: none !important; }
  .um-top .um-drawer-btn { display: inline-flex; flex: none; width: 44px; height: 44px; }
  .um-top { gap: 4px; padding: 4px 6px; }
  .um-home, .um-icon-btn, .um-tab-x { width: 44px; height: 44px; }
  .um-key-act .um-icon-btn { width: 44px; height: 44px; }
  .um-repl textarea { min-height: 44px; font-size: var(--text-md); }
  .um-d-acts .um-btn-sm { min-height: 44px; }
  .um-d-acts { float: none; display: flex; margin-top: 4px; }
  .um-ol, .um-crumb, .um-ext-on { min-height: 44px; }
  .um-ext-act .um-icon-btn { width: 44px; height: 44px; }
  .um-dbg-tw, .um-test-tw, .um-dbg-bar .um-icon-btn { width: 44px; height: 44px; }
  .um-dbg-x, .um-test-run, .um-sr-rep, .um-sr-list li > .um-sr-rep, .um-sr-path .um-sr-rep { width: 44px !important; height: 44px !important; opacity: 1; }
  .is-replacing .um-sr-hit { padding-right: 50px; }
  .um-dbg-fr, .um-dbg-bp, .um-test, .um-test-name, .um-tl, .um-lens-btn { min-height: 44px; }
  .um-dbg-tree li { min-height: 44px; }
  .um-dbg-add input, .um-dbg-scrub { min-height: 44px; font-size: var(--text-md); }
  .um-bp-gutter .cm-gutterElement { width: 22px; }
  .um-side-find input, .um-bar-q { min-height: 44px; font-size: var(--text-md); }
  .um-crumbs { display: none !important; }
  /* A command a row of its own: its name, then its keys and buttons. */
  .um-keytab thead { display: none; }
  .um-keytab, .um-keytab tbody { display: block; }
  .um-keytab tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
  .um-keytab tbody th, .um-keytab tbody td { border: 0; padding: 0; }
  .um-keytab tbody th { grid-column: 1 / -1; width: auto; }
  .um-keytab td.um-empty { grid-column: 1 / -1; }
  .um-field-row { grid-template-columns: minmax(0, 1fr); }
  .um-set-q, .um-keys-find input { min-height: 44px; font-size: var(--text-md); }
  .um-btn, .um-project, .um-tog, .um-search input, .um-panel-tabs button, .um-tab-open, .um-chg-open, .um-sr-hit, .um-prob, .um-node, .um-link, .um-menu button, .um-pick li[role="option"], .um-check, .um-log-open, .um-commit-files a { min-height: 44px; }
  .um-btn-sm { min-height: 44px; }
  .um-nb { padding: 8px 10px 32px; }
  .um-nb-cell { grid-template-columns: minmax(0, 1fr); }
  .um-nb-gut, .um-nb-tools { flex-direction: row; align-items: center; justify-content: flex-start; }
  .um-nb-gut .um-icon-btn, .um-nb-tools .um-icon-btn { width: 44px; height: 44px; }
  .um-nb-add { padding-left: 0; }
  .um-nb-src { font-size: var(--text-md); }
  .um-mg-sides { grid-template-columns: minmax(0, 1fr); }
  .um-diff-head { flex-wrap: wrap; }
  .um-search input, .um-vcs textarea, .um-field input, .um-field select, .um-stdin textarea, .um-pick input, .um-vcs select { font-size: var(--text-md); min-height: 44px; }
  .um-mark { display: none; }
  /* Room for the project's name beside Run: the name gives way first, and
     Run and Stop are their icons, their words kept for a screen reader. */
  .um-projpick { flex: 0 1 auto; min-width: 0; }
  .um-project { max-width: 100%; }
  .um-top #umRun, .um-top #umStop { flex: none; width: 44px; padding: 0; justify-content: center; }
  .um-top #umRun span, .um-top #umStop span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .um-side { position: fixed; z-index: 70; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); box-shadow: 0 0 0 1px var(--rule), 20px 0 50px rgba(0, 0, 0, .25); animation: um-drawer var(--dur-3) var(--ease-standard); }
  .um[data-side-open="false"] .um-side { display: none; }
  .um-side-x { display: inline-flex; }
  .um-side-head .um-icon-btn { width: 44px; height: 44px; }
  /* Both splitters are hidden here, so the panel is the second of two rows. */
  .um[data-layout] .um-work { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) min(46vh, var(--um-panel-h)); }
  .um .um-work:has(.um-panel[data-open="false"]) { grid-template-rows: minmax(0, 1fr) auto; }
  /* The minimap would take a third of a phone's width. */
  .um .cm-minimap-gutter { display: none; }
  .um-split-panel, .um-split-panelx { display: none !important; }
  .um-tree .um-node { font-size: var(--text-md); }
  .um-chg .um-icon-btn { width: 44px; height: 44px; }
  .um-vcs-h .um-icon-btn { width: 44px; height: 44px; }
  .um-status { gap: 10px; }
  #umIndent, #umWhere { display: none !important; }
  .um-st { min-height: 44px; min-width: 44px; }
  /* The privacy badge sits at the end of the status bar, which grows to a
     finger's height to hold it: in the corner above the bar it lay on the
     start page and the panel as they scrolled under it. */
  .um-status { min-height: 44px; padding-right: 64px; }
  body:has(> .um) #ppBadge { left: auto; right: 8px; bottom: env(safe-area-inset-bottom, 0px); min-height: 44px; box-shadow: none; }
}
@keyframes um-drawer { from { transform: translateX(-12px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .um-menu, .um-start, .um-side { animation: none !important; }
}