:root {
  --bg: #f4f3ef;
  --surface: #ffffff;
  --sunken: #ebe9e3;
  --text: #1c1c1e;
  --muted: #6c6b70;
  --line: #dedbd3;
  --accent: #2b59e0;
  --accent-soft: rgba(43, 89, 224, 0.12);
  --accent-ink: #ffffff;
  --changed: #c26a00;
  --changed-soft: rgba(194, 106, 0, 0.14);
  --error: #b3261e;
  --raised: #ffffff;
  --shadow: rgba(28, 28, 30, 0.22);
  --scrim: rgba(16, 16, 18, 0.32);
  --radius: 10px;
  --topbar: 52px;
  color-scheme: light;
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161617;
    --surface: #202022;
    --sunken: #111112;
    --text: #ececee;
    --muted: #9b9aa0;
    --line: #333336;
    --accent: #6d8dff;
    --accent-soft: rgba(109, 141, 255, 0.18);
    --accent-ink: #0d0d0f;
    --changed: #f0a33a;
    --changed-soft: rgba(240, 163, 58, 0.16);
    --error: #ff8a80;
    --raised: #2b2b2e;
    --shadow: rgba(0, 0, 0, 0.55);
    --scrim: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--accent); }
h1, h2 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
[hidden] { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }

.primary {
  border: 0; border-radius: 8px; padding: 10px 18px;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; cursor: pointer;
}
.primary:disabled { opacity: 0.6; cursor: progress; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 10; height: var(--topbar);
  display: flex; align-items: center; gap: 10px; padding: 0 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--text); text-decoration: none; }
