* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  color-scheme: light dark;
  --bg: #fff;
  --surface: #f8f8f8;
  --border: #ddd;
  --text: #222;
  --dim: #767676;
  --result: #166534;
  --header-bg: #f0f0f0;
  --accent: #2563eb;
  --hl-num: #fe640b;
  --hl-func: #8839ef;
  --hl-unit: #179299;
  --hl-op: #1e66f5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1e1e2e;
    --surface: #181825;
    --border: #313244;
    --text: #cdd6f4;
    --dim: #9399b2;
    --result: #a6e3a1;
    --header-bg: #11111b;
    --accent: #89b4fa;
    --hl-num: #fab387;
    --hl-func: #cba6f7;
    --hl-unit: #94e2d5;
    --hl-op: #89b4fa;
  }
}
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: monospace; }
body { display: flex; flex-direction: column; width: fit-content; min-width: min(720px, 100%); max-width: 100%; margin: 0 auto; }
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--header-bg); border-bottom: 1px solid var(--border);
}
header h1 { font-size: 1em; font-weight: 600; color: var(--dim); }
header h1 a { color: inherit; text-decoration: none; }
.ver { font-size: 0.8em; font-weight: 400; opacity: 0.6; }
#header-actions { display: flex; gap: 8px; position: relative; }
#file-menu {
  position: absolute; top: 100%; left: 0; z-index: 10; margin-top: 4px;
  display: flex; flex-direction: column; min-width: 160px; max-height: 320px;
  overflow-y: auto; padding: 4px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--header-bg);
}
#file-menu[hidden] { display: none; }  /* display:flex above beats the hidden attribute */
#file-menu button {
  background: none; color: var(--text); border: none; padding: 6px 10px;
  border-radius: 3px; cursor: pointer; font: inherit; font-size: 0.85em; text-align: left;
}
#file-menu button:hover { background: var(--border); }
#file-menu button.active { color: var(--accent); }
#file-menu .menu-label {
  font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim);
  padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--border);
}
.header-link, #share-btn {
  background: var(--border); color: var(--text); border: none; padding: 6px 14px;
  border-radius: 4px; cursor: pointer; font: inherit; font-size: 0.85em; text-decoration: none;
}
.header-link:hover, #share-btn:hover { background: var(--accent); color: var(--header-bg); }
#share-btn.copied, #copy-btn.copied { background: var(--result); color: var(--header-bg); }
#copy-btn, #gh-link { display: flex; align-items: center; }
.editor-wrap {
  flex: 1; overflow-y: auto;
}
.editor-inner {
  display: flex; min-height: 100%;
}
.input-wrap {
  --pad: 16px;
  flex: 1 1 0; min-width: 0; min-height: 100%;
  display: grid; background: var(--surface);
}
.input-wrap > * {
  grid-area: 1/1; padding: 12px var(--pad); font: inherit; line-height: 1.7;
  white-space: pre-wrap; tab-size: 4; overflow-wrap: break-word; word-break: break-all;
}
#highlight { pointer-events: none; color: var(--text); }
.hl-line { min-height: 1lh; }
.hl-line.line-hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad);
}
#input {
  field-sizing: content; color: transparent; caret-color: var(--text);
  background: transparent; border: none; resize: none;
  outline: none; overflow: hidden;
}
.hl-dim { color: var(--dim); }
/* Prose and comments are not read, so they stay dim. Colour marks code. */
.hl-prose { color: var(--dim); }
.hl-comment { color: var(--dim); font-style: italic; }
.hl-num { color: var(--hl-num); }
.hl-func { color: var(--hl-func); }
.hl-unit { color: var(--hl-unit); }
.hl-op { color: var(--hl-op); }
#results {
  --pad: 16px;
  width: max-content; min-width: 10%; background: var(--surface);
  border-left: 1px solid var(--border); padding: 12px var(--pad);
  overflow: hidden;
}
.result-line {
  line-height: 1.7; text-align: right;
  color: var(--result); white-space: nowrap; overflow: hidden;
}
.result-line.line-hover, .result-line.summed, .result-line.total-line {
  margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad);
}
.result-line.line-hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.result-line.summed { background: color-mix(in srgb, var(--result) 8%, transparent); }
.result-line.total-line { border-top: 1px solid var(--dim); }
#ac {
  position: fixed; z-index: 20; min-width: 200px; max-width: min(360px, 90vw);
  max-height: 240px; overflow-y: auto; font-size: 0.85em;
  background: var(--header-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 18%);
}
.ac-item {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 3px 10px; cursor: pointer; white-space: nowrap;
}
.ac-desc { color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.ac-item.sel { background: var(--accent); color: var(--header-bg); }
.ac-item.sel .ac-desc { color: var(--header-bg); opacity: 0.75; }
.ac-item:hover:not(.sel) { background: color-mix(in srgb, var(--text) 8%, transparent); }