:root { --fg:#323338; --muted:#676879; --line:#d0d4e4; --brand:#0073ea; --bg:#fff; --err:#d83a52; --ok:#00854d; }
@media (prefers-color-scheme: dark) { :root { --fg:#e6e9ef; --muted:#9a9cb0; --line:#454766; --bg:#1c1f3b; } }
* { box-sizing: border-box; }
/* Author display rules (flex, inline-block…) would otherwise override the [hidden] attribute. */
[hidden] { display: none !important; }
body { margin:0; font:13px/1.35 Figtree, Roboto, system-ui, sans-serif; color:var(--fg); background:var(--bg); }
#app { padding:10px 14px 0; }

/* header fields: one compact row */
.row { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) 128px; gap:10px; }
label { display:flex; flex-direction:column; gap:3px; color:var(--muted); font-size:11px; min-width:0; }
input, textarea { padding:5px 7px; border:1px solid var(--line); border-radius:4px; font:inherit; font-size:13px; color:var(--fg); background:transparent; min-width:0; }
input:focus, textarea:focus { outline:2px solid var(--brand); border-color:transparent; }
input:disabled { opacity:.6; }
.meta { display:flex; flex-wrap:wrap; gap:2px 14px; margin:7px 0 0; font-size:12px; color:var(--muted); }
.meta:empty, .meta span:empty { display:none; }
.meta b { color:var(--fg); font-weight:600; }

/* line items: fixed columns so the description gets the leftover width */
table { width:100%; border-collapse:collapse; table-layout:fixed; margin-top:8px; }
col.c-order { width:84px; } col.c-qty { width:52px; } col.c-unit { width:72px; } col.c-carr { width:66px; } col.c-total { width:72px; } col.c-x { width:22px; }
th { text-align:left; font-size:11px; color:var(--muted); font-weight:500; padding:2px 3px; white-space:nowrap; }
td { padding:2px 3px; vertical-align:middle; }
td input, td textarea { width:100%; }
td textarea { display:block; resize:none; field-sizing:content; min-height:2.9em; max-height:6.5em; line-height:1.3; font-size:12px; }
th.num, td.num input { text-align:right; }
th.right, td.right { text-align:right; }
td.right { color:var(--fg); font-variant-numeric:tabular-nums; }
td.order { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
input[type=number] { appearance:textfield; -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { appearance:none; margin:0; }
tr.warn input, tr.warn textarea { border-color:#fdab3d; }
.x { background:none; border:0; color:var(--muted); cursor:pointer; font-size:16px; padding:0; }

/* totals + action stay visible while the lines scroll */
.footer { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px; padding:8px 0 10px; background:var(--bg); border-top:1px solid var(--line); }
.totals { display:flex; flex-wrap:wrap; gap:2px 16px; color:var(--muted); font-variant-numeric:tabular-nums; }
.totals b { color:var(--fg); font-weight:600; margin-left:3px; }
.btn { display:inline-block; padding:7px 14px; background:var(--brand); color:#fff; border:0; border-radius:4px; cursor:pointer; font:inherit; font-weight:500; text-decoration:none; white-space:nowrap; }
.btn.secondary { background:transparent; color:var(--brand); border:1px solid var(--brand); margin-left:8px; }
.btn:disabled { opacity:.5; cursor:default; }

.hint { font-size:12px; color:var(--muted); margin:4px 0 0; }
.banner { white-space:pre-line; padding:7px 10px; border-radius:4px; margin-bottom:8px; background:#fdecee; color:var(--err); font-size:12px; }
.banner.ok { background:#e5f6ee; color:var(--ok); font-weight:500; }
.existing { border:1px solid var(--brand); border-radius:6px; padding:6px 10px; margin:8px 0 0; font-size:12px; }
.existing p { margin:0 0 3px; }
.existing label { flex-direction:row; align-items:baseline; gap:6px; color:var(--fg); font-size:12px; padding:1px 0; cursor:pointer; }
.existing a { color:var(--brand); }
.existing .err { color:var(--err); margin:0; }

.loading { display:flex; flex-direction:column; align-items:center; padding:28px 0; text-align:center; }
.loading p { margin:10px 0 0; }
.spinner { width:30px; height:30px; border:3px solid var(--line); border-top-color:var(--brand); border-radius:50%; animation:spin .8s linear infinite; }
.spinner.sm { display:inline-block; width:11px; height:11px; border-width:2px; vertical-align:-2px; margin-right:5px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration:2.4s; } }

/* very narrow popouts */
@media (max-width: 620px) {
  .row { grid-template-columns:1fr 1fr; }
  .row label:first-child { grid-column:1 / -1; }
  col.c-order, th:nth-child(2), td.order { display:none; }
}