.crumb { color: var(--muted); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.crumb:hover { color: var(--text); }
.crumb.current { color: var(--text); }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.icon { display: block; flex: none; }
.help-button {
  display: inline-flex; align-items: center; gap: 6px; margin-right: -8px; padding: 6px 8px;
  border: 0; border-radius: 7px; background: none; color: var(--muted); font-size: 13px; cursor: pointer;
}
.help-button:hover { color: var(--text); background: var(--sunken); }
.help-button:focus-visible, .icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icon-button {
  display: grid; place-items: center; width: 32px; height: 32px; margin-right: -8px;
  border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer;
}
.icon-button:hover { color: var(--text); background: var(--sunken); }

/* Help: a sheet from the right edge, over a dimmed page. */
dialog.help {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0;
  width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  background: var(--surface); color: var(--text);
  box-shadow: -18px 0 48px -18px var(--shadow);
}
dialog.help::backdrop { background: var(--scrim); }
dialog.help[open] { animation: sheet-in 240ms cubic-bezier(.16, 1, .3, 1); }
@keyframes sheet-in { from { transform: translateX(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.help[open] { animation: none; } }
.help-sheet { height: 100%; display: flex; flex-direction: column; }
.help-head {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  height: var(--topbar); padding: 0 24px; border-bottom: 1px solid var(--line);
}
.help-head h1 { font-size: 17px; }
.help-body { overflow-y: auto; padding: 4px 24px 48px; font-size: 14.5px; line-height: 1.55; }
.help-body h2 { font-size: 15.5px; margin: 28px 0 8px; }
.help-body p { margin: 0 0 10px; max-width: 65ch; }
.help-body ol, .help-body ul { margin: 0 0 10px; padding-left: 20px; max-width: 65ch; }
.help-body li { margin-bottom: 6px; }
.help-body li::marker { color: var(--muted); }
.help-body:focus { outline: none; }
.help-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
  padding: 1px 5px; border-radius: 5px; background: var(--sunken); overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.help-types { display: grid; gap: 12px; margin: 14px 0 0; }
.help-types dt { font-weight: 600; }
.help-types dt code { margin-right: 6px; }
.help-types dd { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }
.help-types + p { margin-top: 14px; }
.help-section summary { margin: 28px 0 8px; cursor: pointer; list-style-position: outside; }
.help-section:not([open]) + .help-section summary { margin-top: 14px; }
.help-section summary h2 { display: inline; margin: 0; }
.help-section summary:hover h2 { color: var(--accent); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { padding: 11px 0; font-weight: 600; cursor: pointer; list-style-position: outside; }
.faq summary:hover { color: var(--accent); }
.faq details p { color: var(--muted); padding-bottom: 4px; }

/* An error that belongs to no view: shown under the top bar until dismissed. */
.banner {
  display: flex; align-items: baseline; gap: 12px; margin: 0;
  padding: 10px 20px; color: var(--error);
  background: color-mix(in srgb, var(--error) 12%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--error) 30%, var(--line));
}
.banner span { margin-right: auto; }

/* Home */
.home { max-width: 880px; margin: 0 auto; padding: 48px 20px 64px; }
.intro h1 { font-size: 30px; }
.intro p { color: var(--muted); max-width: 60ch; margin: 8px 0 28px; }

.upload { display: grid; gap: 18px; justify-items: stretch; }
.drop {
  width: 100%; display: grid; gap: 4px; place-items: center; text-align: center;
  padding: 44px 20px; border: 2px dashed var(--line); border-radius: 14px;
  background: var(--surface); cursor: pointer; transition: border-color .15s, background .15s;
}
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.drop-title { font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.drop-hint { color: var(--muted); font-size: 13px; }
.error { color: var(--error); margin: 0; }
.upload-progress {
  width: 100%; height: 6px; appearance: none; border: 0; border-radius: 99px;
  background: var(--sunken); accent-color: var(--accent);
}
.upload-progress::-webkit-progress-bar { background: var(--sunken); border-radius: 99px; }
.upload-progress::-webkit-progress-value { background: var(--accent); border-radius: 99px; }
/* No value: the bytes are all sent and the server is analysing, which has no percentage. */
.upload-progress:indeterminate::-webkit-progress-bar {
  background: linear-gradient(90deg, var(--sunken) 0 40%, var(--accent) 40% 60%,
                              var(--sunken) 60%) 0 0 / 300% 100%;
  animation: upload-sweep 1.2s linear infinite;
}
@keyframes upload-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* The upload button is the one thing to do on this page, so it carries the page. */
.upload .primary {
  justify-self: center; min-width: 280px; padding: 15px 34px;
  font-size: 17px; border-radius: 10px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.upload .primary:hover { background: color-mix(in srgb, var(--accent) 88%, black); }

.recent { margin-top: 48px; }
.recent-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.recent h2 { font-size: 16px; }
.link-button { border: 0; background: none; padding: 0; color: var(--muted); font-size: 13px; text-decoration: underline; cursor: pointer; }
.link-button:hover { color: var(--error); }
.recent ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.recent a {
  display: grid; gap: 2px; padding: 10px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); color: inherit; text-decoration: none;
}
.recent a:hover { border-color: var(--accent); }
.recent img { width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; object-position: top; border-radius: 6px; margin-bottom: 8px; background: var(--sunken); }
.recent-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-meta { color: var(--muted); font-size: 12px; }

/* A mistyped or expired URL: the shell renders this instead of a page. */
.notfound { padding: 40px 0; }
.notfound h1 { font-size: 24px; }
.notfound p { color: var(--muted); max-width: 60ch; margin: 10px 0 0; }

/* Sign-in */
.auth { max-width: 440px; margin: 0 auto; padding: 72px 20px; }
.auth-card {
  display: grid; gap: 14px; padding: 28px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.auth-card h1 { font-size: 22px; }
.auth-card p { margin: 0; color: var(--muted); }
.auth-card .error { color: var(--error); }
.provider { display: block; text-align: center; text-decoration: none; }
.provider:hover { background: color-mix(in srgb, var(--accent) 88%, black); }

.account { display: flex; gap: 14px; align-items: center; font-size: 13px; white-space: nowrap; }
.account-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; max-width: 24ch; }
.account a { text-decoration: none; }
.account a:hover { text-decoration: underline; }
.account .link-button:hover { color: var(--text); }

/* Access: users and API keys */
.admin { max-width: 1040px; margin: 0 auto; padding: 48px 20px 64px; }
.admin h1 { font-size: 30px; }
.admin section { margin-top: 36px; }
.admin h2 { font-size: 16px; margin-bottom: 12px; }
.admin .hint { margin: -4px 0 12px; }
.admin-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.admin-form input:not([type]) {
  flex: 1; min-width: 240px; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--surface);
}
.admin-form input:not([type]):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.admin-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.admin-check input { accent-color: var(--accent); }

.secret-box {
  display: grid; gap: 8px; margin-top: 14px; padding: 14px 16px;
  background: var(--accent-soft); border-radius: var(--radius);
}
.secret-box p { margin: 0; font-size: 14px; }
.secret-row { display: flex; gap: 8px; }
.secret-row input {
  flex: 1; min-width: 0; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
}

.admin-table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 14px; }
.admin-table th {
  padding: 8px; text-align: left; color: var(--muted); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.admin-table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table .is-disabled td:not(.actions) { color: var(--muted); }
.admin-table .date { white-space: nowrap; }
.admin-badge { display: block; width: fit-content; margin-top: 4px; }
.admin-sub { display: block; color: var(--muted); font-size: 13px; }
.admin-table .actions { text-align: right; }
.admin-table .actions div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }
.admin-table .actions .link-button { white-space: nowrap; }
.admin-table .link-button:hover { color: var(--text); }
.admin-table .link-button.danger:hover { color: var(--error); }

/* Editor */
.workspace {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 0; align-items: start;
}

.viewer {
  position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar));
  display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--sunken);
}
.viewer-bar, .downloads {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
.viewer-bar { justify-content: space-between; }
.viewer-title { font-weight: 600; }

.tabs { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--sunken); }
.tabs button { border: 0; background: none; padding: 5px 12px; border-radius: 6px; cursor: pointer; color: var(--muted); }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

