/* app.css — MEHKO operator record. Visual identity: a regulatory document made
   digital. Manila paper ground, oxblood seal accent, serif masthead (agency
   letterhead), Public Sans for UI, IBM Plex Mono for all audit data. Utilitarian,
   precise, honest. No decorative chrome beyond what reinforces "official record."
   NOTE (hardening follow-up): fonts are loaded from Google Fonts in index.html.
   Self-host these woff2 files before any government deployment to remove the
   external CDN dependency. Fallback stack below keeps the UI legible if fonts
   fail to load. */

:root {
  --paper:      #f3efe6;   /* manila ground */
  --paper-2:    #fbfaf5;   /* card / form surface */
  --paper-edge: #ece6d8;   /* faint fill, table zebra, disabled */
  --ink:        #1c1a14;   /* primary text — warm near-black */
  --ink-soft:   #5c5648;   /* secondary text, labels */
  --ink-faint:  #8c8676;   /* tertiary, placeholders */
  --line:       #d6cfbe;   /* hairline rules, borders */
  --line-strong:#bcb29a;
  --seal:       #7b2d26;   /* oxblood — the official accent: rules, primary action */
  --seal-deep:  #5f221c;
  --ok:         #2f6b3e;   /* OPERATIVE */
  --gate:       #8a5a12;   /* GATE */
  --verify:     #b04a1e;   /* VERIFY */
  --neutral:    #5c5648;   /* HOOK / FLAG / informational */

  --ff-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ff-ui:    "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono:  "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --r: 2px;                /* corners stay square-ish — this is a form, not an app */
  --shadow: 0 1px 0 var(--line), 0 2px 8px rgba(40, 32, 16, 0.06);
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--ff-ui);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--paper);
  /* faint paper grain for atmosphere — very low opacity, no visual noise at a glance */
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(123, 45, 38, 0.025) 27px, rgba(123, 45, 38, 0.025) 28px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--ff-serif); font-weight: 600; line-height: 1.2; margin: 0; }
a { color: var(--seal); }
button { font-family: var(--ff-ui); cursor: pointer; }
input, select, textarea { font-family: var(--ff-ui); }

.mono { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }

/* eyebrow — uppercase tracked label, the connective tissue of an official form */
.eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}

/* ── masthead ─────────────────────────────────────────────────────────────── */
.masthead {
  background: var(--paper-2);
  border-bottom: 3px solid var(--seal);
  box-shadow: 0 1px 0 var(--line);
}
.masthead-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 22px;
  display: flex; align-items: center; gap: 18px;
}
.wordmark { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.wordmark .seal-dot {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--seal); flex: none; align-self: center;
}
.wordmark h1 {
  font-size: 22px; letter-spacing: 0.04em; color: var(--ink);
}
.wordmark .sub {
  font-family: var(--ff-ui); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
}
.masthead .spacer { flex: 1; }
.masthead .who { text-align: right; min-width: 0; }
.masthead .who .biz {
  font-size: 13px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw;
}
.masthead .who .role {
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-soft);
  letter-spacing: 0.05em;
}

/* ── layout shell ─────────────────────────────────────────────────────────── */
.layout { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 0; align-items: flex-start; }
.nav {
  flex: none; width: 208px; padding: 22px 14px 22px 22px;
  position: sticky; top: 0; align-self: flex-start;
}
.nav .nav-head { margin: 0 0 10px 8px; }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav button {
  width: 100%; text-align: left; background: transparent; border: none;
  border-left: 2px solid transparent;
  padding: 8px 10px; font-size: 14px; color: var(--ink-soft); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-radius: 0 var(--r) var(--r) 0;
}
.nav button:hover { background: var(--paper-edge); color: var(--ink); }
.nav button.active {
  background: var(--paper-2); color: var(--seal); border-left-color: var(--seal);
  box-shadow: inset 0 0 0 1px var(--line);
}
.nav button .st {
  font-family: var(--ff-mono); font-size: 9.5px; color: var(--ink-faint);
  letter-spacing: 0.03em;
}

