/* Invoy: ledger green on cool paper; one bold device, the highlighter mark on fields to check. */
:root {
  --paper: #F3F6F4; --card: #FFFFFF; --ink: #18211C; --muted: #5B6B63; --rule: #C9D6CE;
  --green: #1F4D3A; --green-2: #2E6B52; --hl: #FFE45C; --edit: #D6E9F8; --bad: #B42318; --ok: #1E7A4C;
  --r-s: 4px; --r-m: 8px;
  font-size: 15px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Public Sans", "Segoe UI", Arial, sans-serif; line-height: 1.5; }
a { color: var(--green); }
:focus-visible { outline: 2px solid var(--green-2); outline-offset: 2px; }

.bar { display: flex; align-items: center; gap: 1.25rem; padding: .7rem 1.5rem; background: var(--green); color: #fff; flex-wrap: wrap; }
.bar a { color: #fff; text-decoration: none; }
.mark { font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; background: linear-gradient(transparent 62%, rgba(255,228,92,.85) 62%, rgba(255,228,92,.85) 92%, transparent 92%); padding: 0 .1em; color: #fff; }
.company { opacity: .8; }
.bar nav { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }
.bar nav a { opacity: .9; }
.bar nav a:hover { opacity: 1; text-decoration: underline; }

main { max-width: 1180px; margin: 0 auto; padding: 1.5rem; }
main.wide { max-width: 1500px; }
main.narrow { max-width: 420px; }
.foot { text-align: center; color: var(--muted); font-size: .8rem; padding: 2rem 1rem; }

h1, h2 { line-height: 1.25; margin: 0 0 .6rem; }
.sub { font-size: 1.05rem; font-weight: 600; margin-top: .4rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 1.2rem; margin-bottom: 1rem; }
.notice { background: #E6F0EA; border-left: 3px solid var(--green); padding: .6rem .9rem; border-radius: var(--r-s); }
.notice.warn { background: #FFF6CC; border-left-color: #C9A400; }
.error { color: var(--bad); margin: 0; }
.empty { color: var(--muted); padding: 1.5rem; text-align: center; }

button { font: inherit; cursor: pointer; border-radius: var(--r-s); padding: .55rem 1rem; border: 1px solid transparent; }
.primary { background: var(--green); color: #fff; }
.primary:hover { background: var(--green-2); }
.ghost { background: #fff; color: var(--green); border-color: var(--rule); }
.ghost:hover { border-color: var(--green); }
.link { background: none; border: none; padding: 0; color: var(--green); text-decoration: underline; }
.link.bad, .bad { color: var(--bad); }
button.small { padding: .35rem .7rem; font-size: .85rem; }

.form label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: .8rem; }
.form label.check { display: flex; gap: .5rem; align-items: center; font-weight: 500; color: var(--ink); }
input, select, textarea { display: block; width: 100%; margin-top: .25rem; font: inherit; font-weight: 400; color: var(--ink); padding: .5rem .6rem; border: 1px solid var(--rule); border-radius: var(--r-s); background: #fff; }
input[type=checkbox] { width: auto; margin: 0; }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
input.big { font-size: 1.15rem; font-weight: 600; }
input.unit { max-width: 5rem; }

/* the highlighter: a field Invoy wants a person to check */
.marked > input, .marked > select, tr.marked input { background: linear-gradient(100deg, rgba(255,228,92,.0) 0%, rgba(255,228,92,.75) 3%, rgba(255,228,92,.6) 96%, rgba(255,228,92,0) 100%); border-color: #D9B800; }
.why { display: block; font-weight: 500; font-size: .8rem; color: #6B5600; margin-top: .25rem; }
.why.block { margin: .4rem 0; }
.hl { background: linear-gradient(transparent 15%, rgba(255,228,92,.9) 15%, rgba(255,228,92,.9) 88%, transparent 88%); padding: 0 .25em; font-weight: 600; font-size: .85rem; white-space: nowrap; }

.signin { margin-top: 12vh; }
.wordmark { font-size: 2.6rem; font-weight: 700; letter-spacing: -.02em; margin: 0; display: inline-block; background: linear-gradient(transparent 60%, var(--hl) 60%, var(--hl) 90%, transparent 90%); }
.lede { color: var(--muted); margin: .2rem 0 1.5rem; }

.intake { display: grid; grid-template-columns: 1fr 280px; gap: 1rem; margin-bottom: 1.25rem; }
.drop { border: 2px dashed var(--rule); border-radius: var(--r-m); background: #fff; display: flex; align-items: center; justify-content: center; min-height: 190px; padding: 1.5rem; text-align: center; transition: border-color .15s, background .15s; }
.drop.over { border-color: var(--green); background: #EEF5F0; }
.drop-title { font-size: 1.3rem; font-weight: 600; margin: 0 0 .3rem; }
.actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.export { margin: 0; }
.export-title { font-weight: 600; margin: 0 0 .6rem; }
.export label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .5rem; }
.export button { width: 100%; margin-top: .3rem; }
.mobile-only { display: none; }

.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
.docs { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-m); overflow: hidden; }
.docs th, .plain th, .items th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--muted); padding: .6rem .7rem; border-bottom: 1px solid var(--rule); background: #F8FAF9; }
.docs td, .plain td { padding: .6rem .7rem; border-bottom: 1px solid #E4ECE7; vertical-align: top; }
.docs tr:last-child td { border-bottom: none; }
.docs th.num, .plain th.num, .items th.num { text-align: right; }
.open { font-weight: 600; }
.pill { display: inline-block; font-size: .78rem; font-weight: 600; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: #E3F2E9; color: var(--ok); }
.pill.check { background: var(--hl); color: #4D3E00; }
.pill.wait { background: #EEF1EF; color: var(--muted); }
.pill.bad { background: #FDE8E6; color: var(--bad); }
.busy::after { content: ""; display: inline-block; width: .55em; height: .55em; margin-left: .4em; border-radius: 50%; border: 2px solid var(--muted); border-top-color: transparent; animation: spin .8s linear infinite; vertical-align: -.05em; }
@keyframes spin { to { transform: rotate(360deg); } }

.crumbs { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; color: var(--muted); flex-wrap: wrap; }
.crumbs .spacer { flex: 1; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.25rem; align-items: start; }
.photo { margin: 0; position: sticky; top: 1rem; }
.zoom { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-m); overflow: auto; max-height: 85vh; cursor: zoom-in; }
.zoom img { display: block; width: 100%; height: auto; transform-origin: center; }
.zoom.on { cursor: zoom-out; }
.zoom.on img { width: 200%; max-width: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.grid2 .wide2 { grid-column: 1 / -1; }
.items td { padding: .25rem .3rem; vertical-align: top; }
.items input { margin: 0; padding: .4rem .45rem; }
.items td:first-child { min-width: 220px; }
.totalrow { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin: 1rem 0 .4rem; }
.totalrow label { width: 220px; margin: 0; }
.danger { display: flex; gap: 1.5rem; margin-top: 1rem; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.plain { font-size: .9rem; }

@media (max-width: 900px) {
  .intake, .split, .cols { grid-template-columns: 1fr; }
  .photo { position: static; }
  .mobile-only { display: inline-block; }
  main { padding: 1rem; }
  .docs th:nth-child(3), .docs td:nth-child(3), .docs th:nth-child(7), .docs td:nth-child(7) { display: none; }
}
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .busy::after { animation: none; } .drop { transition: none; } }