.zoom { display: inline-flex; align-items: center; gap: 4px; }
.zoom button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
.zoom output { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }

.downloads { flex-wrap: wrap; row-gap: 8px; }
.downloads .option { flex: none; }
.filename-box {
  flex: 1 1 220px; min-width: 180px; display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
.filename-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.filename-box input {
  flex: 1; min-width: 0; padding: 5px 0 5px 8px; border: 0; outline: none; background: none;
  font-size: 13px; text-overflow: ellipsis;
}
.filename-ext { flex: none; padding: 0 8px 0 1px; color: var(--muted); font-size: 13px; }
.downloads .option input[type="number"] { width: 64px; }
.downloads .error { font-size: 13px; }
.download {
  padding: 5px 12px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-weight: 600; font-size: 13px; cursor: pointer;
}
.download:hover { border-color: var(--accent); color: var(--accent); }
.download:disabled { opacity: 0.6; cursor: progress; }

.scroller { flex: 1; overflow: auto; padding: 20px; }
.page {
  --zoom: 1;
  position: relative; width: calc(var(--zoom) * 100%); margin: 0 auto; overflow: hidden;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15), 0 8px 30px rgba(0, 0, 0, .08);
}
.page img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* A render is tilted about the page centre, so the same rotation keeps every box on its text. */
.boxes { position: absolute; inset: 0; transform: rotate(var(--tilt, 0deg)); }

.box {
  position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
  outline: 1px dashed transparent; outline-offset: 2px; border-radius: 2px;
  transition: outline-color .12s, background .12s;
}
.page:hover .box { outline-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.box.is-hidden-layer { display: none; }
.box.is-changed { display: block; outline: 1px solid var(--changed); background: var(--changed-soft); }
/* Formula fields carry the light blue of their results in the form. */
.box.is-computed:not(.is-hidden-layer) { display: block; outline: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.box.is-active, .page:hover .box.is-active, .box.is-computed.is-active:not(.is-hidden-layer) {
  display: block; outline: 2px solid var(--accent); background: var(--accent-soft);
}

/* Form panel */
.panel { min-width: 0; background: var(--surface); min-height: calc(100vh - var(--topbar)); display: flex; flex-direction: column; }
.panel-head { padding: 20px 22px 6px; }
.panel-head h1 { font-size: 20px; overflow-wrap: anywhere; }
.meta { margin: 2px 0 0; color: var(--muted); font-size: 13px; }

.options {
  margin: 14px 22px 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
}
.options legend { padding: 0 6px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.option { display: inline-flex; align-items: center; gap: 8px; }
.option select, .option input[type="number"] {
  padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface);
}
.option input[type="number"] { width: 80px; }
.option small { color: var(--muted); display: block; font-size: 12px; }

.option input[type="range"] { width: 120px; accent-color: var(--accent); }
.tilt-value { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 38px; }
.option .hint { margin: 0; font-size: 12px; }

.advanced { flex-basis: 100%; }
.advanced summary {
  cursor: pointer; color: var(--muted); font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}
.advanced-body { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 10px 0 2px; }

.group { padding: 14px 22px 4px; }
.group h2 { font-size: 15px; display: inline-flex; align-items: center; gap: 8px; }
.group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.group summary { cursor: pointer; list-style-position: outside; padding: 4px 0; }
.count { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--sunken); padding: 1px 7px; border-radius: 99px; }
.hint { color: var(--muted); font-size: 13px; margin: 4px 0 12px; }

.field { padding: 8px 10px; margin: 0 -10px; border-radius: 8px; }
.field.is-active { background: var(--accent-soft); }
/* A computed field holds a formula and its result: one bordered box keeps them together. */
.field.is-computed { margin: 8px -10px; padding: 10px 10px 12px; box-shadow: inset 0 0 0 1px var(--line); }
.field.is-computed.is-invalid { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--error) 45%, var(--line)); }
.help-body > .help-section:first-child summary { margin-top: 20px; }
.field-head { position: relative; display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.field-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; cursor: help; }

/* The field's popover: opens on the title after a pause, so sweeping the pointer across
   the form does not flash one card after another. Opens upward when the space below,
   down to the sticky footer, is too short (field.js measures it on hover). */