.main { flex: 1; min-width: 0; padding: 22px 22px 40px; }

/* ── cards / panels ───────────────────────────────────────────────────────── */
.card {
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 22px;
}
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h2 { font-size: 19px; }
.formno {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--ink-faint); border: 1px solid var(--line); border-radius: var(--r);
  padding: 2px 7px; white-space: nowrap;
}
.rule { height: 1px; background: var(--line); border: none; margin: 16px 0; }

/* ── badges (status vocab) ────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--ff-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: var(--r); border: 1px solid currentColor;
  text-transform: uppercase; line-height: 1.4;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok      { color: var(--ok); }
.badge.gate    { color: var(--gate); }
.badge.verify  { color: var(--verify); }
.badge.neutral { color: var(--neutral); }
.badge.seal    { color: var(--seal); }

/* ── forms ────────────────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px;
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 10px 11px; font-size: 15px; transition: border-color .12s, box-shadow .12s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--seal);
  box-shadow: 0 0 0 3px rgba(123, 45, 38, 0.12);
}
.field .hint { font-size: 12px; color: var(--ink-faint); margin-top: 5px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 11px 18px; border-radius: var(--r); border: 1px solid var(--seal);
  background: var(--seal); color: #fff; transition: background .12s, transform .04s;
}
.btn:hover { background: var(--seal-deep); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: default; background: var(--ink-faint); border-color: var(--ink-faint); }
.btn.ghost { background: transparent; color: var(--seal); }
.btn.ghost:hover { background: rgba(123, 45, 38, 0.07); }
.btn.full { width: 100%; }
.btn.link {
  background: none; border: none; padding: 6px 2px; color: var(--ink-soft);
  text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px;
}
.btn.link:hover { color: var(--seal); background: none; }

/* ── messages ─────────────────────────────────────────────────────────────── */
.notice {
  font-size: 13.5px; padding: 11px 13px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--paper-edge); color: var(--ink-soft);
  margin-bottom: 14px;
}
.notice.err { border-color: var(--verify); color: var(--verify); background: rgba(176, 74, 30, 0.06); }
.notice.ok  { border-color: var(--ok); color: var(--ok); background: rgba(47, 107, 62, 0.06); }

/* ── auth screen ──────────────────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-mast { text-align: center; margin-bottom: 22px; }
.auth-mast .seal-ring {
  width: 54px; height: 54px; border-radius: 50%; border: 2.5px solid var(--seal);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 12px;
  font-family: var(--ff-serif); font-weight: 600; font-size: 20px; color: var(--seal);
  position: relative;
}
.auth-mast .seal-ring::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 1px solid rgba(123, 45, 38, 0.35);
}
.auth-mast h1 { font-size: 24px; letter-spacing: 0.03em; }
.auth-mast .sub {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; margin-top: 5px;
}
.tabs { display: flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 20px; }
.tabs button {
  flex: 1; background: var(--paper); border: none; padding: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.tabs button.active { background: var(--seal); color: #fff; }

/* ── placeholder panes (stages 2–8) ──────────────────────────────────────── */
.placeholder .stage-tag {
  display: inline-block; font-family: var(--ff-mono); font-size: 10.5px;
  letter-spacing: 0.06em; color: var(--ink-soft);
  border: 1px dashed var(--line-strong); border-radius: var(--r); padding: 3px 9px; margin-bottom: 14px;
}
.placeholder p { color: var(--ink-soft); max-width: 56ch; margin: 0 0 14px; }
.endpoints { list-style: none; margin: 0; padding: 0; }
.endpoints li {
  font-family: var(--ff-mono); font-size: 12.5px; color: var(--ink);
  padding: 7px 0; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center;
}
.endpoints li .verb {
  font-size: 10.5px; font-weight: 600; color: var(--seal); min-width: 48px;
}

