/* Arrentic screens — same visual language as arrentic-v1.dc.html:
   paper background, serif names, mono for money/dates/citations, one crimson. */
:root {
  --paper: #FBF8F3; --desk: #E9E3D8; --ink: #201B16; --muted: #7A7264; --line: #E7E0D4;
  --chip: #F1EBE0; --crimson: #A61E2E; --crimson-dark: #8C1626; --crimson-soft: #FBEFEF; --crimson-line: #EDCFCF;
  --amber: #A16207; --amber-soft: #FDF5E6; --green: #1E7B4D; --green-soft: #EAF4EC; --green-line: #CDE5D4;
  --serif: 'Source Serif 4', Georgia, serif; --sans: 'Instrument Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--desk); color: var(--ink); font-family: var(--sans); }
a { color: var(--crimson); }
.frame { max-width: 720px; margin: 0 auto; min-height: 100vh; background: var(--paper); display: flex; flex-direction: column; box-shadow: 0 0 40px rgba(60,45,25,.12); }
.top { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 0; }
.brand { font-family: var(--serif); font-weight: 600; font-size: 18px; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.brand-logo { height: 25px; width: auto; flex: none; }
.lang { background: var(--chip); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-family: var(--mono); font-size: 12px; cursor: pointer; color: var(--ink); }
main { flex: 1; padding: 16px 20px 28px; }
.legal { font-size: 11.5px; color: var(--muted); text-align: center; padding: 10px 20px; }
.nav { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: #FFF; border-top: 1px solid var(--line); }
.nav a { text-align: center; padding: 12px 4px; font-size: 12.5px; color: var(--muted); text-decoration: none; }
.nav a.on { color: var(--crimson); font-weight: 600; }
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
h1 { font-family: var(--serif); font-weight: 600; font-size: 28px; margin: 6px 0 4px; line-height: 1.15; }
h2 { font-family: var(--serif); font-weight: 600; font-size: 19px; margin: 22px 0 8px; }
.sub { font-size: 13.5px; color: var(--muted); }
.row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.btn { background: var(--crimson); color: #FFF; border: none; border-radius: 999px; padding: 10px 16px; font: 600 13px var(--sans); cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.btn:hover { background: var(--crimson-dark); }
.btn.ghost { background: #FFF; color: var(--ink); border: 1px solid var(--line); }
.btn:disabled { opacity: .5; cursor: default; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 18px; }
.stat { background: #FFF; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.stat b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 600; }
.stat b.money { font-family: var(--mono); font-size: 19px; padding-top: 4px; }
.stat b.amber { color: var(--amber); }
.stat span { font-size: 12px; color: var(--muted); }
.stat.alert { border-top: 3px solid var(--crimson); }
.stat.alert b { color: var(--crimson); }
.list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.card { background: #FFF; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(60,45,25,.05); }
a.card { color: inherit; text-decoration: none; display: block; }
a.card:hover { box-shadow: 0 3px 10px rgba(60,45,25,.10); }
.card.alert { border-left: 4px solid var(--crimson); }
.name { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.clock { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.clock.red { color: var(--crimson); }
.clock.amber { color: var(--amber); }
.clock.green { color: var(--green); }
.meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.nick { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; font-size: 12.5px; }
.chip { background: var(--chip); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 11.5px; font-weight: 600; }
.mono { font-family: var(--mono); }
.chip.red { background: var(--crimson-soft); color: var(--crimson); border-color: var(--crimson-line); }
.chip.amber { background: var(--amber-soft); color: var(--amber); border-color: #EBD9B4; }
.chip.green { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
.empty { text-align: center; color: var(--muted); padding: 40px 10px; }
.error { background: var(--crimson-soft); border: 1px solid var(--crimson-line); color: var(--crimson); border-radius: 12px; padding: 12px 14px; font-size: 13px; }
pre.facts { font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; background: #FFF; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; line-height: 1.5; }
@media (max-width: 480px) { main { padding: 14px 16px 24px; } .top { padding: 12px 16px 0; } h1 { font-size: 25px; } }

/* ---- New situation form ---- */
.steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 12px; }
.step { background: var(--chip); color: var(--muted); border: 1px solid transparent; border-radius: 999px; padding: 5px 11px; font: 12px var(--sans); cursor: pointer; }
.step.on { background: var(--crimson); color: #FFF; font-weight: 600; }
.step.done { background: var(--green-soft); color: var(--green); border-color: var(--green-line); font-weight: 600; }
.step.bad { background: var(--amber-soft); color: var(--amber); border-color: #EBD9B4; }
.form { display: flex; flex-direction: column; gap: 14px; }
.form h2 { margin: 10px 0 0; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lbl { font-size: 12.5px; font-weight: 600; }
.help { font-size: 12px; color: var(--muted); }
.err { font-size: 12px; color: var(--crimson); font-weight: 600; }
.err:empty { display: none; }
input, select, textarea { font: 14px var(--sans); color: var(--ink); background: #FFF; border: 1px solid #D9D0C1; border-radius: 10px; padding: 9px 11px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--crimson-line); border-color: var(--crimson); }
textarea { resize: vertical; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { background: #FFF; border: 1px solid #D9D0C1; border-radius: 999px; padding: 7px 13px; font: 13px var(--sans); color: var(--ink); cursor: pointer; }
.pill.on { background: var(--ink); border-color: var(--ink); color: #FFF; font-weight: 600; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.subcard { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.inline { display: flex; gap: 6px; align-items: center; }
.x { background: none; border: 1px solid var(--line); border-radius: 999px; width: 30px; height: 30px; flex-shrink: 0; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; }
.add { align-self: flex-start; background: none; border: 1px dashed #CFC5B4; border-radius: 999px; padding: 6px 12px; font: 600 12.5px var(--sans); color: var(--crimson); cursor: pointer; }
.flag { border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.45; margin: 4px 0; }
.flag.ok { background: var(--green-soft); border: 1px solid var(--green-line); }
.flag.warn { background: var(--amber-soft); border: 1px solid #EBD9B4; }
.flag.stop { background: var(--crimson-soft); border: 1px solid var(--crimson-line); color: var(--crimson); }
.cite { font-family: var(--mono); font-size: 11px; background: #FFF; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; white-space: nowrap; color: var(--ink); }
.save-status { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-top: 10px; }
.actions { margin-top: 16px; align-items: center; }
.discard { text-align: center; margin-top: 18px; }
.linkish { background: none; border: none; color: var(--muted); font: 12.5px var(--sans); text-decoration: underline; cursor: pointer; }
.warn-card { border-left: 4px solid var(--amber); }
.problems { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.card.draft { border-style: dashed; }

/* ---- Draft review ---- */
.review { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.serif-title { margin: 0; font-size: 22px; }
.tabs { display: flex; gap: 4px; margin-bottom: -15px; position: relative; z-index: 1; flex-wrap: wrap; }
.tab { background: var(--chip); border: 1px solid var(--line); border-bottom: none; border-radius: 10px 10px 0 0; padding: 8px 14px; font: 13px var(--sans); color: var(--muted); cursor: pointer; }
.tab.on { background: #FFF; color: var(--ink); font-weight: 600; }
.tab-body { border-top-left-radius: 0; }
.draft-box { min-height: 420px; font: 14px/1.55 var(--sans); border-radius: 10px; }
.draft-tools { margin-top: 10px; align-items: center; flex-wrap: wrap; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
.draft-meta { font-family: var(--mono); font-size: 11px; }
.again { text-align: right; }
.draft-view { font-size: 14px; line-height: 1.55; }
.draft-view ul, .note-body ul { margin: 4px 0; padding-left: 20px; }
.quote { border-left: 3px solid var(--line); padding-left: 10px; }
.gap { height: 8px; }
.ref-label { font-family: var(--mono); font-size: 11px; color: var(--amber); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.note-card { background: var(--crimson-soft); border-color: var(--crimson-line); }
.note-body { font-family: var(--serif); font-style: italic; font-size: 15.5px; line-height: 1.55; margin-top: 8px; }
.note-body strong { font-style: normal; }
.note-sig { font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.cite-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.cite-list li { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.cite-list li:last-child { border-bottom: none; padding-bottom: 0; }
.cite-list .chips { margin-top: 5px; }
.facts-card summary { cursor: pointer; }
.facts-body { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; margin: 10px 0 6px; }
.fact-line .cite { font-size: 10.5px; }
.stop-card { border: 2px solid var(--crimson); }
.stop-title { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--crimson); }
.stop-list { margin: 10px 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.stop-foot { font-size: 13px; font-weight: 600; }
.esc-trigger { font-weight: 600; margin: 8px 0 12px; }
.esc-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; font-size: 13.5px; padding: 6px 0; border-top: 1px solid var(--line); }
.esc-k { font-weight: 600; color: var(--muted); }
.mono-chip { display: inline-block; font-family: var(--mono); font-size: 11.5px; background: var(--chip); border-radius: 999px; padding: 4px 10px; margin-top: 12px; }
.drafting { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.spinner { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--crimson); border-radius: 50%; animation: spin 1s linear infinite; flex-shrink: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .esc-row { grid-template-columns: 1fr; gap: 2px; } .draft-box { min-height: 320px; } }
.md-table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 6px 0; }
.md-table th, .md-table td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.md-table th { background: var(--chip); }
.md-h { font-weight: 600; margin-top: 6px; }
.draft-view hr { border: none; border-top: 1px solid var(--line); margin: 10px 0; }

/* ---- Mark as sent ---- */
.send-row { display: flex; justify-content: flex-end; margin-top: 12px; }
.send-panel { margin-top: 12px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.check input { width: auto; }
.sent-card { border-left: 4px solid var(--green); }
.sent-title { font-weight: 600; color: var(--green); margin-bottom: 10px; }

/* ---- Record timeline ---- */
.timeline { list-style: none; margin: 20px 0; padding: 0 0 0 22px; border-left: 2px solid var(--line); }
.ev { position: relative; padding: 0 0 18px 12px; }
.ev-year { font-size: 11px; color: var(--muted); margin: 0 0 10px 12px; letter-spacing: .08em; }
.dot { position: absolute; left: -30px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: #B8AE9C; border: 2px solid var(--paper); }
.dot.sent { background: var(--crimson); }
.dot.received { background: var(--green); }
.dot.alert { background: var(--amber); }
.dot.note { background: #FFF; border-color: var(--ink); }
.ev-time { font-size: 11.5px; color: var(--muted); letter-spacing: .04em; }
.ev-kind { font-weight: 600; font-size: 14px; margin-top: 2px; }
.ev-summary { font-size: 13.5px; margin-top: 2px; line-height: 1.45; }
.late { font-family: var(--mono); font-size: 11px; color: var(--amber); margin-top: 4px; }
.ev-details { margin-top: 6px; font-size: 13px; }
.ev-details summary { cursor: pointer; color: var(--crimson); font-weight: 600; }
.sent-pre { white-space: pre-wrap; font: 13px/1.5 var(--sans); background: #FFF; border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 6px 0 10px; }
.diff { font-family: var(--mono); font-size: 11.5px; background: #FFF; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 6px; white-space: pre-wrap; }
.diff-add { background: var(--green-soft); color: var(--green); }
.diff-del { background: var(--crimson-soft); color: var(--crimson); text-decoration: line-through; }
.diff-same { color: var(--muted); }
.note-form { display: flex; flex-direction: column; gap: 10px; }

/* ---- Log response ---- */
.plain-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.plain-list.rows li { align-items: center; }
.btn.small { padding: 6px 12px; font-size: 12px; }
.pay-item { border-top: 1px solid var(--line); padding-top: 10px; }
.pay-item:first-child { border-top: none; padding-top: 0; }
.pay-amt { font-weight: 600; font-size: 15px; }
.pay-actions { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pay-actions select { width: auto; }
.stepper { display: flex; gap: 4px; align-items: center; font-size: 11.5px; flex-wrap: wrap; }
.stepper span { color: var(--muted); }
.stepper span.on { color: var(--green); font-weight: 600; }
.stepper .arrow { color: var(--line); }

/* ---- Escalation ---- */
.facts-rows { margin-top: 8px; }
.fact-row { display: grid; grid-template-columns: 170px 1fr; gap: 10px; font-size: 13.5px; padding: 7px 0; border-top: 1px solid var(--line); }
.fact-row:first-child { border-top: none; }
.fact-k { font-weight: 600; color: var(--muted); }
.decide-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.decide-list li > strong { display: block; margin-bottom: 6px; }
@media (max-width: 480px) { .fact-row { grid-template-columns: 1fr; gap: 2px; } }

/* ---- Edit situation ---- */
.inline.locked { padding: 6px 0; gap: 10px; }
input[readonly] { background: var(--chip); color: var(--muted); }
h1 + .btn.small, .row > .btn.small { margin-top: 10px; }
.top-actions { display: flex; gap: 8px; }
.top-actions [hidden] { display: none; }
/* Public pages (welcome.html, privacy.html, terms.html) */
.top-link { white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--ink); text-decoration: none; padding: 4px 6px; align-self: center; }
.top-link:hover { color: var(--crimson); }
.brand-block { display: flex; flex-direction: column; gap: 1px; }
.brand-block .brand { text-decoration: none; color: var(--ink); }
.tagline { font-size: 11.5px; color: var(--ink); font-style: italic; font-family: var(--serif); }
.wl-block { margin: 0 0 12px; padding: 16px 18px; }
.welcome .card h2 { margin: 6px 0 6px; }
.welcome p { font-size: 14.5px; line-height: 1.55; margin: 0 0 6px; }
.public-foot { line-height: 1.8; }
.public-foot a { color: var(--muted); }
/* Landing page v2 (welcome.js) — mobile first; readable at 360px */
.wl-hero { padding: 10px 0 8px; }
.welcome h1 { font-size: 30px; line-height: 1.12; margin: 8px 0 14px; max-width: 15em; color: var(--ink); }
.wl-accent { color: var(--crimson); }
.wl-sub { font-size: 16px !important; line-height: 1.55; max-width: 36em; }
.wl-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 8px; }
.wl-cta .btn { flex: 1 1 100%; text-align: center; padding: 12px 16px; font-size: 14px; }
.wl-free { font-family: var(--mono); font-size: 12px; color: var(--green); background: var(--green-soft); border: 1px solid var(--green-line); border-radius: 999px; padding: 3px 10px; }
.wl-video { position: relative; aspect-ratio: 16 / 9; margin: 16px 0 0; border-radius: 12px; overflow: hidden; background: var(--ink); }
.wl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wl-section { border-top: 1px solid var(--line); padding: 20px 0 6px; margin-top: 18px; scroll-margin-top: 12px; }
.wl-section h2 { margin: 0 0 12px; font-size: 22px; }
.wl-section h3 { font-family: var(--serif); font-weight: 600; font-size: 16.5px; line-height: 1.3; margin: 0 0 6px; }
.wl-grid3 { display: grid; grid-template-columns: 1fr; gap: 10px; }
.wl-prob p { margin: 0; }
.wl-lead { font-family: var(--serif); font-size: 17px !important; font-style: italic; }
.wl-points { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
.wl-points li { border-left: 3px solid var(--crimson); padding: 2px 0 2px 12px; }
.wl-points p { margin: 0; }
.wl-steps { margin: 0; padding-left: 22px; font-size: 14.5px; line-height: 1.55; }
.wl-steps li { margin-bottom: 8px; padding-left: 4px; }
.wl-promise { font-weight: 600; margin-top: 12px !important; }
.wl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.4; }
.wl-table th, .wl-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.wl-table thead th { font-family: var(--sans); font-size: 12.5px; color: var(--muted); font-weight: 600; }
.wl-table tbody th { font-weight: 600; }
.wl-table .wl-us { background: var(--crimson-soft); color: var(--ink); font-weight: 600; }
.wl-note { font-size: 13.5px !important; color: var(--muted); margin-top: 10px !important; }
.wl-label { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--amber); background: var(--amber-soft); border-radius: 999px; padding: 4px 12px; }
.wl-list { margin: 4px 0 10px; padding-left: 18px; font-size: 14.5px; line-height: 1.55; }
.wl-list li { margin-bottom: 6px; }
.wl-ask { font-weight: 600; font-size: 14px; }
.wl-consult { margin-top: 10px !important; }
.wl-fine { font-size: 12.5px !important; color: var(--muted); }
.wl-final h2 { font-size: 21px; }
.wl-disclaimer { font-size: 12.5px !important; color: var(--muted); margin-top: 14px !important; }
/* Comparison table on phones: one card per row, each cell labelled with its column. */
@media (max-width: 559px) {
  .wl-table thead { display: none; }
  .wl-table, .wl-table tbody, .wl-table tr, .wl-table th, .wl-table td { display: block; width: 100%; }
  .wl-table tr { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; background: #FFF; }
  .wl-table tbody th { background: var(--chip); border-bottom: 1px solid var(--line); }
  .wl-table td { display: grid; grid-template-columns: 42% 1fr; gap: 8px; }
  .wl-table td::before { content: attr(data-col); color: var(--muted); font-weight: 400; font-size: 12px; }
  .wl-table tr > :last-child { border-bottom: 0; }
}
@media (min-width: 560px) {
  .welcome h1 { font-size: 38px; }
  .wl-cta .btn { flex: 0 0 auto; }
  .wl-grid3 { grid-template-columns: repeat(3, 1fr); }
}