:root {
  --bg: #FBF7F0;
  --card: #FFFFFF;
  --ink: #2B241C;
  --muted: #7A6F63;
  --line: #E8DFD3;
  --accent: #B5573A;
  --accent-ink: #FFFFFF;
  --danger: #A33A2A;
  --radius: 12px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.5 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
main { max-width: 720px; margin: 0 auto; padding: 1rem 1rem 4rem; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; background: var(--card); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--ink); font-size: 1.1rem; }
.topbar nav { display: flex; align-items: center; gap: .75rem; }
.topbar form { margin: 0; }
.who { color: var(--muted); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem; margin-bottom: 1rem;
}
.card.narrow { max-width: 420px; margin: 3rem auto; }
.card.narrow h1 { margin-bottom: 1rem; }
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.link-card { display: block; color: inherit; }
.link-card:active { background: var(--bg); }
.link-card h2 { margin: 0 0 .25rem; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 .5rem; }
.page-head h2 { margin: 0; }
.crumbs { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; }
.muted, .meta { color: var(--muted); }
.meta { font-size: .9rem; }
.empty { color: var(--muted); font-style: italic; }

.fields .field { display: flex; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--line); }
.fields .field:last-child { border-bottom: 0; }
.field .label { flex: 0 0 9rem; color: var(--muted); }
.field .value { flex: 1; white-space: pre-wrap; }

.list { list-style: none; padding: 0; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.list li + li { border-top: 1px solid var(--line); }
.list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 1rem; color: inherit; min-height: 48px; }
.list a:active { background: var(--bg); }

label { display: block; margin: 0 0 .9rem; color: var(--muted); font-size: .95rem; }
input[type=text], input[type=number], input[type=date], input[type=password], textarea, select {
  display: block; width: 100%; margin-top: .25rem; padding: .6rem .7rem; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 480px) { .row { grid-template-columns: 1fr; } .field { flex-direction: column; gap: .1rem; } .field .label { flex-basis: auto; } }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .5rem .9rem .75rem; margin: 0 0 1rem; }
legend { color: var(--muted); font-size: .95rem; padding: 0 .3rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .2rem .75rem; }
.check { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--ink); min-height: 40px; }
.check input { width: 1.2rem; height: 1.2rem; margin: 0; }

button, .button {
  display: inline-block; font: inherit; font-weight: 600; padding: .6rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); cursor: pointer; min-height: 44px;
}
.button.quiet, button.quiet { background: transparent; color: var(--accent); }
button.link { background: none; border: 0; color: var(--accent); padding: .3rem .5rem; min-height: 0; font-weight: 500; }
button.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.danger-text { color: var(--danger); }
.actions { display: flex; gap: .75rem; align-items: center; margin-top: .5rem; }
.danger-zone { margin-top: 3rem; padding-top: 1rem; border-top: 1px dashed var(--line); }