/* ── footer ───────────────────────────────────────────────────────────────── */
.foot {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 22px 36px;
  border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 11.5px; line-height: 1.6;
}
.foot strong { color: var(--ink-soft); }

/* ── boot / connection states ─────────────────────────────────────────────── */
.center-state { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.center-state .inner { max-width: 360px; }
.center-state h2 { font-size: 20px; margin-bottom: 8px; }
.center-state p { color: var(--ink-soft); font-size: 14px; margin-bottom: 18px; }

/* ── one orchestrated load reveal (restraint, per the aesthetic) ──────────── */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.reveal > * { opacity: 0; animation: rise .42s ease forwards; }
.reveal > *:nth-child(1) { animation-delay: .02s; }
.reveal > *:nth-child(2) { animation-delay: .08s; }
.reveal > *:nth-child(3) { animation-delay: .14s; }
.reveal > *:nth-child(4) { animation-delay: .20s; }
@media (prefers-reduced-motion: reduce) { .reveal > * { animation: none; opacity: 1; } }

/* hdr-full / hdr-short label switching */
.hdr-short { display: none; }
.hdr-full  { display: inline; }

/* ── responsive: operators are on phones in a kitchen ─────────────────────── */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .masthead-inner { padding: 10px 12px; gap: 8px; }
  .wordmark h1 { font-size: 18px; }
  .wordmark .sub { display: none; }
  .masthead .who { display: none; }  /* hide biz name + role on mobile — saves space */
  .masthead .spacer { flex: 1; }
  .hdr-full  { display: none; }
  .hdr-short { display: inline; }
  .nav-toggle {
    display: inline-flex; background: transparent; border: 1px solid var(--line-strong);
    border-radius: var(--r); padding: 8px 10px; color: var(--ink); font-size: 18px; line-height: 1;
  }
  .layout { display: block; }
  .nav {
    width: auto; position: static; padding: 8px 12px 4px;
    border-bottom: 1px solid var(--line); background: var(--paper-2);
    display: none;
  }
  .nav.open { display: block; }
  .nav .nav-head { display: none; }
  .nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .main { padding: 16px 16px 36px; }
  .card { padding: 18px 16px; }
}

/* ── Stage 2: compliance dashboard ────────────────────────────────────────── */
.dash-meta { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.dash-meta .asof { font-family: var(--ff-mono); font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0.02em; }

.metric { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 2px 0 2px; }
.metric .big {
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 500; color: var(--ink); line-height: 1;
}
.metric .cap { font-family: var(--ff-mono); font-size: 13.5px; color: var(--ink-soft); }

.cite {
  font-family: var(--ff-mono); font-size: 11.5px; color: var(--ink-faint);
  letter-spacing: 0.02em; margin-top: 4px;
}

.meter {
  position: relative; height: 8px; margin: 10px 0 2px;
  background: var(--paper-edge); border: 1px solid var(--line);
  border-radius: 99px; overflow: hidden;
}
.meter .fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--ok); border-radius: 99px; transition: width .5s ease;
}
.meter.warn .fill { background: var(--gate); }
.meter.over .fill { background: var(--verify); }
.meter.na {
  height: auto; padding: 6px; background: transparent;
  border: 1px dashed var(--line-strong); display: flex; justify-content: center;
}
.meter.na span { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-faint); }

