:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --border: #e1e4ea;
  --text: #1b1f27;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --ok: #15803d;
  --ok-bg: #dcfce7;
  --warn: #b45309;
  --warn-bg: #fef3c7;
  --err: #b91c1c;
  --err-bg: #fee2e2;
  --info: #1d4ed8;
  --info-bg: #dbeafe;
  --radius: 10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", "Sarabun", sans-serif;
  background: var(--bg);
  color: var(--text);
}
h1, h2, h3 { margin: 0; font-weight: 650; }
h1 { font-size: 16px; }
h2 { font-size: 15px; }
p { margin: 0; }
button, select, input { font: inherit; color: inherit; }
.muted { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.empty { color: var(--muted); padding: 18px 4px; text-align: center; }
[hidden] { display: none !important; }

.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 9px;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 12px; letter-spacing: .5px;
}
.sub { color: var(--muted); font-size: 12.5px; }
.topbar-right { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid transparent; white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis;
}
.badge-muted { background: var(--surface-2); border-color: var(--border); color: var(--muted); }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-err { background: var(--err-bg); color: var(--err); }
.badge-info { background: var(--info-bg); color: var(--info); }

.layout {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px;
  padding: 16px 20px 40px; max-width: 1500px; margin: 0 auto;
}
@media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); } .sticky { position: static; } }
.col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.sticky { position: sticky; top: 76px; max-height: calc(100vh - 92px); display: flex; flex-direction: column; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.dropzone {
  border: 2px dashed #c7cdd8; border-radius: var(--radius); padding: 26px 16px; text-align: center;
  background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; outline: none;
}
.dropzone:hover, .dropzone:focus-visible, .dropzone.over { border-color: var(--accent); background: #eef3ff; }
.drop-icon { font-size: 26px; color: var(--accent); margin-bottom: 4px; }
.hint { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.sample-row { margin-top: 12px; }
.sample-row select { flex: 1; min-width: 160px; }

select, input[type="text"] {
  width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
select:focus, input:focus { outline: 2px solid #bfdbfe; border-color: var(--accent); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
label > select, label > input[type="text"] { color: var(--text); font-size: 14px; font-weight: 400; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-weight: 400; font-size: 13.5px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 600px) { .settings-grid { grid-template-columns: 1fr; } }

.btn {
  padding: 7px 13px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; font-weight: 500; font-size: 13.5px; line-height: 1.2; transition: background .12s, border-color .12s;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: #c7cdd8; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover:not(:disabled) { background: #1d4ed8; border-color: #1d4ed8; }

/* pages */
.pages { display: flex; flex-direction: column; gap: 12px; }
.page {
  display: grid; grid-template-columns: var(--thumb-col, 300px) minmax(0, 1fr); gap: 14px; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px; background: var(--surface-2);
}
/* preview size (Pages toolbar) */
.pages.size-sm { --thumb-col: 150px; }
.pages.size-md { --thumb-col: 300px; }
.pages.size-lg { --thumb-col: minmax(0, 48%); }
.pages.size-xl .page { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) { .page { grid-template-columns: 1fr !important; } }
.page .thumb {
  width: 100%; aspect-ratio: var(--ar, 3 / 4); background: #fff; border: 1px solid var(--border); border-radius: 6px;
  display: grid; place-items: center; overflow: hidden; color: var(--muted); font-size: 12px; position: relative;
  align-self: start; cursor: zoom-in;
}
.pages.size-xl .thumb { width: min(100%, calc(80vh * var(--ar, 0.75))); justify-self: center; }
.page .thumb img { width: 100%; height: 100%; object-fit: fill; display: block; }
.page .thumb:hover { box-shadow: 0 0 0 2px #bfdbfe; }
.page .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page .head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page .title { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.page .detail { color: var(--muted); font-size: 12.5px; }
.page .detail.error { color: var(--err); }
.progress { height: 4px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.progress.indeterminate > span { width: 30%; animation: slide 1.1s infinite ease-in-out; }
@keyframes slide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }
.page textarea {
  width: 100%; min-height: 120px; max-height: 420px; resize: vertical; font: 12.5px/1.45 var(--mono);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: #fff; color: var(--text);
}
.page textarea:focus { outline: 2px solid #bfdbfe; border-color: var(--accent); }

/* llm */
.llm-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.opt-group { display: flex; flex-direction: column; gap: 10px; }
.output { flex: 1; min-height: 0; overflow: auto; border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.result, .reasoning pre {
  margin: 0; white-space: pre-wrap; word-break: break-word; font: 13px/1.5 var(--mono);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px;
}
.result.error { background: var(--err-bg); border-color: #fecaca; color: var(--err); }
.reasoning { border: 1px dashed var(--border); border-radius: 8px; padding: 6px 10px; }
.reasoning summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.reasoning pre { margin-top: 6px; max-height: 220px; overflow: auto; font-size: 12px; color: var(--muted); background: transparent; border: 0; padding: 0; }
.result-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.result-table td, .result-table th { border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; }
.result-table th { background: var(--surface-2); width: 34%; font-weight: 600; font-family: var(--mono); font-size: 12px; }
.result-table td pre { margin: 0; white-space: pre-wrap; font: 12px/1.45 var(--mono); }
.result-table .null { color: var(--muted); font-style: italic; }
.result-actions { justify-content: flex-end; }
.result-actions .muted { margin-right: auto; }
.chat-log { display: flex; flex-direction: column; gap: 8px; }
.msg { padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; max-width: 92%; }
.msg.user { align-self: flex-end; background: var(--info-bg); color: var(--info); }
.msg.assistant { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }

/* ---- fields (zonal extraction) -------------------------------------------------------------- */
.fbox { position: absolute; border: 2px solid var(--accent); background: rgba(37, 99, 235, .12); cursor: zoom-in; }
.fbox::after {
  content: attr(data-n); position: absolute; left: -2px; top: -2px; transform: translateY(-100%);
  background: inherit; background-color: var(--c, var(--accent)); color: #fff; font: 600 10px/1 system-ui, sans-serif;
  padding: 2px 4px; border-radius: 3px 3px 3px 0; opacity: .92;
}
.pages.size-sm .fbox::after { display: none; }
.fbox.amb { border-style: dashed; }
.fbox.hl, .fbox:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c, var(--accent)); z-index: 1; background-color: rgba(37, 99, 235, .25); }
.fields tr.hl td, .fields tr:hover td { background: #eef3ff; }
.fields td.fname .n { display: inline-block; min-width: 16px; font: 600 10px/16px system-ui, sans-serif; color: #fff; background: var(--c, var(--accent)); border-radius: 3px; text-align: center; margin-right: 6px; }
label.inline { flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; }
label.inline select { width: auto; padding: 5px 8px; font-size: 13px; }
.fields { display: flex; flex-direction: column; gap: 6px; }
.fields-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.fields-head .spacer { flex: 1; }
.fields-head .fstatus.error { color: var(--err); }
.btn-sm { padding: 4px 9px; font-size: 12.5px; }
.fields table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fields td { padding: 3px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.fields td.fname { width: 24%; font-weight: 600; word-break: break-word; }
/* The Thai label is the name; the key under it is what the exported JSON is keyed by. */
.fields td.fname .fkey { display: block; font: 400 11px/1.4 var(--mono); color: var(--muted); word-break: break-all; }
.fields td.fval input { width: 100%; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font: 13px var(--mono); background: #fff; }
.fields td.fmeta { width: 16%; color: var(--muted); font-size: 12px; word-break: break-word; }
.fields td.fmeta.error { color: var(--err); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; flex: none; }

/* editor dialog */
.field-editor { width: min(96vw, 1500px); height: 94vh; max-height: 94vh; padding: 0; border: 0; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); background: var(--surface); color: var(--text); }
.field-editor::backdrop { background: rgba(15, 23, 42, .55); }
.fe-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fe-title { display: flex; align-items: baseline; gap: 10px; }
.fe-templates { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; flex: 1; }
.fe-templates select, .fe-templates input { width: auto; min-width: 160px; padding: 6px 8px; }
.fe-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; height: calc(94vh - 58px); }
.fe-canvas-wrap { overflow: auto; background: #e5e7eb; padding: 12px; display: flex; justify-content: center; align-items: flex-start; }
#feCanvas { cursor: crosshair; display: block; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); touch-action: none; }
.fe-side { border-left: 1px solid var(--border); padding: 12px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.fe-fields { display: flex; flex-direction: column; gap: 6px; }
.fe-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 24px; grid-template-areas: "dot name multi del" ". value value value"; gap: 4px 6px; align-items: center; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.fe-row.selected { border-color: var(--accent); box-shadow: 0 0 0 2px #bfdbfe; }
.fe-row .dot { grid-area: dot; margin: 0; }
.fe-row .fe-name { grid-area: name; padding: 4px 6px; font-size: 13px; }
.fe-row .fe-multi { grid-area: multi; flex-direction: row; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.fe-row .fe-del { grid-area: del; border: 0; background: transparent; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; }
.fe-row .fe-del:hover { color: var(--err); }
.fe-row .fe-value { grid-area: value; font: 12.5px var(--mono); white-space: pre-wrap; word-break: break-word; }
.fe-row .fe-value:empty { display: none; }
@media (max-width: 900px) {
  .fe-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .fe-side { border-left: 0; border-top: 1px solid var(--border); max-height: 40vh; }
}

.lexicons { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.lex-head { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.lex-hint { margin: 0; font-size: 12px; }
.lex-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lex-row select, .lex-row input[type=text] { width: auto; flex: 1 1 180px; }
.wr-list { display: flex; flex-direction: column; gap: 4px; }
.wr-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.wr-item .wr-name { font-weight: 600; }
.wr-item .wr-pat { color: var(--muted); font: 12px var(--mono); }
.wr-item .wr-inc { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.lex-row textarea { flex: 1 1 240px; font-size: 12.5px; }
/* Three boxes in a row look alike once they are filled in, and the placeholder that told you which was
   which is gone by then — so each keeps a caption of its own. */
.wr-field { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; }
.wr-field > span { font-size: 11px; color: var(--muted); }
/* .lex-row gives its inputs `flex: 1 1 180px`; inside this column-flex label the main axis is vertical, so
   that basis would make them 180px tall. */
.wr-field input[type=text] { width: 100%; flex: 0 0 auto; }
/* The card is narrow, so these wrap onto several lines; without align-content the wrapped lines stretch to
   fill the card and the inputs grow with them. */
.wr-form { align-items: flex-end; align-content: flex-start; }
.wr-form .check { align-self: center; }

.fe-lex { width: auto; max-width: 150px; padding: 2px 6px; font-size: 12px; }
.place-chip.new { border-color: var(--accent); background: #eef3ff; color: var(--accent); }
.place-add { padding: 2px 7px; font-size: 12px; }

/* boxes a word rule found — one colour of their own, wherever they appear */
:root { --rule: #6d28d9; }
.fbox.rule { border-color: var(--rule) !important; border-style: dashed; }
.fbox.rule::after { background-color: var(--rule) !important; }
.fields tr.by-rule td { background: #faf5ff; }
.rule-tag { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.rule-badge { background: var(--rule); color: #fff; border-radius: 4px; padding: 1px 5px; font: 600 10px/1.5 system-ui, sans-serif; }
.rule-pat { color: var(--rule); font: 11.5px var(--mono); word-break: break-word; }

/* place check (จังหวัด/อำเภอ/ตำบล) */
.place { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.place .place-icon { font-weight: 700; }
.place .place-type { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--muted); }
.place.ok .place-icon { color: var(--ok); }
.place.ok .place-text { color: var(--muted); }
.place.near .place-icon, .place.unknown .place-icon { color: var(--warn); }
.place .place-sug { padding: 2px 7px; font-size: 12px; }
.place-scan { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.place-chip { border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; background: var(--surface-2); cursor: help; }
.place-chip.ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.place-chip.near, .place-chip.unknown { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }

/* AI second pass */
.fields-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.fields-tools select { width: auto; padding: 4px 6px; font-size: 12.5px; }
.fields td.fsel { width: 24px; text-align: center; }
.fields tr.amb td.fname::after { content: ' ⚠'; color: var(--warn); }
.ai-sugg { margin-top: 4px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; }
.ai-sugg .ai-val { font: 12.5px var(--mono); background: var(--info-bg); color: var(--info); padding: 2px 6px; border-radius: 4px; white-space: pre-wrap; word-break: break-word; }
.ai-sugg .ai-note { color: var(--muted); }
.ai-sugg.error .ai-note { color: var(--err); }
.ai-sugg .btn { padding: 2px 7px; font-size: 12px; }
.ai-sugg.accepted .ai-val { background: var(--ok-bg); color: var(--ok); }
.ai-sugg.kept .ai-val { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border); }
.ai-sugg .ai-chg { color: var(--warn); font-size: 12px; }

/* Reading area: a page-shaped patch to drag a rectangle on, showing the loaded page when there is one. */
.oa-canvas { position: relative; aspect-ratio: 1 / 1.414; max-height: 240px; margin: 6px 0; border: 1px solid var(--border);
  border-radius: 6px; background: #fff center/contain no-repeat; cursor: crosshair; touch-action: none; overflow: hidden; }
.oa-canvas::after { content: attr(data-hint); position: absolute; inset: auto 0 4px 0; text-align: center;
  font-size: 11px; color: var(--muted); pointer-events: none; }
.oa-rect { position: absolute; border: 2px solid var(--accent); background: rgba(37, 99, 235, .12); pointer-events: none; }
.oa-presets { gap: 6px; margin: 4px 0; }

.fields td.fval select.fdoctype { width: 100%; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: #fff; }

/* QR codes are not readings of the page — they are exact or absent — so they are marked apart from it. */
:root { --qr: #7c3aed; }
.fields tr.qr td.fname { color: var(--qr); }
.fields tr.qr td.fval input { border-color: var(--qr); background: #faf7ff; font-weight: 600; }
.fields tr.qr td.fmeta { color: var(--qr); }
.fbox.qr { border-color: var(--qr) !important; border-style: solid; box-shadow: 0 0 0 1px rgba(124, 58, 237, .35); }

/* ── เท็มเพลทเอกสาร ───────────────────────────────────────────────────────────────────────────────── */
/* The template block is the first thing in the settings card and the one that decides what the rest of them
   are for, so it is marked rather than left to look like another fieldset. */
.templates { border-color: var(--accent); }
.templates > .lex-head strong { color: var(--accent); }
.tpl-active { font-size: 12px; line-height: 1.5; }
.tpl-active b { font-weight: 600; color: var(--text); }
/* What a profile contains, as chips — a person deciding whether to overwrite one wants to see what is in it
   before they do, not after. */
.tpl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.tpl-chip { border: 1px solid var(--border); border-radius: 999px; padding: 0 7px; font-size: 11px; line-height: 17px; white-space: nowrap; }
.tpl-chip.on { border-color: var(--accent); color: var(--accent); }
.tpl-save input[type=text] { flex: 2 1 200px; }
.tpl-save select { flex: 1 1 160px; }
.tpl-actions { align-content: flex-start; }
.tpl-actions .btn { flex: 0 0 auto; }

/* ── รูปแบบ JSON ที่ส่งออก ─────────────────────────────────────────────────────────────────────────── */
.out-sec { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.out-sec + .out-sec { margin-top: 8px; }
.out-body { display: flex; flex-direction: column; gap: 6px; padding-left: 22px; }
.out-erp { display: flex; gap: 8px; flex-wrap: wrap; }
.out-field { display: flex; flex-direction: column; gap: 2px; flex: 1 1 90px; }
.out-field > span { font-size: 11px; color: var(--muted); }
.out-field input { width: 100%; }
/* The recipe is three boxes of punctuation; showing what they do to the code actually on the page is the
   only way to tell a right one from a plausible one. */
.out-preview { font: 12px var(--mono); word-break: break-all; color: var(--muted); }
.out-preview code { color: var(--text); }
.out-rows { display: flex; flex-direction: column; gap: 4px; }
.out-row { display: flex; align-items: center; gap: 6px; }
.out-row input, .out-row select { flex: 1 1 80px; min-width: 0; font-size: 12.5px; }
.out-row .out-arrow { color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.out-row .out-del { flex: 0 0 auto; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; }
.out-row .out-del:hover { color: var(--err); }

/* ── JSON ที่จะส่งออก: อ่านง่ายขึ้น ─────────────────────────────────────────────────────────────── */
/* The result pane shares a sticky column with the controls above it, so the JSON — the thing somebody
   actually checks before sending it on — was getting a few cramped lines. Bigger by default, and a
   full-screen view for reading it properly. */
.result { font-size: 13.5px; }
.result.payload { font: 15px/1.7 var(--mono); min-height: 300px; }
/* Inside the sticky card the output area is what should grow when the window does, not the controls. */
.card.sticky .output { flex: 1 1 auto; }

/* Whether a mapping actually finds anything on the page, next to the mapping itself. */
.out-row .out-hit { flex: 0 0 auto; width: 15px; text-align: center; color: var(--muted); font-size: 13px; cursor: help; }
.out-row .out-hit.ok { color: var(--ok); }
.out-row .out-hit.bad { color: var(--warn); }
.out-row input.out-missing { border-color: var(--warn); background: var(--warn-bg); }

/* The English key a word rule exports under, edited where the rule is listed. */
.wr-item .wr-key { flex: 0 0 150px; font: 12px var(--mono); padding: 2px 6px; }
.wr-item .wr-key.guessed { color: var(--muted); font-style: italic; }
.wr-item .wr-key.missing { border-color: var(--warn); background: var(--warn-bg); }