.flash { list-style: none; padding: .75rem 1rem; margin: 0 0 1rem; background: #FFF1E8; border: 1px solid #F0C9B5; border-radius: 8px; color: var(--danger); }

table.attrs { width: 100%; border-collapse: collapse; }
table.attrs th { text-align: left; font-weight: 500; color: var(--muted); padding: .45rem .4rem .45rem 0; width: 40%; vertical-align: top; }
table.attrs td { padding: .45rem 0; vertical-align: top; }
table.attrs tr + tr th, table.attrs tr + tr td { border-top: 1px solid var(--line); }
table.attrs td.tight { width: 2.5rem; text-align: right; }
table.attrs form { margin: 0; }
.inline-add label { margin-bottom: .6rem; }

/* ---- Layer 2 ---- */
.topbar nav a { color: var(--ink); padding: .3rem .4rem; }
@media (max-width: 560px) { .who { display: none; } .topbar { flex-wrap: wrap; row-gap: .25rem; } .topbar nav { gap: .1rem; width: 100%; justify-content: space-between; font-size: .95rem; } .topbar nav a { padding: .3rem .2rem; } }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .5rem; }
.toolbar .button { padding: .5rem .9rem; min-height: 40px; }
.links a { color: var(--accent); }
.stack { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.stack > span:first-child { overflow-wrap: anywhere; }
.grow { flex: 1; }
.small { font-size: .85rem; }
a.small { display: inline-block; margin-top: .3rem; }
label > a.small { margin-top: .35rem; }

.gallery { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; }
.gallery li { position: relative; }
.gallery a { display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery form { position: absolute; top: 2px; right: 2px; margin: 0; }
.gallery form button { background: rgba(255,255,255,.85); border-radius: 999px; width: 28px; height: 28px; padding: 0; line-height: 1; }
.doc-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-weight: 600; letter-spacing: .05em; }
.doc-chip small { font-weight: 400; letter-spacing: 0; }
.list a img.thumb, .list a .thumb { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 6px; object-fit: cover; background: var(--bg); border: 1px solid var(--line); font-size: .7rem; }

.attach { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; }
.attach label { margin: 0; flex: 1; }
.file-label input[type=file] { display: block; margin-top: .25rem; width: 100%; font: inherit; color: var(--muted); }
.js-hide { display: none; }
.no-js .js-hide { display: inline-block; }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.filters select { width: auto; margin: 0; padding: .45rem .6rem; }
.filters button { min-height: 0; padding: .45rem .9rem; }

.segmented { display: grid; gap: .1rem; }
.segmented .check { min-height: 36px; }
.check small { font-weight: 400; }
details.disclosure summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; }
details.disclosure summary::-webkit-details-marker { display: none; }
details.disclosure[open] summary { margin-bottom: .75rem; }
details.menu { position: relative; }
details.menu summary { list-style: none; cursor: pointer; }
details.menu summary::-webkit-details-marker { display: none; }
details.menu > div { position: absolute; right: 0; top: 110%; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .3rem 0; min-width: 12rem; z-index: 2; }
details.menu > div a { display: block; padding: .5rem 1rem; color: var(--ink); }
form.inline { display: inline; }
.feed .meta { text-transform: none; }

.brand, .topbar nav a, .topbar nav button { white-space: nowrap; }
form .check { margin-bottom: .9rem; }