.cand { padding: 12px 0; border-top: 1px solid var(--line); }
.cand:first-of-type { border-top: none; padding-top: 4px; }
.cand.active { background: rgba(47, 107, 62, 0.05); margin: 0 -22px; padding-left: 22px; padding-right: 22px; }
.cand .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cand .lab { font-weight: 600; color: var(--ink); font-size: 14px; }
.cand .rng { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
.cand .ct {
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
  font-size: 15px; color: var(--ink); white-space: nowrap;
}
@media (max-width: 760px) {
  .cand.active { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
  .metric .big { font-size: 26px; }
}

/* ── Stage 3: log order ────────────────────────────────────────────────────── */
.req { color: var(--verify); font-weight: 700; }

/* Two quick-logger cards side by side. Override the base .card+.card top-margin
   (equal specificity, later declaration wins because this is appended). */
.quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.quick-row > .card { margin-top: 0; }

/* Checkbox + label inline for the disability attestation */
.check-label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; font-weight: 400; letter-spacing: 0;
  text-transform: none; cursor: pointer; line-height: 1.5; color: var(--ink);
}

@media (max-width: 760px) {
  .quick-row { grid-template-columns: 1fr; }
}

/* ── Stage 4: activity log ─────────────────────────────────────────────────── */
.act-entry {
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.act-entry:first-of-type { border-top: none; }

.act-superseded { opacity: 0.55; }
.act-superseded .act-head { text-decoration: none; } /* entry dims, no strikethrough — chain must stay readable */

.act-correction { padding-left: 18px; border-left: 2px solid var(--line-strong); }

.act-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.act-type {
  font-size: 13px; font-weight: 600; color: var(--ink); min-width: 0;
}
.act-meta {
  font-size: 11px; color: var(--ink-faint); flex: 1; min-width: 0;
}
.act-id { color: var(--ink-faint); letter-spacing: 0.03em; }

.act-ref {
  font-size: 11px; color: var(--ink-faint); margin-top: 3px;
}

.act-payload {
  font-size: 11.5px; line-height: 1.5;
  background: var(--paper-edge); border: 1px solid var(--line);
  border-radius: var(--r); padding: 9px 11px;
  margin: 8px 0 0; overflow-x: auto; white-space: pre;
}

.act-correct-form textarea {
  width: 100%; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 10px 11px; font-size: 14px; font-family: var(--ff-ui);
  transition: border-color .12s, box-shadow .12s;
}
.act-correct-form textarea:focus {
  outline: none; border-color: var(--seal);
  box-shadow: 0 0 0 3px rgba(123, 45, 38, 0.12);
}

/* ── Stage 5: advertising ──────────────────────────────────────────────────── */
.adv-result {
  border-radius: var(--r); border: 1px solid var(--line);
  padding: 14px 16px; background: var(--paper-edge);
}
.adv-result.ok  { border-color: var(--ok);     background: rgba(47, 107, 62, 0.05); }
.adv-result.err { border-color: var(--verify); background: rgba(176, 74, 30, 0.05); }

.adv-result-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}

.adv-line {
  font-family: var(--ff-mono); font-size: 13.5px; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 10px 12px;
  margin: 0; line-height: 1.5; word-break: break-word;
  user-select: all;
}

.adv-issue-head {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--verify); margin: 10px 0 5px;
}
.adv-issues {
  margin: 0 0 4px 18px; padding: 0;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.6;
}

/* ── Stage 6: integrity ────────────────────────────────────────────────────── */
.int-result {
  border-radius: var(--r); border: 1px solid var(--line);
  padding: 14px 16px; background: var(--paper-edge);
}
.int-result.ok      { border-color: var(--ok);     background: rgba(47, 107, 62, 0.05); }
.int-result.err     { border-color: var(--verify); background: rgba(176, 74, 30, 0.05); }
.int-result.neutral { border-color: var(--line-strong); background: var(--paper-2); }

.int-result-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}

/* key-value table for hash/seq/timestamp data */
.int-kv { display: flex; flex-direction: column; gap: 5px; }
.int-kv-row {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  font-size: 12.5px;
}
.int-kv-row > span {
  min-width: 110px; flex: none;
  color: var(--ink-soft); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.int-kv-row > code {
  font-family: var(--ff-mono); font-size: 12px; color: var(--ink);
  background: var(--paper-edge); border: 1px solid var(--line);
  border-radius: var(--r); padding: 2px 7px;
  word-break: break-all;
}

/* long hash codes — full-width on narrow screens */
.int-hash { word-break: break-all; max-width: 100%; }

.int-anchor-row {
  border-top: 1px solid var(--line); padding: 14px 0;
}
.int-anchor-row:first-of-type { border-top: none; }
.int-anchor-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}