.field-info {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(420px, 100%);
  padding: 12px 14px; border-radius: var(--radius); background: var(--raised); color: var(--text);
  box-shadow: 0 12px 32px -10px var(--shadow), 0 2px 6px -2px var(--shadow);
  font-size: 13px; line-height: 1.45;
  opacity: 0; visibility: hidden; transform: translateY(-3px); pointer-events: none;
  transition: opacity 120ms ease-out, transform 160ms cubic-bezier(.16, 1, .3, 1), visibility 0s 120ms;
}
.field-title:hover ~ .field-info {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 350ms, 350ms, 350ms;
}
.field-info.opens-up { top: auto; bottom: calc(100% + 6px); transform: translateY(3px); }
.field-title:hover ~ .field-info.opens-up { transform: none; }
.field-info > * { margin: 0; }
.info-name { font-weight: 650; overflow-wrap: anywhere; }
.info-layer { margin-top: 2px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.info-layer code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: var(--text); }
.info-features { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.info-features dt { font-weight: 600; }
.info-features dd { margin: 1px 0 0; color: var(--muted); }
.info-meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.info-text {
  margin-top: 2px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .field-info, .field-title:hover ~ .field-info { transform: none; transition-duration: 0s; }
}
.type-tag { flex: none; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--sunken); padding: 1px 7px; border-radius: 99px; }
.field-actions { margin-left: auto; display: flex; gap: 12px; flex: none; }
.limit { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.limit.is-over { color: var(--error); font-weight: 600; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field.is-changed label { color: var(--changed); }
.field.is-changed label::before { content: "● "; }
.reset { border: 0; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }
.reset:hover { color: var(--text); }
.field input, .field textarea {
  width: 100%; padding: 8px 10px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--bg); white-space: pre-wrap;
}
.field textarea { resize: vertical; line-height: 1.4; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--surface); }
.field.is-changed input, .field.is-changed textarea { border-color: var(--changed); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 14%, transparent); }
.field.is-upper input, .field.is-upper textarea { text-transform: uppercase; }
/* A computed field: its formula is code, edited in a monospace face; what it makes sits
   under it, as the page will show it. */
.field.is-computed input, .field.is-computed textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
}
/* The formula's text box is transparent over a coloured copy of its text: both must lay
   the text out alike, to the pixel. */
.formula-editor { position: relative; }
.formula-code, .field .formula-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
  line-height: 1.4; letter-spacing: normal; white-space: pre-wrap; overflow-wrap: anywhere;
  word-break: normal; tab-size: 4; scrollbar-gutter: stable;
}
.formula-code {
  position: absolute; inset: 0; margin: 0; padding: 8px 10px; overflow: hidden;
  border: 1px solid transparent; border-radius: 7px; background: var(--bg); color: var(--text);
}
.formula-editor:focus-within .formula-code { background: var(--surface); }
.field .formula-input, .field .formula-input:focus {
  position: relative; display: block; background: transparent; color: transparent;
  caret-color: var(--text);
}
.formula-input::selection { color: transparent; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.tok-tag { color: var(--accent); }
.tok-ref { color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); border-radius: 3px; }
.tok-ref.is-unknown {
  color: var(--error); background: none;
  text-decoration: underline wavy var(--error); text-underline-offset: 3px;
}
.formula-result {
  margin-top: 6px; padding: 7px 10px; border-radius: 7px;
  /* Light blue: a computed field's output stands out among the grey inputs. The theme's
     soft accent is stronger in dark mode, where an 8% tint would vanish. */
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  max-height: 12.5em; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 13.5px; line-height: 1.45;
}
.result-label {
  display: block; margin-bottom: 2px; color: var(--accent); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.result-text.is-empty { color: var(--muted); }
/* What the formula's tags printed, apart from its own text. */
.result-computed {
  color: inherit; background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 3px; padding: 0 2px; margin: 0 -2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.invalid { margin: 4px 0 0; color: var(--error); font-size: 12px; }
.invalid .format { white-space: nowrap; }
.warning { margin: 4px 0 0; color: var(--changed); font-size: 12px; }

.panel-foot {
  position: sticky; bottom: 0; margin-top: auto; display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px; padding: 12px 22px; border-top: 1px solid var(--line); background: var(--surface);
}
.changes { margin-right: auto; color: var(--muted); font-size: 13px; }
.changes.has-changes { color: var(--changed); font-weight: 600; }
.panel-foot .error { font-size: 13px; }
.auto-draw { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; user-select: none; }
.auto-draw:hover { color: var(--text); }
.auto-draw input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }

@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .viewer { position: relative; top: 0; height: 70vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .topbar, .viewer-bar, .downloads { padding-left: 16px; padding-right: 16px; }
  .panel-head, .group, .panel-foot { padding-left: 16px; padding-right: 16px; }
  .options { margin-left: 16px; margin-right: 16px; }
  .scroller { padding: 12px; }
  .admin { padding-top: 32px; }
  .table-wrap { overflow-x: auto; }
  .table-wrap .admin-table { min-width: 760px; }
}