/* ---- Layer 3 ---- */
.topbar nav a.accent { color: var(--accent); font-weight: 600; }
.big-add { display: flex; align-items: center; gap: 1rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; font-weight: 600; font-size: 1.1rem; }
.big-add small { display: block; font-weight: 400; font-size: .85rem; opacity: .85; }
.big-add .plus, .drop .plus { font-size: 2rem; line-height: 1; }
.drop { display: block; border: 2px dashed var(--line); border-radius: var(--radius); padding: 2rem 1rem; text-align: center; color: var(--muted); cursor: pointer; margin: 1rem 0; background: var(--bg); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-inner { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.drop:focus-within { outline: 2px solid var(--accent); }
.drop.has-files { border-color: var(--accent); color: var(--ink); }
.wide { width: 100%; }
.status { font-weight: 600; }
.status-needs_review { color: var(--accent); }
.status-failed { color: var(--danger); }
.status-pending, .status-processing { color: var(--muted); }
.status-done { color: #4E7A4E; }
.split { display: flex; gap: 1rem; align-items: flex-start; }
.split .preview { flex: 0 0 160px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--card); aspect-ratio: 3/4; display: block; }
.split .preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px) { .split { flex-direction: column; } .split .preview { flex-basis: auto; width: 100%; aspect-ratio: 4/3; } }
.transcript { white-space: pre-wrap; font: .85rem/1.4 ui-monospace, Menlo, monospace; color: var(--ink); margin: 0; }
ul.plain { margin: .3rem 0 0; padding-left: 1.2rem; }
.label { color: var(--muted); font-size: .95rem; margin: 0; }
.status { white-space: nowrap; }

/* ---- Layer 4 ---- */
.queue-row { display: flex; align-items: center; }
.queue-row > a { flex: 1; }
.queue-row > form { margin: 0 .75rem 0 0; }
.small-btn { padding: .35rem .8rem; min-height: 0; font-size: .9rem; }
.group-head { display: flex; align-items: baseline; gap: .4rem; margin: 1.25rem 0 .4rem; }
.card-title { margin: 0 0 .75rem; font-size: 1rem; }
.card-title-check { font-weight: 600; color: var(--ink); font-size: 1rem; margin-bottom: .75rem; }
.segmented-row { display: flex; gap: 1.5rem; margin-bottom: .75rem; }
.segmented-row .check { margin: 0; }
.triage .check strong { font-weight: 600; }
.triage label.check { color: var(--ink); }
small.block { display: block; }
.check > span { flex: 1; }

/* ---- Layer 5 ---- */
.thread { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.msg { max-width: 92%; padding: .7rem .95rem; border-radius: 14px; line-height: 1.45; }
.msg p { margin: 0 0 .5rem; } .msg p:last-child { margin-bottom: 0; }
.msg ul { margin: .2rem 0 .5rem; padding-left: 1.2rem; }
.msg-user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.msg-user a { color: inherit; }
.msg-assistant { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg-photo { display: block; max-width: 200px; border-radius: 8px; margin-bottom: .4rem; }
.ask { position: sticky; bottom: 0; background: var(--bg); padding: .5rem 0 .75rem; }
.ask-row { display: flex; gap: .5rem; align-items: center; }
.ask-row input[type=text] { flex: 1; margin: 0; }
.ask-row button { min-height: 44px; }
.ask-photo { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; font-size: 1.2rem; }
.ask-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ask.busy button { opacity: .6; }
.home-ask { margin-bottom: 1.25rem; }
.home-ask .ask-row input[type=text] { min-height: 44px; }

/* ---- Layer 6 ---- */
@media (max-width: 560px) { .topbar nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: .4rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .topbar nav::-webkit-scrollbar { display: none; } .topbar nav form { flex: 0 0 auto; } }
.task-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .7rem 1rem; }
.task-row .stack { flex: 1 1 14rem; }
.task-row .stack a { color: var(--ink); }
.task-actions { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; margin-left: auto; }
.task-actions form { margin: 0; }
.task-actions details.menu > div form { margin: 0; }
.task-actions details.menu > div button.link { display: block; width: 100%; text-align: left; padding: .5rem 1rem; }
.alert-high .stack a { color: var(--danger); }
.pill { font-size: .75rem; background: #FFF1E8; color: var(--danger); border-radius: 999px; padding: .1rem .5rem; vertical-align: middle; }
.checklist { padding: .6rem 0; border-top: 1px solid var(--line); }
.row-buttons { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.row-buttons form { margin: 0; }
.followup { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; }
.followup label { margin: 0; }
.followup select { width: auto; }
.digest { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.drop.drag-over { border-color: var(--accent); background: #FFF1E8; color: var(--ink); }

/* ---- Layer 7 ---- */
.kind-card { display: flex; flex-direction: column; gap: .4rem; }
.kind-card h2 { margin: 0; font-size: 1.05rem; }
.kind-card p { margin: 0; }
.kind-card button { align-self: flex-start; }
.area-head { font-size: .95rem; color: var(--muted); margin: 1rem 0 .3rem; }
.gallery .tiny { position: absolute; left: 4px; bottom: 4px; background: rgba(255,255,255,.85); border-radius: 6px; padding: 0 .35rem; font-size: .7rem; }
.gallery li { position: relative; }
.draft-row { padding: .4rem 0; border-top: 1px solid var(--line); }
.draft-row:first-child { border-top: 0; }
.draft-row .check { align-items: flex-start; }
.inline-name { display: inline-block; width: auto; min-width: 10rem; margin: 0 .4rem .3rem 0; padding: .35rem .5rem; }
.inline-select { display: inline-block; width: auto; margin: 0 0 .3rem; padding: .35rem .5rem; }
.meta.block { display: block; }
.pill.sev-high { background: #FFE3DE; color: var(--danger); }
.pill.sev-medium { background: #FFF1E8; color: var(--accent); }
.pill.sev-low { background: var(--bg); color: var(--muted); }
.thumb.faded { opacity: .55; }
.condition .task-row { align-items: flex-start; }

/* ---- Layer 8 ---- */
a.who { color: var(--muted); }
.menu-form { padding: .6rem .9rem; min-width: 16rem; }
.menu-form label { margin-bottom: .5rem; }

.user-menu summary { color: var(--muted); padding: .3rem .4rem; white-space: nowrap; }
.user-menu > div { right: 0; left: auto; }
.user-menu > div form { margin: 0; }
.user-menu > div button.link { display: block; width: 100%; text-align: left; padding: .5rem 1rem; }