/* ── Stage 8: advisory reminders ──────────────────────────────────────────── */
.notif-advisory {
  font-size: 12px; color: var(--ink-faint); font-style: italic;
  border-left: 3px solid var(--line-strong); padding-left: 10px;
  margin: 0 0 14px;
}

.notif-card {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; background: var(--paper-2);
  margin-bottom: 12px;
}
.notif-card:last-of-type { margin-bottom: 0; }
.notif-card.notif-overdue { border-color: var(--verify); background: rgba(176, 74, 30, 0.04); }
.notif-card.notif-read    { opacity: 0.55; }

.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}

.notif-msg {
  font-size: 14px; color: var(--ink); margin: 0 0 8px; line-height: 1.5;
}

.notif-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.notif-days {
  font-size: 11px; color: var(--ink-faint); white-space: nowrap;
}

/* ── Quick Entry mode ──────────────────────────────────────────────────────── */

/* mode selector screen */
.qe-mode-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--paper); padding: 24px;
}
.qe-mode-card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 36px 32px; max-width: 440px; width: 100%;
}
.qe-mode-choices { display: flex; flex-direction: column; gap: 12px; }
.qe-mode-btn {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 18px 20px; cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.qe-mode-btn:hover { border-color: var(--seal); background: var(--paper-edge); }
.qe-mode-label { font-size: 16px; font-weight: 700; color: var(--ink); font-family: var(--ff-ui); }
.qe-mode-desc  { font-size: 13px; color: var(--ink-soft); font-family: var(--ff-ui); }

/* quick entry shell */
.qe-shell {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--paper); max-width: 520px; margin: 0 auto;
}
.qe-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: var(--paper-2); position: sticky; top: 0; z-index: 10;
}
.qe-hdr-btn { padding: 8px 10px !important; font-size: 12px !important; }
.qe-body { flex: 1; padding: 16px; }
.qe-foot {
  font-size: 11px; color: var(--ink-faint); padding: 14px 16px;
  border-top: 1px solid var(--line); text-align: center; font-style: italic;
}

/* tab bar */
.qe-tabs {
  display: flex; gap: 4px; margin-bottom: 18px;
  background: var(--paper-edge); border-radius: var(--r);
  padding: 4px; border: 1px solid var(--line);
}
.qe-tab {
  flex: 1; padding: 10px 4px; font-size: 13px; font-weight: 600;
  font-family: var(--ff-ui); color: var(--ink-soft);
  background: transparent; border: none; border-radius: calc(var(--r) - 2px);
  cursor: pointer; transition: background .1s, color .1s;
}
.qe-tab.active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* quick entry fields — larger than full-app fields for mobile */
.qe-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.qe-field label {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ink-soft); font-family: var(--ff-ui);
}
.qe-field input,
.qe-field select,
.qe-field textarea {
  width: 100%; padding: 14px 13px; font-size: 16px; /* 16px prevents iOS zoom */
  font-family: var(--ff-ui); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: var(--r); transition: border-color .12s, box-shadow .12s;
  -webkit-appearance: none; appearance: none;
}
.qe-field input:focus,
.qe-field select:focus,
.qe-field textarea:focus {
  outline: none; border-color: var(--seal);
  box-shadow: 0 0 0 3px rgba(123, 45, 38, 0.12);
}
.qe-hint { font-size: 12px; color: var(--ink-faint); font-family: var(--ff-ui); }

.qe-check-label {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--ink); cursor: pointer;
  padding: 10px 0;
}

/* submit button — full width, tall, easy to tap */
.qe-submit {
  width: 100%; padding: 16px; font-size: 16px !important;
  margin-top: 8px; min-height: 52px;
}